Skip to content

Commit

Permalink
Color theme extended to support manual SoC setting (snaptec#1008)
Browse files Browse the repository at this point in the history 
* added support for manual SoC setting
  • Loading branch information
@cshagen
cshagen authored Feb 7, 2021
1 parent bfae353 commit 6b44046
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 76 deletions.
154 changes: 116 additions & 38 deletions web/themes/colors/chargePointList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class ChargePointList {
this.chargepoints = [];
this.phaseSymbols = ['/', '\u2460', '\u2461', '\u2462']
this.headers = ["Ladepunkt", "Ladeparameter", "geladen", "Ladestand"];
this.manualSoc = 0;
};

// initialize after document is created
Expand All @@ -26,7 +27,7 @@ class ChargePointList {
.append("th")
.attr("class", "tablecell")
// .style("color", "white")
.style("text-align", (data,i) => (i==0) ? "left" : "center" )
.style("text-align", (data, i) => (i == 0) ? "left" : "center")
//.classed ("tablecell", true)
//.classed ("px-1", true)
.text((data) => data)
Expand Down Expand Up @@ -56,20 +57,20 @@ class ChargePointList {
rows.selectAll("cells")
.data(row => [
formatWatt(row.power) + " " + this.phaseSymbols[row.phasesInUse] + " " + row.targetCurrent + " A",
formatWattH(row.energy*1000) + " / " + Math.round(row.energy / row.energyPer100km * 1000) / 10 + " km"
formatWattH(row.energy * 1000) + " / " + Math.round(row.energy / row.energyPer100km * 1000) / 10 + " km"

]).enter()
.append("td")
.attr("class", "tablecell px-1 py-1")
.attr("style", "vertical-align:middle;")
.text(data => data);
rows.append((row, i) => this.cpSocButtonCell(row, i));

if (wbdata.isPriceChartEnabled) {
this.footer.append ('p')
.attr ("class", "pt-3 pb-0 m-0")
.style("text-align" ,"center")
.text ("Aktueller Strompreis: " + wbdata.currentPowerPrice + " Cent/kWh");
this.footer.append('p')
.attr("class", "pt-3 pb-0 m-0")
.style("text-align", "center")
.text("Aktueller Strompreis: " + wbdata.currentPowerPrice + " Cent/kWh");
}
}

Expand All @@ -80,30 +81,30 @@ class ChargePointList {
cpNameButtonCell(row, index) {
const cell = d3.create("td")
.attr("class", "tablecell px-1 py-1")
.style ("color", row.color)
.style ("vertical-align", "middle")
.style ("text-align", "left")
.style("color", row.color)
.style("vertical-align", "middle")
.style("text-align", "left")
.attr("onClick", "lpButtonClicked(" + index + ")");
if (row.isEnabled) {
cell.append("span")

if (row.isEnabled) {
cell.append("span")
.attr("class", "fa fa-toggle-on text-green px-0")
} else {
cell.append("span")
.attr("class", "fa fa-toggle-off text-red px-0")
}
} else {
cell.append("span")
.attr("class", "fa fa-toggle-off text-red px-0")
}

cell
cell
.append("span").text(row.name)
.attr("class", "px-2");

if (row.isPluggedIn) {
const span =
cell.append("span")
.attr("class", "fa fa-xs fa-plug")
const span =
cell.append("span")
.attr("class", "fa fa-xs fa-plug")
;
span.classed("text-orange", (!row.isCharging))
span.classed("text-green", row.isCharging)
span.classed("text-orange", (!row.isCharging))
span.classed("text-green", row.isCharging)
}
if (row.willFinishAtTime) {
cell.append("span")
Expand All @@ -113,8 +114,6 @@ class ChargePointList {
cell.append("span")
.attr("fa fa-xs fa-moon");
}


return cell.node();
}

Expand All @@ -126,18 +125,95 @@ class ChargePointList {
.style("vertical-align", "middle");
if (row.isSocConfigured) {
cell.append("span").text(row.soc + " %")
.attr ("class", "px-2");
cell.append("i")
.attr("class", "small fas fa-redo-alt")
.attr("id", "soclabel-" + index)
.style("color", "white");

.attr("class", "px-2");
if (row.isSocManual) {
cell.append("i")
.attr("class", "small fas fa-edit")
.style("color", "white");
} else {
cell.append("i")
.attr("class", "small fas fa-redo-alt")
.attr("id", "soclabel-" + index)
.style("color", "white");
}
}
return cell.node();
}

editManualSoc(i) {
this.manualSoc = wbdata.chargePoint[i].soc;
const div = d3.select("div#socSelector");
div.selectAll("*").remove();

const col = div.append("div")
.style("background-color", "steelblue")
.attr("class", "px-2 py-1");

col.append("div")
.attr("class", "row justify-content-center")
.append("p")
.attr("class", "largeTextSize popup-header")
.style("text-align", "center")
.text("Manuelle SoC-Eingabe - Ladepunkt " + (i + 1));

const row2 = col.append("div")
.attr("class", "row justify-content-center")
row2.append("div")
.attr("class", "col-2 px-1 py-1")
.append("button")
.attr("class", "btn btn-block btn-sm btn-secondary")
.text("-")
.on("click", () => {
if (this.manualSoc > 0) {
this.manualSoc--;
}
box.node().value = this.manualSoc;
});
const col22 = row2.append("div").attr("class", "col-5 py-1")
.append("div").attr("class", "input-group");
const box = col22.append("input")
.attr("type", "text")
.attr("value", this.manualSoc)
.attr("class", "form-control text-right")
.on("input", () => {
const v = box.node().value;
if (v >= 0 && v <= 100) {
this.manualSoc = box.node().value;
}
});
col22.append("div").attr("class", "input-group-append")
.append("div").attr("class", "input-group-text")
.text("%");
row2.append("div").attr("class", "col-2 px-1 py-1")
.append("button")
.attr("class", "btn btn-block btn-sm btn-secondary")
.text("+")
.on("click", () => {
if (this.manualSoc < 100) {
this.manualSoc++;
}
box.node().value = this.manualSoc;
});

const row3 = col.append("div").attr("class", "row justify-content-center");
const button1 = row3.append("button")
.attr("type", "submit")
.attr("class", "btn btn-sm btn-secondary")
.text("Abbrechen")
.on("click", () => {
div.selectAll("*").remove();
})
const button2 = row3.append("button")
.attr("id", "socSubmitButton")
.attr("class", "btn btn-sm btn-primary")
.text("Übernehmen")
.on("click", () => {
publish("" + this.manualSoc, "openWB/set/lp/" + (i + 1) + "/manualSoc");
div.selectAll("*").remove();
})
}
}

function lpButtonClicked(i) {
if (wbdata.chargePoint[i].isEnabled) {
publish("0", "openWB/set/lp/" + (+i + 1) + "/ChargePointEnabled");
Expand All @@ -149,11 +225,13 @@ function lpButtonClicked(i) {
}

function socButtonClicked(i) {
publish("1", "openWB/set/lp/" + (+i + 1) + "/ForceSoCUpdate");
d3.select("i#soclabel-" + i)
.classed("fa-spin", true)
if (wbdata.chargePoint[i].isSocManual) {
chargePointList.editManualSoc(i);
} else {
publish("1", "openWB/set/lp/" + (+i + 1) + "/ForceSoCUpdate");
d3.select("i#soclabel-" + i)
.classed("fa-spin", true)
}
}



var chargePointList = new ChargePointList();
7 changes: 4 additions & 3 deletions web/themes/colors/powerdata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ class WbData {
break;
case 'soc':
powerMeter.update();
break;
default:
break;
}
Expand Down Expand Up @@ -276,13 +277,13 @@ class Consumer {
};

class ChargePoint {
constructor(index, name = "", power = 0, dailyYield = 0, configured = false) {
constructor(index, name = "", power = 0, dailyYield = 0, configured = false, isSocConfigured = false, isSocManual = false) {
this.name = name;
this.power = power;
this.energy = dailyYield;
this.configured = configured;


this.isSocConfigured = isSocConfigured;
this.isSocManual = isSocManual;
}
};

Expand Down
58 changes: 44 additions & 14 deletions web/themes/colors/powergraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ class PowerGraph {
this.initialized = false;
this.colors = [];
this.gridColors = [];
this.bgcolor="";
this.bgcolor = "";
this.axiscolor = "";
this.chargeColor="";
this.lp1color="";
this.lp2color="";
this.batteryColor="";
this.chargeColor = "";
this.lp1color = "";
this.lp2color = "";
this.batteryColor = "";
this.graphRefreshCounter = 0;
this.width = 500;
this.height = 500;
Expand Down Expand Up @@ -56,19 +56,22 @@ class PowerGraph {
}

update(topic, payload) {

if (this.initialized) { // steady state

if (topic === "openWB/graph/lastlivevalues") {
const values = this.extractValues(payload.toString());
this.graphRefreshCounter++;
this.graphData.push(values);

this.updateGraph();

if (this.graphRefreshCounter > 60) {
// fresh reloas of the graph
this.initialized = false;
this.initCounter = 0;
this.initialGraphData = [];
this.graphData = [];
this.graphRefreshCounter = 0;
subscribeMqttGraphSegments();
}
}
Expand Down Expand Up @@ -96,9 +99,6 @@ class PowerGraph {
});
});

/* this.graphData = this.graphData.sort((a, b) =>
a.date > b.date ? 1 : -1
);*/
this.updateGraph();
unsubscribeMqttGraphSegments();
}
Expand Down Expand Up @@ -141,7 +141,7 @@ class PowerGraph {
}
values.soc1 = +elements[9];
values.soc2 = +elements[10];

// smart home
for (i = 0; i < 8; i++) {
values["sh" + i] = +elements[20 + i];
Expand All @@ -161,7 +161,7 @@ class PowerGraph {
values.batOut = 0;
};
values.batterySoc = +elements[8];

return values;
}

Expand Down Expand Up @@ -279,7 +279,7 @@ class PowerGraph {
}

drawXAxis(svg, width, height) {
const fontsize=12;
const fontsize = 12;
const xScale = d3.scaleTime().range([0, width - this.margin.right]);
xScale.domain(d3.extent(this.graphData, (d) => d.date));

Expand All @@ -301,7 +301,7 @@ class PowerGraph {
;
svg.append("text")
.attr("x", - this.margin.left)
.attr("y", height/2 +5)
.attr("y", height / 2 + 5)
.attr("fill", this.axiscolor)
.attr("font-size", fontsize)
.text("kW")
Expand All @@ -315,6 +315,16 @@ class PowerGraph {

// Chargepoint 1
if (wbdata.chargePoint[0].isSocConfigured) {
svg.append("path")
.datum(this.graphData)
.attr("stroke", this.bgcolor)
.attr("stroke-width", 1)
.attr("fill", "none")
//.style("stroke-dasharray", ("3, 3"))
.attr("d", d3.line()
.x((d, i) => xScale(this.graphData[i].date))
.y(d => yScale(d.soc1))
);
svg.append("path")
.datum(this.graphData)
.attr("stroke", this.lp1color)
Expand All @@ -336,6 +346,16 @@ class PowerGraph {
}
// Chargepoint 2
if (wbdata.chargePoint[1].isSocConfigured) {
svg.append("path")
.datum(this.graphData)
.attr("stroke", this.bgcolor)
.attr("stroke-width", 1)
.attr("fill", "none")
// .style("stroke-dasharray", ("3, 3"))
.attr("d", d3.line()
.x((d, i) => xScale(this.graphData[i].date))
.y(d => yScale(d.soc2))
);
svg.append("path")
.datum(this.graphData)
.attr("stroke", this.lp2color)
Expand All @@ -357,6 +377,16 @@ class PowerGraph {

// Battery
if (wbdata.isBatteryConfigured) {
svg.append("path")
.datum(this.graphData)
.attr("stroke", this.bgcolor)
.attr("stroke-width", 1)
.attr("fill", "none")
//.style("stroke-dasharray", ("3, 3"))
.attr("d", d3.line()
.x((d, i) => xScale(this.graphData[i].date))
.y(d => yScale(d.batterySoc))
);
svg.append("path")
.datum(this.graphData)
.attr("stroke", this.batteryColor)
Expand Down
Binary file modified web/themes/colors/preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions web/themes/colors/processAllMqttMsg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -865,6 +865,10 @@ function processLpMessages(mqttmsg, mqttpayload) {
// soc-module configured for respective charge point
wbdata.updateCP(index, "isSocConfigured", (mqttpayload == 1));
}
else if ( mqttmsg.match( /^openwb\/lp\/[1-9][0-9]*\/boolsocmanual$/i ) ) {
// manual soc-module configured for respective charge point
wbdata.updateCP(index, "isSocManual", (mqttpayload == 1));
}
else if (mqttmsg.match(/^openwb\/lp\/[1-9][0-9]*\/boolchargepointconfigured$/i)) {
// respective charge point configured
wbdata.updateCP(index, "configured", (mqttpayload == 1));
Expand Down
Loading

0 comments on commit 6b44046

Please sign in to comment.