Skocz do zawartości
SOYER

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

Pomocna odpowiedź

HTML jest konieczny, reszta opcjonalna - nie musisz używać PHP, jak wspominałem są inne technologie. Podobnie z MySQL. Natomiast od html raczej nie ma ucieczki. Poza tym to chyba najłatwiejsze i szybko daje widoczny efekt.

Napisałeś że:

4 minuty temu, SOYER napisał:

zrobiłem swoją pierwszą tabelę, wyświetlałem na stronie efekty swoich zapytań MySQL do tej tabeli

Jak wyświetlasz te wyniki zapytań?

Udostępnij ten post


Link to post
Share on other sites

Trochę się rozpędziłem. W phpmyadmin na XAMPP-ie miałem zrobioną tabelę i przy pomocy zapytańSQL SELECT zmieniałem wyświetlanie na localhost/nazwatabeli.

Potem w xamppie w katalogu htdocs utworzyłem plik index.php i go modyfikowałem, łapiąc podstawy podstaw html i php.

@Elvis więc to będzie moje zadanie na najbliższy czas:

2 godziny temu, Elvis napisał:

Moim zdaniem powinieneś zacząć od czegoś prostego. Odłóż więc Arduino na półkę, Raspberry połóż obok, do nauki najlepszy będzie sam PC-et. Na początek spróbuj przygotować własną, statyczną stronę w html. Do tego nie potrzebujesz nawet serwera www - poczytaj jak wygląda składnia HTML5 i przygotuje pierwszą wersję, którą możesz otwierać z pliku.

Jak napisałem wyniki odczytów. Czyli ma stronie nazwa strony, może czas i data, nazwy czujników i jakieś miejsce na wyświetlanie danych.

Jakieś rady do tego etapu?

Udostępnij ten post


Link to post
Share on other sites
Dnia 5.01.2019 o 18:38, SOYER napisał:

świetny pomysł!! to kiedy?;-) to byłaby już moja druga inspiracja dla Ciebie po millis:-))

Zapisuję temat. Muszę przemyśleć dokładnie koncepcję. Nie jestem ekspertem w takich tematach jak php/mysql. Jestem w stanie napisać serię, która pozwoli zbudować znośny, działający mechanizm, ale mam świadomość, że zawodowcy mogą czuć się zgorszeni czytaniem opisu jak tego dokonałem. Spróbuję podejść do tematu w taki sposób, aby miało to "ręce i nogi".

  • Lubię! 1

Udostępnij ten post


Link to post
Share on other sites

@Treker o przewidywalny termin jest sens teraz pytać;)?

Myślę, że na początek wystarczy dać podstawowe informacje co to php, sql, html, do czego służy i wszystko poparte jakimiś przykładami jak zrobić prosty projekt łączący uC z serwerem który coś tam wyświetla na www. Tak jak w kursie arduino.

Łatwe wejście gwarantuje zainteresowanie tematem i późniejsze jego rozwijanie. Jak zobaczysz zainteresowanie tematem na forum to pomyślisz co dalej z tym kursem zrobić. Ankieta co dalej, szlaki już masz przetarte;-)

  • Lubię! 1

Udostępnij ten post


Link to post
Share on other sites
4 minuty temu, SOYER napisał:

@Treker o przewidywalny termin jest sens teraz pytać;)?

Raczej nie 😉

4 minuty temu, SOYER napisał:

Myślę, że na początek wystarczy dać podstawowe informacje co to php, sql, html, do czego służy i wszystko poparte jakimiś przykładami jak zrobić prosty projekt łączący uC z serwerem który coś tam wyświetla na www.

Oczywiście, że tak - podstawy wystarczą, ale mam świadomość, jak ten temat jest rozbudowany, więc bardzo łatwo będzie się tutaj przyczepić do 150 rzeczy. Jak już robić to trzeba podejść do tematu porządnie.

  • Lubię! 2

Udostępnij ten post


Link to post
Share on other sites
5 minut temu, Treker napisał:

