Labels missing with grouped items

[bubshowlett]

When grouping elements of different types together the labels for each element are not shown.

The following shows each element ungroup and each has a label

The following shows the same elements grouped together and the labels have gone

Is there away to keep the labels when grouping different elements?

[iangray001]

The completeExample.cpp has a few example of using ESPUI labels and inline styles to label grouped controls. It's not perfect but it is the most flexible approach.

[dewenni]

With the possibility of inline styles you can create different and flexible groups.

examples:

the key is to use the ESPUI.setElementStyle(value_id, LABLE_STYLE_VALUE); and split the 100% width for the different items. For example 60% for the Label, 30% for the value and 10% for the unit.

#define LABLE_STYLE_CLEAR "background-color: unset; width: 60%; text-align: left;"

#define LABLE_STYLE_VALUE "width: 30%;"

#define LABLE_STYLE_UNIT "background-color: unset; width: 10%; text-align: left;"

[BuzzerBoy]

@dewenni Do you have a code example for these graphic examples you posted? I learn by reverse engineering :)

[dewenni]

@BuzzerBoy

I have written some "helper" functions for that.

// Helper function to add a new group Element
uint16_t addGroupHelper(const char * title, ControlColor color, uint16_t tab) {
   auto groupID = ESPUI.addControl(Label, title, "", color, tab);
   ESPUI.setElementStyle(groupID, LABLE_STYLE_GROUP);
   return groupID;
}

// Helper function to add a new Element to a existing group
uint16_t addGroupValueHelper(const char * title, String value, String unit, uint16_t group) {
  ESPUI.setElementStyle(ESPUI.addControl(Label, "", title, None, group), LABLE_STYLE_CLEAR);
  uint16_t value_id = ESPUI.addControl(Label, "", value, None, group);
  ESPUI.setElementStyle(value_id, LABLE_STYLE_VALUE);
  ESPUI.setElementStyle(ESPUI.addControl(Label, "", unit, None, group), LABLE_STYLE_UNIT);
  return value_id;
}

and here the example for the WiFi Info group from the picture above

  auto wiFiGroup = addGroupHelper("WiFi-Info", Dark, id.tab.system);
  id.sys.wifiIP      = addGroupValueHelper(webText.WIFI_IP[config.lang], "--", "", wiFiGroup);
  id.sys.wifiSignal  = addGroupValueHelper("WiFi-Signal", "--", "%", wiFiGroup);
  id.sys.wifiRssi    = addGroupValueHelper("WiFi-Rssi", "--", "dbm", wiFiGroup);

the full example can be found here: https://github.com/dewenni/ESP_Buderus_KM271/blob/74b06222d649d1ebe006857de790c6ff3e2db80f/src/webUI.cpp

[BuzzerBoy]

Ty. That helped a lot!