|
| 1 | +/* |
| 2 | + Bare_PageRedraw.ino - Sample sketch part of HTMLSerialMonitor package |
| 3 | + No library used, demonstrates simple animation |
| 4 | + by redrawing page each loop |
| 5 | + created: 26 May 2016 |
| 6 | + version: 29 May 2016 |
| 7 | + author : Nard Janssens |
| 8 | + license: Attribution-NonCommercial-ShareAlike 2.5 Generic (CC BY-NC-SA 2.5) |
| 9 | +*/ |
| 10 | + |
| 11 | +String divTitle ="<div style='width:490px;line-height:48px;text-align:center;font-size:32px'>Arduino Weather Station</div>"; |
| 12 | +String divBlock ="<div style='width:200px;height:200px;margin:16px;padding:8px; background-color:#2222AA;float:left;color:#EEEEFF;font-family:Tahoma;'>"; |
| 13 | +String divBHeader="<div style='line-height:32px; font-size:32px'>"; |
| 14 | +String divBBody ="<div style='text-align:center;line-height:136px;font-size:64px;color:white'>"; |
| 15 | +String divBFooter="<div style='text-align:right;line-height:32px; font-size:32px' >"; |
| 16 | +String divClose ="</div>"; |
| 17 | +String nextRow ="<div style='clear:both;'></div>"; |
| 18 | +String symbSunny ="☀"; |
| 19 | +String symbCloudy="☁"; |
| 20 | +String symbUp ="⇡"; |
| 21 | +String symbDown ="⇣"; |
| 22 | +String symbDeg ="°C"; |
| 23 | +unsigned long hrOff=10; |
| 24 | +unsigned long minOff=12; |
| 25 | +unsigned long secOff=56; |
| 26 | + |
| 27 | +void setup(){ |
| 28 | + Serial.begin(9600); |
| 29 | +} |
| 30 | + |
| 31 | +void loop(){ |
| 32 | + //Time would have to be set at start of arduino, or you could use a clock sensor. |
| 33 | + //Without this implemented, we make up a time below |
| 34 | + int speedup=60; //for demonistration we make time faster/more dynamic |
| 35 | + unsigned long s=millis()/1000*speedup; |
| 36 | + unsigned long offset=hrOff*3600+minOff*60+secOff; |
| 37 | + s=s+offset; |
| 38 | + unsigned long hours=s/3600; |
| 39 | + hours=hours % 24; |
| 40 | + s=s-hours*3600; |
| 41 | + unsigned long minutes=s/60; |
| 42 | + s=s-minutes*60; |
| 43 | + unsigned long seconds=s; |
| 44 | + String timef=dblDig(hours)+":"+dblDig(minutes); |
| 45 | + |
| 46 | + int temp=7; // you would read this from your pressure sensor |
| 47 | + int prevPressure=1000; // this would be the pressure of a day ago or something like that |
| 48 | + int pressure=1001; // you would read this from your pressure sensor |
| 49 | + |
| 50 | + //forecast is very simplistic and probably false, but for demonstration purposes... |
| 51 | + String trend=symbDown; |
| 52 | + String forecast=symbCloudy; |
| 53 | + if (pressure>prevPressure) { |
| 54 | + trend=symbUp; |
| 55 | + forecast=symbSunny; |
| 56 | + } |
| 57 | + |
| 58 | + //we print html using Serial.print. |
| 59 | + //only if end of line (Serial.println) is received, the html is processed. |
| 60 | + |
| 61 | + //page header |
| 62 | + Serial.print("[cls]"); |
| 63 | + Serial.print(divTitle); |
| 64 | + |
| 65 | + //time |
| 66 | + Serial.print(divBlock); |
| 67 | + Serial.print(divBHeader+"TIME"+divClose); |
| 68 | + Serial.print(divBBody+timef+divClose); |
| 69 | + Serial.print(divBFooter+divClose); |
| 70 | + Serial.print(divClose); |
| 71 | + |
| 72 | + //temp |
| 73 | + Serial.print(divBlock); |
| 74 | + Serial.print(divBHeader+"OUTSIDE"+divClose); |
| 75 | + Serial.print(divBBody+temp+symbDeg+divClose); |
| 76 | + Serial.print(divBFooter+divClose); |
| 77 | + Serial.print(divClose); |
| 78 | + |
| 79 | + //next row |
| 80 | + Serial.print(nextRow); |
| 81 | + |
| 82 | + //pressure |
| 83 | + Serial.print(divBlock); |
| 84 | + Serial.print(divBHeader+"PRESSURE"+divClose); |
| 85 | + Serial.print(divBBody+pressure+trend+divClose); |
| 86 | + Serial.print(divBFooter+"bar"+divClose); |
| 87 | + Serial.print(divClose); |
| 88 | + |
| 89 | + //forecast |
| 90 | + Serial.print(divBlock); |
| 91 | + Serial.print(divBHeader+"FORECAST"+divClose); |
| 92 | + Serial.print(divBBody+"<big><big><big><big>"+forecast+"</big></big></big></big>"+divClose); |
| 93 | + Serial.print(divBFooter+divClose); |
| 94 | + Serial.print(divClose); |
| 95 | + |
| 96 | + //explanation regarding refreshrate |
| 97 | + Serial.print(nextRow); |
| 98 | + Serial.print("<i><h4><b>Refreshrate</b>: <small>This page updates much slower than the refreshrate of the data. <br>"); |
| 99 | + Serial.print("The page is refreshed fully on each data update which takes a lot of time.</small></h4></i>"); |
| 100 | + Serial.println(""); |
| 101 | + |
| 102 | + //when refreshing whole pages the browser needs to have time to keep up, |
| 103 | + //so we loop only each each five second. |
| 104 | + delay (5000); |
| 105 | +} |
| 106 | + |
| 107 | +String dblDig(int s){ |
| 108 | + String out="0"+String(s); |
| 109 | + out=out.substring(out.length()-2,out.length()); |
| 110 | + return out; |
| 111 | +} |
| 112 | + |
| 113 | + |
0 commit comments