Creating bject thanks to CSS rules to improve design

web.cpp

@@ -21,6 +21,11 @@ void Web :: web_setup()
     couleurs[8] = couleur9;
     couleurs[9] = couleur10;
 
+	//We need this CSS style rule, which will remove the label's background and ensure that it takes up the entire width of the panel
+    String line_break = "background-color: unset; width: 100%;";
+
+    String small_line_space = "background-color: unset; width: 10%;";
+
 
     //Create tabs
     configurations = ESPUI.addControl(ControlType::Tab, "Configurations", "Configurations");
@@ -46,19 +51,25 @@ void Web :: web_setup()
     //***Initialisation***//
     calibration = ESPUI.button("Callibration", [&](Control* sender, int value){calibration_callback(sender, value);}, ControlColor::None, "\u21E4");
 
-    fast_backward = ESPUI.button("Initialisation", [&](Control* sender, int value){fast_backward_callback(sender, value);}, ControlColor::None, "\u2BC7 \u2BC7");
-    slow_backward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC7", ControlColor::None, fast_backward, [&](Control* sender, int value){slow_backward_callback(sender, value);});
-    slow_forward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC8", ControlColor::None, fast_backward, [&](Control* sender, int value){slow_forward_callback(sender, value);});
-    fast_forward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC8 \u2BC8", ControlColor::None, fast_backward, [&](Control* sender, int value){fast_forward_callback(sender, value);});
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, calibration), small_line_space);
+
+    //fast_backward = ESPUI.button("Initialisation", [&](Control* sender, int value){fast_backward_callback(sender, value);}, ControlColor::None, "\u2BC7 \u2BC7");
+    fast_backward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC7 \u2BC7", ControlColor::None, calibration, [&](Control* sender, int value){fast_backward_callback(sender, value);});
+    slow_backward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC7", ControlColor::None, calibration, [&](Control* sender, int value){slow_backward_callback(sender, value);});
+    slow_forward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC8", ControlColor::None, calibration, [&](Control* sender, int value){slow_forward_callback(sender, value);});
+    fast_forward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC8 \u2BC8", ControlColor::None, calibration, [&](Control* sender, int value){fast_forward_callback(sender, value);});
+
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, calibration), small_line_space);
 
-    confirm_initialisation = ESPUI.button("Valider l'initialisation", [&](Control* sender, int value){confirm_initialisation_callback(sender, value);}, ControlColor::None, "\u2714");
+    //confirm_initialisation = ESPUI.button("Valider l'initialisation", [&](Control* sender, int value){confirm_initialisation_callback(sender, value);}, ControlColor::None, "\u2714");
+    confirm_initialisation = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2714", ControlColor::None, calibration, [&](Control* sender, int value){confirm_initialisation_callback(sender, value);});
 
 
 
     ESPUI.addControl(ControlType::Separator, "", "", ControlColor::None);
 
     //Exchange_values_wanted
-    initial_volume_mL_label =ESPUI.addControl( ControlType::Label, "Configuration de l'échange", "Volume initial contenu dans la seringue : ", ControlColor::None);
+    initial_volume_mL_label =ESPUI.addControl( ControlType::Label, "Configuration de l'échange", "Volume initial contenu dans la seringue en mL : ", ControlColor::None);
     initial_volume_mL = ESPUI.addControl( ControlType::Number, "Volume initial contenu dans la seringue : ", "0", ControlColor::None, initial_volume_mL_label, [&](Control* sender, int value){initial_volume_mL_callback(sender, value);});
     number_max_min(0, 500, initial_volume_mL);