jak zrobić prosty projekt łączący uC z serwerem

Czyli jak to Arduino, ESP,8266 zmusić do komunikacji w sieci :-), a tu jak Treker słusznie zauważył zagadnień jest wiele - poczynając od różnych platform sprzętowych. No ale w świecie IoT raczej naturalnym jest, że nasze układy korzystają z usług sieci komputerowej więc pomysł kursu jak najbardziej zasadny.

Udostępnij ten post


Link to post
Share on other sites

@Belferek jasne, ale dla mnie naturalne by było, że kurs(artykuł to chyba za mało) byłby jakby rozwinięciem dwóch kursów już obecnych na Forbocie t. j. arduino i RPi. Na te platformy by wystarczyło i myślę że wielu by było zadowolonych. 

Zresztą części dotyczące html, css, sql, php byłyby zdaje się podobne jak nie identyczne. Jedynie przy opisach komunikacji z arduino i RPi oczywiście byłyby różnice.

Udostępnij ten post


Link to post
Share on other sites
6 minut temu, SOYER napisał:

Zresztą części dotyczące html, css, sql, php byłyby zdaje się podobne jak nie identyczne.

Skąd takie przekonanie?

To są zupełnie różne rzeczy, w przypadku sql-a nawet niezwiązane z pozostałymi. Podobieństwo jest mniej więcej takie jak między programowaniem Arduino a jazdą na motocyklu.

 

  • Lubię! 2

Udostępnij ten post


Link to post
Share on other sites

Dokładnie tak, to są całkowicie różne tematy. Nic się nie pokrywa - składnia każdego z tych "języków" jest wręcz skrajnie inna. Jak się zna ten temat to można szybko przełączać się w głowie między zagadnieniami i łączyć to w całość. Jednak próg wejścia jest dość spory, bo w jednym pliku PHP można mieć połączenie php, sql, html i css. Trzeba to chociaż rozróżniać.

  • Lubię! 1

Udostępnij ten post


Link to post
Share on other sites
(edytowany)

@Treker @ethanak wyraziłem się nieprecyzyjnie, odnosiłem się do postu Belferka o zróżnicowaniu platform.

Chodziło mi o to, że html jest takie samo czy stronę zastosujemy do współpracy z arduino czy do RPi, podobnie css, sql... Chyba, że się mylę.

Że html, css, php, sql, javascript itd. to zupełnie inne rzeczy i składnie to sobie wczoraj uświadomiłem na kursach tych tematów u Mirka Zelenta.

Więc nawet podstawy do mega roboty...

47 minut temu, Treker napisał:

Trzeba to chociaż rozróżniać.

Z tym mam największy problem, kilka tematów jednocześnie i nie wiesz co akurat robisz. Dlatego sugestia@Elvis by zacząć od html i na tym się skupić wydaje się sensowna.

Edytowano przez SOYER

Udostępnij ten post


Link to post
Share on other sites
14 godzin temu, SOYER napisał:

Chodziło mi o to, że html jest takie samo czy stronę zastosujemy do współpracy z arduino czy do RPi, podobnie css, sql... Chyba, że się mylę.

Tak, mniej więcej jest to prawdą 😉 Akurat przy stronach "hostowanych" na Arduino trzeba np. znacznie ograniczać html/css, bo zwyczajnie nie ma miejsca, aby trzymać w mikrokontrolerze kod dla rozbudowanej trony www, ale podstawy html wszędzie będą działały tak samo.

Udostępnij ten post


Link to post
Share on other sites

uściślając: html/css/js działają po stronie przeglądarki, czyli są totalnie niezależne od serwera (pomijając wielkość kodu i wielowątkowość serwera). natomiast php i mysql wymagają co najmniej jakiegoś rpi - mało tego, różne wersje będą działać różnie, a nawet ta sama wersja może działać nieco inaczej na linuksie (rpi) i windowsie... 

  • Lubię! 1

Udostępnij ten post


