Arduino MEGA i BLYNK, LCD odchodzi do lamusa...

SOYER · Styczeń 15, 2019

Ok, to logiczne, ale w takim razie nie powinien też działać skrypt od czasu i daty, który jest wyżej od utworzenia divów zegar i data do których się odnosi...:

<!DOCTYPE HTML>
<html lang="pl">

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>

<script type="text/javascript">

function odswierzanieCzasu()
{
var dzisiaj = new Date();
var dzien = dzisiaj.getDate();
if(dzien<10) dzien = "0"+dzien;
var miesiac = dzisiaj.getMonth()+1;
if(miesiac<10) miesiac = "0"+miesiac;
var rok = dzisiaj.getFullYear();

var godzina = dzisiaj.getHours();
if(godzina<10) godzina = "0"+godzina;
var minuta = dzisiaj.getMinutes();
if(minuta<10) minuta = "0"+minuta;
var sekunda = dzisiaj.getSeconds();
if(sekunda<10) sekunda = "0"+sekunda;

document.getElementById("data").innerHTML = dzien+"-"+miesiac+"-"+rok;
document.getElementById("zegar").innerHTML = godzina+":"+minuta+":"+sekunda;

setTimeout("odswierzanieCzasu()",1000);
}
</script>

<meta name="description" content="Oto parametry jakości powietrza w miejscowości Kryry"/ >
<meta name="keywords" content="kryry, pogoda, smog, jakosc powietrza, temperatura, cisnienie, wilgotnosc, pm1, pm2.5, pm10/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Charm" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
</head>

<body onload="odswierzanieCzasu();">

<div id="zegar"></div>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="data"></div>
<div style="clear:both;"></div>


<div id="glowny1">
  <div class="czujnik" id="temp">Temperatura powietrza</div>
    
  <div class="czujnik" id="wilg">Wilgotność powietrza</div> 
   
  <div class="czujnik" id="cis">Ciśnienie</div>  
   
  <div class="czujnik" id="pm1">PM 1</div>
      
  <div class="czujnik" id="pm2">PM 2,5</div>
    
  <div class="czujnik" id="pm10">PM 10</div>
      
</div>

<div id="glowny2">
  
  <div id="odczytGlowny">Witaj :-) <br/> <br/> Kliknij na wybrany parametr powietrza po lewej stronie, aby zobaczyć aktualny wynik odczytu...</div>
  </div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>
 <script type="text/javascript">
   document.getElementById("temp").addEventListener("click", function(){
   document.getElementById("odczytGlowny").innerHTML = "Aktualna temperatura wynosi : 21*C";});
   document.getElementById("wilg").addEventListener("click", function(){
   document.getElementById("odczytGlowny").innerHTML = "Aktualna wilgotność wynosi : 75 %RH";});
   document.getElementById("cis").addEventListener("click", function(){
   document.getElementById("odczytGlowny").innerHTML = "Aktualne ciśnienie wynosi : 995 hPa";});
   document.getElementById("pm1").addEventListener("click", function(){
   document.getElementById("odczytGlowny").innerHTML = "Aktualne stężenie PM 1 wynosi : 12ug/m3";});
   document.getElementById("pm2").addEventListener("click", function(){
   document.getElementById("odczytGlowny").innerHTML = "Aktualne stężenie PM 2,5 wynosi : 22ug/m3";});
   document.getElementById("pm10").addEventListener("click", function(){
   document.getElementById("odczytGlowny").innerHTML = "Aktualne stężenie PM 10 wynosi : 32ug/m3";});
 </script>
</body>

</html>

Treker · Styczeń 15, 2019

2 godziny temu, SOYER napisał:

Ok, to logiczne, ale w takim razie nie powinien też działać skrypt od czasu i daty, który jest wyżej od utworzenia divów zegar i data do których się odnosi...:

