It's a great time to get ESP32 support, I've started working recently on a "charts" driver for OBK so we will be able to display some measurements history on the OBK device itself.
Helpful post? Buy me a coffee.
Czy wolisz polską wersję strony elektroda?
Nie, dziękuję Przekieruj mnie tam
startDriver charts
// chart with max 16 samples, 3 variables and two separate vertical axes
chart_create 16 3 2
// set variables along with their axes
chart_setVar 0 "Room T" "axtemp"
chart_setVar 1 "Outside T" "axtemp"
chart_setVar 2 "Humidity" "axhum"
// setup axes
// axis_index, name, flags, label
chart_setAxis 0 "axtemp" 0 "Temperature (C)"
// flags 1 means this axis is on the right
chart_setAxis 1 "axhum" 1 "Humidity (%)"
// for demonstration purposes, add some data at fixed times
// First argument is NTP time value
chart_add 1725606094 20 15 89
chart_add 1725616094 22 16 88
chart_add 1725626094 26 17 91
chart_add 1725636094 30 14 92
chart_add 1725646094 28 13 92
chart_add 1725656094 27 15 91
startDriver charts
// chart with max 16 samples, 3 variables and 3 separate vertical axes
chart_create 16 3 3
// set variables along with their axes
chart_setVar 0 "Voltage" "axvolt"
chart_setVar 1 "Current" "axcurr"
chart_setVar 2 "Power" "axpower"
// setup axes
// axis_index, name, flags, label
chart_setAxis 0 "axvolt" 0 "Voltage (V)"
chart_setAxis 1 "axcurr" 1 "Current (A)"
chart_setAxis 2 "axpower" 2 "Power (W)"
chart_add 1725606094 12 0.5 6
chart_add 1725616094 11.8 0.52 6.14
chart_add 1725626094 11.5 0.54 6.21
chart_add 1725636094 11.3 0.55 6.22
chart_add 1725646094 11.1 0.56 6.22
chart_add 1725656094 10.9 0.58 6.32
startDriver charts
startDriver NTP
//waitFor NTPState 1
chart_create 16 1 1
chart_setVar 0 "Number" "ax"
chart_setAxis 0 "ax" 0 "Number"
again:
// EDIT: fixed
setChannel 5 $rand*0.001
chart_addNow $CH5
delay_s 1
goto again
p.kaczmarek2 wrote:but you need to manually refresh page for it to refresh measurements, not sure why
p.kaczmarek2 wrote:try to use a real DHT and capture measurements over a day, idk, one per 15 minutes
// Sample 8
// DHT11 setup
IndexRefreshInterval 100000
startDriver charts
startDriver NTP
waitFor NTPState 1
chart_create 48 2 2
// set variables along with their axes
chart_setVar 0 "Temperature" "axtemp"
chart_setVar 1 "Humidity" "axhum"
// setup axes
// axis_index, name, flags, label
chart_setAxis 0 "axtemp" 0 "Temperature (C)"
// flags 1 means this axis is on the right
chart_setAxis 1 "axhum" 1 "Humidity (%)"
// every 60 seconds, -1 means infinite repeats
// assumes that $CH1 is temperature div10 and $CH2 is humidity
addRepeatingEvent 60 -1 chart_addNow $CH1*0.1 $CH2
max4elektroda wrote:I'll try to share my first thoughts and ideas tomorrow.
p.kaczmarek2 wrote:The next question might be how to handle the saving of the data.
p.kaczmarek2 wrote:Very nice graphs, are they configurable? We can have two charts drivers, so if you just want, we can integrate yours driver as well.
p.kaczmarek2 wrote:Saving the temperature as 2 bytes instead of 4 bytes may also work, but my driver is designed to be flexible and it would be somewhat a hassle to support multiple data types.
Still, maybe we could give it a try.
Introduce a variable types: 8 bit, 16 bit, 32 bit?
: Would it be a possibility/idea to use a union to store data? So we can e.g. use the same type of 32bit to store 1, 2 or 4 values in this entry?
p.kaczmarek2 wrote:We could also use delta encoding. It may be a bit more tricky with a ring buffer, but it still may be possible. We would need to store one bit (somehow) per variable telling us whether given value is skipped (same as before) or changed. We could also store 2 bits per variable, then 00 means "the same", 01 means "small change" (encoded as one byte), and 10 could mean "full new value".
) to us a 16 bit value of two times 8 bit: value first, then up to 255 repetitions of this value. As long as we usually have at least two consecutive equal readings, we wouldn't have overhead.
max4elektroda wrote:
I attached a simple HTML page for that, so you can try it out yourself - feedback highly appreciated
(it's without a separate .js file to have only one file - just remove .txt extension, couldn't upload HTML file)
, it's just to make the attachments possible)
TL;DR: With 96 samples at 15-minute intervals, OpenBeken can log about 1 day of DHT11 history in roughly 1.5 kB RAM. As the developer put it, "my driver is designed to be flexible". This FAQ helps OpenBeken users set up charts, size memory, and choose between flexible and compact history formats. [#21223280]
Why it matters: OpenBeken chart history is useful only if you balance display flexibility, RAM use, refresh behavior, and flash endurance.
| Approach | Data format | Time storage | Main advantage | Main trade-off |
|---|---|---|---|---|
| Flexible charts driver | 32-bit float per value | Per-sample timestamp | Supports mixed data like voltage, power, humidity | Higher RAM and flash use |
| Fixed-rate compact format | Reduced-precision values | Only latest timestamp | Lower memory footprint | Less flexible, assumes constant sample interval |
| Self-contained SVG renderer | Custom SVG/HTML/JS | Depends on implementation | No remote library download needed | Separate implementation effort |
Key insight: The thread favors two valid OpenBeken chart paths: a general float-based driver for any measurement type, and a compact fixed-rate format for long history with minimal memory use.
IndexRefreshInterval 100000 was added to reduce annoying auto-refresh while testing chart updates on the main page. [#21222830]startDriver charts, startDriver NTP, then create a 2-variable chart and add periodic samples from the DHT channels. A working example used chart_create 48 2 2, mapped temperature to axtemp, humidity to axhum, and logged with addRepeatingEvent 60 -1 chart_addNow $CH1*0.1 $CH2.
charts and NTP, then wait for NTPState 1.chart_addNow. [#21222830]obk_config.h and rebuild or flash a build that already includes it. One tester saw the exact log line Info:MAIN:Driver charts is not known in this build, and the developer replied with the configuration fix immediately. [#21222643]chart_create 16 3 3, mapped Voltage, Current, and Power to axvolt, axcurr, and axpower, and defined three axes with labels Voltage (V), Current (A), and Power (W). After setup, sample values such as 12 V, 0.5 A, and 6 W were added with chart commands. chart_addNow does the same job with the current timestamp instead of a manual NTP value. [#21222608]IndexRefreshInterval controls how often the main page refreshes, which directly affects chart auto-refresh behavior. It was added because auto-refresh was described as annoying during chart testing. A sample DHT11 setup used IndexRefreshInterval 100000, which greatly slows page refreshes while still allowing data logging in the background. If you set it too high, the chart can look static even though samples continue to accumulate. [#21222830]00 for same value, 01 for small one-byte change, and 10 for a full new value. That could shrink history size significantly, especially for slowly changing measurements like room temperature. [#21224163]<div>, a createsvg initializer, and a draw call. It is a strong alternative when dependency-free rendering matters more than maximum flexibility. [#21232406]