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

Elvis · Styczeń 6, 2019

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ń?

SOYER · Styczeń 6, 2019

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?

Treker · Styczeń 6, 2019

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

SOYER · Styczeń 6, 2019

@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;-)

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

Treker · Styczeń 6, 2019

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.

Belferek · Styczeń 6, 2019

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.

SOYER · Styczeń 6, 2019

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

ethanak · Styczeń 6, 2019

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.

Treker · Styczeń 6, 2019

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

SOYER · Styczeń 6, 2019

@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 Styczeń 6, 2019 przez SOYER

Treker · Styczeń 7, 2019

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.

ethanak · Styczeń 7, 2019

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

Elvis · Styczeń 7, 2019

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

SOYER · Styczeń 11, 2019

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:

chyba tyle potrzeba żeby to zobaczyć...

ethanak · Styczeń 12, 2019

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

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

Pomocna odpowiedź

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

Polecacz 101

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

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

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Najnowsze posty w innych tematach