W przypadku zegara wywołujesz funkcję aktualizującą informacje co sekundę, więc jak cała strona się załaduje to wszystko zaczyna działać. W poprzednim, niedziałającym przykładzie próbowałeś, dodać addEventListener do elementów, które nie istniały w momencie wykonania tego kodu js (bo wskazywane elementy pojawiały się w kodzie dopiero później).

ethanak · Styczeń 15, 2019

Poza tym warto czasem spojrzeć w konsolę przeglądarki - może mówi że są jakieś błędy?

W Firefoksie to Ctrl-Shift-J

SOYER · Styczeń 15, 2019

Dzieki chłopaki:-) Faktycznie zapomniałem o tym timerze.

Dzisiaj udało mi się napisać kod w javascript przeładowujący odpowiednie divy i ich zawartość w zależności od klikniętego banneru z nazwą czujnika. Tak więc cała strona ładnie się uaktualnia bez przeładowania i mam tylko jeden plik .html :-).

Jest to trochę prostacko napisane, ale jak na tydzień nauki jestem zadowolony.

Generalnie strasznie fajna zabawa, szczególnie css;-)

Teraz bym prosił o naprowadzenie na temat błędów w wyświetlaniu tej strony na innych kompach co pokazał na slajdzie @ethanak , jak się za to złapać?

Druga kwestia, jak to:

document.getElementById("pm10").addEventListener("click", function(){
   document.getElementById("wyniki").innerHTML = "32 ug/m3";});

zmienić tak, by pobierało wartość z bazy danych?

Kod do dzisiejszych zmian: https://github.com/Soyer79/htm3

1 godzinę temu, ethanak napisał:

Poza tym warto czasem spojrzeć w konsolę przeglądarki - może mówi że są jakieś błędy?

W Firefoksie to Ctrl-Shift-J

W chrome F12;-) będę korzystał...

Edytowano Styczeń 15, 2019 przez SOYER

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

ethanak · Styczeń 15, 2019

14 minut temu, SOYER napisał:
Druga kwestia, jak to:
document.getElementById("pm10").addEventListener("click", function(){
   document.getElementById("wyniki").innerHTML = "32 ug/m3";});
zmienić tak, by pobierało wartość z bazy danych?

Ja Cię doskonale rozumiem, że chcesz jak najszybciej osiągnąć wyniki... no ale weź zimny prysznic. Na razie jesteś na etapie jazdy rowerkiem (niedługo pewnie boczne kółka pozwolimy Ci odczepić) a chcesz od razu siadać za kierownicę Formuły I. Cierpliwości. Najpierw wybierz język backendu (np. PHP lub Python), potem naucz się obu (zarówno JavaScriptu jak i PHP, bo do tego potrzebne Ci są obie technologie), potem o ile sam nie dojdziesz co to za zwierzę AJAX to Ci pomożemy.

Owszem, jeśli bardzo chcesz to napiszę Ci kod zarówno po stronie JS jak i PHP, prawdopodobnie niewiele z niego zrozumiesz ale wrzucisz i będzie działać. Tego chcesz? Na pewno?

Co do błędów wyświetlania:

wejdź sobie na https://validator.w3.org/ i kliknij "Validate by direct input", wklej swój kod, każ mu sprawdzić...

Edytowano Styczeń 15, 2019 przez ethanak

SOYER · Styczeń 15, 2019

29 minut temu, ethanak napisał:

Owszem, jeśli bardzo chcesz to napiszę Ci kod zarówno po stronie JS jak i PHP, prawdopodobnie niewiele z niego zrozumiesz ale wrzucisz i będzie działać. Tego chcesz? Na pewno?

Nie wcale tak nie napisałem, wolę rozumiec co robię, chociaż ogólnie;-), ale AJAX to już jakaś podpowiedź. Usiądę wieczorem.

29 minut temu, ethanak napisał:

wejdź sobie na https://validator.w3.org/ i kliknij "Validate by direct input", wklej swój kod, każ mu sprawdzić...

