ESP-DASH v5

Author: mathieucarbou

.clang-format

@@ -0,0 +1,22 @@
+Language: Cpp
+BasedOnStyle: LLVM
+
+AccessModifierOffset: -2
+AlignConsecutiveMacros: true
+AllowAllArgumentsOnNextLine: false
+AllowAllParametersOfDeclarationOnNextLine: false
+AllowShortIfStatementsOnASingleLine: false
+AllowShortLambdasOnASingleLine: Inline
+BinPackArguments: false
+ColumnLimit: 0
+ContinuationIndentWidth: 2
+FixNamespaceComments: false
+IndentAccessModifiers: true
+IndentCaseLabels: true
+IndentPPDirectives: BeforeHash
+IndentWidth: 2
+NamespaceIndentation: All
+PointerAlignment: Left
+ReferenceAlignment: Left
+TabWidth: 2
+UseTab: Never

.github/workflows/ci.yml

@@ -78,6 +78,9 @@ jobs:
       - name: Build Benchmark
         run: arduino-cli compile --library . --warnings none -b ${{ matrix.board }} "examples/Benchmark/Benchmark.ino"
 
+      - name: Build Benchmark5
+        run: arduino-cli compile --library . --warnings none -b ${{ matrix.board }} "examples/Benchmark5/Benchmark5.ino"
+
       - name: Build Chart
         run: arduino-cli compile --library . --warnings none -b ${{ matrix.board }} "examples/Chart/Chart.ino"
 
@@ -154,6 +157,7 @@ jobs:
       - run: PLATFORMIO_SRC_DIR=examples/AccessPoint PIO_BOARD=${{ matrix.board }} pio run -e ${{ matrix.env }}
       - run: PLATFORMIO_SRC_DIR=examples/Basic PIO_BOARD=${{ matrix.board }} pio run -e ${{ matrix.env }}
       - run: PLATFORMIO_SRC_DIR=examples/Benchmark PIO_BOARD=${{ matrix.board }} pio run -e ${{ matrix.env }}
+      - run: PLATFORMIO_SRC_DIR=examples/Benchmark5 PIO_BOARD=${{ matrix.board }} pio run -e ${{ matrix.env }}
       - run: PLATFORMIO_SRC_DIR=examples/Chart PIO_BOARD=${{ matrix.board }} pio run -e ${{ matrix.env }}
       - run: PLATFORMIO_SRC_DIR=examples/Dynamic PIO_BOARD=${{ matrix.board }} pio run -e ${{ matrix.env }}
       - run: PLATFORMIO_SRC_DIR=examples/Interactive PIO_BOARD=${{ matrix.board }} pio run -e ${{ matrix.env }}

examples/Benchmark/Benchmark.ino

