diff --git a/lib/libesp32_lvgl/LVGL_assets/src/lv_theme_haspmota.c b/lib/libesp32_lvgl/LVGL_assets/src/lv_theme_haspmota.c
index a7029093a..063b41d5d 100644
--- a/lib/libesp32_lvgl/LVGL_assets/src/lv_theme_haspmota.c
+++ b/lib/libesp32_lvgl/LVGL_assets/src/lv_theme_haspmota.c
@@ -31,14 +31,14 @@ typedef struct _haspmota_theme_t haspmota_theme_t;
 #define RADIUS_DEFAULT LV_DPX_CALC(theme->disp_dpi, theme->disp_size == DISP_LARGE ? 12 : 8)
 
 /*SCREEN*/
-#define LIGHT_COLOR_SCR        lv_palette_lighten(LV_PALETTE_GREY, 4)
-#define LIGHT_COLOR_CARD       lv_color_white()
-#define LIGHT_COLOR_TEXT       lv_palette_darken(LV_PALETTE_GREY, 4)
-#define LIGHT_COLOR_GREY       lv_palette_lighten(LV_PALETTE_GREY, 2)
-#define DARK_COLOR_SCR         lv_color_hex(0x15171A)
-#define DARK_COLOR_CARD        lv_color_hex(0x282b30)
-#define DARK_COLOR_TEXT        lv_palette_lighten(LV_PALETTE_GREY, 5)
-#define DARK_COLOR_GREY        lv_color_hex(0x2f3237)
+// #define LIGHT_COLOR_SCR        lv_palette_lighten(LV_PALETTE_GREY, 4)
+// #define LIGHT_COLOR_CARD       lv_color_white()
+// #define LIGHT_COLOR_TEXT       lv_palette_darken(LV_PALETTE_GREY, 4)
+// #define LIGHT_COLOR_GREY       lv_palette_lighten(LV_PALETTE_GREY, 2)
+// #define DARK_COLOR_SCR         lv_color_hex(0x15171A)
+// #define DARK_COLOR_CARD        lv_color_hex(0x282b30)
+// #define DARK_COLOR_TEXT        lv_palette_lighten(LV_PALETTE_GREY, 5)
+// #define DARK_COLOR_GREY        lv_color_hex(0x2f3237)
 
 #define TRANSITION_TIME         LV_THEME_DEFAULT_TRANSITION_TIME
 #define BORDER_WIDTH            LV_DPX_CALC(theme->disp_dpi, 3)     // Tasmota from 2 to 3
@@ -57,8 +57,6 @@ typedef struct {
     lv_style_t scrollbar_scrolled;
     lv_style_t card;
     lv_style_t btn;
-    lv_style_t btn_border;          // force button like border
-    lv_style_t btn_border_color;    // addition, use a light grey border
 
     /*Utility*/
     lv_style_t bg_color_primary;
@@ -272,7 +270,7 @@ static void style_init(haspmota_theme_t * theme)
     lv_style_set_radius(&theme->styles.card, RADIUS_DEFAULT);
     lv_style_set_bg_opa(&theme->styles.card, LV_OPA_COVER);
     lv_style_set_bg_color(&theme->styles.card, theme->color_card);
-    lv_style_set_border_color(&theme->styles.card, theme->color_grey);
+    lv_style_set_border_color(&theme->styles.card, theme->base.color_secondary);
     lv_style_set_border_width(&theme->styles.card, BORDER_WIDTH);
     lv_style_set_border_post(&theme->styles.card, true);
     lv_style_set_text_color(&theme->styles.card, theme->color_text);
@@ -310,6 +308,8 @@ static void style_init(haspmota_theme_t * theme)
     lv_style_set_pad_ver(&theme->styles.btn, PAD_SMALL);
     lv_style_set_pad_column(&theme->styles.btn, LV_DPX_CALC(theme->disp_dpi, 5));
     lv_style_set_pad_row(&theme->styles.btn, LV_DPX_CALC(theme->disp_dpi, 5));
+    // change border color
+    lv_style_set_border_color(&theme->styles.btn, theme->base.color_secondary);
 
     style_init_reset(&theme->styles.pressed);
     lv_style_set_recolor(&theme->styles.pressed, lv_color_black());
@@ -402,6 +402,8 @@ static void style_init(haspmota_theme_t * theme)
 
     style_init_reset(&theme->styles.knob);
     lv_style_set_bg_color(&theme->styles.knob, theme->base.color_primary);
+    lv_style_set_border_color(&theme->styles.knob, theme->color_text);
+    lv_style_set_border_width(&theme->styles.knob, LV_DPX_CALC(theme->disp_dpi, 2));
     lv_style_set_bg_opa(&theme->styles.knob, LV_OPA_COVER);
     lv_style_set_pad_all(&theme->styles.knob, LV_DPX_CALC(theme->disp_dpi, 6));
     lv_style_set_radius(&theme->styles.knob, LV_RADIUS_CIRCLE);
@@ -589,9 +591,11 @@ static void style_init(haspmota_theme_t * theme)
 #if LV_USE_TABVIEW
     style_init_reset(&theme->styles.tab_btn);
     lv_style_set_border_color(&theme->styles.tab_btn, theme->base.color_primary);
-    lv_style_set_border_width(&theme->styles.tab_btn, BORDER_WIDTH * 2);
+    // lv_style_set_border_width(&theme->styles.tab_btn, BORDER_WIDTH * 2);
+    lv_style_set_border_width(&theme->styles.tab_btn, 3);
     lv_style_set_border_side(&theme->styles.tab_btn, LV_BORDER_SIDE_BOTTOM);
-    lv_style_set_pad_top(&theme->styles.tab_btn, BORDER_WIDTH * 2);
+    // lv_style_set_pad_top(&theme->styles.tab_btn, BORDER_WIDTH * 2);
+    lv_style_set_pad_top(&theme->styles.tab_btn, 3);
 
     style_init_reset(&theme->styles.tab_bg_focus);
     lv_style_set_outline_pad(&theme->styles.tab_bg_focus, -BORDER_WIDTH);
@@ -645,7 +649,13 @@ lv_theme_t * lv_theme_haspmota_init(lv_display_t * disp, lv_color_t * colors,
                                     const lv_font_t * font_small, const lv_font_t * font_normal, const lv_font_t * font_large)
 {
     // berry_log_C("HSP> called lv_theme_haspmota_init primary #%06X secondary #%06X scr #%06X text #%06X card #%06X grey #%06X",
-    //     colors[0], colors[1], colors[2], colors[3], colors[4], colors[5]);
+    //     colors[0], colors[1], colors[2], colors[3], colors[4], colors[5]
+    // );
+    // berry_log_C("HSP> called lv_theme_haspmota_init reset #%06X reset_hover #%06X save #%06X save_hover #%06X",
+    //     colors[6], colors[7], colors[8], colors[9]
+    // );
+    // 0primary #1FA3EC 1secondary #0E70A4 2scr #252525 3text #FAFFFF 4card #4F4F4F 5grey #4F4F4F
+    // reset #D43535 reset_hover #931F1F save #47C266 save_hover #5AAF6F
     /*This trick is required only to avoid the garbage collection of
      *styles' data if LVGL is used in a binding (e.g. MicroPython)
      *In a general case styles could be in a simple `static lv_style_t my_style...` variables*/
@@ -762,6 +772,8 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
             lv_obj_add_style(obj, &theme->styles.rotary_scroll, 0);
             lv_obj_add_style(obj, &theme->styles.scrollbar, LV_PART_SCROLLBAR);
             lv_obj_add_style(obj, &theme->styles.scrollbar_scrolled, LV_PART_SCROLLBAR | LV_STATE_SCROLLED);
+            // put consistent background (not white actually)
+            lv_obj_add_style(obj, &theme->styles.bg_color_white, 0);
             return;
         }
 #endif
@@ -801,20 +813,20 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
         lv_obj_t * tv = lv_obj_get_parent(parent); /*parent is the tabview header*/
         if(tv && lv_obj_get_child(tv, 0) == parent) { /*The button is on the tab view header*/
             if(lv_obj_check_type(tv, &lv_tabview_class)) {
+                lv_obj_add_style(obj, &theme->styles.tab_btn, 0);
+                lv_obj_add_style(obj, &theme->styles.tab_bg_focus, 0);
+
+                lv_obj_add_style(obj, &theme->styles.bg_color_primary, LV_STATE_CHECKED);
+
                 lv_obj_add_style(obj, &theme->styles.pressed, LV_STATE_PRESSED);
-                lv_obj_add_style(obj, &theme->styles.bg_color_primary_muted, LV_STATE_CHECKED);
-                lv_obj_add_style(obj, &theme->styles.tab_btn, LV_STATE_CHECKED);
                 lv_obj_add_style(obj, &theme->styles.outline_primary, LV_STATE_FOCUS_KEY);
                 lv_obj_add_style(obj, &theme->styles.outline_secondary, LV_STATE_EDITED);
-                lv_obj_add_style(obj, &theme->styles.tab_bg_focus, LV_STATE_FOCUS_KEY);
                 return;
             }
         }
 
 #endif
         lv_obj_add_style(obj, &theme->styles.btn, 0);
-        lv_obj_add_style(obj, &theme->styles.btn_border, 0);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, 0);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary, 0);
         lv_obj_add_style(obj, &theme->styles.transition_delayed, 0);
         lv_obj_add_style(obj, &theme->styles.pressed, LV_STATE_PRESSED);
