mirror of
https://github.com/UtilitechAS/amsreader-firmware.git
synced 2026-02-27 01:10:31 +00:00
Make realtime plot work for production
This commit is contained in:
@@ -741,7 +741,7 @@ void AmsConfiguration::clearUiConfig(UiConfig& config) {
|
||||
config.showDayPlot = 1;
|
||||
config.showMonthPlot = 1;
|
||||
config.showTemperaturePlot = 2;
|
||||
config.showRealtimePlot = 1;
|
||||
config.showRealtimePlot = 2;
|
||||
config.showPerPhasePower = 2;
|
||||
config.showPowerFactor = 2;
|
||||
config.darkMode = 2;
|
||||
|
||||
18
lib/SvelteUi/app/dist/index.js
vendored
18
lib/SvelteUi/app/dist/index.js
vendored
File diff suppressed because one or more lines are too long
@@ -14,8 +14,6 @@
|
||||
let realtime = null;
|
||||
realtimeStore.subscribe(update => {
|
||||
realtime = update;
|
||||
lastUpdate = lastUp;
|
||||
updateCount = 0;
|
||||
});
|
||||
|
||||
let visible = false;
|
||||
@@ -23,6 +21,7 @@
|
||||
function addValue() {
|
||||
if(updateCount == 60 || lastUpdate > lastUp || lastUpdate - lastUp > 300) {
|
||||
getRealtime();
|
||||
updateCount = 0;
|
||||
} else {
|
||||
while(lastUp > lastUpdate) {
|
||||
realtime.data.unshift(lastValue);
|
||||
@@ -39,6 +38,7 @@
|
||||
if(!realtimeRequested) {
|
||||
getRealtime();
|
||||
realtimeRequested = true;
|
||||
lastUpdate = lastUp;
|
||||
return;
|
||||
}
|
||||
if(!isRealtimeFullyLoaded()) return;
|
||||
@@ -53,8 +53,13 @@
|
||||
let heightAvailable;
|
||||
let widthAvailable;
|
||||
let points;
|
||||
let yScale;
|
||||
let xScale;
|
||||
|
||||
let yScale = function(val, min, max) {
|
||||
return Math.ceil(heightAvailable - (((val-min)/(max - min)) * heightAvailable) ) - 25;
|
||||
};
|
||||
let xScale = function(val) {
|
||||
return 30 + Math.ceil((val/realtime.size) * (widthAvailable-35));
|
||||
};
|
||||
|
||||
let yTicks;
|
||||
let xTicks;
|
||||
@@ -69,9 +74,11 @@
|
||||
min = 0;
|
||||
max = 0;
|
||||
|
||||
/*
|
||||
console.log("\n--Realtime plot debug--")
|
||||
console.log("Data length: %d\nSize: %d", realtime?.data?.length, realtime?.size);
|
||||
console.log("Height: %d\nWidth: %d\nBar width: %s", heightAvailable, widthAvailable, barWidth);
|
||||
*/
|
||||
|
||||
if(realtime.data && heightAvailable > 10 && widthAvailable > 100 && barWidth > 0.1) {
|
||||
visible = true;
|
||||
@@ -79,13 +86,14 @@
|
||||
let val = realtime.data[p];
|
||||
if(isNaN(val)) val = 0;
|
||||
max = Math.max(Math.ceil(val/1000.0)*1000, max);
|
||||
min = Math.min(Math.ceil(val/1000.0)*1000, min);
|
||||
min = Math.min(Math.floor(val/1000.0)*1000, min);
|
||||
}
|
||||
let range = max - min;
|
||||
|
||||
unit = max > 2500 ? 'kW' : 'W';
|
||||
|
||||
yTicks = [];
|
||||
for(let i = min; i < max; i+= max/5) {
|
||||
for(let i = min; i < max; i+= range/5) {
|
||||
yTicks.push({
|
||||
value: i,
|
||||
label: max > 2500 ? (i / 1000).toFixed(1) : i
|
||||
@@ -102,27 +110,22 @@
|
||||
if(xTicks.length > 12) break;
|
||||
}
|
||||
|
||||
yScale = function(val) {
|
||||
return Math.ceil(heightAvailable - ((val/max)* heightAvailable) ) - 25;
|
||||
};
|
||||
xScale = function(val) {
|
||||
return 30 + Math.ceil((val/realtime.size) * (widthAvailable-35));
|
||||
};
|
||||
|
||||
let i = realtime.size;
|
||||
points = xScale(realtime.size)+","+yScale(0)+" "+xScale(1)+","+yScale(0);
|
||||
points = xScale(realtime.size)+","+yScale(0, min, max)+" "+xScale(1)+","+yScale(0, min, max);
|
||||
for(let p in realtime.data) {
|
||||
if(i < 0) {
|
||||
break;
|
||||
}
|
||||
let val = realtime.data[p];
|
||||
if(isNaN(val)) val = 0;
|
||||
points = xScale(i--)+","+yScale(val)+" "+points;
|
||||
points = xScale(i--)+","+yScale(val, min, max)+" "+points;
|
||||
}
|
||||
} else {
|
||||
visible = false;
|
||||
}
|
||||
/*
|
||||
console.log("Min: %d\nMax: %d\nShow: %s", min, max, visible);
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -135,8 +138,8 @@
|
||||
<!-- y axis -->
|
||||
<g class="axis y-axis">
|
||||
{#each yTicks as tick}
|
||||
{#if !isNaN(yScale(tick.value))}
|
||||
<g class="tick tick-{tick.value}" transform="translate(0, {yScale(tick.value)})">
|
||||
{#if !isNaN(yScale(tick.value, min, max))}
|
||||
<g class="tick tick-{tick.value}" transform="translate(0, {yScale(tick.value, min, max)})">
|
||||
<line x2="100%"></line>
|
||||
<text y="-4">{tick.label}</text>
|
||||
</g>
|
||||
|
||||
Reference in New Issue
Block a user