Link to post
Share on other sites

js może działać zarówno po stronie przeglądarki, jak i po stronie serwera - co bywa zaletą.

  • Lubię! 1

Udostępnij ten post


Link to post
Share on other sites

Hej, udało mi się na początek zrobić coś takiego:

html:

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

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<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">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <div class="czujnik1">
  <a href="temperatura.html" class="poprawka">Temperatura powietrza</a>
    </div>
  <div class="czujnik1">
  <a href="wilgotnosc.html" class="poprawka">Wilgotność powietrza</a>
    </div>
   
  <div class="czujnik1">
  <a href="cisnienie.html" class="poprawka">Ciśnienie</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm1.html" class="poprawka">PM 1</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm25.html" class="poprawka">PM 2,5</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm10.html" class="poprawka">PM 10</a>
    </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>

</body>

</html>

css:

#stopka
{
    text-align:center;
}
a.poprawka
{
    color:#CC0000;
    text-decoration:none;
    display: block;
    height:40px;
    width: 310px;
}
#odczytGlowny
{
    font-size:30px;
    color:#CC0000;
    text-align:center;
    line-height:200%;
    padding:20px;
    height:450px;
    width: 350px;
    margin-top:65px;
    margin-left:150px;
    background-color:#6699FF;
    opacity:0.8;
}
#odczytCzujnik
{
    font-family: 'Patua One', cursive;
    font-size:30px;
    color:#CC0000;
    text-align:center;
    line-height:250%;
    padding:20px;
    height:150px;
    width: 350px;
    margin-top:150px;
    margin-left:150px;
    background-color:#6699FF;
    opacity:0.8;
}
#wyniki
{
    font-family: 'Patua One', cursive;
    font-size:30px;
    color:#CC0000;
    text-align:center;
    padding:20px;
    height:40px;
    width: 350px;
    margin-top:20px;
    margin-left:150px;
    background-color:#6699FF;
    opacity:0.8;
}

html "wykonawcze":

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

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<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=Patua+One" rel="stylesheet">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <div class="czujnik1">
  <a href="temperatura.html" class="poprawka">Temperatura powietrza</a>
    </div>
  <div class="czujnik1">
  <a href="wilgotnosc.html" class="poprawka">Wilgotność powietrza</a>
    </div>
   
  <div class="czujnik1">
  <a href="cisnienie.html" class="poprawka">Ciśnienie</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm1.html" class="poprawka">PM 1</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm25.html" class="poprawka">PM 2,5</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm10.html" class="poprawka">PM 10</a>
    </div>
   
</div>

<div id="glowny2">
  <div id="odczytCzujnik">Aktualny odczyt temperatury: </div>
  <div id="wyniki">1*C</div>
</div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

</body>

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

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<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=Patua+One" rel="stylesheet">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <div class="czujnik1">
  <a href="temperatura.html" class="poprawka">Temperatura powietrza</a>
    </div>
  <div class="czujnik1">
  <a href="wilgotnosc.html" class="poprawka">Wilgotność powietrza</a>
    </div>
   
  <div class="czujnik1">
  <a href="cisnienie.html" class="poprawka">Ciśnienie</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm1.html" class="poprawka">PM 1</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm25.html" class="poprawka">PM 2,5</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm10.html" class="poprawka">PM 10</a>
    </div>
   
</div>

<div id="glowny2">
  <div id="odczytCzujnik">Aktualny odczyt wilgotności: </div>
  <div id="wyniki">77 % RH</div>
</div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

</body>

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

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<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=Patua+One" rel="stylesheet">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <div class="czujnik1">
  <a href="temperatura.html" class="poprawka">Temperatura powietrza</a>
    </div>
  <div class="czujnik1">
  <a href="wilgotnosc.html" class="poprawka">Wilgotność powietrza</a>
    </div>
   
  <div class="czujnik1">
  <a href="cisnienie.html" class="poprawka">Ciśnienie</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm1.html" class="poprawka">PM 1</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm25.html" class="poprawka">PM 2,5</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm10.html" class="poprawka">PM 10</a>
    </div>
   
