Skocz do zawartości
SOYER

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

Przez SOYER, w Projekty - DIY

Pomocna odpowiedź

SOYER    96

SOYER

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>

 

Udostępnij ten post

Link to post
Share on other sites

Treker    1111

Treker
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).

  • Lubię! 1
  • Pomogłeś! 1

Udostępnij ten post

Link to post
Share on other sites

ethanak    296

ethanak

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

W Firefoksie to Ctrl-Shift-J

 

  • Lubię! 1
  • Pomogłeś! 1

Udostępnij ten post

Link to post
Share on other sites

SOYER    96

SOYER
(edytowany)

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 przez SOYER

Udostępnij ten post

Link to post
Share on other sites

ethanak    296

ethanak
(edytowany)
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 przez ethanak
  • Lubię! 1
  • Pomogłeś! 1

Udostępnij ten post

Link to post
Share on other sites

SOYER    96

SOYER
(edytowany)
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 przez SOYER

Udostępnij ten post

Link to post
Share on other sites

ethanak    296

ethanak
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.

 

  • Lubię! 1

Udostępnij ten post

Link to post
Share on other sites

Treker    1111

Treker
1 godzinę temu, SOYER napisał:

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

css.png

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ć.

Udostępnij ten post

Link to post
Share on other sites

SOYER    96

SOYER
(edytowany)

@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 przez SOYER

Udostępnij ten post

Link to post
Share on other sites

ethanak    296

ethanak
(edytowany)

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 przez ethanak
  • Lubię! 2

Udostępnij ten post

Link to post
Share on other sites

Treker    1111

Treker
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...

Udostępnij ten post

Link to post
Share on other sites

SOYER    96

SOYER

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

Udostępnij ten post

Link to post
Share on other sites

Treker    1111

Treker

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?

Udostępnij ten post

Link to post
Share on other sites

Treker    1111

Treker

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

Udostępnij ten post

Link to post
Share on other sites

Bądź aktywny - zaloguj się lub utwórz konto!

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto w ~20 sekund!

Zarejestruj nowe konto, to proste!

Zarejestruj się »

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się »
Przejdź do listy tematów Projekty - DIY
×