Gui: Add up and down button drawing functions to GUI elements (#3804)

* feat: Add up and down button drawing functions to GUI elements
  Two button drawing functions, elements_button_up and elements_button_down, have been added to the GUI elements. These functions allow a button to be drawn at the top left and top right corner of the canvas respectively, with an accompanying string and icon. The underlying layout and design of these buttons is defined within these functions.
* feat: Add null checks for Canvas parameter in button functions
  Added furi_check to ensure the Canvas parameter is not null in elements_button_up and elements_button_down functions. This prevents potential crashes due to dereferencing a null pointer.

Co-authored-by: hedger <hedger@users.noreply.github.com>
Co-authored-by: Aleksandr Kutuzov <alleteam@gmail.com>

Author: 3 people

applications/services/gui/elements.c

@@ -185,6 +185,70 @@ void elements_button_right(Canvas* canvas, const char* str) {
     canvas_invert_color(canvas);
 }
 
+void elements_button_up(Canvas* canvas, const char* str) {
+    furi_check(canvas);
+
+    const Icon* icon = &I_ButtonUp_7x4;
+
+    const size_t button_height = 12;
+    const size_t vertical_offset = 3;
+    const size_t horizontal_offset = 3;
+    const size_t string_width = canvas_string_width(canvas, str);
+    const int32_t icon_h_offset = 3;
+    const int32_t icon_width_with_offset = icon_get_width(icon) + icon_h_offset;
+    const int32_t icon_v_offset = icon_get_height(icon) + (int32_t)vertical_offset;
+    const size_t button_width = string_width + horizontal_offset * 2 + icon_width_with_offset;
+
+    const int32_t x = 0;
+    const int32_t y = 0 + button_height;
+
+    int32_t line_x = x + button_width;
+    int32_t line_y = y - button_height;
+
+    canvas_draw_box(canvas, x, line_y, button_width, button_height);
+    canvas_draw_line(canvas, line_x + 0, line_y, line_x + 0, y - 1);
+    canvas_draw_line(canvas, line_x + 1, line_y, line_x + 1, y - 2);
+    canvas_draw_line(canvas, line_x + 2, line_y, line_x + 2, y - 3);
+
+    canvas_invert_color(canvas);
+    canvas_draw_icon(canvas, x + horizontal_offset, y - icon_v_offset, icon);
+    canvas_draw_str(
+        canvas, x + horizontal_offset + icon_width_with_offset, y - vertical_offset, str);
+    canvas_invert_color(canvas);
+}
+
+void elements_button_down(Canvas* canvas, const char* str) {
+    furi_check(canvas);
+
+    const Icon* icon = &I_ButtonDown_7x4;
+
+    const size_t button_height = 12;
+    const size_t vertical_offset = 3;
+    const size_t horizontal_offset = 3;
+    const size_t string_width = canvas_string_width(canvas, str);
+    const int32_t icon_h_offset = 3;
+    const int32_t icon_width_with_offset = icon_get_width(icon) + icon_h_offset;
+    const int32_t icon_v_offset = icon_get_height(icon) + vertical_offset + 1;
+    const size_t button_width = string_width + horizontal_offset * 2 + icon_width_with_offset;
+
+    const int32_t x = canvas_width(canvas);
+    const int32_t y = button_height;
+
+    int32_t line_x = x - button_width;
+    int32_t line_y = y - button_height;
+
+    canvas_draw_box(canvas, line_x, line_y, button_width, button_height);
+    canvas_draw_line(canvas, line_x - 1, line_y, line_x - 1, y - 1);
+    canvas_draw_line(canvas, line_x - 2, line_y, line_x - 2, y - 2);
+    canvas_draw_line(canvas, line_x - 3, line_y, line_x - 3, y - 3);
+
+    canvas_invert_color(canvas);
+    canvas_draw_str(canvas, x - button_width + horizontal_offset, y - vertical_offset, str);
+    canvas_draw_icon(
+        canvas, x - horizontal_offset - icon_get_width(icon), y - icon_v_offset, icon);
+    canvas_invert_color(canvas);
+}
+
 void elements_button_center(Canvas* canvas, const char* str) {
     furi_check(canvas);
 

applications/services/gui/elements.h

@@ -96,6 +96,28 @@ void elements_button_left(Canvas* canvas, const char* str);
  */
 void elements_button_right(Canvas* canvas, const char* str);
 
+/**
+ * @brief This function draws a button in the top left corner of the canvas with icon and string.
+ *
+ * The design and layout of the button is defined within this function.
+ *
+ * @param[in] canvas This is a pointer to the @c Canvas structure where the button will be drawn.
+ * @param[in] str This is a pointer to the character string that will be drawn within the button.
+ *
+ */
+void elements_button_up(Canvas* canvas, const char* str);
+
+/**
+ * @brief This function draws a button in the top right corner of the canvas with icon and string.
+ *
+ * The design and layout of the button is defined within this function.
+ *
+ * @param[in] canvas This is a pointer to the @c Canvas structure where the button will be drawn.
+ * @param[in] str This is a pointer to the character string that will be drawn within the button.
+ *
+ */
+void elements_button_down(Canvas* canvas, const char* str);
+
 /** Draw button in center
  *
  * @param   canvas  Canvas instance

targets/f18/api_symbols.csv

@@ -1,5 +1,5 @@
 entry,status,name,type,params
-Version,+,72.1,,
+Version,+,72.2,,
 Header,+,applications/services/bt/bt_service/bt.h,,
 Header,+,applications/services/bt/bt_service/bt_keys_storage.h,,
 Header,+,applications/services/cli/cli.h,,
@@ -13,13 +13,13 @@ Header,+,applications/services/gui/icon_i.h,,
 Header,+,applications/services/gui/modules/button_menu.h,,
 Header,+,applications/services/gui/modules/button_panel.h,,
 Header,+,applications/services/gui/modules/byte_input.h,,
-Header,+,applications/services/gui/modules/number_input.h,,
 Header,+,applications/services/gui/modules/dialog_ex.h,,
 Header,+,applications/services/gui/modules/empty_screen.h,,
 Header,+,applications/services/gui/modules/file_browser.h,,
 Header,+,applications/services/gui/modules/file_browser_worker.h,,
 Header,+,applications/services/gui/modules/loading.h,,
 Header,+,applications/services/gui/modules/menu.h,,
+Header,+,applications/services/gui/modules/number_input.h,,
 Header,+,applications/services/gui/modules/popup.h,,
 Header,+,applications/services/gui/modules/submenu.h,,
 Header,+,applications/services/gui/modules/text_box.h,,
@@ -723,11 +723,6 @@ Function,+,byte_input_free,void,ByteInput*
 Function,+,byte_input_get_view,View*,ByteInput*
 Function,+,byte_input_set_header_text,void,"ByteInput*, const char*"
 Function,+,byte_input_set_result_callback,void,"ByteInput*, ByteInputCallback, ByteChangedCallback, void*, uint8_t*, uint8_t"
-Function,+,number_input_alloc,NumberInput*,
-Function,+,number_input_free,void,NumberInput*
-Function,+,number_input_get_view,View*,NumberInput*
-Function,+,number_input_set_header_text,void,"NumberInput*, const char*"
-Function,+,number_input_set_result_callback,void,"NumberInput*, NumberInputCallback, void*, int32_t, int32_t, int32_t"
 Function,-,bzero,void,"void*, size_t"
 Function,+,calloc,void*,"size_t, size_t"
 Function,+,canvas_clear,void,Canvas*
@@ -883,8 +878,10 @@ Function,+,elements_bold_rounded_frame,void,"Canvas*, int32_t, int32_t, size_t,
 Function,+,elements_bubble,void,"Canvas*, int32_t, int32_t, size_t, size_t"
 Function,+,elements_bubble_str,void,"Canvas*, int32_t, int32_t, const char*, Align, Align"
 Function,+,elements_button_center,void,"Canvas*, const char*"
+Function,+,elements_button_down,void,"Canvas*, const char*"
 Function,+,elements_button_left,void,"Canvas*, const char*"
 Function,+,elements_button_right,void,"Canvas*, const char*"
+Function,+,elements_button_up,void,"Canvas*, const char*"
 Function,+,elements_frame,void,"Canvas*, int32_t, int32_t, size_t, size_t"
 Function,+,elements_multiline_text,void,"Canvas*, int32_t, int32_t, const char*"
 Function,+,elements_multiline_text_aligned,void,"Canvas*, int32_t, int32_t, Align, Align, const char*"
@@ -2197,6 +2194,11 @@ Function,+,notification_internal_message_block,void,"NotificationApp*, const Not
 Function,+,notification_message,void,"NotificationApp*, const NotificationSequence*"
 Function,+,notification_message_block,void,"NotificationApp*, const NotificationSequence*"
 Function,-,nrand48,long,unsigned short[3]
+Function,+,number_input_alloc,NumberInput*,
+Function,+,number_input_free,void,NumberInput*
+Function,+,number_input_get_view,View*,NumberInput*
+Function,+,number_input_set_header_text,void,"NumberInput*, const char*"
+Function,+,number_input_set_result_callback,void,"NumberInput*, NumberInputCallback, void*, int32_t, int32_t, int32_t"
 Function,-,on_exit,int,"void (*)(int, void*), void*"
 Function,+,onewire_host_alloc,OneWireHost*,const GpioPin*
 Function,+,onewire_host_free,void,OneWireHost*

targets/f7/api_symbols.csv

@@ -1,5 +1,5 @@
 entry,status,name,type,params
-Version,+,72.1,,
+Version,+,72.2,,
 Header,+,applications/drivers/subghz/cc1101_ext/cc1101_ext_interconnect.h,,
 Header,+,applications/services/bt/bt_service/bt.h,,
 Header,+,applications/services/bt/bt_service/bt_keys_storage.h,,
@@ -965,8 +965,10 @@ Function,+,elements_bold_rounded_frame,void,"Canvas*, int32_t, int32_t, size_t,
 Function,+,elements_bubble,void,"Canvas*, int32_t, int32_t, size_t, size_t"
 Function,+,elements_bubble_str,void,"Canvas*, int32_t, int32_t, const char*, Align, Align"
 Function,+,elements_button_center,void,"Canvas*, const char*"
+Function,+,elements_button_down,void,"Canvas*, const char*"
 Function,+,elements_button_left,void,"Canvas*, const char*"
 Function,+,elements_button_right,void,"Canvas*, const char*"
+Function,+,elements_button_up,void,"Canvas*, const char*"
 Function,+,elements_frame,void,"Canvas*, int32_t, int32_t, size_t, size_t"
 Function,+,elements_multiline_text,void,"Canvas*, int32_t, int32_t, const char*"
 Function,+,elements_multiline_text_aligned,void,"Canvas*, int32_t, int32_t, Align, Align, const char*"