Super narzędzie, miałem literówkę, brak zamkniętego nawiasu i jeszcze to poniżej ale nie wiem o co biega, przecież mam zadeklarowany ten content IE=edge...:

Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.

From line 37, column 1; to line 37, column 63

, pm10"/>↩<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>↩<link

ten fragment kodu

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

Został tylko ten jeden bląd....

Edytowano Styczeń 15, 2019 przez SOYER

ethanak · Styczeń 15, 2019

33 minuty temu, SOYER napisał:
ten fragment kodu
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Został tylko ten jeden bląd....

Wyjaśnij do czego Co to potrzebne i czy w ogóle rozumiesz pojęcie Quirks Mode.

Treker · Styczeń 15, 2019

1 godzinę temu, SOYER napisał:

Generalnie strasznie fajna zabawa, szczególnie css;-)

Jak nie rozumiesz obrazka teraz, to z czasem zrozumiesz 😉

31 minut temu, SOYER napisał:

Nie wcale tak nie napisałem, wolę rozumiec co robię, chociaż ogólnie;-), ale AJAX to już jakaś podpowiedź. Usiądę wieczorem.

Sporym ułatwieniem będzie poznanie jQuery. Wiem, że to niekoniecznie potrzebne w tym projekcie, ale wtedy dynamiczne wyświetlanie z bazy danych załatwisz bardzo prosto. Wystarczy stworzyć skrypt w php, który wyciągnie dane, a później wykorzystać metodę load(), która wczyta wynik tego skryptu do wybranego elementu. Ogólnie radziłbym dążyć do poznania jakiegoś frameworka js. Oczywiście pisanie prostych stron w "czystym js" też jest dobre, ale znając Twoje zapędy 😉 zaraz zabraknie Ci jakiejś funkcji lub bajerów, które w jQuery będzie można zrobić w 2 linijkach. Wiem, że to kontrowersyjne, aby zaprzęgać jQuery w tak prostym projekcie, ale tutaj chyba może sporo ułatwić.

SOYER · Styczeń 15, 2019

@Treker zajrzyj do kodu. Fragmenty jquery już tam są. Biblioteka też.

@ethanak to linijka z kursu Mirka Zelenta. Nie wiem dokładnie o robi, chyba coś optymalizuje dla starszych wersji IE. Jeśli mam załączoną bibliotekę jquery to pewnie ta linijka jest zbędna. Tak?

Edytowano Styczeń 15, 2019 przez SOYER

ethanak · Styczeń 15, 2019

Kolego szanowny, chyba to się wesz na ja^Wgrzebieniu.

Wywal to w cholewę i na przyszłość nie pchaj do kodu rzeczy których nie rozumiesz. A starszymi wersjami IE to się zajmują historycy.

Edytowano Styczeń 15, 2019 przez ethanak

Treker · Styczeń 15, 2019

7 minut temu, SOYER napisał:

Fragmenty jquery już tam są. Biblioteka też.

Gdzie? Albo się pogubiłem już całkiem, albo w tych kodach nie ma jQuery...

SOYER · Styczeń 15, 2019

Myślałem, że te wszystkie dolary to już jquery...

Treker · Styczeń 15, 2019

A o którym programie piszesz? Patrze na kody z 3-4 ostatnich stron tego wątku i na podlinkowanego GITa. Nie widzę tam żadnych "dolarów" nawet. To nie ironia, naprawdę tego nie widzę - może patrze na złe pliki. O którym fragmencie teraz dokładnie piszesz?

SOYER · Styczeń 15, 2019

Jestem.

@Treker https://github.com/Soyer79/htm3/blob/master/htm3/index1.html s

są dolary;-)

Edytowano Styczeń 15, 2019 przez SOYER

Treker · Styczeń 15, 2019

Ok teraz ma to sens, cały czas patrzyłem na inne kody 😉

Arduino MEGA i BLYNK, LCD odchodzi do lamusa...

Pomocna odpowiedź

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Polecacz 101

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Najnowsze posty w innych tematach