</div>

<div id="glowny2">
  <div id="odczytCzujnik">Aktualny odczyt ciśnienia: </div>
  <div id="wyniki">998 hPa</div>
</div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

</body>

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

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<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=Patua+One" rel="stylesheet">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <div class="czujnik1">
  <a href="temperatura.html" class="poprawka">Temperatura powietrza</a>
    </div>
  <div class="czujnik1">
  <a href="wilgotnosc.html" class="poprawka">Wilgotność powietrza</a>
    </div>
   
  <div class="czujnik1">
  <a href="cisnienie.html" class="poprawka">Ciśnienie</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm1.html" class="poprawka">PM 1</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm25.html" class="poprawka">PM 2,5</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm10.html" class="poprawka">PM 10</a>
    </div>
   
</div>

<div id="glowny2">
  <div id="odczytCzujnik">Aktualny stężenie pyłu PM1: </div>
  <div id="wyniki">13 ug/m3</div>
</div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

</body>

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

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<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=Patua+One" rel="stylesheet">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <div class="czujnik1">
  <a href="temperatura.html" class="poprawka">Temperatura powietrza</a>
    </div>
  <div class="czujnik1">
  <a href="wilgotnosc.html" class="poprawka">Wilgotność powietrza</a>
    </div>
   
  <div class="czujnik1">
  <a href="cisnienie.html" class="poprawka">Ciśnienie</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm1.html" class="poprawka">PM 1</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm25.html" class="poprawka">PM 2,5</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm10.html" class="poprawka">PM 10</a>
    </div>
   
</div>

<div id="glowny2">
  <div id="odczytCzujnik">Aktualne stężenie pyłu PM 2,5: </div>
  <div id="wyniki">18 ug/m3</div>
</div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

</body>

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

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<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=Patua+One" rel="stylesheet">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <div class="czujnik1">
  <a href="temperatura.html" class="poprawka">Temperatura powietrza</a>
    </div>
  <div class="czujnik1">
  <a href="wilgotnosc.html" class="poprawka">Wilgotność powietrza</a>
    </div>
   
  <div class="czujnik1">
  <a href="cisnienie.html" class="poprawka">Ciśnienie</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm1.html" class="poprawka">PM 1</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm25.html" class="poprawka">PM 2,5</a>
    </div>
   
  <div class="czujnik1">
  <a href="pm10.html" class="poprawka">PM 10</a>
    </div>
   
</div>

<div id="glowny2">
  <div id="odczytCzujnik">Aktualne stężenie pyłu PM 10: </div>
  <div id="wyniki">35 ug/m3</div>
</div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

</body>

</html>

Pliki graficzne:smog.thumb.jpg.d7a1b4df225d2d7ea3516f785c43724b.jpgkraj.thumb.jpg.c020dbccb12d6cceb11736d5b692470d.jpgwhite-waves.thumb.png.9e6e89b6d3a9a2788fcbd109c1f6204b.png

chyba tyle potrzeba żeby to zobaczyć...

Udostępnij ten post


Link to post
Share on other sites

Nie rozumiem, co za mania używania fontów od Googla bo się różnią jednym pikselem od np. Verdany i dlatego są ładniejsze...

Udostępnij ten post


Link to post
Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Jeśli masz już konto to zaloguj się teraz, aby opublikować wiadomość jako Ty. Możesz też napisać teraz i zarejestrować się później.
Uwaga: wgrywanie zdjęć i załączników dostępne jest po zalogowaniu!

Gość
Dołącz do dyskusji! Kliknij i zacznij pisać...

×   Wklejony jako tekst z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Twoja poprzednia zawartość została przywrócona.   Wyczyść edytor

×   Nie możesz wkleić zdjęć bezpośrednio. Prześlij lub wstaw obrazy z adresu URL.


×
×
  • Utwórz nowe...