jmg
/
solardash
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
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
John-Mark Gurney 4 years ago
parent
7ef02062f6
commit
51ea2e3a38
6 changed files with 45 additions and 18 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -4
      Makefile
  2. +21
    -0
      root/css/styles.css
  3. +6
    -3
      root/index.html
  4. +14
    -7
      root/js/solardash.base.js
  5. +0
    -2
      root/js/solardash.file.jspp
  6. +0
    -2
      root/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 $@

# 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)
run: $(JSFILES)

$(JSFILES): $(THIRDPARTYJS) $(JSBASE)

.jspp.js:
$(CPP) -Wno-invalid-pp-token -E $< | sed -e '/^#/d' > $@ || (rm "$@"; false)
cat $< $(THIRDPARTYJS) $(JSBASE) > $@ || (rm "$@"; false)

keepupdate:
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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Solar Dashboard</title>

@@ -10,9 +11,11 @@
</head>

<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>
<script type="text/javascript" src="js/solardash.init.js"></script>
<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() {
// connected
}
@@ -19,12 +13,25 @@ var msgNumbs = {
c: "#consumption",
};

function netgridcolor(v) {
if (v <= 0)
return "#00ff00";
else
return "#ff0000";
}

socket.onmessage = function(m) {
var msg = m.data.split(" ");
if (msg[0] in msgNumbs) {
// simple update values
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') {
// received overview data
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'
})) } ],
]);

#include "solardash.base.js"

+ 0
- 2
root/js/solardash.https.jspp View File

@@ -4,5 +4,3 @@ if (document.location.protocol == 'http:')
wsproto = 'ws:';

var socket = new WebSocket(wsproto + '//' + location.host + '/solar.ws');

#include "solardash.base.js"

Write Preview
Loading…
Cancel
Save