feat/Add active hostname to device display

Also regularized up the layouts

.gitignore

@@ -15,3 +15,4 @@ node_modules
 #internal/native/lib
 
 ui/reports
+*.eez-project-ui-state

display.go

@@ -44,6 +44,7 @@ func updateDisplay() {
 		nativeInstance.UpdateLabelIfChanged("home_info_ipv4_addr", networkManager.IPv4String())
 		nativeInstance.UpdateLabelAndChangeVisibility("home_info_ipv6_addr", networkManager.IPv6String())
 		nativeInstance.UpdateLabelIfChanged("home_info_mac_addr", networkManager.MACString())
+		nativeInstance.UpdateLabelIfChanged("home_info_hostname", networkManager.Hostname())
 	}
 
 	_, _ = nativeInstance.UIObjHide("menu_btn_network")

internal/native/eez/src/ui/fonts.h

@@ -8,6 +8,7 @@ extern "C" {
 #endif
 
 extern const lv_font_t ui_font_font_bold30;
+extern const lv_font_t ui_font_font_bold24;
 extern const lv_font_t ui_font_font_book16;
 extern const lv_font_t ui_font_font_book18;
 extern const lv_font_t ui_font_font_book20;

internal/native/eez/src/ui/fonts/ui_font_font_bold30.c

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Size: 30 px
  * Bpp: 4
- * Opts: --bpp 4 --size 30 --no-compress --font ../../Downloads/jetkvm-lvgl-ui 2/assets/font-bold.ttf --range 32-127 --format lvgl
+ * Opts: --bpp 4 --size 30 --no-compress --font ../fonts/font-bold.ttf --range 32-127 --format lvgl
  ******************************************************************************/
 
 #ifdef __has_include

internal/native/eez/src/ui/fonts/ui_font_font_book16.c

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Size: 16 px
  * Bpp: 4
- * Opts: --bpp 4 --size 16 --no-compress --font ../../Downloads/jetkvm-lvgl-ui 2/assets/font-book.ttf --range 32-127 --format lvgl
+ * Opts: --bpp 4 --size 16 --no-compress --font ../fonts/font-book.ttf --range 32-127 --format lvgl
  ******************************************************************************/
 
 #ifdef __has_include

internal/native/eez/src/ui/fonts/ui_font_font_book18.c

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Size: 18 px
  * Bpp: 4
- * Opts: --bpp 4 --size 18 --no-compress --font ../../Downloads/jetkvm-lvgl-ui 2/assets/font-book.ttf --range 32-127 --format lvgl
+ * Opts: --bpp 4 --size 18 --no-compress --font ../fonts/font-book.ttf --range 32-127 --format lvgl
  ******************************************************************************/
 
 #ifdef __has_include

internal/native/eez/src/ui/fonts/ui_font_font_book20.c

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Size: 20 px
  * Bpp: 4
- * Opts: --bpp 4 --size 20 --no-compress --font ../../Downloads/jetkvm-lvgl-ui 2/assets/font-book.ttf --range 32-127 --format lvgl
+ * Opts: --bpp 4 --size 20 --no-compress --font ../fonts/font-book.ttf --range 32-127 --format lvgl
  ******************************************************************************/
 
 #ifdef __has_include

internal/native/eez/src/ui/fonts/ui_font_font_book24.c

@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Size: 24 px
  * Bpp: 4
- * Opts: --bpp 4 --size 24 --no-compress --font ../../Downloads/jetkvm-lvgl-ui 2/assets/font-book.ttf --range 32-127 --format lvgl
+ * Opts: --bpp 4 --size 24 --no-compress --font ../fonts/font-book.ttf --range 32-127 --format lvgl
  ******************************************************************************/
 
 #ifdef __has_include

internal/native/eez/src/ui/screens.c

@@ -152,8 +152,8 @@ void create_screen_no_network_screen() {
                     // NoNetworkContentContainer
                     lv_obj_t *obj = lv_obj_create(parent_obj);
                     objects.no_network_content_container = obj;
-                    lv_obj_set_pos(obj, 0, 20);
+                    lv_obj_set_pos(obj, 0, 0);
-                    lv_obj_set_size(obj, LV_PCT(100), LV_PCT(75));
+                    lv_obj_set_size(obj, LV_PCT(100), LV_PCT(80));
                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
@@ -167,7 +167,6 @@ void create_screen_no_network_screen() {
                     lv_obj_set_style_flex_main_place(obj, LV_FLEX_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_flex_cross_place(obj, LV_FLEX_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_flex_track_place(obj, LV_FLEX_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
-                    lv_obj_set_style_margin_top(obj, 200, LV_PART_MAIN | LV_STATE_CHECKED);
                     {
                         lv_obj_t *parent_obj = obj;
                         {
@@ -319,7 +318,7 @@ void create_screen_home_screen() {
                             objects.home_info_ipv4_addr = obj;
                             lv_obj_set_pos(obj, LV_PCT(0), LV_PCT(0));
                             lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
-                            add_style_label_font_bold30(obj);
+                            add_style_label_font_bold24(obj);
                             lv_label_set_text(obj, "169.254.169.254");
                         }
                         {
@@ -327,11 +326,12 @@ void create_screen_home_screen() {
                             lv_obj_t *obj = lv_label_create(parent_obj);
                             objects.home_info_ipv6_addr = obj;
                             lv_obj_set_pos(obj, LV_PCT(0), LV_PCT(0));
-                            lv_obj_set_size(obj, LV_PCT(98), 17);
+                            lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
-                            lv_label_set_long_mode(obj, LV_LABEL_LONG_DOT);
+                            lv_label_set_long_mode(obj, LV_LABEL_LONG_SCROLL_CIRCULAR);
                             lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN);
                             add_style_label_font16(obj);
-                            lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN | LV_STATE_DEFAULT);
+                            lv_obj_set_style_text_font(obj, &ui_font_font_book16, LV_PART_MAIN | LV_STATE_DEFAULT);
+                            lv_obj_set_style_pad_top(obj, -1, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_label_set_text(obj, "fe80::ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff");
                         }
                         {
@@ -341,8 +341,21 @@ void create_screen_home_screen() {
                             lv_obj_set_pos(obj, LV_PCT(0), LV_PCT(0));
                             lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
                             add_style_label_font16(obj);
+                            lv_obj_set_style_pad_top(obj, -1, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_label_set_text(obj, "01:23:45:67:89:ab");
                         }
+                        {
+                            // HomeInfoHostname
+                            lv_obj_t *obj = lv_label_create(parent_obj);
+                            objects.home_info_hostname = obj;
+                            lv_obj_set_pos(obj, LV_PCT(0), LV_PCT(0));
+                            lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+                            lv_label_set_long_mode(obj, LV_LABEL_LONG_DOT);
+                            add_style_label_font16(obj);
+                            lv_obj_set_style_pad_bottom(obj, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
+                            lv_obj_set_style_pad_top(obj, -1, LV_PART_MAIN | LV_STATE_DEFAULT);
+                            lv_label_set_text(obj, "JetKVM");
+                        }
                     }
                 }
                 {
@@ -799,7 +812,7 @@ void create_screen_menu_advanced_screen() {
                     lv_obj_t *obj = lv_obj_create(parent_obj);
                     objects.menu_items_container_1 = obj;
                     lv_obj_set_pos(obj, 0, 0);
-                    lv_obj_set_size(obj, LV_PCT(100), LV_PCT(80));
+                    lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
@@ -950,6 +963,7 @@ void create_screen_menu_network_screen() {
     lv_obj_set_size(obj, 300, 240);
     lv_obj_add_event_cb(obj, action_menu_advanced_screen_gesture, LV_EVENT_GESTURE, (void *)0);
     add_style_flex_screen_menu(obj);
+    lv_obj_set_style_pad_right(obj, 24, LV_PART_MAIN | LV_STATE_DEFAULT);
     {
         lv_obj_t *parent_obj = obj;
         {
@@ -1601,7 +1615,7 @@ void create_screen_status_screen() {
                     lv_obj_t *obj = lv_obj_create(parent_obj);
                     objects.status_items_container = obj;
                     lv_obj_set_pos(obj, 0, 0);
-                    lv_obj_set_size(obj, LV_PCT(100), LV_PCT(80));
+                    lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
@@ -1638,13 +1652,13 @@ void create_screen_status_screen() {
                                     lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+                                    lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_radius(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                                     add_style_flex_column_start(obj);
-                                    lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     {
                                         lv_obj_t *parent_obj = obj;
                                         {
@@ -1673,6 +1687,7 @@ void create_screen_status_screen() {
                                     lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+                                    lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
@@ -1680,7 +1695,6 @@ void create_screen_status_screen() {
                                     lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN);
                                     lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                                     add_style_flex_column_start(obj);
-                                    lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     {
                                         lv_obj_t *parent_obj = obj;
                                         {
@@ -1709,13 +1723,13 @@ void create_screen_status_screen() {
                                     lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+                                    lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_radius(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                                     add_style_flex_column_start(obj);
-                                    lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     {
                                         lv_obj_t *parent_obj = obj;
                                         {
@@ -1820,7 +1834,7 @@ void create_screen_reset_config_screen() {
                     lv_obj_t *obj = lv_obj_create(parent_obj);
                     objects.reset_config_container = obj;
                     lv_obj_set_pos(obj, 0, 0);
-                    lv_obj_set_size(obj, LV_PCT(100), LV_PCT(80));
+                    lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
@@ -1840,13 +1854,13 @@ void create_screen_reset_config_screen() {
                             lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                             lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+                            lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_radius(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                             add_style_flex_column_start(obj);
-                            lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                             {
                                 lv_obj_t *parent_obj = obj;
                                 {
@@ -1874,7 +1888,7 @@ void create_screen_reset_config_screen() {
                                             lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                             add_style_info_content_label(obj);
                                             lv_obj_set_style_text_font(obj, &ui_font_font_book20, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_label_set_text(obj, "Press and hold for\n10 seconds");
+                                            lv_label_set_text(obj, "Press and hold\nfor 10 seconds");
                                         }
                                     }
                                 }
@@ -1915,13 +1929,13 @@ void create_screen_reset_config_screen() {
                                     lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                    lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_radius(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                                     add_style_flex_column_start(obj);
+                                    lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     {
                                         lv_obj_t *parent_obj = obj;
                                         {
@@ -1934,15 +1948,15 @@ void create_screen_reset_config_screen() {
                                             lv_obj_add_event_cb(obj, action_reset_config, LV_EVENT_RELEASED, (void *)0);
                                             lv_obj_set_style_bg_color(obj, lv_color_hex(0xffdc2626), LV_PART_MAIN | LV_STATE_DEFAULT);
                                             lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_obj_set_style_pad_right(obj, 13, LV_PART_MAIN | LV_STATE_DEFAULT);
+                                            lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                                             {
                                                 lv_obj_t *parent_obj = obj;
                                                 {
                                                     lv_obj_t *obj = lv_label_create(parent_obj);
                                                     lv_obj_set_pos(obj, 0, 0);
                                                     lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+                                                    add_style_menu_button_label(obj);
                                                     lv_obj_set_style_align(obj, LV_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                                    lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN | LV_STATE_DEFAULT);
                                                     lv_label_set_text(obj, "Reset configuration");
                                                 }
                                             }
@@ -2087,7 +2101,7 @@ void create_screen_reboot_screen() {
                                             lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                             add_style_info_content_label(obj);
                                             lv_obj_set_style_text_font(obj, &ui_font_font_book20, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_label_set_text(obj, "Press and hold for\n5 seconds");
+                                            lv_label_set_text(obj, "Press and hold\nfor 5 seconds");
                                         }
                                     }
                                 }
@@ -2099,13 +2113,13 @@ void create_screen_reboot_screen() {
                                     lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                    lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_radius(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                                     add_style_flex_column_start(obj);
+                                    lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     {
                                         lv_obj_t *parent_obj = obj;
                                         {
@@ -2116,17 +2130,17 @@ void create_screen_reboot_screen() {
                                             lv_obj_add_event_cb(obj, action_reboot, LV_EVENT_PRESSED, (void *)0);
                                             lv_obj_add_event_cb(obj, action_reboot, LV_EVENT_PRESSING, (void *)0);
                                             lv_obj_add_event_cb(obj, action_reboot, LV_EVENT_RELEASED, (void *)0);
+                                            add_style_menu_button(obj);
                                             lv_obj_set_style_bg_color(obj, lv_color_hex(0xffdc2626), LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN | LV_STATE_DEFAULT);
+                                            lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_obj_set_style_pad_right(obj, 13, LV_PART_MAIN | LV_STATE_DEFAULT);
                                             {
                                                 lv_obj_t *parent_obj = obj;
                                                 {
                                                     lv_obj_t *obj = lv_label_create(parent_obj);
                                                     lv_obj_set_pos(obj, 0, 0);
                                                     lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+                                                    add_style_menu_button_label(obj);
                                                     lv_obj_set_style_align(obj, LV_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                                    lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN | LV_STATE_DEFAULT);
                                                     lv_label_set_text(obj, "Hold to reboot");
                                                 }
                                             }
@@ -2290,6 +2304,7 @@ void create_screen_switch_dhcp_client_screen() {
                     lv_obj_set_size(obj, LV_PCT(100), LV_PCT(80));
                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+                    lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                     lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
@@ -2298,7 +2313,6 @@ void create_screen_switch_dhcp_client_screen() {
                     lv_obj_set_scroll_dir(obj, LV_DIR_VER);
                     lv_obj_set_scroll_snap_x(obj, LV_SCROLL_SNAP_START);
                     add_style_flex_column_start(obj);
-                    lv_obj_set_style_pad_right(obj, 4, LV_PART_MAIN | LV_STATE_DEFAULT);
                     {
                         lv_obj_t *parent_obj = obj;
                         {
@@ -2307,13 +2321,13 @@ void create_screen_switch_dhcp_client_screen() {
                             lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                             lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
+                            lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_set_style_radius(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                             lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                             add_style_flex_column_start(obj);
-                            lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                             {
                                 lv_obj_t *parent_obj = obj;
                                 {
@@ -2341,7 +2355,7 @@ void create_screen_switch_dhcp_client_screen() {
                                             lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                             add_style_info_content_label(obj);
                                             lv_obj_set_style_text_font(obj, &ui_font_font_book20, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_label_set_text(obj, "Press and hold for\n5 seconds");
+                                            lv_label_set_text(obj, "Press and hold\nfor 5 seconds");
                                         }
                                     }
                                 }
@@ -2382,13 +2396,13 @@ void create_screen_switch_dhcp_client_screen() {
                                     lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
                                     lv_obj_set_style_pad_left(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_top(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                    lv_obj_set_style_pad_right(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_pad_bottom(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_bg_opa(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_border_width(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_set_style_radius(obj, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
                                     add_style_flex_column_start(obj);
+                                    lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
                                     {
                                         lv_obj_t *parent_obj = obj;
                                         {
@@ -2399,9 +2413,9 @@ void create_screen_switch_dhcp_client_screen() {
                                             lv_obj_add_event_cb(obj, action_dhcpc, LV_EVENT_PRESSED, (void *)0);
                                             lv_obj_add_event_cb(obj, action_dhcpc, LV_EVENT_PRESSING, (void *)0);
                                             lv_obj_add_event_cb(obj, action_dhcpc, LV_EVENT_RELEASED, (void *)0);
+                                            add_style_menu_button(obj);
                                             lv_obj_set_style_bg_color(obj, lv_color_hex(0xffdc2626), LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN | LV_STATE_DEFAULT);
+                                            lv_obj_set_style_pad_right(obj, 10, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                            lv_obj_set_style_pad_right(obj, 13, LV_PART_MAIN | LV_STATE_DEFAULT);
                                             {
                                                 lv_obj_t *parent_obj = obj;
                                                 {
@@ -2410,8 +2424,8 @@ void create_screen_switch_dhcp_client_screen() {
                                                     objects.dhcp_client_change_label = obj;
                                                     lv_obj_set_pos(obj, 0, 0);
                                                     lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+                                                    add_style_menu_button_label(obj);
                                                     lv_obj_set_style_align(obj, LV_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
-                                                    lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN | LV_STATE_DEFAULT);
                                                     lv_label_set_text(obj, "Switch to udhcpc");
                                                 }
                                             }

internal/native/eez/src/ui/screens.h

@@ -35,6 +35,7 @@ typedef struct _objects_t {
     lv_obj_t *home_info_ipv4_addr;
     lv_obj_t *home_info_ipv6_addr;
     lv_obj_t *home_info_mac_addr;
+    lv_obj_t *home_info_hostname;
     lv_obj_t *divider;
     lv_obj_t *home_status_container;
     lv_obj_t *usb_status;

internal/native/eez/src/ui/styles.c

@@ -76,8 +76,6 @@ void remove_style_flex_center(lv_obj_t *obj) {
 void init_style_flex_start_MAIN_DEFAULT(lv_style_t *style) {
     init_style_flex_center_MAIN_DEFAULT(style);
     
-    lv_style_set_layout(style, LV_LAYOUT_FLEX);
-    lv_style_set_flex_flow(style, LV_FLEX_FLOW_COLUMN);
     lv_style_set_flex_main_place(style, LV_FLEX_ALIGN_START);
     lv_style_set_flex_cross_place(style, LV_FLEX_ALIGN_START);
     lv_style_set_flex_track_place(style, LV_FLEX_ALIGN_START);
@@ -110,10 +108,8 @@ void remove_style_flex_start(lv_obj_t *obj) {
 void init_style_flow_row_space_between_MAIN_DEFAULT(lv_style_t *style) {
     init_style_flex_center_MAIN_DEFAULT(style);
     
-    lv_style_set_layout(style, LV_LAYOUT_FLEX);
     lv_style_set_flex_flow(style, LV_FLEX_FLOW_ROW);
     lv_style_set_flex_main_place(style, LV_FLEX_ALIGN_SPACE_BETWEEN);
-    lv_style_set_flex_cross_place(style, LV_FLEX_ALIGN_CENTER);
     lv_style_set_flex_track_place(style, LV_FLEX_ALIGN_START);
 };
 
@@ -144,11 +140,7 @@ void remove_style_flow_row_space_between(lv_obj_t *obj) {
 void init_style_flow_row_start_center_MAIN_DEFAULT(lv_style_t *style) {
     init_style_flow_row_space_between_MAIN_DEFAULT(style);
     
-    lv_style_set_layout(style, LV_LAYOUT_FLEX);
-    lv_style_set_flex_flow(style, LV_FLEX_FLOW_ROW);
     lv_style_set_flex_main_place(style, LV_FLEX_ALIGN_START);
-    lv_style_set_flex_cross_place(style, LV_FLEX_ALIGN_CENTER);
-    lv_style_set_flex_track_place(style, LV_FLEX_ALIGN_START);
 };
 
 lv_style_t *get_style_flow_row_start_center_MAIN_DEFAULT() {
@@ -180,9 +172,9 @@ void init_style_flex_column_start_MAIN_DEFAULT(lv_style_t *style) {
     
     lv_style_set_layout(style, LV_LAYOUT_FLEX);
     lv_style_set_flex_flow(style, LV_FLEX_FLOW_COLUMN);
-    lv_style_set_flex_main_place(style, LV_FLEX_ALIGN_START);
-    lv_style_set_flex_cross_place(style, LV_FLEX_ALIGN_START);
     lv_style_set_flex_track_place(style, LV_FLEX_ALIGN_START);
+    lv_style_set_flex_cross_place(style, LV_FLEX_ALIGN_START);
+    lv_style_set_flex_main_place(style, LV_FLEX_ALIGN_SPACE_EVENLY);
 };
 
 lv_style_t *get_style_flex_column_start_MAIN_DEFAULT() {
@@ -302,6 +294,37 @@ void remove_style_label_font16(lv_obj_t *obj) {
     lv_obj_remove_style(obj, get_style_label_font16_MAIN_DEFAULT(), LV_PART_MAIN | LV_STATE_DEFAULT);
 };
 
+//
+// Style: LabelFontBold24
+//
+
+void init_style_label_font_bold24_MAIN_DEFAULT(lv_style_t *style) {
+    init_style_label_font16_MAIN_DEFAULT(style);
+    
+    lv_style_set_text_font(style, &ui_font_font_bold24);
+    lv_style_set_length(style, 0);
+};
+
+lv_style_t *get_style_label_font_bold24_MAIN_DEFAULT() {
+    static lv_style_t *style;
+    if (!style) {
+        style = lv_malloc(sizeof(lv_style_t));
+        lv_style_init(style);
+        init_style_label_font_bold24_MAIN_DEFAULT(style);
+    }
+    return style;
+};
+
+void add_style_label_font_bold24(lv_obj_t *obj) {
+    (void)obj;
+    lv_obj_add_style(obj, get_style_label_font_bold24_MAIN_DEFAULT(), LV_PART_MAIN | LV_STATE_DEFAULT);
+};
+
+void remove_style_label_font_bold24(lv_obj_t *obj) {
+    (void)obj;
+    lv_obj_remove_style(obj, get_style_label_font_bold24_MAIN_DEFAULT(), LV_PART_MAIN | LV_STATE_DEFAULT);
+};
+
 //
 // Style: LabelFontBold30
 //
@@ -342,7 +365,6 @@ void init_style_header_link_MAIN_DEFAULT(lv_style_t *style) {
     lv_style_set_text_color(style, lv_color_hex(0xff1d4ed8));
     lv_style_set_text_opa(style, 255);
     lv_style_set_text_font(style, &ui_font_font_book20);
-    lv_style_set_text_align(style, LV_TEXT_ALIGN_CENTER);
 };
 
 lv_style_t *get_style_header_link_MAIN_DEFAULT() {
@@ -536,6 +558,7 @@ void add_style(lv_obj_t *obj, int32_t styleIndex) {
         add_style_flex_screen,
         add_style_flex_screen_menu,
         add_style_label_font16,
+        add_style_label_font_bold24,
         add_style_label_font_bold30,
         add_style_header_link,
         add_style_menu_button,
@@ -559,6 +582,7 @@ void remove_style(lv_obj_t *obj, int32_t styleIndex) {
         remove_style_flex_screen,
         remove_style_flex_screen_menu,
         remove_style_label_font16,
+        remove_style_label_font_bold24,
         remove_style_label_font_bold30,
         remove_style_header_link,
         remove_style_menu_button,

internal/native/eez/src/ui/styles.h

@@ -52,6 +52,11 @@ lv_style_t *get_style_label_font16_MAIN_DEFAULT();
 void add_style_label_font16(lv_obj_t *obj);
 void remove_style_label_font16(lv_obj_t *obj);
 
+// Style: LabelFontBold24
+lv_style_t *get_style_label_font_bold24_MAIN_DEFAULT();
+void add_style_label_font_bold24(lv_obj_t *obj);
+void remove_style_label_font_bold24(lv_obj_t *obj);
+
 // Style: LabelFontBold30
 lv_style_t *get_style_label_font_bold30_MAIN_DEFAULT();
 void add_style_label_font_bold30(lv_obj_t *obj);