@@ -862,7 +874,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
         lv_obj_add_style(obj, &theme->styles.outline_primary, LV_STATE_FOCUS_KEY);
         lv_obj_add_style(obj, &theme->styles.outline_secondary, LV_STATE_EDITED);
         lv_obj_add_style(obj, &theme->styles.btn, LV_PART_ITEMS);
-        lv_obj_add_style(obj, &theme->styles.btn_border, LV_PART_ITEMS);
         lv_obj_add_style(obj, &theme->styles.disabled, LV_PART_ITEMS | LV_STATE_DISABLED);
         lv_obj_add_style(obj, &theme->styles.pressed, LV_PART_ITEMS | LV_STATE_PRESSED);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary, LV_PART_ITEMS | LV_STATE_CHECKED);
@@ -873,27 +884,23 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
 
 #if LV_USE_BAR
     else if(lv_obj_check_type(obj, &lv_bar_class)) {
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, 0);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary_muted, 0);
         lv_obj_add_style(obj, &theme->styles.circle, 0);
         lv_obj_add_style(obj, &theme->styles.outline_primary, LV_STATE_FOCUS_KEY);
         lv_obj_add_style(obj, &theme->styles.outline_secondary, LV_STATE_EDITED);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary, LV_PART_INDICATOR);
         lv_obj_add_style(obj, &theme->styles.circle, LV_PART_INDICATOR);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, LV_PART_INDICATOR);
     }
 #endif
 
 #if LV_USE_SLIDER
     else if(lv_obj_check_type(obj, &lv_slider_class)) {
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, 0);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary_muted, 0);
         lv_obj_add_style(obj, &theme->styles.circle, 0);
         lv_obj_add_style(obj, &theme->styles.outline_primary, LV_STATE_FOCUS_KEY);
         lv_obj_add_style(obj, &theme->styles.outline_secondary, LV_STATE_EDITED);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary, LV_PART_INDICATOR);
         lv_obj_add_style(obj, &theme->styles.circle, LV_PART_INDICATOR);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, LV_PART_INDICATOR);
         lv_obj_add_style(obj, &theme->styles.knob, LV_PART_KNOB);
 #if LV_THEME_DEFAULT_GROW
         lv_obj_add_style(obj, &theme->styles.grow, LV_PART_KNOB | LV_STATE_PRESSED);
@@ -947,7 +954,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
         lv_obj_add_style(obj, &theme->styles.outline_primary, LV_STATE_FOCUS_KEY);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary, LV_PART_INDICATOR | LV_STATE_CHECKED);
         lv_obj_add_style(obj, &theme->styles.circle, LV_PART_INDICATOR);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, LV_PART_INDICATOR);
         lv_obj_add_style(obj, &theme->styles.disabled, LV_PART_INDICATOR | LV_STATE_DISABLED);
         lv_obj_add_style(obj, &theme->styles.knob, LV_PART_KNOB);
         lv_obj_add_style(obj, &theme->styles.bg_color_white, LV_PART_KNOB);
@@ -1015,7 +1021,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
         lv_obj_add_style(obj, &theme->styles.arc_indic, LV_PART_INDICATOR);
         lv_obj_add_style(obj, &theme->styles.arc_indic_primary, LV_PART_INDICATOR);
         lv_obj_add_style(obj, &theme->styles.knob, LV_PART_KNOB);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, LV_PART_KNOB);
     }
 #endif
 
