Air Butler (6 / 9 steg)
Steg 6: Läsning av Data från Arduino Yun
Efter uppladdning koderna i den tidigare steop, kommer den Arduino Yun redan att läsa data från sensorer. Nu om du öppen upp den seriella porten i Arduino, kommer du se uppsättningar med värden för data.
Vad Bridge.ino gör från det sista steget är att ta emot dessa data och skicka dem till en IP-adress som vår web app kan läsa från.
Nu börjar vi bygga webbprogrammet.
Öppna en texteditor. Skapa en HTML-fil. Kopiera följande koder till filen. Eftersom jag inte kan kopiera koderna här eftersom detta formulär automatiskt gör det i faktiska webbsida kan bifoga jag HTML-filen.
Efter att ha HTML-filen att ha den grundläggande strukturen i webbsidan, måste vi ordna element i HTML-filen. Så skapar vi en css-fil "custom.css". Se bilaga för css-filen. Spara den i samma mapp som HTML-filen.
Nu när vi har skrivit färdigt våra anpassade css-fil. Eftersom vi använder JQueryMobile, måste vi hämta JQueryMobile och Lägg den i samma mapp. Jag bifogade JQueryMobile zip-filen också. Packa upp den innan du lägger i mappen i samma mapp som HTML-filen.
Nu har vi redan utseendet på webbsidan och ordningen av elementet. Nu måste vi ändå på något sätt få faktiska data och sätta dem i delar av webbsidan.
Så skapar vi en javascript-fil. Jag har bifogat javascript-filen också. Lägg den i samma mapp som HTML-filen.
Kom ihåg att du kommer att behöva ändra IP-adressen i javascript-filen eftersom varje Arduino Yun har en annan IP-adress.
Nu bör du ha en webbsida som ser ut ungefär som bild 1.