Browse Source
don't use cpp, just use cat to combine everything... make design responsive,
and add color when net power is good/bad...main
6 changed files with 45 additions and 18 deletions
Unified View
Diff Options
-
+4 -4Makefile
-
+21 -0root/css/styles.css
-
+6 -3root/index.html
-
+14 -7root/js/solardash.base.js
-
+0 -2root/js/solardash.file.jspp
-
+0 -2root/js/solardash.https.jspp
+ 4
- 4
Makefile
View File
| @@ -29,15 +29,15 @@ root/js/solardash.http.js: root/js/solardash.https.js | |||||
| ln -s solardash.https.js $@ | ln -s solardash.https.js $@ | ||||
| # manual deps | # manual deps | ||||
| root/js/solardash.base.js: $(THIRDPARTYJS) | |||||
| root/js/solardash.file.js: root/js/solardash.base.js | |||||
| root/js/solardash.https.js: root/js/solardash.base.js | |||||
| JSBASE = root/js/solardash.base.js | |||||
| all: $(JSFILES) | all: $(JSFILES) | ||||
| run: $(JSFILES) | run: $(JSFILES) | ||||
| $(JSFILES): $(THIRDPARTYJS) $(JSBASE) | |||||
| .jspp.js: | .jspp.js: | ||||
| $(CPP) -Wno-invalid-pp-token -E $< | sed -e '/^#/d' > $@ || (rm "$@"; false) | |||||
| cat $< $(THIRDPARTYJS) $(JSBASE) > $@ || (rm "$@"; false) | |||||
| keepupdate: | keepupdate: | ||||
| find . -name '*.js' -o -name '*.jspp' | entr make all | find . -name '*.js' -o -name '*.jspp' | entr make all | ||||
+ 21
- 0
root/css/styles.css
View File
| @@ -0,0 +1,21 @@ | |||||
| .meter-container { | |||||
| margin: 1vw; | |||||
| display: flex; | |||||
| flex-direction: row; | |||||
| justify-content: center; | |||||
| align-items: stretch; | |||||
| } | |||||
| .meter-container > div { | |||||
| border-radius: 1vw; | |||||
| background: #eeeeee; | |||||
| padding: 1vw; | |||||
| padding-left: 1.25vw; | |||||
| padding-right: 1.25vw; | |||||
| font-size: 6vw; | |||||
| margin: 1.5vw; | |||||
| text-align: center; | |||||
| } | |||||
| .meter-title { | |||||
| font-size: 70%; | |||||
| } | |||||
+ 6
- 3
root/index.html
View File
| @@ -2,6 +2,7 @@ | |||||
| <html lang="en"> | <html lang="en"> | ||||
| <head> | <head> | ||||
| <meta charset="utf-8"> | <meta charset="utf-8"> | ||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||||
| <title>Solar Dashboard</title> | <title>Solar Dashboard</title> | ||||
| @@ -10,9 +11,11 @@ | |||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <div><span>Solar Production: <span id="production">Unknown</span> kW</div> | |||||
| <div><span>Consumption: <span id="consumption">Unknown</span> kW</div> | |||||
| <div><span>Net Power: <span id="netgrid">Unknown</span> kW</div> | |||||
| <div class="meter-container"> | |||||
| <div><span class="meter-title">Production</span><br><span id="production">Unknown</span> kW</div> | |||||
| <div><span class="meter-title">Consumption</span><br><span id="consumption">Unknown</span> kW</div> | |||||
| <div class="gridpower"><span class="meter-title">Net Power</span><br><span id="netgrid">Unknown</span> kW</div> | |||||
| </div> | |||||
| <div id="solarchart" style="width:100%; height:600px;"></div> | <div id="solarchart" style="width:100%; height:600px;"></div> | ||||
| <script type="text/javascript" src="js/solardash.init.js"></script> | <script type="text/javascript" src="js/solardash.init.js"></script> | ||||
| <script type="text/javascript"> | <script type="text/javascript"> | ||||
+ 14
- 7
root/js/solardash.base.js
View File
| @@ -1,9 +1,3 @@ | |||||
| //jquery | |||||
| #include "jquery.js" | |||||
| //highcharts | |||||
| #include "highstock.js" | |||||
| socket.onopen = function() { | socket.onopen = function() { | ||||
| // connected | // connected | ||||
| } | } | ||||
| @@ -19,12 +13,25 @@ var msgNumbs = { | |||||
| c: "#consumption", | c: "#consumption", | ||||
| }; | }; | ||||
| function netgridcolor(v) { | |||||
| if (v <= 0) | |||||
| return "#00ff00"; | |||||
| else | |||||
| return "#ff0000"; | |||||
| } | |||||
| socket.onmessage = function(m) { | socket.onmessage = function(m) { | ||||
| var msg = m.data.split(" "); | var msg = m.data.split(" "); | ||||
| if (msg[0] in msgNumbs) { | if (msg[0] in msgNumbs) { | ||||
| // simple update values | // simple update values | ||||
| var num = parseFloat(msg[1]); | var num = parseFloat(msg[1]); | ||||
| $(msgNumbs[msg[0]]).text(num.toString()); | |||||
| var targ = $(msgNumbs[msg[0]]); | |||||
| targ.text(num.toString()); | |||||
| // update color for ng | |||||
| if (msg[0] == "ng") { | |||||
| $(".gridpower").css('background', netgridcolor(num)); | |||||
| } | |||||
| } else if (msg[0] == 'o') { | } else if (msg[0] == 'o') { | ||||
| // received overview data | // received overview data | ||||
| var data = JSON.parse(msg[1]); | var data = JSON.parse(msg[1]); | ||||
+ 0
- 2
root/js/solardash.file.jspp
View File
| @@ -82,5 +82,3 @@ var socket = new WebSocketTest([ | |||||
| data : 'ng -.584' | data : 'ng -.584' | ||||
| })) } ], | })) } ], | ||||
| ]); | ]); | ||||
| #include "solardash.base.js" | |||||
+ 0
- 2
root/js/solardash.https.jspp
View File
| @@ -4,5 +4,3 @@ if (document.location.protocol == 'http:') | |||||
| wsproto = 'ws:'; | wsproto = 'ws:'; | ||||
| var socket = new WebSocket(wsproto + '//' + location.host + '/solar.ws'); | var socket = new WebSocket(wsproto + '//' + location.host + '/solar.ws'); | ||||
| #include "solardash.base.js" | |||||