@@ -1067,8 +1072,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
         lv_obj_add_style(obj, &theme->styles.outline_primary, LV_STATE_FOCUS_KEY);
         lv_obj_add_style(obj, &theme->styles.outline_secondary, LV_STATE_EDITED);
         lv_obj_add_style(obj, &theme->styles.btn, LV_PART_ITEMS);
-        lv_obj_add_style(obj, &theme->styles.btn_border, LV_PART_ITEMS);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, LV_PART_ITEMS);
         lv_obj_add_style(obj, &theme->styles.disabled, LV_PART_ITEMS | LV_STATE_DISABLED);
         lv_obj_add_style(obj, &theme->styles.bg_color_white, LV_PART_ITEMS);
         lv_obj_add_style(obj, &theme->styles.keyboard_button_bg, LV_PART_ITEMS);
@@ -1100,7 +1103,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
     else if(lv_obj_check_type(obj, &lv_list_button_class)) {
         lv_obj_add_style(obj, &theme->styles.bg_color_white, 0);
         lv_obj_add_style(obj, &theme->styles.list_btn, 0);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, 0);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary, LV_STATE_FOCUS_KEY);
         lv_obj_add_style(obj, &theme->styles.list_item_grow, LV_STATE_FOCUS_KEY);
         lv_obj_add_style(obj, &theme->styles.list_item_grow, LV_STATE_PRESSED);
@@ -1175,8 +1177,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
     else if(lv_obj_check_type(obj, &lv_msgbox_header_button_class) ||
             lv_obj_check_type(obj, &lv_msgbox_footer_button_class)) {
         lv_obj_add_style(obj, &theme->styles.btn, 0);
-        lv_obj_add_style(obj, &theme->styles.btn_border, 0);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, 0);
         lv_obj_add_style(obj, &theme->styles.bg_color_primary, 0);
         lv_obj_add_style(obj, &theme->styles.transition_delayed, 0);
         lv_obj_add_style(obj, &theme->styles.pressed, LV_STATE_PRESSED);
@@ -1214,8 +1214,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
     else if(lv_obj_check_type(obj, &lv_tabview_class)) {
         lv_obj_add_style(obj, &theme->styles.scr, 0);
         lv_obj_add_style(obj, &theme->styles.pad_zero, 0);
-        lv_obj_add_style(obj, &theme->styles.btn_border, 0);
-        lv_obj_add_style(obj, &theme->styles.btn_border_color, 0);        // add grey border
     }
 #endif
 
diff --git a/lib/libesp32_lvgl/lv_haspmota/src/embedded/lv_haspmota.be b/lib/libesp32_lvgl/lv_haspmota/src/embedded/lv_haspmota.be
index 6edbff1de..624f69b3c 100644
--- a/lib/libesp32_lvgl/lv_haspmota/src/embedded/lv_haspmota.be
+++ b/lib/libesp32_lvgl/lv_haspmota/src/embedded/lv_haspmota.be
@@ -3116,18 +3116,24 @@ class HASPmota
     end
 
     # set the theme for HASPmota
