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

SOYER · 15 stycznia

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 · 15 stycznia

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 · 15 stycznia

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 · 15 stycznia

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

ethanak · 15 stycznia

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 15 stycznia przez ethanak

SOYER · 15 stycznia

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

ethanak · 15 stycznia

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 · 15 stycznia

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 · 15 stycznia

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

ethanak · 15 stycznia

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 15 stycznia przez ethanak

Treker · 15 stycznia

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 · 15 stycznia

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

Treker · 15 stycznia

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 · 15 stycznia

Jestem.

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

są dolary;-)

Edytowano 15 stycznia przez SOYER

Treker · 15 stycznia

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

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

Pomocna odpowiedź

SOYER 107

Udostępnij ten post

Link to post

Share on other sites

Treker 1265

Udostępnij ten post

Link to post

Share on other sites

ethanak 445

Udostępnij ten post

Link to post

Share on other sites

SOYER 107

Udostępnij ten post

Link to post

Share on other sites

ethanak 445

Udostępnij ten post

Link to post

Share on other sites

SOYER 107

Udostępnij ten post

Link to post

Share on other sites

ethanak 445

Udostępnij ten post

Link to post

Share on other sites

Treker 1265

Udostępnij ten post

Link to post

Share on other sites

SOYER 107

Udostępnij ten post

Link to post

Share on other sites

ethanak 445

Udostępnij ten post

Link to post

Share on other sites

Treker 1265

Udostępnij ten post

Link to post

Share on other sites

SOYER 107

Udostępnij ten post

Link to post

Share on other sites

Treker 1265

Udostępnij ten post

Link to post

Share on other sites

SOYER 107

Udostępnij ten post

Link to post

Share on other sites

Treker 1265

Udostępnij ten post

Link to post

Share on other sites

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

Utwórz konto w ~20 sekund!

Zaloguj się

Najnowsze posty w innych tematach

Problem z programowaniem ATxmega32e5

Kurs elektroniki II - #2 - komparatory napięć 1 2 3 4 5

Duszki NIXIE SN74141 - multipleksowanie

Kurs elektroniki – #9 – elementy stykowe, przekaźniki 1 2 3 4 9

Kurs elektroniki - #10 - Podsumowanie, Quiz 1 2

Menu

Pozostałe

Kurs elektroniki II - #2 - komparatory napięć

1

2

3

4

5

Kurs elektroniki – #9 – elementy stykowe, przekaźniki

1

2

3

4

9

Kurs elektroniki - #10 - Podsumowanie, Quiz

1

2