From 113788bf268212a861b656d8b8a5117dff1a2be2 Mon Sep 17 00:00:00 2001 From: Stephan Hadinger Date: Mon, 23 Dec 2024 10:13:23 +0000 Subject: [PATCH] HASPmota add tabview --- docs/HASPmota.md | 42 +++++++++++++++++++++++ docs/_media/lvgl/HASPmota_25_tabview.png | Bin 0 -> 7537 bytes docs/_media/lvgl/haspmota_demo.jsonl | 13 +++++++ 3 files changed, 55 insertions(+) create mode 100644 docs/_media/lvgl/HASPmota_25_tabview.png diff --git a/docs/HASPmota.md b/docs/HASPmota.md index a37a1131d7..47c9892a29 100644 --- a/docs/HASPmota.md +++ b/docs/HASPmota.md @@ -32,6 +32,7 @@ This feature is heavily inspired from @fvanroie's [openHASP project](https://git [![HASPmota seg7](_media/lvgl/HASPmota_22_seg7.png){width="160"}](#embedded-special-fonts) [![HASPmota msgbox](_media/lvgl/HASPmota_23_msgbox.png){width="160"}](#msgbox) [![HASPmota cpicker](_media/lvgl/HASPmota_24_cpicker.png){width="160"}](#cpicker) +[![HASPmota tabview](_media/lvgl/HASPmota_25_tabview.png){width="160"}](#tabview) The `jsonl` file used to display the widgets can be found [here](_media/lvgl/haspmota_demo.jsonl) @@ -239,6 +240,7 @@ HASPmota Class|Embedded LVGL class `span`|`lv.span` `msgbox`|`lv.msgbox` `qrcode`|`lv.qrcode` +`tabview`|`lv.tabview` You can also import custom widget as long as they inherit from `lv.obj` and the class name matches the module name. @@ -892,6 +894,46 @@ Attribute name|LVGL equivalent|Details `text_letter_space`|`set_text_letter_space`|Set the letter space in pixels `text_line_space`|`set_text_line_space`|Set the line space in pixels. +### `tabview` + +!!!note "Available (since Tasmota v14.4.2)." + +The `tabview` can be used to organize content in tabs. + +![HASPmota tabview](_media/lvgl/HASPmota_25_tabview.png) + +Example: + +```json +{"id":10,"obj":"tabview","x%":5,"y":60,"h%":55,"w%":90,"tab_bar_size":40,"btn_pos":1,"bg_color":"#222222","border_width":2,"border_color":"#FFFF44"} + {"id":51,"obj":"tab","parentid":10,"text":"Tab 1","tab_bg_color":"#000000","tab_bg_color01":"#FF4400","tab_text_color":"#FFFF44","tab_text_color01":"#FFFFFF"} + {"id":52,"obj":"tab","parentid":10,"text":"Tab 2","tab_bg_color":"#000000","tab_bg_color01":"#FF4400","tab_text_color":"#FFFF44","tab_text_color01":"#FFFFFF"} + {"id":53,"obj":"tab","parentid":10,"text":"Tab 3","tab_bg_color":"#000000","tab_bg_color01":"#FF4400","tab_text_color":"#FFFF44","tab_text_color01":"#FFFFFF"} + {"id":61,"obj":"switch","x":20,"y":10,"w":60,"h":30,"parentid":51,"radius":25,"radius20":25,"bg_color":"#4f4f4f","bg_color20":"#FFFF88","bg_color11":"#FF4400"} + {"id":71,"obj":"dropdown","x":15,"y":10,"w":110,"h":30,"parentid":52,"options":"Apple\nBanana\nOrange\nMelon","bg_color50":"#FF4400","text_color":"#FFFF88","text_color50":"#FFFF88","border_color":"#FFFF88"} + {"id":72,"obj":"dropdown_list","parentid":71,"text_color":"#EAEAEA","bg_color51":"#FF4400"} + {"id":81,"obj":"checkbox","x":15,"y":10,"w":120,"h":30,"parentid":53,"text":" Nice tabview","border_color10":"#FFFF88","bg_color10":"#4F4F4F","bg_color11":"#FF4400","text_color":"#FFFF44"} +``` + +You must first define a `tabview` object, and add as many as `tab` sub-objects. You need to define the `parentid` attribute to the `tabview`. Sub-objects are then placed within each `tab` as long as you define `parentid` to the `tab`. + +`tabview` Attribute name|LVGL equivalent|Details +:---|:---|:--- +`tab_bar_size`|`tab_bar_size`|(write-only) Set the vertical size of tab buttons. +`bg_color`|`bg_color`|Set the background color for the content background of the sub-tabs +`border_color`|`border_color`|Set the color of the overall border of tabview. +`border_width`|`border_width`|Set the border size of the overall border of tabview. + +`tab` Attribute name|LVGL equivalent|Details +:---|:---|:--- +`parentid`||Set to the `id` of the `tabview` it belongs to. +`text`||Set the title of the tab button; cannot be changed once the tab is created. +`tab_bg_color`||Set the background color of the tab button when it is not selected. +`tab_bg_color01`||Set the background color of the tab button when it is selected. +`tab_text_color`||Set the text color of the tab button when it is not selected. +`tab_text_color01`||Set the text color of the tab button when it is selected. +`tab_radius`||Set the radius of the tab button. Set to `0` by default for rectangular tab buttons. + ### `msgbox` The `msgbox` (message box) object allows to display a pop-up with a text content and one or multiple buttons. The pop-up can be made "modal" (not impemented yet). diff --git a/docs/_media/lvgl/HASPmota_25_tabview.png b/docs/_media/lvgl/HASPmota_25_tabview.png new file mode 100644 index 0000000000000000000000000000000000000000..904b532911961f666bf5bf58645d9efb63dfd729 GIT binary patch literal 7537 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