-    var primary_color = self.lvh_root.parse_color(tasmota.webcolor(10 #-COL_BUTTON-#))
-    var secondary_color = self.lvh_root.parse_color(tasmota.webcolor(11 #-COL_BUTTON_HOVER-#))
-    var color_scr = self.lvh_root.parse_color(tasmota.webcolor(1 #-COL_BACKGROUND-#))
+    # var primary_color = self.lvh_root.parse_color(tasmota.webcolor(10 #-COL_BUTTON-#))
+    # var secondary_color = self.lvh_root.parse_color(tasmota.webcolor(11 #-COL_BUTTON_HOVER-#))
+    var primary_color = lv.color(0x1FA3EC)
+    var secondary_color = lv.color(0x0E70A4)
+    # var color_scr = self.lvh_root.parse_color(tasmota.webcolor(1 #-COL_BACKGROUND-#))
+    var color_scr = lv.color(0x000088)
     var color_text = self.lvh_root.parse_color(tasmota.webcolor(9 #-COL_BUTTON_TEXT-#))
-    var color_card = self.lvh_root.parse_color(tasmota.webcolor(2 #-COL_FORM-#))
-    var color_grey = self.lvh_root.parse_color(tasmota.webcolor(2 #-COL_FORM-#))
-    var color_reset = self.lvh_root.parse_color(tasmota.webcolor(12 #-COL_BUTTON_RESET-#))
-    var color_reset_hover = self.lvh_root.parse_color(tasmota.webcolor(13 #-COL_BUTTON_RESET_HOVER-#))
-    var color_save = self.lvh_root.parse_color(tasmota.webcolor(14 #-COL_BUTTON_SAVE-#))
-    var color_save_hover = self.lvh_root.parse_color(tasmota.webcolor(15 #-COL_BUTTON_SAVE_HOVER-#))
-    var colors = lv.color_arr([primary_color, secondary_color, color_scr, color_text, color_card, color_grey,
-                               color_reset, color_reset_hover, color_save, color_save_hover])
+    # var color_card = self.lvh_root.parse_color(tasmota.webcolor(2 #-COL_FORM-#))
+    # var color_grey = self.lvh_root.parse_color(tasmota.webcolor(2 #-COL_FORM-#))
+    var color_card = lv.color(0x000044)
+    var color_grey = lv.color(0x4F4F4F)
+    # var color_reset = self.lvh_root.parse_color(tasmota.webcolor(12 #-COL_BUTTON_RESET-#))
+    # var color_reset_hover = self.lvh_root.parse_color(tasmota.webcolor(13 #-COL_BUTTON_RESET_HOVER-#))
+    # var color_save = self.lvh_root.parse_color(tasmota.webcolor(14 #-COL_BUTTON_SAVE-#))
+    # var color_save_hover = self.lvh_root.parse_color(tasmota.webcolor(15 #-COL_BUTTON_SAVE_HOVER-#))
+    var colors = lv.color_arr([primary_color, secondary_color, color_scr, color_text, color_card, color_grey])
+                               # ,color_reset, color_reset_hover, color_save, color_save_hover
+                              
     
     var th2 = lv.theme_haspmota_init(0, colors,
                                      self.r12, self.r16, self.r24)
diff --git a/tasmota/berry/haspmota_src/pages.jsonl b/tasmota/berry/haspmota_src/pages.jsonl
new file mode 100644
index 000000000..3d50c35a1
--- /dev/null
+++ b/tasmota/berry/haspmota_src/pages.jsonl
@@ -0,0 +1,275 @@
+{"page":0,"comment":"---------- Upper stat line ----------"}
+# {"id":0,"bg_color":"#000088"}
+
+{"id":90,"obj":"flex","x":0,"y":0,"w%":100,"h":24,"bg_color":"#DD0000","bg_opa":255,"radius":0,"border_side":1,"border_width":1}
+  {"id":91,"obj":"label","parentid":90,"x":0,"y":0,"w":100,"h%":100,"long_mode":3,"text":"HASPmota widgets explorer","flex_grow":1}
+  {"id":92,"obj":"fixed","parentid":90,"w":102}
+    {"id":95,"parentid":92,"comment":"-- Clock --","obj":"lv_clock","x":0,"y":3,"w":55,"h":16,"radius":0,"border_side":0}
+    {"id":96,"parentid":92,"comment":"-- Battery indicator --","obj":"label","x":57,"y":0,"w":20,"h":20,"text":"\uF2A3","align":0,"text_font":"icons-18"}
+    {"id":97,"parentid":92,"comment":"-- Wifi indicator --","obj":"lv_wifi_arcs","x":73,"y":0,"w":29,"h":20,"radius":0,"border_side":0,"bg_color":"#000000","line_color":"#FFFFFF"}
+
+{"comment":"---------- Bottom buttons - prev/home/next ----------"}
+{"id":100,"obj":"flex","x":0,"y%":84,"h%":16,"w%":100,"flex_main_place":3}
+  {"id":101,"obj":"btn","parentid":100,"w%":25,"h%":100,"action":"prev","text":"\uF053","text_font":"montserrat-20"}
+  {"id":102,"obj":"btn","parentid":100,"w%":25,"h%":100,"action":"back","text":"\uF015","text_font":"montserrat-20"}
+  {"id":103,"obj":"btn","parentid":100,"w%":25,"h%":100,"action":"next","text":"\uF054","text_font":"montserrat-20"}
+
+{"page":1,"comment":"---------- Page 1 Obj ----------"}
+
+{"id":10,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[1. Instructions]","text_font":"montserrat-20"}
+{"id":11,"obj":"spangroup","x":5,"y":60,"w":310,"h":130}
+  {"id":12,"obj":"span","parentid":11,"text":"This simple app shows each HASPmota widget class in action. Use the arrows below to navigate from one page to the other","text_font":"montserrat-14"}
+
+{"page":2,"comment":"---------- Page 2 Rich Text ----------"}
+
+{"id":10,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[2. Spangroup]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"spangroup","x":0,"y":60,"w":300,"h":115,"text_font":"robotocondensed-16","bg_color":"#000044","bg_opa":255}
+  {"id":12,"obj":"span","parentid":11,"text":"This is "}
+  {"id":13,"obj":"span","parentid":11,"text":"RED","text_color":"#FF0000","text_font":"montserrat-28"}
+  {"id":14,"obj":"span","parentid":11,"text":" and this is "}
+  {"id":15,"obj":"span","parentid":11,"text":"GREEN","text_color":"#00FF00","text_font":"montserrat-28","text_decor":1}
+  {"id":16,"obj":"span","parentid":11,"text":" underlined"}
+  {"id":17,"obj":"span","parentid":11,"text":"\nAnd this is almost transparent","text_opa":100,"text_font":"montserrat-20"}
+
+{"page":3,"comment":"---------- Page 3 Buttons ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[3. Buttons]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"btn","x":5,"y":60,"w":80,"h":30,"radius":10,"text":"Disabled","enabled":false}
+{"id":12,"obj":"btn","x":100,"y":60,"w":80,"h":30,"radius":10,"text":"Enabled"}
+
+{"id":13,"obj":"btn","x":5,"y":100,"w":80,"h":30,"radius":0,"text":"Disabled","enabled":false,"bg_color":"#DD0000"}
+{"id":14,"obj":"btn","x":100,"y":100,"w":80,"h":30,"radius":0,"text":"Enabled","bg_color":"#DD0000"}
+
+{"page":4,"comment":"---------- Page 4 Leds ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[4. Leds]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"led","x":10,"y":60,"w":20,"h":20,"color":"#FF0000"}
+{"id":12,"obj":"led","x":60,"y":60,"w":20,"h":20,"color":"#FF0000","val":200}
+{"id":13,"obj":"led","x":110,"y":60,"w":20,"h":20,"color":"#FF0000","val":0}
+
+{"id":21,"obj":"led","x":10,"y":100,"w":20,"h":20,"color":"#00FF00"}
+{"id":22,"obj":"led","x":60,"y":100,"w":20,"h":20,"color":"#00FF00","val":200}
+{"id":23,"obj":"led","x":110,"y":100,"w":20,"h":20,"color":"#00FF00","val":0}
+
+{"id":31,"obj":"led","x":10,"y":140,"w":20,"h":20,"color":"#FFFF88"}
+{"id":32,"obj":"led","x":60,"y":140,"w":20,"h":20,"color":"#FFFF88","val":200}
+{"id":33,"obj":"led","x":110,"y":140,"w":20,"h":20,"color":"#FFFF88","val":0}
+
+{"page":5,"comment":"---------- Page 5 Switches ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[5. Switches]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"switch","x":0,"y":60,"w":60,"h":30}
+{"id":12,"obj":"switch","x":80,"y":60,"w":60,"h":30,"toggle":true}
+{"id":13,"obj":"switch","x":160,"y":60,"w":60,"h":30,"enabled":false}
+{"id":14,"obj":"switch","x":240,"y":60,"w":60,"h":30,"toggle":true,"enabled":false}
+
+{"id":21,"obj":"switch","x":0,"y":100,"w":130,"h":30,"text":"On"}
+{"id":22,"obj":"switch","x":140,"y":100,"w":130,"h":30,"toggle":true,"text":"Off"}
+
+{"page":6,"comment":"---------- Page 6 Checkboxes ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[6. Checkboxes]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"checkbox","x":0,"y":60,"w":60,"h":30,"text":""}
+{"id":12,"obj":"checkbox","x":80,"y":60,"w":60,"h":30,"toggle":true,"text":""}
+{"id":13,"obj":"checkbox","x":160,"y":60,"w":60,"h":30,"text":"","enabled":false}
+{"id":14,"obj":"checkbox","x":240,"y":60,"w":60,"h":30,"text":"","toggle":true,"enabled":false}
+
+{"id":21,"obj":"checkbox","x":0,"y":100,"w":130,"h":30,"text":"Option 1"}
+{"id":22,"obj":"checkbox","x":0,"y":130,"w":130,"h":30,"text":"Option 2","toggle":true}
+
+{"page":7,"comment":"---------- Page 7 Lines ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[7. Lines]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"line","x":0,"y":60,"w":100,"h":50,"line_width":3,"points":[[0,0],[30,40],[65,15],[90,50]]}
+{"id":12,"obj":"line","x":120,"y":60,"w":100,"h":50,"line_color":"#00FF00","line_width":5,"points":[[0,0],[30,40],[65,15],[90,50]],"y_invert":true,"line_rounded":true}
+
+{"page":8,"comment":"---------- Page 8 Bars ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[8. Bars]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"bar","x":0,"y":60,"w":100,"h":10,"val":65}
+{"id":12,"obj":"bar","x":0,"y":90,"w":180,"h":20,"bg_color":"#4F4F4F","bg_color10":"#00FF00","val":40,"bg_opa":255,"border_color":"#FFFF88","border_width":2,"pad_all":6,"radius":6}
+{"id":13,"obj":"bar","x":0,"y":120,"w":180,"h":15,"bg_color":"#4F4F4F","bg_opa":255,"bg_color10":"#4444FF","val":26,"min":-20,"max":30,"bg_grad_color10":"#FF4400","bg_grad_dir10":2}
+
+{"page":9,"comment":"---------- Page 9 Button Matrix ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[9. BtnMatrix]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"btnmatrix","x":5,"y":60,"w":310,"h":125,"bg_color":"#000044","options":["1","2","3","4","5","\n","6","7","8","9","0","\n","Action1","Action2"],"border_color30":"#1FA3EC","border_width30":2,"bg_color30":"#000044","text_color30":"#FFFFFF","border_color":"#000044"}
+
+{"page":10,"comment":"---------- Page 10 Chart ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[10. Chart]","text_font":"montserrat-20"}
+
+{"page":10,"id":10,"obj":"chart","x":10,"y":60,"w":230,"h":120,"pad_all":2,"y_min":0,"y_max":50,"point_count":50,"height10":0,"width10":0,"v_div_line_count":0,"h_div_line_count":5,"line_color":"#555555","line_width30":3}
+
+{"comment":"--- Add random values to chart every second ---","berry_run":"tasmota.add_cron('*/1 * * * * *', def () import math var val = math.rand() % 50 global.p10b10.val = val val = math.rand() % 50 global.p10b10.val2 = val end, 'hm_every_1_s_chart')"}
+
+{"page":11,"comment":"---------- Page 11 Images ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[11. Images]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"img","x":10,"y":60,"raw":"iVBORw0KGgoAAAANSUhEUgAAADgAAABACAYAAABP97SyAAAACXBIWXMAAAeDAAAHgwGiB5NRAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAACLxJREFUaIHVmntwlNUZxn/vt7tZArmQAALBVoTaoEIoeKOmSgIK4gwJCSRltE4VlBS0M9bWsTNOq0yn/YMynakdRSiO2kq9ACEbqEBVSORmqwGHS7202mpF0USQ3ZDs9Xv7xzqTkOzlfLtbC89MZjLved7Lk3O+L+d7zxFV5XyFtFW7OVm8FOwlIJcCMdD9IKu13rcbQM5XgfLHucMYNqQFuCHBsKI8oAt9vz5/BTbXrgWWpaAoMPu8FCjNtcuAtWmJyvbzTqBsmj8by9oOeAzoX1j/64JyCdm04DrEasZMHADnjUDZVDMHS3cgFDlwO3zOCxREpLnmXizZCgx16LzmnH4GZWNjKa7QeqAuA+/N1Psa3DmvKgeQlSstKg59D5euBkY5D8A79ISXKKrn1AzKuiYPo040YvMThG9lFETxY3O1NvjeATgnZlCaa6aDLGAkS1HKkIxD9WKxSBfGxcFXLFC23+ylW0pwu8rBmgo6FeUGkK/nIHwvQq3W+V46K2cul6i01E1E7Rko00Amgl0GMgLwAiXAsJwlOxsJxUEOZrCpTSYh1m2HeyaUF8iEym57yJj4iEIWa80BTmBLoy5q2ZNoMOMZXNEmCxTuA67rb49h/aszWvzRW6GLvP8MXTg1huXNKIEZ9uGmUWt8HycjOBa4fLdUYrEK5dp0XIXAF3bh4SPBCe53QxdWRNWV7yhZqtDCI3SOuV+XrY2kIhoLbNomQ6WAVQIryGDtKQQ+i5W8+dqZy0Z9Eh0xyal/H+QoYt+jda3tRmwTgStekQp18TyQRWF9iOJ++0jwos6O4KTpUdtl+uIJoDzMCP8jWrU7aporrcDlu2QWFs1AsWlQU6hy8v3I2CN7z0yd0qt5pWnoO8mP1Oq8F0NOcqQUuLxNFiM8jZLnJKhTCJw5HhnZsat72qRuzb8gBXUnMW+dNrzQaxw7mcAftMt8UZr5KjcDQs8H4TFvvBKYPi2MuzAJazf5kXmmM5lYYOuwabbt2viJFTtxKC+me7zhSX7RkVmU7giqnDwavPjogeDkb9sqiT5u12m9r8kk1mCBW4pGIHQAF/Wzxvxiv9nujfb+ZUjoqmh8Z5IKnwJ7gA4RPsXmc1vII/4cXyIwg/hPyjgxrH/s7L7K/2F49BWDR/VOrW99Ik0dCQT6ip9FdXEyB4Wug57I0efyQxXdlvZ/MYQQNmPz2Jpq3ZcucdPLUmx5aER5AJiYgqpd0eH7tnXPuDxo55X0swdRnaYLW99OledsgVuKahFa0hUHoIL/b3mRg38aGro6ovpqzOaetbP0PRPf/mjqEI8VoAn4OSm+/RTp2tMz5b2/B8df08+8Q+t981LF7xO4TjxcUHgMuMS4OiF4Suy7Smq6nzH2SYIfviRlMQ/NCtek4nVFi9t9/sorI7jj/z9F52td67Zk/L6ezAUFd+JEHJwmJtW5EAfwuxv1416oAjak4o10n555R+mOzjJ317G4RVbLypVJe0vxgZVigfzIQT29KPOoP/2aA5+0eLJKg5938n0g6YwAWNjja4r2l1cPPdSOUs7lHYna919yAaYWzcXZ0rybOv8BY74DvNCgsbCHW4Cjaaju8iH/mdlYtHtfnit6RzJSXKDYtxpXoLRS63/SmJ8BnqjUgCUsIf5RmRKl7kDlbSUvTb5p56ixicYttosXlfmGuSOo5WQpZ4xHZ+rrwPMmXA/RyRPyuhJqsAgXXg3G3eLnqP/ifUNu1pAYD6LYJlwV5iSyW9hUmmfk98bcHOCx2fo+gumzPiOR0cKSqYYBPiMc2G/IzRkUs40HMO6uV2T0QKOF6jcMA+ynQWPmpeUIMV40pXpcXDzQZiFcaOYuR8yryh3GungXIWxEFr420GShJPvuOhtqf+qstNzgoSqNonSacNUerMUChpilkm5HleUQKpwx4iXQYgFBoyyWGv4hcg9R43PBQZNgAX4jV5tBb6ivAo0bxYX5EdrpgQYL+MzI1bIuNS8rdxheykTSdxAAUOHzgTYL5J1E5MHeer2z0nIDy0XKD9oBGPR1bwFvGTqX0Tx8uoNkOYGA6T75+Noq7RpotJDYXuNsLr3LmJsDLN8l4wDTlXMokdHi1Jm9iOGbVHUprcWmO5/sYfEwhndiFP6cOMTtGkR52TClB5tfGnKzwordUg7cbkhXsdmaaCD+wav6B/PU2oCvcJE53znuOyD5KmzAvKu+f80sPZ5oIC7wdPdWMNsOAYLyNC3DEzRjc4OeII8CxvFF+G2ysbjA+DL9jXkJMhTsVloLKsx9DLBRXJGWotUFiJOLPx+MVrYkG+xrt7m8jwKDXrMpUIZt7aOlcKEDn+TYPqIIT2GrB368uMf7pqmbwi8eqtKk54V9Ams6A8BPHZZVALIRX9E6WoeVOfTtQ8vwOYQiHcDNAFdGPFO8KiYb7I6x7aRsgA04mxChpfBV4DvOq9QeRB4h5nqc+lMfpKW3iZtThTcB9yFUDxx+1RtpfzY/ODNFhKglXPtlcyopBh++tJSMh9hB4vdaMoENvAG0gRxF7Q8RVzeibmKMxMU3Ua4BnQ0kPZKzlRP3lgZKI8kOX5UH1lTrqnTFJD4f9BXNR2nh/3yfdHN+aP/L3nCi2xzbHq+iRkl/wSCxgFr/VtB7si0wW8wN5Q26oCDw17CHW0zEQaoZWhBYg/BgFvVljQJbKsbFrL4jOeFwOMTNT1RqwDRG6iVY6/8V8Ra68bWNHEMW9Xg/iv/GrkiQ6vVz9aSTAOmfsVr/k1+29k13OjlFue2u8CqP2QXc5FQcOLnK1TqsDNt6CuRGp0myQBfo3SwIvJBpAOeX8XyF30VlNZj2UzNCDGU9Uf0ZDYGsVk5mtw2fkiGUFCxB5X5gfDYFDEAYZQM2q1joT3m5wBTZXYjdKC7cRTcieitQg/kpVX/ENwYizxG2n8l2xgYidzd+28TN6aIrsPV6hMuActBxIIXAcOL91x7gE+DfKMcQfR1lD3UBs85eBvgvt7U0RJwz7ZIAAAAASUVORK5CYII="}
+{"id":12,"obj":"img","x":200,"y":60,"scale":350,"src":"tasmota_logo","image_recolor":"#FFFFFF","image_recolor_opa":255}
+
+{"page":12,"comment":"---------- Page 12 Roller ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[12. Roller]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"roller","x":10,"y":55,"options":"Option 1\nOption 2\nOption 3\nOption 4","val":1}
+
+{"page":13,"comment":"---------- Page 13 QR Code ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[13. QR Code]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"qrcode","qr_text":"https://tasmota.github.io/","x":85,"y":55,"qr_size":120}
+
+{"page":14,"comment":"---------- Page 14 Bars ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[14. Sliders]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"slider","x":0,"y":60,"w":100,"h":10,"val":65}
+{"id":12,"obj":"slider","x":0,"y":90,"w":180,"h":20,"bg_color":"#000044","bg_color10":"#00FF00","bg_color20":"#FFFFFF","val":40,"bg_opa":255,"border_color":"#1FA3EC","border_width":2,"pad_all":6,"radius":6}
+{"id":13,"obj":"slider","x":0,"y":130,"w":180,"h":15,"bg_color":"#4F4F4F","bg_opa":255,"bg_color10":"#00FF00","bg_color20":"#FFFFFF","val":26,"min":-20,"max":30,"bg_grad_color10":"#FF4400","bg_grad_dir10":2}
+
+{"page":15,"comment":"---------- Page 15 Arcs ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[15. Arcs]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"arc","x":10,"y":60,"w":100,"h":100,"min":-20,"max":40,"val":26,"text":"76%","label_to_angle":-20}
+{"id":12,"obj":"arc","x":150,"y":60,"w":100,"h":120,"arc_color10":"#00FF00","bg_color20":"#00FF00","val":65,"text":"Nominal","angle":-40,"border_width20":3,"border_color20":"#FFFFFF","end_angle":310}
+
+{"page":16,"comment":"---------- Page 16 Scale ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[16. Scale]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"scale","x":10,"y":60,"w":200,"h":30,"min":10,"max":40,"total_tick_count":31,"major_tick_every":5,"label_show":true,"line_width":2,"line_width10":2,"line_width30":2,"length10":10,"length30":5,"pad_top":10}
+  {"id":12,"obj":"bar","parentid":11,"y":-8,"w%":100,"h":6,"val":27}
+
+{"id":22,"obj":"scale","x":240,"y":35,"w":74,"h":140,"min":0,"max":100,"mode":4,"total_tick_count":21,"major_tick_every":5,"label_show":true,"line_color":"#4444FF","line_color10":"#4444FF","line_color30":"#AAAAFF","line_width":2,"line_width10":2,"line_width30":2,"length10":10,"length30":5,"text_src":["0 °C", "25 °C", "50 °C", "75 °C", "100 °C"],"bg_color":"#000044","bg_opa":127,"pad_left":16,"radius":8,"pad_ver":12}
+  {"id":23,"obj":"scale_section","parentid":22,"min":75,"max":100,"line_color":"#FF4400","line_width":3,"line_color10":"#FF4400","line_width10":4,"text_color10":"#FF4400","line_color30":"#FF4400","line_width30":3}
+  {"id":24,"obj":"bar","parentid":22,"x":-10,"h%":100,"w":6,"radius":0,"radius10":0,"bg_color":"#4F4F4F","bg_color10":"#FFFFFF","val":27}
+
+{"page":17,"comment":"---------- Page 17 Scale 2 ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[17. Scale 2]","text_font":"montserrat-20"}
+
+{"id":21,"obj":"scale","x":10,"y":60,"w":120,"h":120,"min":10,"max":40,"mode":8,"bg_opa":255,"radius":32767,"clip_corner":true,"label_show":true,"total_tick_count":31,"major_tick_every":5,"length10":10,"length30":5,"angle_range":270,"rotation":135,"arc_width":2,"line_width10":2,"line_width30":2,"length10":10,"length30":5}
+  {"id":22,"obj":"scale_line","parentid":21,"line_color":"#00FF00","line_width":4,"line_rounded":true,"needle_length":50,"val":22}
+  {"id":23,"obj":"scale_line","parentid":21,"line_color":"#FF4400","line_width":6,"line_rounded":true,"needle_length":30,"val":33}
+
+{"id":31,"obj":"scale","x":180,"y":80,"w":80,"h":80,"min":0,"max":100,"mode":16,"bg_opa":0,"label_show":true,"total_tick_count":21,"major_tick_every":5,"text_src":["0 °C", "25 °C", "50 °C", "75 °C", "100 °C"],"arc_color":"#4444FF","line_color10":"#4444FF","line_color30":"#AAAAFF","text_color":"#AAAAFF","arc_width":2,"line_width10":2,"line_width30":2,"length10":10,"length30":5}
+  {"id":32,"obj":"scale_section","parentid":31,"min":75,"max":100,"arc_color":"#FF4400","arc_width":3,"line_color10":"#FF4400","line_width10":4,"text_color10":"#FF4400","line_color30":"#FF4400","line_width30":3}
+  {"id":33,"obj":"scale_line","parentid":31,"line_color":"#1FA3EC","line_width":10,"line_rounded":true,"needle_length":30,"val":37}
+
+{"page":18,"comment":"---------- Page 18 Spinner ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[18. Spinner]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"spinner","x":10,"y":60,"w":100,"h":100,"angle":200,"speed":5000,"arc_color":"#000044","arc_color10":"#1FA3EC"}
+
+{"page":19,"comment":"---------- Page 19 Dropdown ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[19. Dropdown]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"dropdown","x":10,"y":55,"direction":3,"options":"Option 1\nOption 2\nOption 3\nOption 4","val":1}
+  {"id":12,"obj":"dropdown_list","parentid":11,"h":90}
+
+{"page":20,"comment":"---------- Page 20 Embedded Fonts ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[20. Embedded Fonts]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"label","x":2,"y":50,"w":316,"text":"robotocondensed-12","text_font":"robotocondensed-12"}
+{"id":12,"obj":"label","x":2,"y":64,"w":316,"text":"robotocondensed-16","text_font":"robotocondensed-16"}
+{"id":13,"obj":"label","x":2,"y":80,"w":316,"text":"robotocondensed-24","text_font":"robotocondensed-24"}
+
+{"id":15,"obj":"label","x":2,"y":106,"w":316,"text":"montserrat-10","text_font":"montserrat-10"}
+{"id":16,"obj":"label","x":2,"y":114,"w":316,"text":"montserrat-14","text_font":"montserrat-14"}
+{"id":17,"obj":"label","x":2,"y":126,"w":316,"text":"montserrat-20","text_font":"montserrat-20"}
+{"id":18,"obj":"label","x":2,"y":140,"w":316,"text":"montserrat-28","text_font":"montserrat-28"}
+
+{"id":20,"obj":"label","x":2,"y":170,"w":100,"text":"unscii-8","text_font":"unscii-8"}
+{"id":21,"obj":"label","x":102,"y":166,"w":200,"text":"unscii-16","text_font":"unscii-16"}
+
+{"page":21,"comment":"---------- Page 21 Icons ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[21. Icons]","text_font":"montserrat-20"}
+
+{"id":11,"obj":"label","x":2,"y":60,"w":30,"align":1,"text":"10"}
+{"id":12,"obj":"label","x":32,"y":60,"w":30,"align":1,"text":"12"}
+{"id":13,"obj":"label","x":62,"y":60,"w":30,"align":1,"text":"14"}
+{"id":14,"obj":"label","x":92,"y":60,"w":30,"align":1,"text":"18"}
+{"id":15,"obj":"label","x":122,"y":60,"w":30,"align":1,"text":"20"}
+{"id":16,"obj":"label","x":152,"y":60,"w":30,"align":1,"text":"24"}
+{"id":17,"obj":"label","x":192,"y":60,"w":30,"align":1,"text":"28"}
+
+{"id":21,"obj":"label","x":2,"y":78,"w":30,"align":1,"text":"\uF015","text_font":"icons-10"}
+{"id":22,"obj":"label","x":32,"y":78,"w":30,"align":1,"text":"\uF015","text_font":"icons-12"}
+{"id":23,"obj":"label","x":62,"y":78,"w":30,"align":1,"text":"\uF015","text_font":"icons-14"}
+{"id":24,"obj":"label","x":92,"y":78,"w":30,"align":1,"text":"\uF015","text_font":"icons-18"}
+{"id":25,"obj":"label","x":122,"y":78,"w":30,"align":1,"text":"\uF015","text_font":"icons-20"}
+{"id":26,"obj":"label","x":152,"y":78,"w":30,"align":1,"text":"\uF015","text_font":"icons-24"}
+{"id":27,"obj":"label","x":192,"y":78,"w":30,"align":1,"text":"\uF015","text_font":"icons-28"}
+
+{"id":41,"obj":"label","x":2,"y":110,"w":30,"align":1,"text":"\uE335","text_font":"icons-10"}
+{"id":42,"obj":"label","x":32,"y":110,"w":30,"align":1,"text":"\uE335","text_font":"icons-12"}
+{"id":43,"obj":"label","x":62,"y":110,"w":30,"align":1,"text":"\uE335","text_font":"icons-14"}
+{"id":44,"obj":"label","x":92,"y":110,"w":30,"align":1,"text":"\uE335","text_font":"icons-18"}
+{"id":45,"obj":"label","x":122,"y":110,"w":30,"align":1,"text":"\uE335","text_font":"icons-20"}
+{"id":46,"obj":"label","x":152,"y":110,"w":30,"align":1,"text":"\uE335","text_font":"icons-24"}
+{"id":47,"obj":"label","x":192,"y":110,"w":30,"align":1,"text":"\uE335","text_font":"icons-28"}
+
+{"page":22,"comment":"---------- Page 22 Seg7 font ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[22. Font Seg7]","text_font":"montserrat-20"}
+
+{"id":10,"obj":"label","x":2,"y":60,"w":30,"align":1,"text":"8"}
+{"id":11,"obj":"label","x":32,"y":60,"w":40,"align":1,"text":"10"}
+{"id":12,"obj":"label","x":72,"y":60,"w":50,"align":1,"text":"12"}
+{"id":13,"obj":"label","x":122,"y":60,"w":50,"align":1,"text":"14"}
+{"id":14,"obj":"label","x":172,"y":60,"w":60,"align":1,"text":"18"}
+{"id":15,"obj":"label","x":232,"y":60,"w":70,"align":1,"text":"20"}
+{"id":16,"obj":"label","x":2,"y":100,"w":70,"align":1,"text":"24"}
+{"id":17,"obj":"label","x":72,"y":100,"w":90,"align":1,"text":"28"}
+{"id":18,"obj":"label","x":162,"y":100,"w":130,"align":1,"text":"36"}
+
+{"id":20,"obj":"label","x":2,"y":82,"w":30,"align":1,"text":"12:34","text_font":"seg7-8","text_color":"#FF4400"}
+{"id":21,"obj":"label","x":32,"y":82,"w":40,"align":1,"text":"12:34","text_font":"seg7-10","text_color":"#FF4400"}
+{"id":22,"obj":"label","x":72,"y":82,"w":50,"align":1,"text":"12:34","text_font":"seg7-12","text_color":"#FF4400"}
+{"id":23,"obj":"label","x":122,"y":82,"w":50,"align":1,"text":"12:34","text_font":"seg7-14","text_color":"#FF4400"}
+{"id":24,"obj":"label","x":172,"y":82,"w":60,"align":1,"text":"12:34","text_font":"seg7-16","text_color":"#FF4400"}
+{"id":25,"obj":"label","x":232,"y":82,"w":70,"align":1,"text":"12:34","text_font":"seg7-18","text_color":"#FF4400"}
+{"id":26,"obj":"label","x":2,"y":122,"w":70,"align":1,"text":"12:34","text_font":"seg7-20","text_color":"#FF4400"}
+{"id":27,"obj":"label","x":72,"y":122,"w":90,"align":1,"text":"12:34","text_font":"seg7-24","text_color":"#FF4400"}
+{"id":28,"obj":"label","x":162,"y":122,"w":130,"align":1,"text":"12:34","text_font":"seg7-36","text_color":"#FF4400"}
+
+{"page":23,"comment":"---------- Page 23 Message Box ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[23. Message Box]","text_font":"montserrat-20"}
+
+{"id":10,"obj":"msgbox","x":0,"y":0,"w%":80,"h":100,"text":"A message box with two buttons.","options":["Apply","Close"]}
+
+{"page":24,"comment":"---------- Page 24 Color Picker ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[24. Color Picker]","text_font":"montserrat-20"}
+
+{"id":10,"obj":"cpicker","x":20,"y":60,"w":120,"h":120,"color":"#FFFF00","mode":"hue","scale_width":20}
+
+{"page":25,"comment":"---------- Page 25 Tabview ----------"}
+
+{"id":1,"obj":"label","x":0,"y":30,"w%":100,"h":24,"text":"[25. Tabview]","text_font":"montserrat-20"}
+
+{"id":10,"obj":"tabview","x%":5,"y":60,"h%":55,"w%":90,"tab_bar_size":40,"btn_pos":1,"val":2}
+  {"id":51,"obj":"tab","parentid":10,"text":"Tab 1"}
+  {"id":52,"obj":"tab","parentid":10,"text":"Tab 2"}
+  {"id":53,"obj":"tab","parentid":10,"text":"Tab 3"}
+    {"id":61,"obj":"switch","x":20,"y":10,"w":60,"h":30,"parentid":51,"radius":25,"radius20":25}
+    {"id":71,"obj":"dropdown","x":15,"y":10,"w":110,"h":30,"parentid":52,"options":"Apple\nBanana\nOrange\nMelon"}
+      {"id":72,"obj":"dropdown_list","parentid":71}
+    {"id":81,"obj":"checkbox","x":15,"y":10,"w":150,"h":30,"parentid":53,"text":"Nice tabview"}
diff --git a/tasmota/berry/haspmota_src/pages_screenshot.be b/tasmota/berry/haspmota_src/pages_screenshot.be
new file mode 100644
index 000000000..1797b234d
--- /dev/null
+++ b/tasmota/berry/haspmota_src/pages_screenshot.be
@@ -0,0 +1,38 @@
+# simple script to make screenshots of HASPmota demo
+
+def pageshot(p, cb)
+  global.(f"p{p}").show()
+  tasmota.set_timer(1000, 
+    def ()
+      log(f"SCRSHT: screenshot for page {p}")
+      tasmota.cmd("backlog time 1704112620")
+      tasmota.set_timer(1000,
+        def ()
+          var s = lv.screenshot()
+          import path
+          path.rename(s, f"/HASPmota_{p:02i}.bmp")
+          log(f"SCRSHT: generated /HASPmota_{p:02i}.bmp")
+          tasmota.defer(cb)
+        end
+      )
+    end
+  )
+end
+
+def next_page(p, last)
+  pageshot(p,
+    def ()
+      var p_next = p + 1
+      if p_next <= last
+        next_page(p_next, last)
+      else
+        log(f"SCRSHT: finished")
+      end
+    end
+  )
+end
+
+def start()
+  next_page(1, 25)
+end
+