From 148c8e20990052647d3ecc916b1e8ab81c29e7b2 Mon Sep 17 00:00:00 2001 From: lumapu Date: Thu, 14 Mar 2024 00:45:46 +0100 Subject: [PATCH] reworked html / javascript --- scripts/htmlPreprocessorDefines.py | 2 +- src/plugins/Display/Display_Mono.h | 14 +- src/plugins/history.h | 28 +- src/web/RestApi.h | 6 +- src/web/html/api.js | 17 ++ src/web/html/history.html | 439 +++++++++-------------------- src/web/html/style.css | 9 +- 7 files changed, 175 insertions(+), 340 deletions(-) diff --git a/scripts/htmlPreprocessorDefines.py b/scripts/htmlPreprocessorDefines.py index f8230a90..f5d7cc31 100644 --- a/scripts/htmlPreprocessorDefines.py +++ b/scripts/htmlPreprocessorDefines.py @@ -35,6 +35,6 @@ def check(inp, lst, pattern): return out def conv(inp, lst): - print(lst) + #print(lst) out = check(inp, lst, r'\/\*(?:IF_|ELS|ENDIF_)([A-Z0-9\-_]+)?\*\/') return check(out, lst, r'\<\!\-\-(?:IF_|ELS|ENDIF_)([A-Z0-9\-_]+)?\-\-\>') diff --git a/src/plugins/Display/Display_Mono.h b/src/plugins/Display/Display_Mono.h index ad463d7f..e855eeb9 100644 --- a/src/plugins/Display/Display_Mono.h +++ b/src/plugins/Display/Display_Mono.h @@ -110,7 +110,7 @@ class DisplayMono { } // add new value to power graph and maintain state engine for period times - /*void addPowerGraphEntry(float val) { + void addPowerGraphEntry(float val) { if (nullptr == mPgData) // power graph not initialized return; @@ -163,7 +163,7 @@ class DisplayMono { mPgData[mPgLastPos] = std::max(mPgData[mPgLastPos], val); // update current datapoint to maximum of all seen values (= envelope curve) mPgMaxPwr = std::max(mPgMaxPwr, val); // update max value of stored data for scaling of y-axis } - }*/ + } // plot power graph to given display offset void plotPowerGraph(uint8_t xoff, uint8_t yoff) { @@ -296,15 +296,15 @@ class DisplayMono { uint8_t mPgWidth = 0; private: - //float *mPgData = nullptr; + float *mPgData = nullptr; uint8_t mPgHeight = 0; float mPgMaxPwr = 0.0; - //uint32_t mPgStartTime = 0; - //uint32_t mPgEndTime = 0; - //uint32_t mPgPeriod = 0; // seconds + uint32_t mPgStartTime = 0; + uint32_t mPgEndTime = 0; + uint32_t mPgPeriod = 0; // seconds uint8_t mPgLastPos = 0; uint32_t mPgLastTime = 0; - //PowerGraphState mPgState = PowerGraphState::NO_TIME_SYNC; + PowerGraphState mPgState = PowerGraphState::NO_TIME_SYNC; uint16_t mDispHeight = 0; uint8_t mLuminance = 0; diff --git a/src/plugins/history.h b/src/plugins/history.h index 1068b947..7d7be57c 100644 --- a/src/plugins/history.h +++ b/src/plugins/history.h @@ -108,27 +108,29 @@ class HistoryData { } uint16_t valueAt(HistoryStorageType type, uint16_t i) { - storage_t *s=NULL; + storage_t *s = nullptr; uint16_t idx=i; DPRINTLN(DBG_VERBOSE, F("valueAt ") + String((uint8_t)type) + " i=" + String(i)); - idx = (s->listIdx + i) % HISTORY_DATA_ARR_LENGTH; switch (type) { default: [[fallthrough]]; case HistoryStorageType::POWER: s = &mCurPwr; + idx = (s->listIdx + i) % HISTORY_DATA_ARR_LENGTH; break; case HistoryStorageType::POWER_DAY: s = &mCurPwrDay; - idx = i; break; + #if defined(ENABLE_HISTORY_YIELD_PER_DAY) case HistoryStorageType::YIELD: s = &mYieldDay; + idx = (s->listIdx + i) % HISTORY_DATA_ARR_LENGTH; break; + #endif } - return s->data[idx]; + return (nullptr == s) ? 0 : s->data[idx]; } uint16_t getMaximumDay() { @@ -142,7 +144,7 @@ class HistoryData { return mLastValueTs; } - uint32_t getPeriode(HistoryStorageType type) { + uint32_t getPeriod(HistoryStorageType type) { DPRINTLN(DBG_VERBOSE, F("getPeriode ") + String((uint8_t)type)); switch (type) { case HistoryStorageType::POWER: @@ -163,10 +165,9 @@ class HistoryData { } #if defined(ENABLE_HISTORY_LOAD_DATA) - /* For filling data from outside */ void addValue(HistoryStorageType historyType, uint8_t valueType, uint32_t value) { - if (valueType<2) { - storage_t *s=NULL; + if (valueType < 2) { + storage_t *s = NULL; switch (historyType) { default: [[fallthrough]]; @@ -182,12 +183,10 @@ class HistoryData { break; #endif } - if (s) - { - if (valueType==0) + if (s) { + if (0 == valueType) addValue(s, value); - if (valueType==1) - { + else { if (historyType == HistoryStorageType::POWER) s->refreshCycle = value; if (historyType == HistoryStorageType::POWER_DAY) @@ -196,8 +195,7 @@ class HistoryData { } return; } - if (valueType == 2) - { + if (2 == valueType) { if (historyType == HistoryStorageType::POWER) mLastValueTs = value; if (historyType == HistoryStorageType::POWER_DAY) diff --git a/src/web/RestApi.h b/src/web/RestApi.h index dc1cadfc..9b0b8e76 100644 --- a/src/web/RestApi.h +++ b/src/web/RestApi.h @@ -921,13 +921,12 @@ class RestApi { max = value; } obj[F("max")] = max; - obj[F("maxDay")] = mApp->getHistoryMaxDay(); obj[F("lastValueTs")] = mApp->getHistoryLastValueTs((uint8_t)HistoryStorageType::POWER); #endif /*ENABLE_HISTORY*/ } void getPowerHistoryDay(AsyncWebServerRequest *request, JsonObject obj){ - getGeneric(request, obj.createNestedObject(F("generic"))); + //getGeneric(request, obj.createNestedObject(F("generic"))); #if defined(ENABLE_HISTORY) obj[F("refresh")] = mApp->getHistoryPeriod((uint8_t)HistoryStorageType::POWER_DAY); uint16_t max = 0; @@ -938,14 +937,13 @@ class RestApi { max = value; } obj[F("max")] = max; - obj[F("maxDay")] = mApp->getHistoryMaxDay(); obj[F("lastValueTs")] = mApp->getHistoryLastValueTs((uint8_t)HistoryStorageType::POWER_DAY); #endif /*ENABLE_HISTORY*/ } void getYieldDayHistory(AsyncWebServerRequest *request, JsonObject obj) { - getGeneric(request, obj.createNestedObject(F("generic"))); + //getGeneric(request, obj.createNestedObject(F("generic"))); #if defined(ENABLE_HISTORY) && defined(ENABLE_HISTORY_YIELD_PER_DAY) obj[F("refresh")] = mApp->getHistoryPeriod((uint8_t)HistoryStorageType::YIELD); uint16_t max = 0; diff --git a/src/web/html/api.js b/src/web/html/api.js index 1b51699c..6c2ccec2 100644 --- a/src/web/html/api.js +++ b/src/web/html/api.js @@ -61,6 +61,23 @@ function ml(tagName, ...args) { return nester(el, args[1]) } +function mlNs(tagName, ...args) { + var el = document.createElementNS("http://www.w3.org/2000/svg", tagName); + if(args[0]) { + for(var name in args[0]) { + if(name.indexOf("on") === 0) { + el.addEventListener(name.substr(2).toLowerCase(), args[0][name], false) + } else { + el.setAttribute(name, args[0][name]); + } + } + } + if (!args[1]) { + return el; + } + return nester(el, args[1]) +} + function nester(el, n) { if (typeof n === "string") { el.innerHTML = n; diff --git a/src/web/html/history.html b/src/web/html/history.html index bf52c733..2d1509d4 100644 --- a/src/web/html/history.html +++ b/src/web/html/history.html @@ -12,32 +12,13 @@ {#HTML_NAV}
-

{#TOTAL_POWER}

- {#LAST} {#VALUES} -
-
-

- {#LAST_VALUE}: W.
- {#MAXIMUM}: W. - {#UPDATED} {#SECONDS} -

-
-

{#TOTAL_POWER_DAY}

-
-
-

- {#MAX_DAY}: W.
- {#UPDATED} {#SECONDS} -

-
+

Total Power

+
+

Total Power Today

+
-

{#TOTAL_YIELD_PER_DAY}

-
-
-

- {#MAXIMUM}: Wh
-

-
+

Total Yield per day

+

Insert data into Yield per day history

@@ -56,310 +37,150 @@ {#HTML_FOOTER} diff --git a/src/web/html/style.css b/src/web/html/style.css index 556dfcdc..60805e19 100644 --- a/src/web/html/style.css +++ b/src/web/html/style.css @@ -34,15 +34,16 @@ textarea { } svg polyline { - fill-opacity: .5; - stroke-width: 1; + fill-opacity: .5; + stroke-width: 1; } svg text { - font-size: x-small; - fill: var(--chart-text); + font-size: x-small; + fill: var(--chart-text); } + div.chartDivContainer { padding: 1px; margin: 1px;