@@ -42,10 +42,10 @@ ESPDash dashboard(&server);
 Card generic(&dashboard, GENERIC_CARD, "Generic");
 Card temp(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
 Card hum(&dashboard, HUMIDITY_CARD, "Humidity", "%");
-Card status1(&dashboard, STATUS_CARD, "Status 1", "success");
-Card status2(&dashboard, STATUS_CARD, "Status 2", "warning");
-Card status3(&dashboard, STATUS_CARD, "Status 3", "danger");
-Card status4(&dashboard, STATUS_CARD, "Status 4", "idle");
+Card status1(&dashboard, STATUS_CARD, "Status 1", DASH_STATUS_SUCCESS);
+Card status2(&dashboard, STATUS_CARD, "Status 2", DASH_STATUS_WARNING);
+Card status3(&dashboard, STATUS_CARD, "Status 3", DASH_STATUS_DANGER);
+Card status4(&dashboard, STATUS_CARD, "Status 4", DASH_STATUS_IDLE);
 Card progress(&dashboard, PROGRESS_CARD, "Progress", "", 0, 100);
 Card button(&dashboard, BUTTON_CARD, "Test Button");
 Card slider(&dashboard, SLIDER_CARD, "Test Slider", "", 0, 255);
@@ -61,14 +61,17 @@ void setup() {
   Serial.begin(115200);
 
   /* Connect WiFi */
-  WiFi.mode(WIFI_STA);
-  WiFi.begin(ssid, password);
-  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
-      Serial.printf("WiFi Failed!\n");
-      return;
-  }
-  Serial.print("IP Address: ");
-  Serial.println(WiFi.localIP());
+  // WiFi.mode(WIFI_STA);
+  // WiFi.begin(ssid, password);
+  // if (WiFi.waitForConnectResult() != WL_CONNECTED) {
+  //     Serial.printf("WiFi Failed!\n");
+  //     return;
+  // }
+  // Serial.print("IP Address: ");
+  // Serial.println(WiFi.localIP());
+
+  WiFi.mode(WIFI_AP);
+  WiFi.softAP("esp-captive");
 
   bar.updateX(XAxis, 7);
 
@@ -107,10 +110,10 @@ void loop() {
   generic.update((int)random(0, 100));
   temp.update((int)random(0, 100));
   hum.update((int)random(0, 100));
-  status1.update(DASH_STATUS_SUCCESS);
-  status2.update(DASH_STATUS_WARNING);
-  status3.update(DASH_STATUS_DANGER);
-  status4.update(DASH_STATUS_IDLE);
+  status1.update("message 1", DASH_STATUS_SUCCESS);
+  status2.update("message 2", DASH_STATUS_WARNING);
+  status3.update("message 3", DASH_STATUS_DANGER);
+  status4.update("message 4", DASH_STATUS_IDLE);
   progress.update((int)random(0, 100));
 
   dashboard.sendUpdates();

examples/Benchmark5/Benchmark5.ino

@@ -0,0 +1,200 @@
+/*
+  -----------------------------
+  ESPDASH Pro - Benchmark Example
+  -----------------------------
+  Use this benchmark example to test if ESP-DASH Pro is working properly on your platform.
+
+  Github: https://github.com/ayushsharma82/ESP-DASH
+  WiKi: https://docs.espdash.pro
+
+  Works with both ESP8266 & ESP32
+  -------------------------------
+*/
+
+#include <Arduino.h>
+#if defined(ESP8266)
+  /* ESP8266 Dependencies */
+  #include <ESP8266WiFi.h>
+  #include <ESPAsyncTCP.h>
+  #include <ESPAsyncWebServer.h>
+#elif defined(ESP32)
+  /* ESP32 Dependencies */
+  #include <AsyncTCP.h>
+  #include <ESPAsyncWebServer.h>
+  #include <WiFi.h>
+#endif
+
+#include <ESPDash.h>
+
+/* Your WiFi Credentials */
+const char* ssid = "";     // SSID
+const char* password = ""; // Password
+
+/* Start Webserver */
+AsyncWebServer server(80);
+
+/* Attach ESP-DASH to AsyncWebServer */
+ESPDash dashboard(server, true);
+
+// Cards
+dash::FeedbackCard feedback(dashboard, "Status", dash::Status::SUCCESS);
+dash::GenericCard genericString(dashboard, "Generic String");
+dash::GenericCard<float> genericFloat(dashboard, "Generic Float");
+dash::GenericCard<int> genericInt(dashboard, "Generic Int");
+dash::HumidityCard<float, 3> hum(dashboard, "Humidity"); // set decimal precision is 3
+dash::ProgressCard<float, 4> progressFloat(dashboard, "Progress Float", 0, 1, "kWh");
+dash::ProgressCard progressInt(dashboard, "Progress Int", 0, 100, "%");
+dash::SliderCard<float, 4> sliderFloatP4(dashboard, "Float Slider (4)", 0, 1, 0.0001f);
+dash::SliderCard<float> sliderFloatP2(dashboard, "Float Slider (2)", 0, 1, 0.01f);
+dash::SliderCard sliderInt(dashboard, "Int Slider", 0, 255, 1, "bits");
+dash::SliderCard<uint32_t> updateDelay(dashboard, "Update Delay", 1000, 20000, 1000, "ms");
+dash::SwitchCard button(dashboard, "Button");
+dash::TemperatureCard temp(dashboard, "Temperature"); // default precision is 2
+
+// Charts
+dash::BarChart<const char*, int> bar(dashboard, "Power Usage (kWh)");
+
+// Custom Statistics
+dash::StatisticValue stat1(dashboard, "Statistic 1");
+dash::StatisticValue<float, 4> stat2(dashboard, "Statistic 2");
+dash::StatisticProvider<uint32_t> statProvider(dashboard, "Statistic Provider");
+
+uint8_t test_status = 0;
+
+/**
+ * Note how we are keeping all the chart data in global scope.
+ */
+// Bar Chart Data
+const char* BarXAxis[] = {"1/4/22", "2/4/22", "3/4/22", "4/4/22", "5/4/22", "6/4/22", "7/4/22", "8/4/22", "9/4/22", "10/4/22", "11/4/22", "12/4/22", "13/4/22", "14/4/22", "15/4/22", "16/4/22", "17/4/22", "18/4/22", "19/4/22", "20/4/22", "21/4/22", "22/4/22", "23/4/22", "24/4/22", "25/4/22", "26/4/22", "27/4/22", "28/4/22", "29/4/22", "30/4/22"};
+int BarYAxis[] = {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0};
+
+unsigned long last_update_millis = 0;
+uint32_t update_delay = 2000;
+
+void setup() {
+  Serial.begin(115200);
+  Serial.println();
+  /* Connect WiFi */
+
+  // WiFi.persistent(false);
+  // WiFi.mode(WIFI_STA);
+  // WiFi.begin(ssid, password);
+  // while (WiFi.status() != WL_CONNECTED) {
+  //   delay(500);
+  //   Serial.print(".");
+  // }
+  // Serial.print("IP Address: ");
+  // Serial.println(WiFi.localIP());
+
+  WiFi.mode(WIFI_AP);
+  WiFi.softAP("esp-captive");
+
+  /* Attach Button Callback */
+  button.onChange([&](bool state) {
+    /* Print our new button value received from dashboard */
+    Serial.println(String("Button Triggered: ") + (state ? "true" : "false"));
+    /* Make sure we update our button's value and send update to dashboard */
+    button.setValue(state);
+    dashboard.refresh(button);
+  });
+
+  // Set Slider Index
+  sliderInt.setIndex(1);
+
+  /* Attach Slider Callback */
+  sliderInt.onChange([&](int value) {
+    /* Print our new slider value received from dashboard */
+    Serial.println("Slider Triggered: " + String(value));
+    /* Make sure we update our slider's value and send update to dashboard */
+    sliderInt.setValue(value);
+    dashboard.refresh(sliderInt);
+  });
+
+  sliderFloatP2.setIndex(2);
+  sliderFloatP2.onChange([&](float value) {
+    Serial.println("Slider Float P2 Triggered: " + String(value));
+    sliderFloatP2.setValue(value);
+    dashboard.refresh(sliderFloatP2);
+  });
+
+  sliderFloatP4.setIndex(3);
+  sliderFloatP4.onChange([&](float value) {
+    Serial.println("Slider Float P4 Triggered: " + String(value, 4));
+    sliderFloatP4.setValue(value);
+    dashboard.refresh(sliderFloatP4);
+  });
+
+  updateDelay.setValue(update_delay);
+  updateDelay.onChange([&](uint32_t value) {
+    update_delay = value;
+    updateDelay.setValue(value);
+    dashboard.refresh(updateDelay);
+  });
+
+  stat1.setValue("Value 1");
+  stat2.setValue(10.0 / 3.0);
+  statProvider.setProvider([]() { return millis(); });
+
+  bar.setX(BarXAxis, 30);
+
+  genericFloat.setValue(10.0 / 3.0); // default rounding is 2
+  genericString.setValue("Hello World!");
+
+  /* Start AsyncWebServer */
+  server.begin();
+
+  server.onNotFound([](AsyncWebServerRequest* request) {
+    request->send(404);
+  });
+}
+
+void loop() {
+  // Update Everything every 2 seconds using millis if connected to WiFi
+  if (millis() - last_update_millis > update_delay && dashboard.hasClient()) {
+    last_update_millis = millis();
+
+    // Randomize Bar Chart YAxis Values ( for demonstration purposes only )
+    for (int i = 0; i < 30; i++) {
+      BarYAxis[i] = (int)random(0, 200);
+    }
+
+    /* Update Chart Y Axis (yaxis_array, array_size) */
+    bar.setY(BarYAxis, 30);
+
+    // Update all cards with random values
+    genericInt.setSymbol(random(0, 2) ? "unit1" : "unit2");
+    genericInt.setValue((int)random(0, 100));
+    temp.setValue(random(0, 100) / 3.0);
+    hum.setValue(random(0, 100) / 3.0);
+
+    progressInt.setValue(random(0, 200));             // if more than max, clamped to max
+    progressFloat.setValue(random(0, 1000) / 2000.0); // if more than max, clamped to max
+
+    sliderInt.setValue(random(0, 200)); // clamped at 255 by max
+    sliderFloatP2.setValue(random(0, 100) / 333.0);
+    sliderFloatP4.setValue(random(0, 100) / 333.0);
+
+    // Loop through statuses
+    if (test_status == 0) {
+      feedback.setFeedback("Success Msg!", dash::Status::SUCCESS);
+      test_status = 1;
+    } else if (test_status == 1) {
+      feedback.setFeedback("Warning Msg!", dash::Status::WARNING);
+      test_status = 2;
+    } else if (test_status == 2) {
+      feedback.setFeedback("Danger Msg!", dash::Status::DANGER);
+      test_status = 3;
+    } else if (test_status == 3) {
+      feedback.setFeedback("Idle Msg!", dash::Status::IDLE);
+      test_status = 0;
+    }
+
+    if (random(0, 2))
+      button.toggle();
+
+    // Get Free Heap
+    Serial.println("Free Heap (Before Update): " + String(ESP.getFreeHeap()));
+    dashboard.sendUpdates();
+    Serial.println("Free Heap (After Update): " + String(ESP.getFreeHeap()));
+  }
+}

platformio.ini

@@ -2,19 +2,25 @@
 lib_dir = .
 ; src_dir = examples/AccessPoint
 ; src_dir = examples/Basic
-src_dir = examples/Benchmark
+; src_dir = examples/Benchmark
+src_dir = examples/Benchmark5
 ; src_dir = examples/Chart
 ; src_dir = examples/Dynamic
 ; src_dir = examples/Interactive
 
 [env]
 framework = arduino
 build_flags = 
+  -std=c++17
+  -std=gnu++17
   -Wall -Wextra
   -D CONFIG_ARDUHAL_LOG_COLORS
   -D CORE_DEBUG_LEVEL=ARDUHAL_LOG_LEVEL_DEBUG
   ; -D DASH_USE_LEGACY_CHART_STORAGE=1
   ; -D DASH_USE_STL_STRING=1
+  ; -D DASH_DEBUG
+build_unflags =
+    -std=gnu++11
 lib_deps = 
   bblanchon/ArduinoJson@^7.2.1
   mathieucarbou/ESPAsyncWebServer@^3.3.23
@@ -28,8 +34,8 @@ board = esp32-s3-devkitc-1
 
 [env:arduino-3]
 platform = https://github.com/pioarduino/platform-espressif32/releases/download/53.03.10-rc1/platform-espressif32.zip
-board = esp32-s3-devkitc-1
-; board = esp32dev
+; board = esp32-s3-devkitc-1
+board = esp32dev
 
 [env:esp8266]
 platform = espressif8266

src/Card.cpp

@@ -1,53 +1,29 @@
 #ifndef __CARD_H
 #define __CARD_H
 
+#include "dash/DashCards.h"
 
-#include <functional>
-#include "Arduino.h"
+#define BUTTON_CARD         dash::Component::Type::CARD_BUTTON
+#define GENERIC_CARD        dash::Component::Type::CARD_GENERIC
+#define HUMIDITY_CARD       dash::Component::Type::CARD_HUMIDITY
+#define PROGRESS_CARD      dash::Component::Type::CARD_PROGRESS
+#define SLIDER_CARD        dash::Component::Type::CARD_SLIDER
+#define STATUS_CARD         dash::Component::Type::CARD_STATUS
+#define TEMPERATURE_CARD    dash::Component::Type::CARD_TEMPERATURE
 
-#include "ESPDash.h"
-#include "ArduinoJson.h"
-
-#ifdef DASH_USE_STL_STRING
-#include <string>
-namespace dash {
-  using string = std::string;
-}
-#else
-namespace dash {
-  using string = String;
-}
-#endif
-
-struct CardNames {
-  int value;
-  const char* type;
-};
-
-// functions defaults to zero (number card)
-enum {
-  GENERIC_CARD,
-  TEMPERATURE_CARD,
-  HUMIDITY_CARD,
-  STATUS_CARD,
-  SLIDER_CARD,
-  BUTTON_CARD,
-  PROGRESS_CARD
-};
-
-// Forward Declaration
-class ESPDash;
+#define DASH_STATUS_IDLE "i"
+#define DASH_STATUS_SUCCESS "s"
+#define DASH_STATUS_WARNING "w"
+#define DASH_STATUS_DANGER "d"
 
 // Card Class
-class Card {
+class [[deprecated("This class is deprecated. Use a dash::Card sub-class instead.")]] Card : public dash::Widget {
   private:
-    ESPDash *_dashboard;
+    ESPDash* _dashboard = nullptr;
 
-    uint32_t _id;
-    const char* _name;
-    int   _type;
-    bool  _changed;
-    enum { INTEGER, FLOAT, STRING } _value_type;
+    enum { INTEGER,
+           FLOAT,
+           STRING } _value_type;
     union alignas(4) {
         float _value_f;
         int _value_i;
@@ -66,30 +42,24 @@ class Card {
         int _value_step;
     };
     dash::string _symbol;
+
     std::function<void(int value)> _callback = nullptr;
     std::function<void(float value)> _callback_f = nullptr;
 
   public:
-    Card(ESPDash *dashboard, const int type, const char* name, const char* symbol = "", const int min = 0, const int max = 0, const int step = 1);
-    Card(ESPDash *dashboard, const int type, const char* name, const char* symbol, const float min, const float max, const float step);
-    void attachCallback(std::function<void(int)> cb);
-    void attachCallbackF(std::function<void(float)> cb);
-    void update(int value);
-    void update(int value, const char* symbol);
-    void update(bool value);
-    void update(bool value, const char* symbol);
-    void update(float value);
-    void update(float value, const char* symbol);
-    void update(const char* value);
-    void update(const char* value, const char* symbol);
-    void update(const dash::string &value);
-    void update(const dash::string &value, const char* symbol);
-    void update(dash::string &&value);
-    void update(dash::string &&value, const char* symbol);
+    Card(ESPDash* dashboard, const dash::Component::Type type, const char* name, const char* symbol = "", const int min = 0, const int max = 0, const int step = 1);
+    Card(ESPDash* dashboard, const dash::Component::Type type, const char* name, const char* symbol, const float min, const float max, const float step);
+    void attachCallback(std::function<void(int)> cb) { _callback = cb; }
+    void attachCallbackF(std::function<void(float)> cb) { _callback_f = cb; }
+    void update(int value, const char* symbol = nullptr);
+    void update(bool value, const char* symbol = nullptr);
+    void update(float value, const char* symbol = nullptr);
+    void update(const char* value, const char* symbol = nullptr);
+    void update(const dash::string& value, const char* symbol = nullptr) { update(value.c_str(), symbol); }
+    void update(dash::string&& value, const char* symbol = nullptr);
+    virtual void toJson(const JsonObject& json, bool onlyChanges) const override;
+    virtual void onEvent(const JsonObject& json) const override;
     ~Card();
-  
-  friend class ESPDash;
 };
 
-
 #endif

src/Card.h

@@ -1,11 +1,7 @@
 #ifndef __CHART_H
 #define __CHART_H
 
-#include <functional>
-#include "Arduino.h"
-
-#include "ESPDash.h"
-#include "ArduinoJson.h"
+#include "dash/DashWidget.h"
 
 #ifndef DASH_USE_LEGACY_CHART_STORAGE
   #define DASH_USE_LEGACY_CHART_STORAGE 0
@@ -15,83 +11,57 @@
   #include <vector>
 #endif
 
-#ifdef DASH_USE_STL_STRING
-#include <string>
-namespace dash {
-  using string = std::string;
-}
-#else
-namespace dash {
-  using string = String;
-}
-#endif
-
-// Default to Line Chart
-enum {
-  BAR_CHART,
-};
-
-struct ChartNames {
-  int value;
-  const char* type;
-};
-
-enum GraphAxisType { INTEGER, FLOAT, CHAR, STRING };
+enum GraphAxisType { INTEGER,
+                     FLOAT,
+                     CHAR,
+                     STRING };
 
-// Forward Declaration
-class ESPDash;
+#define BAR_CHART  dash::Component::Type::CHART_BAR
 
 // Chart Class
-class Chart {
+class [[deprecated("This class is deprecated. Use a dash::Chart sub-class instead.")]] Chart : public dash::Widget {
   private:
-    ESPDash *_dashboard;
-
-    uint32_t _id;
-    const char *_name;
-    int   _type;
-    bool  _x_changed;
-    bool  _y_changed;
+    ESPDash* _dashboard = nullptr;
     GraphAxisType _x_axis_type;
     GraphAxisType _y_axis_type;
 
-    #if DASH_USE_LEGACY_CHART_STORAGE == 1
-      /* X-Axis */
-      std::vector<int> _x_axis_i;
-      std::vector<float> _x_axis_f;
-      std::vector<dash::string> _x_axis_s;
-      /* Y-Axis */
-      std::vector<int> _y_axis_i;
-      std::vector<float> _y_axis_f;
-
-      void emptyXAxisVectors();
-      void emptyYAxisVectors();
-    #else 
-      /* X-Axis */
-      int *_x_axis_i_ptr = nullptr;
-      float *_x_axis_f_ptr = nullptr;
-      const char **_x_axis_char_ptr = nullptr;
-      dash::string *_x_axis_s_ptr = nullptr;
-      unsigned int _x_axis_ptr_size = 0;
-      /* Y-Axis */
-      int *_y_axis_i_ptr = nullptr;
-      float *_y_axis_f_ptr = nullptr;
-      unsigned int _y_axis_ptr_size = 0;
-
-      void clearXAxisPointers();
-      void clearYAxisPointers();
-    #endif
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+    /* X-Axis */
+    std::vector<int> _x_axis_i;
+    std::vector<float> _x_axis_f;
+    std::vector<dash::string> _x_axis_s;
+    /* Y-Axis */
+    std::vector<int> _y_axis_i;
+    std::vector<float> _y_axis_f;
+
+    void emptyXAxisVectors();
+    void emptyYAxisVectors();
+#else
+    /* X-Axis */
+    int* _x_axis_i_ptr = nullptr;
+    float* _x_axis_f_ptr = nullptr;
+    const char** _x_axis_char_ptr = nullptr;
+    dash::string* _x_axis_s_ptr = nullptr;
+    unsigned int _x_axis_ptr_size = 0;
+    /* Y-Axis */
+    int* _y_axis_i_ptr = nullptr;
+    float* _y_axis_f_ptr = nullptr;
+    unsigned int _y_axis_ptr_size = 0;
+
+    void clearXAxisPointers();
+    void clearYAxisPointers();
+#endif
 
   public:
-    Chart(ESPDash *dashboard, const int type, const char* name);
+    Chart(ESPDash* dashboard, const dash::Component::Type type, const char* name) : dash::Widget(*dashboard, name, type), _dashboard(dashboard) {}
     void updateX(int arr_x[], size_t x_size);
     void updateX(float arr_x[], size_t x_size);
     void updateX(dash::string arr_x[], size_t x_size);
     void updateX(const char* arr_x[], size_t x_size);
     void updateY(int arr_y[], size_t y_size);
     void updateY(float arr_y[], size_t y_size);
+    virtual void toJson(const JsonObject& json, bool onlyChanges) const override;
     ~Chart();
-
-  friend class ESPDash;
 };
 
 #endif

src/Chart.cpp

@@ -0,0 +1,385 @@
+// This file holds all the deprecated class and method implementations
+
+#include "Card.h"
+#include "Chart.h"
+#include "Statistic.h"
+
+#include "ESPDash.h"
+
+Statistic::~Statistic() { _dashboard->remove(*this); }
+
+/*
+  Chart
+*/
+
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+void Chart::emptyXAxisVectors() {
+  if (!_x_axis_i.empty())
+    _x_axis_i.clear();
+  if (!_x_axis_f.empty())
+    _x_axis_f.clear();
+  if (!_x_axis_s.empty())
+    _x_axis_s.clear();
+}
+
+void Chart::emptyYAxisVectors() {
+  if (!_y_axis_i.empty())
+    _y_axis_i.clear();
+  if (!_y_axis_f.empty())
+    _y_axis_f.clear();
+}
+#else
+void Chart::clearXAxisPointers() {
+  _x_axis_i_ptr = nullptr;
+  _x_axis_f_ptr = nullptr;
+  _x_axis_char_ptr = nullptr;
+  _x_axis_s_ptr = nullptr;
+  _x_axis_ptr_size = 0;
+}
+
+void Chart::clearYAxisPointers() {
+  _y_axis_i_ptr = nullptr;
+  _y_axis_f_ptr = nullptr;
+  _y_axis_ptr_size = 0;
+}
+#endif
+
+void Chart::updateX(int arr_x[], size_t x_size) {
+  _x_axis_type = GraphAxisType::INTEGER;
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+  emptyXAxisVectors();
+  for (int i = 0; i < x_size; i++) {
+    _x_axis_i.push_back(arr_x[i]);
+  }
+#else
+  clearXAxisPointers();
+  _x_axis_i_ptr = arr_x;
+  _x_axis_ptr_size = x_size;
+#endif
+  setChange(Property::AXIS_X);
+}
+
+void Chart::updateX(float arr_x[], size_t x_size) {
+  _x_axis_type = GraphAxisType::FLOAT;
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+  emptyXAxisVectors();
+  for (int i = 0; i < x_size; i++) {
+    _x_axis_f.push_back(arr_x[i]);
+  }
+#else
+  clearXAxisPointers();
+  _x_axis_f_ptr = arr_x;
+  _x_axis_ptr_size = x_size;
+#endif
+  setChange(Property::AXIS_X);
+}
+
+void Chart::updateX(dash::string arr_x[], size_t x_size) {
+  _x_axis_type = GraphAxisType::STRING;
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+  emptyXAxisVectors();
+  for (int i = 0; i < x_size; i++) {
+    _x_axis_s.push_back(arr_x[i].c_str());
+  }
+#else
+  clearXAxisPointers();
+  _x_axis_s_ptr = arr_x;
+  _x_axis_ptr_size = x_size;
+#endif
+  setChange(Property::AXIS_X);
+}
+
+void Chart::updateX(const char* arr_x[], size_t x_size) {
+  _x_axis_type = GraphAxisType::CHAR;
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+  emptyXAxisVectors();
+  for (int i = 0; i < x_size; i++) {
+    _x_axis_s.push_back(arr_x[i]);
+  }
+#else
+  clearXAxisPointers();
+  _x_axis_char_ptr = arr_x;
+  _x_axis_ptr_size = x_size;
+#endif
+  setChange(Property::AXIS_X);
+}
+
+void Chart::updateY(int arr_y[], size_t y_size) {
+  _y_axis_type = GraphAxisType::INTEGER;
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+  emptyYAxisVectors();
+  for (int i = 0; i < y_size; i++) {
+    _y_axis_i.push_back(arr_y[i]);
+  }
+#else
+  clearYAxisPointers();
+  _y_axis_i_ptr = arr_y;
+  _y_axis_ptr_size = y_size;
+#endif
+  setChange(Property::AXIS_Y);
+}
+
+void Chart::updateY(float arr_y[], size_t y_size) {
+  _y_axis_type = GraphAxisType::FLOAT;
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+  emptyYAxisVectors();
+  for (int i = 0; i < y_size; i++) {
+    _y_axis_f.push_back(arr_y[i]);
+  }
+#else
+  clearYAxisPointers();
+  _y_axis_f_ptr = arr_y;
+  _y_axis_ptr_size = y_size;
+#endif
+  setChange(Property::AXIS_Y);
+}
+
+void Chart::toJson(const JsonObject& json, bool onlyChanges) const {
+  dash::Widget::toJson(json, onlyChanges);
+
+  if (!onlyChanges || hasChanged(Property::AXIS_X)) {
+    JsonArray xAxis = json["x"].to<JsonArray>();
+    switch (_x_axis_type) {
+      case GraphAxisType::INTEGER:
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+        for (int i = 0; i < _x_axis_i.size(); i++)
+          xAxis.add(_x_axis_i[i]);
+#else
+        if (_x_axis_i_ptr != nullptr) {
+          for (unsigned int i = 0; i < _x_axis_ptr_size; i++)
+            xAxis.add(_x_axis_i_ptr[i]);
+        }
+#endif
+        break;
+      case GraphAxisType::FLOAT:
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+        for (int i = 0; i < _x_axis_f.size(); i++)
+          xAxis.add(_x_axis_f[i]);
+#else
+        if (_x_axis_f_ptr != nullptr) {
+          for (unsigned int i = 0; i < _x_axis_ptr_size; i++)
+            xAxis.add(_x_axis_f_ptr[i]);
+        }
+#endif
+        break;
+      case GraphAxisType::CHAR:
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+        for (int i = 0; i < _x_axis_s.size(); i++)
+          xAxis.add(_x_axis_s[i].c_str());
+#else
+        if (_x_axis_char_ptr != nullptr) {
+          for (unsigned int i = 0; i < _x_axis_ptr_size; i++)
+            xAxis.add(_x_axis_char_ptr[i]);
+        }
+#endif
+        break;
+      case GraphAxisType::STRING:
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+        for (int i = 0; i < _x_axis_s.size(); i++)
+          xAxis.add(_x_axis_s[i].c_str());
+#else
+        if (_x_axis_s_ptr != nullptr) {
+          for (unsigned int i = 0; i < _x_axis_ptr_size; i++)
+            xAxis.add(_x_axis_s_ptr[i]);
+        }
+#endif
+        break;
+      default:
+        // blank value
+        break;
+    }
+  }
+
+  if (!onlyChanges || hasChanged(Property::AXIS_Y)) {
+    JsonArray yAxis = json["y"].to<JsonArray>();
+    switch (_y_axis_type) {
+      case GraphAxisType::INTEGER:
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+        for (int i = 0; i < _y_axis_i.size(); i++)
+          yAxis.add(_y_axis_i[i]);
+#else
+        if (_y_axis_i_ptr != nullptr) {
+          for (unsigned int i = 0; i < _y_axis_ptr_size; i++)
+            yAxis.add(_y_axis_i_ptr[i]);
+        }
+#endif
+        break;
+      case GraphAxisType::FLOAT:
+#if DASH_USE_LEGACY_CHART_STORAGE == 1
+        for (int i = 0; i < _y_axis_f.size(); i++)
+          yAxis.add(_y_axis_f[i]);
+#else
+        if (_y_axis_f_ptr != nullptr) {
+          for (unsigned int i = 0; i < _y_axis_ptr_size; i++)
+            yAxis.add(_y_axis_f_ptr[i]);
+        }
+#endif
+        break;
+      default:
+        // blank value
+        break;
+    }
+  }
+}
+
+Chart::~Chart() {
+  _dashboard->remove(*this);
+}
+
+/*
+  Card
+*/
+
+Card::Card(ESPDash* dashboard, const dash::Component::Type type, const char* name, const char* symbol, const int min, const int max, const int step) : dash::Widget(*dashboard, name, type), _dashboard(dashboard) {
+  _symbol = symbol ? symbol : "";
+  _value_min = min;
+  _value_max = max;
+  _value_step = step;
+  setIndex(255);
+  _value_type = Card::INTEGER;
+}
+
+Card::Card(ESPDash* dashboard, const dash::Component::Type type, const char* name, const char* symbol, const float min, const float max, const float step) : dash::Widget(*dashboard, name, type), _dashboard(dashboard) {
+  _symbol = symbol ? symbol : "";
+  _value_min_f = min;
+  _value_max_f = max;
+  _value_step_f = step;
+  setIndex(255);
+  _value_type = Card::FLOAT;
+}
+
+void Card::update(int value, const char* symbol) {
+  if (_value_type == Card::STRING) {
+    _value_s = "";
+  }
+  _value_type = Card::INTEGER;
+  if (_value_i != value) {
+    _value_i = value;
+    setChange(Property::VALUE);
+  }
+  if (symbol && _symbol != symbol) {
+    _symbol = symbol;
+    setChange(Property::SYMBOL);
+  }
+}
+
+void Card::update(float value, const char* symbol) {
+  if (_value_type == Card::STRING) {
+    _value_s = "";
+  }
+  _value_type = Card::FLOAT;
+  if (_value_f != value) {
+    _value_f = value;
+    setChange(Property::VALUE);
+  }
+  if (symbol && _symbol != symbol) {
+    _symbol = symbol;
+    setChange(Property::SYMBOL);
+  }
+}
+
+void Card::update(const char* value, const char* symbol) {
+  if (_value_type == Card::STRING) {
+    if (_value_s != value) {
+      _value_s = value;
+      setChange(Property::VALUE);
+    }
+  }
+  _value_type = Card::STRING;
+  if (symbol && _symbol != symbol) {
+    _symbol = symbol;
+    setChange(Property::SYMBOL);
+  }
+}
+
+void Card::update(dash::string&& value, const char* symbol) {
+  if (_value_type == Card::STRING) {
+    if (_value_s != value)
+      _value_s = std::move(value);
+    setChange(Property::VALUE);
+  }
+  _value_type = Card::STRING;
+  if (symbol && _symbol != symbol) {
+    _symbol = symbol;
+    setChange(Property::SYMBOL);
+  }
+}
+
+void Card::update(bool value, const char* symbol) {
+  if (_value_type == Card::STRING) {
+    _value_s = "";
+  }
+  _value_type = Card::INTEGER;
+  if (_value_i != value) {
+    _value_i = value;
+    setChange(Property::VALUE);
+  }
+  if (symbol && _symbol != symbol) {
+    _symbol = symbol;
+    setChange(Property::SYMBOL);
+  }
+}
+
+void Card::toJson(const JsonObject& json, bool onlyChanges) const {
+  dash::Widget::toJson(json, onlyChanges);
+
+  if (!onlyChanges) {
+    // Don't add useless values to cards which don't require them
+    dash::Component::Type type = dash::Widget::type();
+    if (type == SLIDER_CARD || type == PROGRESS_CARD) {
+      if (_value_type == Card::FLOAT) {
+        json["min"] = String(_value_min_f, 2);
+        json["max"] = String(_value_max_f, 2);
+        json["step"] = String(_value_step_f, 2);
+      } else {
+        json["min"] = _value_min;
+        json["max"] = _value_max;
+        if (_value_step != 1)
+          json["step"] = _value_step;
+      }
+    }
+  }
+
+  if (!onlyChanges || hasChanged(Property::SYMBOL))
+    json["s"] = _symbol;
+
+  if (!onlyChanges || hasChanged(Property::VALUE)) {
+    switch (_value_type) {
+      case Card::INTEGER:
+        json["v"] = _value_i;
+        break;
+      case Card::FLOAT:
+        json["v"] = String(_value_f, 2);
+        break;
+      case Card::STRING:
+        if (_value_s.length()) {
+          json["v"] = _value_s;
+        }
+        break;
+      default:
+        // blank value
+        break;
+    }
+  }
+}
+
+void Card::onEvent(const JsonObject& json) const {
+  if (_callback && json["command"] == "button:clicked") {
+    _callback(json["value"].as<int>());
+    return;
+  }
+
+  if (_callback_f && _value_type == Card::FLOAT && json["command"] == "slider:changed") {
+    _callback_f(json["value"].as<float>());
+    return;
+  }
+
+  if (_callback && json["command"] == "slider:changed") {
+    _callback(json["value"].as<int>());
+    return;
+  }
+}
+
+Card::~Card() {
+  _dashboard->remove(*this);
+}

src/Chart.h

@@ -14,78 +14,39 @@ Github URL: https://github.com/ayushsharma82/ESP-DASH
 #ifndef ESPDash_h
 #define ESPDash_h
 
-#include <functional>
-#include <stdint.h>
-#include <stdlib.h>
-#include <string.h>
-
 #include "Arduino.h"
-#include "stdlib_noniso.h"
 #include "dash_webpage.h"
+#include "stdlib_noniso.h"
 
 #if defined(ESP8266)
-    #define DASH_HARDWARE "ESP8266"
-    #include "ESP8266WiFi.h"
-    #include "ESPAsyncTCP.h"
+  #define DASH_HARDWARE "ESP8266"
+  #include "ESP8266WiFi.h"
+  #include "ESPAsyncTCP.h"
 #elif defined(ESP32)
-    #define DASH_HARDWARE "ESP32"
-    #include "WiFi.h"
-    #include "AsyncTCP.h"
+  #define DASH_HARDWARE "ESP32"
+  #include "AsyncTCP.h"
+  #include "WiFi.h"
 #endif
 
-#define DASH_STATUS_IDLE "i"
-#define DASH_STATUS_SUCCESS "s"
-#define DASH_STATUS_WARNING "w"
-#define DASH_STATUS_DANGER "d"
-
-#include "ESPAsyncWebServer.h"
 #include "ArduinoJson.h"
+#include "ESPAsyncWebServer.h"
+
+#include "dash/DashDefines.h"
+#include "dash/DashCards.h"
+#include "dash/DashCharts.h"
+#include "dash/DashComponent.h"
+#include "dash/DashStatistics.h"
+#include "dash/DashWidget.h"
+
+// deprecated classes, still there for backward compatibility
 #include "Card.h"
 #include "Chart.h"
 #include "Statistic.h"
 
-#include <vector>
-
-// If DASH_JSON_SIZE is set to a value, ESP-DASH will frequently measure the Json payload to make sure it remains within this size.
-// If the Json payload to send is larger, the payload will be split in several parts and sent in multiple messages.
-//
-// When this value is set:
-// - it should not be too large to avoid sending a big message, which takes longer to send and to build because of the frequent json size measurements. 4096 and 8192 are good values for large dashboards.
-// - it should not be too small to avoid sending too many messages, which can slow down the dashboard rendering and fill the websocket message queue. 2048 is a good minimum value.
-//
-// When using ArduinoJson 7, you can set this value to 0 (by default) to disable the websocket message fragmentation in smaller parts and to disable the measurements, to improve performance.
-// This will speed up the rendering, at the expense of risking to exhaust the heap in the case of large dashboard.
-// To workaround that, when using DASH_JSON_SIZE == 0 with ArduinoJson 7, you can also set DASH_MIN_FREE_HEAP to a value which is more than the size of the biggest payload for your dashboard.
-// For example, if your app is big and has a payload sie of 12kb, then you can set DASH_MIN_FREE_HEAP to 16384 (16kb) to make sure the heap is never exhausted.
-// When DASH_MIN_FREE_HEAP is set to a value, you instruct ESP-DASH to check the free heap to make sure there is enough heap to send the payload.
-//
-// In summary:
-//
-// - With ArduinoJson 6: DASH_JSON_SIZE should be set to a value greater than 0 and fragmentation is used.
-// - With ArduinoJson 7: DASH_JSON_SIZE can be set to 0 to disable the fragmentation and the measurements, at the risk of going out of heap. This option gives the best performance but you need to make sure to have enough heap in case your application is large.
-// - With ArduinoJson 7: if DASH_JSON_SIZE is set to 0 and DASH_MIN_FREE_HEAP is set to a value greater than 0, heap will be checked before sending the payload and fragmentation will trigger if not enough heap..
-// - DASH_MIN_FREE_HEAP will have no effect is DASH_JSON_SIZE is not set to 0
-// 
-// To help you decide, you can uncomment line 543 in the cpp which will display the free heap size and teh required heap size to build the websocket message.
-// ESP_LOGW("ESPDash", "Required Heap size to build WebSocket message: %d bytes. Free Heap: %" PRIu32 " bytes", len, ESP.getFreeHeap());
+// Controls the payload size: as soon as the payload size reaches this value, the payload is sent to the client
+// This allows to split in batches the payload to avoid sending too large payloads at once
 #ifndef DASH_JSON_SIZE
-#if ARDUINOJSON_VERSION_MAJOR == 6 && !defined(DASH_JSON_DOCUMENT_ALLOCATION)
-#define DASH_JSON_SIZE 2048
-#else
-#define DASH_JSON_SIZE 0
-#endif // ARDUINOJSON_VERSION_MAJOR == 6 && !defined(DASH_JSON_DOCUMENT_ALLOCATION)
-#endif // DASH_JSON_SIZE
-
-// Only for ArduinoJson 7
-#ifndef DASH_MIN_FREE_HEAP
-#define DASH_MIN_FREE_HEAP 0
-#endif
-
-#if ARDUINOJSON_VERSION_MAJOR == 6 && !defined(DASH_JSON_DOCUMENT_ALLOCATION)
-#if DASH_JSON_SIZE == 0
-#error "DASH_JSON_SIZE must be set to a value greater than 0 when using ArduinoJson 6"
-#endif
-#define DASH_JSON_DOCUMENT_ALLOCATION DASH_JSON_SIZE * 3
+  #define DASH_JSON_SIZE 2048
 #endif
 
 #ifndef DASH_USE_LEGACY_CHART_STORAGE
@@ -96,13 +57,8 @@ Github URL: https://github.com/ayushsharma82/ESP-DASH
   #define DASH_MAX_WS_CLIENTS DEFAULT_MAX_WS_CLIENTS
 #endif
 
-// Forward Declaration
-class Card;
-class Chart;
-class Statistic;
-
 // ESPDASH Class
-class ESPDash{
+class ESPDash {
   public:
     // changes_only: true (equivalent to sendUpdates(false)) - when sending updates to the client
     // changes_only: false (equivalent to sendUpdates(true)) - when sending the entire layout to the client or when forcing a full update
@@ -112,10 +68,8 @@ class ESPDash{
     AsyncWebServer* _server = nullptr;
     AsyncWebSocket* _ws = nullptr;
 
-    std::vector<Card*> cards;
-    std::vector<Chart*> charts;
-    std::vector<Statistic*> statistics;
-    bool default_stats_enabled = false;
+    std::list<dash::Component*> _components;      // all components
+    std::list<dash::Component*> _componentsOwned; // components created by ESPDash (like statistics), which should be deleted in the destructor
     bool basic_auth = false;
     dash::string username;
     dash::string password;
@@ -125,49 +79,34 @@ class ESPDash{
     volatile bool _asyncAccessInProgress = false;
 
     // Generate layout json
-    void generateLayoutJSON(AsyncWebSocketClient* client, bool changes_only = false, Card* onlyCard = nullptr, Chart* onlyChart = nullptr);
+    void generateLayoutJSON(AsyncWebSocketClient* client, bool changes_only, const dash::Component* onlyComponent);
+    size_t generateLayoutJSON(AsyncWebSocketClient* client, bool changes_only, const dash::Component* onlyComponent, JsonDocument& doc, dash::Component::Family family);
     void send(AsyncWebSocketClient* client, JsonDocument& doc);
-    bool overflowed(JsonDocument& doc);
 
-    // Generate Component JSON
-    void generateComponentJSON(JsonObject& obj, Card* card, bool change_only = false);
-    void generateComponentJSON(JsonObject& obj, Chart* chart, bool change_only = false);
+    static const char* jsonKey(const dash::Component* c) { return jsonKey(c->family()); }
+    static const char* jsonKey(dash::Component::Family family);
 
   public:
-    ESPDash(AsyncWebServer* server, const char* uri, bool enable_default_stats = true);
-    ESPDash(AsyncWebServer* server, bool enable_default_stats);
-    ESPDash(AsyncWebServer* server);
+    ESPDash(AsyncWebServer& server, const char* uri, bool enable_default_stats);
+    ESPDash(AsyncWebServer& server, bool enable_default_stats) : ESPDash(server, "/", enable_default_stats) {}
+    ESPDash(AsyncWebServer& server) : ESPDash(server, "/", true) {}
 
     // Set Authentication
     void setAuthentication(const char* user, const char* pass);
-    void setAuthentication(const dash::string &user, const dash::string &pass);
+    void setAuthentication(const dash::string& user, const dash::string& pass) { setAuthentication(user.c_str(), pass.c_str()); }
 
-    // Add Card
-    void add(Card *card);
-    // Remove Card
-    void remove(Card *card);
-
-    // Add Chart
-    void add(Chart *card);
-    // Remove Chart
-    void remove(Chart *card);
-
-    // Add Statistic
-    void add(Statistic *statistic);
-    // Remove Statistic
-    void remove(Statistic *statistic);
+    // Add a component to the dashboard and return true if the component was added, false if the component ID was already present
+    bool add(dash::Component& component);
+    void remove(dash::Component& component);
 
     // Notify client side to update values
     void sendUpdates(bool force = false);
     void refreshLayout() { sendUpdates(true); }
-    void refreshCard(Card *card);
-    void refreshChart(Chart* chart);
+    void refresh(const dash::Component& component);
 
-    uint32_t nextId();
+    bool hasClient() { return _ws->count() > 0; }
 
-    bool hasClient();
-
-    // can be used to check if the async_http task might currently access the cards data, 
+    // can be used to check if the async_http task might currently access the cards data,
     // in which case you should not modify them
     bool isAsyncAccessInProgress() { return _asyncAccessInProgress; }
 
@@ -178,6 +117,33 @@ class ESPDash{
     void onBeforeUpdate(BeforeUpdateCallback callback) { _beforeUpdateCallback = callback; }
 
     ~ESPDash();
+
+    // deprecations
+#pragma GCC diagnostic push
+#pragma GCC diagnostic ignored "-Wdeprecated-declarations"
+    [[deprecated("use ESPDash(AsyncWebServer&, const char*, bool) instead")]]
+    ESPDash(AsyncWebServer* server, const char* uri, bool enable_default_stats) : ESPDash(*server, uri, enable_default_stats) {}
+    [[deprecated("use ESPDash(AsyncWebServer&, bool) instead")]]
+    ESPDash(AsyncWebServer* server, bool enable_default_stats) : ESPDash(*server, enable_default_stats) {}
+    [[deprecated("use ESPDash(AsyncWebServer&) instead")]]
+    ESPDash(AsyncWebServer* server) : ESPDash(*server) {}
+    [[deprecated("use add(dash::Component&) instead")]]
+    void add(Card* card) { add(*card); }
+    [[deprecated("use remove(dash::Component&) instead")]]
+    void remove(Card* card) { remove(*card); }
+    [[deprecated("use add(dash::Component&) instead")]]
+    void add(Chart* chart) { add(*chart); }
+    [[deprecated("use remove(dash::Component&) instead")]]
+    void remove(Chart* chart) { remove(*chart); }
+    [[deprecated("use add(dash::Component&) instead")]]
+    void add(Statistic* statistic) { add(*statistic); }
+    [[deprecated("use remove(dash::Component&) instead")]]
+    void remove(Statistic* statistic) { remove(*statistic); }
+    [[deprecated("use refresh(dash::Component&) instead")]]
+    void refreshCard(Card* card) { refresh(*card); }
+    [[deprecated("use refresh(dash::Component&) instead")]]
+    void refreshChart(Chart* chart) { refresh(*chart); }
+#pragma GCC diagnostic pop
 };
 
 #endif

src/DashDeprecations.cpp

@@ -1,42 +1,18 @@
 #ifndef __STAT_H
 #define __STAT_H
 
-#include <functional>
-#include "Arduino.h"
-
-#include "ESPDash.h"
-#include "ArduinoJson.h"
-
-#ifdef DASH_USE_STL_STRING
-#include <string>
-namespace dash {
-  using string = std::string;
-}
-#else
-namespace dash {
-  using string = String;
-}
-#endif
-
-// Forward Declaration
-class ESPDash;
-
-class Statistic {
-    private:
-        ESPDash *_dashboard;
-        uint32_t _id;
-        const char *_key;
-        dash::string _value;
-        bool _changed = false;
-
-    public:
-        Statistic(ESPDash *dashboard, const char *key, const char *value = "");
-        void set(const char *value);
-        void set(const dash::string& value) { set(value.c_str()); }
-        void set(dash::string&& value);
-        ~Statistic();
-
-    friend class ESPDash;
+#include "dash/DashStatistics.h"
+
+class [[deprecated("This class is deprecated. Use dash::StatisticValue instead.")]] Statistic : public dash::StatisticValue<dash::string> {
+  private:
+    ESPDash* _dashboard;
+
+  public:
+    Statistic(ESPDash* dashboard, const char* key, const char* value = "") : dash::StatisticValue<dash::string>(*dashboard, key), _dashboard(dashboard) { set(value); }
+    bool set(const char* value) { return dash::StatisticValue<dash::string>::setValue(dash::string(value)); }
+    void set(const dash::string& value) { set(value.c_str()); }
+    void set(dash::string&& value) { dash::StatisticValue<dash::string>::setValue(std::move(value)); }
+    ~Statistic();
 };
 
 #endif

src/ESPDash.cpp

@@ -0,0 +1,379 @@
+#pragma once
+
+#include "DashWidget.h"
+
+namespace dash {
+  enum class Status {
+    NONE,
+    IDLE,
+    SUCCESS,
+    WARNING,
+    DANGER,
+  };
+
+  // this is the base class for all cards
+  class Card : public Widget {
+    public:
+      virtual ~Card() = default;
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        Widget::toJson(json, onlyChanges);
+      }
+
+    protected:
+      // construct a new card and add it to the dashboard
+      Card(ESPDash& dashboard, const char* name, Type type) : Widget(dashboard, name, type) {
+        setIndex(255);
+      }
+      // construct a new card without adding it to any dashboard
+      Card(const char* name, Type type) : Widget(name, type) {
+        setIndex(255);
+      }
+
+      // status names
+      static const char* _statusName(Status status) {
+        switch (status) {
+          case Status::NONE:
+            return "";
+          case Status::IDLE:
+            return "i";
+          case Status::SUCCESS:
+            return "s";
+          case Status::WARNING:
+            return "w";
+          case Status::DANGER:
+            return "d";
+          default:
+            assert(false);
+            return "";
+        }
+      }
+  };
+
+  // this is a card holding a value
+  template <typename T, uint8_t Precision = 2>
+  class ValueCard : public Card {
+    public:
+      virtual ~ValueCard() = default;
+
+      bool hasValue() const { return _value.has_value(); }
+      const T& value() const { return _value.value(); }
+      const std::optional<T>& optional() const { return _value; }
+
+      virtual bool setValue(const T& value) {
+        if (_value == value)
+          return false;
+        _value = value;
+        setChange(Property::VALUE);
+        return true;
+      }
+
+      virtual bool setValue(T&& value) {
+        if (_value == value)
+          return false;
+        _value = std::forward<T>(value);
+        setChange(Property::VALUE);
+        return true;
+      }
+
+      virtual bool setOptionalValue(const std::optional<T>& value) {
+        return value.has_value() ? setValue(value.value()) : removeValue();
+      }
+
+      virtual bool setOptionalValue(std::optional<T>&& value) {
+        return value.has_value() ? setValue(value.value()) : removeValue();
+      }
+
+      virtual bool removeValue() {
+        if (!_value.has_value())
+          return false;
+        _value.reset();
+        setChange(Property::VALUE);
+        return true;
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        Card::toJson(json, onlyChanges);
+        if (!onlyChanges || hasChanged(Property::VALUE)) {
+          if (_value.has_value())
+            toJsonValue<T, Precision>(json["v"].to<JsonVariant>(), _value.value());
+          else
+            json["v"] = "";
+        }
+      }
+
+    protected:
+      ValueCard(ESPDash& dashboard, const char* name, Type type) : Card(dashboard, name, type) {}
+      ValueCard(const char* name, Type type) : Card(name, type) {}
+
+    private:
+      std::optional<T> _value;
+  };
+
+  // generic card
+  template <typename T = dash::string, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T> || std::is_same_v<T, dash::string> || std::is_same_v<T, const char*>, bool> = true>
+  class GenericCard : public ValueCard<T, Precision> {
+    public:
+      GenericCard(ESPDash& dashboard, const char* name, const char* symbol = "") : ValueCard<T, Precision>(dashboard, name, Component::Type::CARD_GENERIC), _symbol(symbol) {}
+      GenericCard(const char* name, const char* symbol = "") : ValueCard<T, Precision>(name, Component::Type::CARD_GENERIC), _symbol(symbol) {}
+      virtual ~GenericCard() = default;
+
+      const char* symbol() const { return _symbol; }
+
+      bool setSymbol(const char* symbol) {
+        if (strcmp(_symbol, symbol) == 0)
+          return false;
+        _symbol = symbol;
+        ValueCard<T, Precision>::setChange(dash::Component::Property::SYMBOL);
+        return true;
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        ValueCard<T, Precision>::toJson(json, onlyChanges);
+        if (!onlyChanges || ValueCard<T, Precision>::hasChanged(dash::Component::Property::SYMBOL))
+          json["s"] = _symbol;
+      }
+
+    private:
+      const char* _symbol;
+  };
+
+  // temperature card
+  template <typename T = float, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T>, bool> = true>
+  class TemperatureCard : public ValueCard<float, Precision> {
+    public:
+      TemperatureCard(ESPDash& dashboard, const char* name, const char* unit = "°C") : ValueCard<T, Precision>(dashboard, name, dash::Component::Type::CARD_TEMPERATURE), _unit(unit) {}
+      TemperatureCard(const char* name, const char* unit = "°C") : ValueCard<T, Precision>(name, dash::Component::Type::CARD_TEMPERATURE), _unit(unit) {}
+
+      const char* unit() const { return _unit; }
+
+      bool setUnit(const char* unit) {
+        if (strcmp(_unit, unit) == 0)
+          return false;
+        _unit = unit;
+        ValueCard<T, Precision>::setChange(dash::Component::Property::SYMBOL);
+        return true;
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        ValueCard<T, Precision>::toJson(json, onlyChanges);
+        if (!onlyChanges || ValueCard<T, Precision>::hasChanged(dash::Component::Property::SYMBOL))
+          json["s"] = _unit;
+      }
+
+    private:
+      const char* _unit;
+  };
+
+  // humidity card
+  template <typename T = float, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T>, bool> = true>
+  class HumidityCard : public ValueCard<T, Precision> {
+    public:
+      HumidityCard(ESPDash& dashboard, const char* name, const char* unit = "%") : ValueCard<T, Precision>(dashboard, name, dash::Component::Type::CARD_HUMIDITY), _unit(unit) {}
+      HumidityCard(const char* name, const char* unit = "%") : ValueCard<T, Precision>(name, dash::Component::Type::CARD_HUMIDITY), _unit(unit) {}
+
+      const char* unit() const { return _unit; }
+
+      bool setUnit(const char* unit) {
+        if (strcmp(_unit, unit) == 0)
+          return false;
+        _unit = unit;
+        ValueCard<T, Precision>::setChange(dash::Component::Property::SYMBOL);
+        return true;
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        ValueCard<T, Precision>::toJson(json, onlyChanges);
+        if (!onlyChanges || ValueCard<T, Precision>::hasChanged(dash::Component::Property::SYMBOL))
+          json["s"] = _unit;
+      }
+
+    private:
+      const char* _unit;
+  };
+
+  // feedback card
+  template <typename T = dash::string, std::enable_if_t<std::is_same_v<T, dash::string> || std::is_same_v<T, const char*>, bool> = true>
+  class FeedbackCard : public ValueCard<T> {
+    public:
+      FeedbackCard(ESPDash& dashboard, const char* name, Status initialStatus = Status::NONE, const char* initialMessage = "") : ValueCard<T>(dashboard, name, dash::Component::Type::CARD_STATUS), _status(initialStatus) {
+        setMessage(initialMessage);
+      }
+      FeedbackCard(const char* name, Status initialStatus = Status::NONE, const char* initialMessage = "") : ValueCard<T>(name, dash::Component::Type::CARD_STATUS), _status(initialStatus) {
+        setMessage(initialMessage);
+      }
+      virtual ~FeedbackCard() = default;
+
+      Status status() const { return _status; }
+
+      bool setStatus(Status status) {
+        if (_status == status)
+          return false;
+        _status = status;
+        ValueCard<T>::setChange(Component::Property::SYMBOL);
+        return true;
+      }
+
+      bool setMessage(const char* message) { return ValueCard<T>::setValue(message); }
+
+      bool setFeedback(const T& message, Status status) { return setStatus(status) | ValueCard<T>::setValue(message); }
+      bool setFeedback(T&& message, Status status) { return setStatus(status) | ValueCard<T>::setValue(std::move(message)); }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        ValueCard<T>::toJson(json, onlyChanges);
+        if (!onlyChanges || ValueCard<T>::hasChanged(Component::Property::SYMBOL))
+          json["s"] = Card::_statusName(_status);
+      }
+
+    private:
+      Status _status;
+  };
+
+  // switch card
+  class SwitchCard : public ValueCard<bool> {
+    public:
+      SwitchCard(ESPDash& dashboard, const char* name) : ValueCard<bool>(dashboard, name, dash::Component::Type::CARD_BUTTON) {}
+      SwitchCard(const char* name) : ValueCard<bool>(name, dash::Component::Type::CARD_BUTTON) {}
+      virtual ~SwitchCard() = default;
+
+      bool toggle() { return ValueCard<bool>::setValue(!ValueCard<bool>::optional().value_or(false)); }
+      bool on() { return ValueCard<bool>::setValue(true); }
+      bool off() { return ValueCard<bool>::setValue(false); }
+
+      void onChange(std::function<void(bool state)> callback) { _callback = callback; }
+
+      void onEvent(const JsonObject& json) const override {
+        if (_callback)
+          _callback(json["value"].as<bool>());
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        ValueCard<bool>::toJson(json, onlyChanges);
+        if (!onlyChanges || hasChanged(Property::VALUE))
+          json["v"] = optional().value_or(false) ? 1 : 0;
+      }
+
+    private:
+      std::function<void(bool state)> _callback = nullptr;
+  };
+
+  // progress card
+  template <typename T = int, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T>, bool> = true>
+  class ProgressCard : public ValueCard<T, Precision> {
+    public:
+      ProgressCard(ESPDash& dashboard, const char* name, T minValue, T maxValue, const char* unit = "") : ProgressCard(dashboard, name, dash::Component::Type::CARD_PROGRESS, minValue, maxValue, unit) {}
+      ProgressCard(const char* name, T minValue, T maxValue, const char* unit = "") : ProgressCard(name, dash::Component::Type::CARD_PROGRESS, minValue, maxValue, unit) {}
+      virtual ~ProgressCard() = default;
+
+      T min() const { return _minValue; }
+      T max() const { return _maxValue; }
+      const char* unit() const { return _unit; }
+
+      bool setUnit(const char* unit) {
+        if (strcmp(_unit, unit) == 0)
+          return false;
+        _unit = unit;
+        ValueCard<T, Precision>::setChange(dash::Component::Property::SYMBOL);
+        return true;
+      }
+
+      bool setMin(T minValue) {
+        if (_minValue == minValue)
+          return false;
+        _minValue = minValue;
+        ValueCard<T, Precision>::setChange(dash::Component::Property::MIN);
+        if (ValueCard<T, Precision>::hasValue() && ValueCard<T, Precision>::value() < _minValue)
+          ValueCard<T, Precision>::setValue(_minValue);
+        return true;
+      }
+
+      bool setMax(T maxValue) {
+        if (_maxValue == maxValue)
+          return false;
+        _maxValue = maxValue;
+        ValueCard<T, Precision>::setChange(dash::Component::Property::MAX);
+        if (ValueCard<T, Precision>::hasValue() && ValueCard<T, Precision>::value() > _maxValue)
+          ValueCard<T, Precision>::setValue(_maxValue);
+        return true;
+      }
+
+      virtual bool setValue(const T& value) override {
+        if (value < _minValue)
+          return ValueCard<T, Precision>::setValue(_minValue);
+        if (value > _maxValue)
+          return ValueCard<T, Precision>::setValue(_maxValue);
+        return ValueCard<T, Precision>::setValue(value);
+      }
+
+      virtual bool setValue(T&& value) override {
+        if (value < _minValue)
+          return ValueCard<T, Precision>::setValue(_minValue);
+        if (value > _maxValue)
+          return ValueCard<T, Precision>::setValue(_maxValue);
+        return ValueCard<T, Precision>::setValue(std::forward<T>(value));
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        ValueCard<T, Precision>::toJson(json, onlyChanges);
+        if (!onlyChanges || ValueCard<T, Precision>::hasChanged(dash::Component::Property::SYMBOL))
+          json["s"] = _unit;
+        if (!onlyChanges || ValueCard<T, Precision>::hasChanged(dash::Component::Property::MIN))
+          dash::toJsonValue<T, Precision>(json["min"].to<JsonVariant>(), _minValue);
+        if (!onlyChanges || ValueCard<T, Precision>::hasChanged(dash::Component::Property::MAX))
+          dash::toJsonValue<T, Precision>(json["max"].to<JsonVariant>(), _maxValue);
+      }
+
+    protected:
+      ProgressCard(ESPDash& dashboard, const char* name, dash::Component::Type type, T minValue, T maxValue, const char* unit = "") : ValueCard<T, Precision>(dashboard, name, type), _minValue(minValue), _maxValue(maxValue), _unit(unit) {}
+      ProgressCard(const char* name, dash::Component::Type type, T minValue, T maxValue, const char* unit = "") : ValueCard<T, Precision>(name, type), _minValue(minValue), _maxValue(maxValue), _unit(unit) {}
+
+    private:
+      T _minValue;
+      T _maxValue;
+      const char* _unit;
+  };
+
+  // slider card
+  template <typename T = int, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T>, bool> = true>
+  class SliderCard : public ProgressCard<T, Precision> {
+    public:
+      SliderCard(ESPDash& dashboard, const char* name, T minValue, T maxValue, T step, const char* unit = "") : ProgressCard<T, Precision>(dashboard, name, dash::Component::Type::CARD_SLIDER, minValue, maxValue, unit), _step(step) {}
+      SliderCard(const char* name, T minValue, T maxValue, T step, const char* unit = "") : ProgressCard<T, Precision>(name, dash::Component::Type::CARD_SLIDER, minValue, maxValue, unit), _step(step) {}
+      virtual ~SliderCard() = default;
+
+      T step() const { return _step; }
+
+      bool setStep(T step) {
+        if (_step == step)
+          return false;
+        _step = step;
+        ProgressCard<T, Precision>::setChange(dash::Component::Property::STEP);
+        return true;
+      }
+
+      void onChange(std::function<void(T value)> callback) { _callback = callback; }
+
+      virtual void onEvent(const JsonObject& json) const override {
+        if (_callback)
+          _callback(json["value"].as<T>());
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        ProgressCard<T, Precision>::toJson(json, onlyChanges);
+        if (!onlyChanges || ValueCard<T, Precision>::hasChanged(dash::Component::Property::STEP))
+          dash::toJsonValue<T, Precision>(json["step"].to<JsonVariant>(), _step);
+      }
+
+    private:
+      T _step;
+      std::function<void(T value)> _callback = nullptr;
+  };
+
+  template <typename T = uint8_t, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T>, bool> = true>
+  class PercentageSliderCard : public SliderCard<T> {
+    public:
+      PercentageSliderCard(ESPDash& dashboard, const char* name) : SliderCard<T>(dashboard, name, 0, 100, 1, "%") {}
+      PercentageSliderCard(const char* name) : SliderCard<T>(name, 0, 100, 1, "%") {}
+      virtual ~PercentageSliderCard() = default;
+  };
+} // namespace dash

src/ESPDash.h

@@ -0,0 +1,67 @@
+#pragma once
+
+#include "DashWidget.h"
+
+namespace dash {
+  template <typename X, typename Y, std::enable_if_t<(std::is_integral_v<X> || std::is_floating_point_v<X> || std::is_same_v<X, dash::string> || std::is_same_v<X, const char*>) && (std::is_integral_v<Y> || std::is_floating_point_v<Y>), bool> = true>
+  class Chart : public Widget {
+    public:
+      virtual ~Chart() = default;
+
+      const X* x() const { return _x_axis_i_ptr; }
+      const Y* y() const { return _y_axis_i_ptr; }
+      size_t xSize() const { return _x_axis_ptr_size; }
+      size_t ySize() const { return _y_axis_ptr_size; }
+
+      // set the x-axis values
+      bool setX(X arr_x[], size_t x_size) {
+        _x_axis_i_ptr = arr_x;
+        _x_axis_ptr_size = x_size;
+        setChange(Property::AXIS_X);
+        return true;
+      }
+
+      // set the y-axis values
+      bool setY(Y arr_y[], size_t y_size) {
+        _y_axis_i_ptr = arr_y;
+        _y_axis_ptr_size = y_size;
+        setChange(Property::AXIS_Y);
+        return true;
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        Widget::toJson(json, onlyChanges);
+        if (!onlyChanges || hasChanged(Property::AXIS_X)) {
+          JsonArray xAxis = json["x"].to<JsonArray>();
+          for (size_t i = 0; i < _x_axis_ptr_size; i++)
+            xAxis.add(_x_axis_i_ptr[i]);
+        }
+        if (!onlyChanges || hasChanged(Property::AXIS_Y)) {
+          JsonArray yAxis = json["y"].to<JsonArray>();
+          for (size_t i = 0; i < _y_axis_ptr_size; i++)
+            yAxis.add(_y_axis_i_ptr[i]);
+        }
+      }
+
+    protected:
+      // construct a new chart and add it to the dashboard
+      Chart(ESPDash& dashboard, const char* name, Type type) : Widget(dashboard, name, type) {}
+      // construct a new chart without adding it to any dashboard
+      Chart(const char* name, Type type) : Widget(name, type) {}
+
+    private:
+      X* _x_axis_i_ptr = nullptr;
+      Y* _y_axis_i_ptr = nullptr;
+      size_t _x_axis_ptr_size = 0;
+      size_t _y_axis_ptr_size = 0;
+  };
+
+  // bar chart
+  template <typename X, typename Y, std::enable_if_t<(std::is_integral_v<X> || std::is_floating_point_v<X> || std::is_same_v<X, dash::string> || std::is_same_v<X, const char*>) && (std::is_integral_v<Y> || std::is_floating_point_v<Y>), bool> = true>
+  class BarChart : public Chart<X, Y> {
+    public:
+      BarChart(ESPDash& dashboard, const char* name) : Chart<X, Y>(dashboard, name, Component::Type::CHART_BAR) {}
+      BarChart(const char* name) : Chart<X, Y>(name, Component::Type::CHART_BAR) {}
+      virtual ~BarChart() = default;
+  };
+} // namespace dash

src/Statistic.cpp

@@ -0,0 +1,148 @@
+#pragma once
+
+#include "DashDefines.h"
+
+namespace dash {
+  class Component {
+    public:
+      // general component type
+      enum class Family {
+        CARD,
+        CHART,
+        STATISTIC,
+      };
+
+      // component sub-type
+      enum class Type {
+        // cards
+        CARD_BUTTON,
+        CARD_GENERIC,
+        CARD_HUMIDITY,
+        CARD_PROGRESS,
+        CARD_SLIDER,
+        CARD_STATUS,
+        CARD_TEMPERATURE,
+        // charts
+        CHART_BAR,
+        // statistics
+        STATISTIC_PROVIDER,
+        STATISTIC_VALUE,
+      };
+
+      // describes the component fields that can be changed
+      enum Property : uint8_t {
+        AXIS_X = 1,
+        AXIS_Y,
+        INDEX,
+        MAX,
+        MIN,
+        NAME, // name or title
+        STEP,
+        SYMBOL,
+        VALUE,
+      };
+
+      virtual ~Component() = default;
+
+      // component ID
+      uint16_t id() const { return _id; }
+      // component name or title
+      const char* name() const { return _name; }
+      // component type
+      Type type() const { return _type; }
+      // check if the component belongs to a specific family (card, chart, statistic, tab)
+      bool is(Family family) const {
+        switch (family) {
+          case Family::CARD:
+            return _type >= Type::CARD_BUTTON && _type <= Type::CARD_TEMPERATURE;
+          case Family::CHART:
+            return _type == Type::CHART_BAR;
+          case Family::STATISTIC:
+            return _type >= Type::STATISTIC_PROVIDER && _type <= Type::STATISTIC_VALUE;
+          default:
+            return false;
+        }
+      }
+      // get the component family
+      Family family() const {
+        if (is(Family::CARD))
+          return Family::CARD;
+        if (is(Family::CHART))
+          return Family::CHART;
+        if (is(Family::STATISTIC))
+          return Family::STATISTIC;
+        // should never happen => crash
+        assert(false);
+        return Family::CARD;
+      }
+
+      // check if one of the component property has changed
+      bool hasChanged() const { return _bitset >> 1; }
+      // check if a specific component property has changed
+      bool hasChanged(Property property) const { return _bitset & (0b1 << property); }
+      // clear all component change flags.
+      // hasChanged() will return false after this call
+      void clearChanges() { _bitset &= 0b1; }
+
+      // change component name (not all components support a name change)
+      bool setName(const char* name) {
+        if (strcmp(_name, name) == 0)
+          return false;
+        _name = name;
+        setChange(Property::NAME);
+        return true;
+      }
+
+      // auto-update the component internally
+      // some components like StatisticProvider are capable of automatically updating their values before a dashboard refresh
+      virtual bool selfUpdate() { return false; }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const {
+        switch (family()) {
+          case Family::CARD:
+          case Family::CHART:
+            json["id"] = id();
+            if (!onlyChanges || hasChanged(Property::NAME))
+              json["n"] = name();
+            break;
+          case Family::STATISTIC:
+            json["i"] = id();
+            if (!onlyChanges || hasChanged(Property::NAME))
+              json["k"] = name();
+            break;
+          default:
+            assert(false);
+            break;
+        }
+      }
+
+      virtual void onEvent(__unused const JsonObject& json) const {}
+
+    protected:
+      // construct a new component without adding it to any dashboard
+      Component(const char* name, Type type) : _id(nextId()), _name(name), _type(type) {}
+      // construct a new component and add it to the dashboard
+      Component(ESPDash& dashboard, const char* name, Type type);
+
+      // mark a component property as changed
+      void setChange(Property property) {
+
+#ifdef DASH_DEBUG
+        DASH_LOGD("DashComponent", "[%d] %s : property changed: %d", id(), name(), property);
+#endif
+        _bitset |= (0b1 << property);
+      }
+
+      // generate a new unique component ID
+      static uint16_t nextId() {
+        static uint16_t _IDS = 0;
+        return _IDS++;
+      }
+
+    private:
+      const uint16_t _id;     // component ID
+      const char* _name;      // component name
+      const Type _type;       // component type
+      uint16_t _bitset = 0b1; // display is bit 0, bits 1-12 to track component changes
+  };
+} // namespace dash

src/Statistic.h

@@ -0,0 +1,95 @@
+#pragma once
+
+// set to 1 to see debug logs
+// keep to 0 for production: logging impacts performance
+// #define DASH_DEBUG 1
+
+#ifdef ESP8266
+  #include <ets_sys.h>
+  #define DASH_LOGD(tag, format, ...) ets_printf("DEBUG [%s] " format "\n", tag, ##__VA_ARGS__)
+  #define DASH_LOGW(tag, format, ...) ets_printf("WARN  [%s] " format "\n", tag, ##__VA_ARGS__)
+#else
+  #include <esp32-hal-log.h>
+  #define DASH_LOGD ESP_LOGD
+  #define DASH_LOGW ESP_LOGW
+#endif
+
+#include <ArduinoJson.h>
+#include <inttypes.h>
+#include <sys/time.h>
+
+#include <charconv>
+#include <functional>
+#include <list>
+#include <optional>
+#include <string>
+
+class ESPDash;
+
+namespace dash {
+#ifdef DASH_USE_STL_STRING
+  using string = std::string;
+#else
+  using string = String;
+#endif
+
+  // function to convert an unknown type T to a JSON value by applying the correct precision for floats and doubles
+  template <typename T, uint8_t Precision = 2>
+  static bool toJsonValue(const JsonVariant& json, const T& value) {
+    if constexpr (std::is_same_v<T, float>) {
+      return json.set(String(static_cast<float>(value), (size_t)Precision));
+    } else if constexpr (std::is_same_v<T, double>) {
+      return json.set(String(static_cast<double>(value), (size_t)Precision));
+    } else {
+      // convert unknown other types eventually using convertToJson functions
+      return json.set(value);
+    }
+  }
+
+  // dash::to_string
+
+  template <typename T, uint8_t Precision = 2, std::enable_if_t<std::is_same_v<T, dash::string>, bool> = true>
+  static const dash::string& to_string(const T& value) { return value; }
+
+  template <typename T, uint8_t Precision = 2, std::enable_if_t<std::is_same_v<T, const char*>, bool> = true>
+  static dash::string to_string(const T& value) { return value; }
+
+  template <typename T, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T>, bool> = true>
+  static dash::string to_string(const T& value) {
+#ifdef DASH_USE_STL_STRING
+    return std::to_string(value);
+#else
+    return String(value);
+#endif
+  }
+
+  template <typename T, uint8_t Precision = 2, std::enable_if_t<std::is_floating_point_v<T>, bool> = true>
+  static dash::string to_string(const T& value) {
+#ifdef DASH_USE_STL_STRING
+    return String(value, (size_t)Precision).c_str();
+#else
+    return String(value, (size_t)Precision);
+#endif
+  }
+
+  // dash::string_as
+
+  template <typename T, std::enable_if_t<std::is_same_v<T, dash::string> || std::is_same_v<T, const char*>, bool> = true>
+  static std::optional<T> string_as(const char* str) {
+    if (str == nullptr)
+      return std::nullopt;
+    return str;
+  }
+
+  template <typename T, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T>, bool> = true>
+  static std::optional<T> string_as(const char* str) {
+    auto value = T{};
+    size_t len = strlen(str);
+    if (!len)
+      return std::nullopt;
+    auto [ptr, error] = std::from_chars(str, str + strlen(str), value);
+    if (error != std::errc())
+      return std::nullopt;
+    return value;
+  }
+}

src/dash/DashCards.h

@@ -0,0 +1,89 @@
+#pragma once
+
+#include "DashComponent.h"
+
+namespace dash {
+  // Statistic super class
+  template <typename T = dash::string, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T> || std::is_same_v<T, dash::string> || std::is_same_v<T, const char*>, bool> = true>
+  class Statistic : public Component {
+    public:
+      virtual ~Statistic() = default;
+
+      // statistic value
+      const T& value() const { return _value; }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        Component::toJson(json, onlyChanges);
+        if (!onlyChanges || hasChanged(Property::VALUE))
+          dash::toJsonValue<T, Precision>(json["v"].to<JsonVariant>(), _value);
+      }
+
+    protected:
+      // construct a new statistic and add it to the dashboard
+      Statistic(ESPDash& dashboard, const char* name, Type type) : Component(dashboard, name, type) {}
+      // construct a new statistic without adding it to any dashboard
+      Statistic(const char* name, Type type) : Component(name, type) {}
+
+      T _value;
+  };
+
+  // Statistic value class with set method
+  template <typename T = dash::string, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T> || std::is_same_v<T, dash::string> || std::is_same_v<T, const char*>, bool> = true>
+  class StatisticValue : public Statistic<T, Precision> {
+    public:
+      // construct a new statistic and add it to the dashboard
+      StatisticValue(ESPDash& dashboard, const char* name) : Statistic<T, Precision>(dashboard, name, Component::Type::STATISTIC_VALUE) {}
+      // construct a new statistic without adding it to any dashboard
+      StatisticValue(const char* name) : Statistic<T, Precision>(name, Component::Type::STATISTIC_VALUE) {}
+
+      ~StatisticValue() = default;
+
+      // update the statistic value and returns true if the value has changed
+      bool setValue(const T& value) {
+        if (Statistic<T, Precision>::_value == value)
+          return false;
+        Statistic<T, Precision>::_value = value;
+        Component::setChange(Component::Property::VALUE);
+        return true;
+      }
+
+      // update the statistic value and returns true if the value has changed
+      bool setValue(T&& value) {
+        if (Statistic<T, Precision>::_value == value)
+          return false;
+        Statistic<T, Precision>::_value = std::forward<T>(value);
+        Component::setChange(Component::Property::VALUE);
+        return true;
+      }
+  };
+
+  // Statistic provider class where the value if provided by a function
+  template <typename T = dash::string, uint8_t Precision = 2, std::enable_if_t<std::is_integral_v<T> || std::is_floating_point_v<T> || std::is_same_v<T, dash::string> || std::is_same_v<T, const char*>, bool> = true>
+  class StatisticProvider : public Statistic<T, Precision> {
+    private:
+      std::function<T()> _provider = nullptr;
+
+    public:
+      // construct a new statistic and add it to the dashboard
+      StatisticProvider(ESPDash& dashboard, const char* name) : Statistic<T, Precision>(dashboard, name, Component::Type::STATISTIC_PROVIDER) {}
+      // construct a new statistic without adding it to any dashboard
+      StatisticProvider(const char* name) : Statistic<T, Precision>(name, Component::Type::STATISTIC_PROVIDER) {}
+
+      ~StatisticProvider() = default;
+
+      // register a provider from where to get the statistic value
+      void setProvider(std::function<T()> provider) { _provider = provider; }
+
+      // update the statistic value by calling the provider and returns true if the value has changed
+      virtual bool selfUpdate() override {
+        if (!_provider)
+          return false;
+        T value = _provider();
+        if (Statistic<T, Precision>::_value == value)
+          return false;
+        Statistic<T, Precision>::_value = std::forward<T>(value);
+        Component::setChange(Component::Property::VALUE);
+        return true;
+      }
+  };
+} // namespace dash

src/dash/DashCharts.h

@@ -0,0 +1,61 @@
+#pragma once
+
+#include "DashComponent.h"
+
+namespace dash {
+  class Widget : public Component {
+    public:
+      Widget(const char* name, Type type) : Component(name, type) {}
+      Widget(ESPDash& dashboard, const char* name, Type type) : Component(dashboard, name, type) {}
+
+      virtual ~Widget() {}
+
+      // widget index (position) in the dashboard
+      uint8_t index() const { return _index; }
+
+      // set the widget position in the dashboard
+      bool setIndex(uint8_t index) {
+        if (_index == index)
+          return false;
+        _index = index;
+        setChange(Property::INDEX);
+        return true;
+      }
+
+      virtual void toJson(const JsonObject& json, bool onlyChanges) const override {
+        Component::toJson(json, onlyChanges);
+        if (!onlyChanges || hasChanged(Property::INDEX))
+          json["t"] = _typeName(type());
+        if (!onlyChanges || hasChanged(Property::INDEX))
+          json["idx"] = _index;
+      }
+
+    private:
+      uint8_t _index;
+
+      // widget type name
+      static const char* _typeName(Type type) {
+        switch (type) {
+          case Type::CARD_BUTTON:
+            return "button";
+          case Type::CARD_GENERIC:
+            return "generic";
+          case Type::CARD_HUMIDITY:
+            return "humidity";
+          case Type::CARD_PROGRESS:
+            return "progress";
+          case Type::CARD_SLIDER:
+            return "slider";
+          case Type::CARD_STATUS:
+            return "status";
+          case Type::CARD_TEMPERATURE:
+            return "temperature";
+          case Type::CHART_BAR:
+            return "bar";
+          default:
+            assert(false);
+            return "";
+        }
+      }
+  };
+} // namespace dash

src/dash/DashComponent.h

@@ -0,0 +1,232 @@
+# ESP-DASH v5
+
+ESP-DASH v5 is a rewrite of ESP-DASH \*\*OSS and Pro## Motivation versions with C++ 17.
+
+## Motivation
+
+The rewrite has been motived by several factors including:
+
+- the inherent design inefficient of memory usage: widgets are using about 2.5 more RAN memory than they really need
+- websocket message optimisation: there are still room to allow more efficient message exchange between the client and the server
+- inability to extend the components and behavior
+- inability to correctly handle a custom float precision
+- inability to support all integral and floating point types
+- no namespace isolation
+- no STL string support
+- pointer vs ref: the old API uses pointers to widgets, which is not idiomatic C++ and can lead to bugs if null is passed.
+
+The rewrite uses **C++ 17 inheritance, polymorphism and templating**.
+
+The rewrite is also **backward compatible** and will display **deprecation compiler warnings** if the old deprecated API is used.
+
+Here is a screenshot of before / after during the development.
+Now, the `website.cpp` file is 15KB, compared to the initial 36KB.
+
+**The preliminary results in a big app with about 225 cards and 30 stats show a decrease in RAM usage of about 60%.**
+
+![Screenshot 2024-11-29 at 10 07 58](https://github.com/user-attachments/assets/6c91fe35-9527-45d3-8cfb-2287690bbe72)
+
+## Benchmark5.ino Example
+
+[Benchmark5.ino](./examples/Benchmark5/Benchmark5.ino) is a new example that demonstrates the new API and the new features.
+
+## Compile flags
+
+C++ 17 is required, which is the default in new Arduino versions, otherwise, you can add to your PIO file:
+
+```
+build_flags = 
+  -std=c++17
+  -std=gnu++17
+  -Wall -Wextra
+  ; -D DASH_USE_LEGACY_CHART_STORAGE=1
+  ; -D DASH_USE_STL_STRING=1
+  ; -D DASH_DEBUG
+build_unflags =
+    -std=gnu++11
+```
+
+- `-D DASH_DEBUG`: activate debug mode
+- `-D DASH_USE_STL_STRING=1`: uses `std::string` instead of `String` for the string type
+
+ESP-DASH also defines its own string `dash::string`, which points to `String` or `std::string` depending on the flag `-D DASH_USE_STL_STRING=1`.
+`dash::string` can be used to avoid using `String` or `std::string` directly and write portable code or examples.
+
+## API Changes
+
+![image](https://github.com/user-attachments/assets/006f3ef1-7d01-4231-8ac7-4cc98df2e63d)
+
+### All Widgets
+
+- Widgets generally support templated types: integral, floating point, string (`const char*`, `std::string`, `String`)
+- Widgets generally support a custom precision for floating point types (default is 2)
+
+Note: working with floating point numbers is generally slower than working with integral numbers because of the rounding step requiring to convert the number to a string representation with a fixed number of decimals.
+
+### Statistics
+
+- `dash::StatisticValue`: replaces `Statistic`
+- `dash::StatisticProvider`: a new kind of auto-updatable statistic: the value is sourced from a function and is automatically updated when the dashboard is refreshed.
+
+```cpp
+// a string based statistic
+dash::StatisticValue stat(dashboard, "Client name");
+
+// a statistic string based using a constant string pointer
+dash::StatisticValue<const char*> stat(dashboard, "State (on/off)");
+
+// a float based statistic with a default precision of 2 decimals
+dash::StatisticValue<float> stat(dashboard, "Temperature (°C)");
+
+// a float based statistic with a custom precision of 3 decimals
+dash::StatisticValue<float, 3> stat(dashboard, "Energy (kWh)");
+
+// an integral based statistic
+dash::StatisticValue<int8_t> stat(dashboard, "Percent (%)");
+
+dash::StatisticProvider<uint32_t> statProvider(dashboard, "Uptime (ms)");
+statProvider.setProvider([]() { return millis(); });
+```
+
+### Charts
+
+Charts have 2 axis: X and Y.
+For each axis, the type can be integral or floating point.
+For the X axis, strings are also supported.
+
+```cpp
+dash::BarChart<const char*, int> bar(dashboard, "Power Usage (kWh) per day");
+
+dash::BarChart<int, float> bar(dashboard, "Power Usage (kWh) per hour");
+```
+
+**For performance reasons, floating point precision is not supported for charts.**
+It is advised to do the rounding in the value arrays.
+
+### Cards
+
+- `dash::FeedbackCard`
+
+  - Replaces `STATUS_CARD`
+  - Defaults to `dash::string` type
+  - Supports also `const char*` with `dash::FeedbackCard<const char*>`
+  - Supports an initial state
+
+```cpp
+dash::FeedbackCard<const char*> feedback(dashboard, "Status");
+feedback.setFeedback("Light is ON", dash::Status::SUCCESS);
+```
+
+- `dash::GenericCard`
+  - Replaces `GENERIC_CARD`
+  - Defaults to `dash::string` type
+  - Supports any integral, floating point type or string type
+  - Supports a custom precision for floating point types
+  - Supports a symbol or unit
+
+```cpp
+dash::GenericCard<int> generic(dashboard, "Counter", "restarts");
+dash::GenericCard<float, 3> energy(dashboard, "Energy", "kWh");
+dash::GenericCard<float, 4> kp(dashboard, "PID Kp");
+```
+
+- `dash::HumidityCard` and `dash::TemperatureCard`
+  - Replaces `HUMIDITY_CARD` and `TEMPERATURE_CARD`
+  - Defaults to `float` type with a precision of 2 decimals
+  - Supports any integral or floating point type
+  - Supports a custom precision for floating point types.
+  - Unit is preset to `%` for humidity and `°C` for temperature but can be changed
+
+```cpp
+dash::TemperatureCard<float, 1> temperature(dashboard, "Temperature");
+dash::TemperatureCard<float, 2> temperature(dashboard, "Temperature", "°F");
+```
+
+- `dash::ProgressCard`
+
+  - Replaces `PROGRESS_CARD`
+  - Defaults to `int` type
+  - Supports any integral or floating point type
+  - Supports a custom precision for floating point types.
+  - Supports a symbol or unit
+  - Allow a configurable min/max range
+
+```cpp
+dash::ProgressCard<float, 2> preciseProgress(dashboard, "Progress", 0.0f, 100.0f, "%");
+```
+
+- `dash::SliderCard`
+
+  - Replaces`SLIDER_CARD`
+  - Defaults to `int` type
+  - Supports any integral or floating point type
+  - Supports a custom precision for floating point types.
+  - Supports a symbol or unit
+  - Allow a configurable min/max range
+  - Allow a configurable step
+
+```cpp
+dash::SliderCard duty(dashboard, "Duty", 0, 255, 1, "bits");
+dash::SliderCard<float, 3> kp(dashboard, "PID Kp", 0.0f, 1.0f, 0.001f);
+```
+
+- `dash::SwitchCard`
+  - Replaces `BUTTON_CARD`
+  - Defaults to `bool` type
+
+```cpp
+dash::SwitchCard light(dashboard, "Light");
+```
+
+### Functions and callbacks
+
+- `onChange([](<type>)){}`
+
+Listen to card changes:
+
+```cpp
+button.onChange([&](bool state) {
+  /* Print our new button value received from dashboard */
+  Serial.println(String("Button Triggered: ") + (state ? "true" : "false"));
+  /* Make sure we update our button's value and send update to dashboard */
+  button.setValue(state);
+  dashboard.refresh(button);
+});
+
+updateDelay.onChange([&](uint32_t value) {
+  update_delay = value;
+  updateDelay.setValue(value);
+  dashboard.refresh(updateDelay);
+});
+```
+
+- `value()`: get the value of a card
+- `min()`, `max()`, `step()`: get the min, max, step of a slider card
+- `setMin()`, `setMax()`, `setStep()`: set the min, max, step of a slider card
+- `setFeedback()`: set the feedback of a feedback card
+- `setValue()`: set the value of a card
+- etc
+
+## Optimisations
+
+By default, the string type that will be used to store string values is `String` or `std::string` if the flag `-D DASH_USE_STL_STRING=1` is set.
+
+To avoid allocating memory and copying strings, the `const char*` type can be used when the card is sourcing its content from constant strings only.
+
+**Example:**
+
+```cpp
+dash::FeedbackCard<const char*> feedback(dashboard, "Status"); // uses c string pointers
+dash::FeedbackCard customFeedback(dashboard, "Status");        // uses String or std::string object
+
+// [...]
+
+if(lightON)
+  feedback.setFeedback("Light is ON", dash::Status::SUCCESS);
+else
+  feedback.setFeedback("Light is OFF", dash::Status::ERROR);
+
+// [...]
+
+customFeedback.setFeedback(dash::string("Counter: ") + count , dash::Status::WARNING);
+```