GUI: Widget view extra options for JS (#4120)

* Fill option for widget frame
* Add widget circle element
* Add widget line element
* Fix missing include for InputType
* Fix missing comment
* Update api symbols
* Load .fxbm from file
* Fix copy pasta
* Add fill param to example
* Fix some comments
* Bump JS SDK 0.3
* Fix free
* Rename widget frame to rect
* Gui: add widget_add_frame_element backward compatibility macros

Co-authored-by: Aleksandr Kutuzov <alleteam@gmail.com>

applications/services/gui/modules/widget.c

@@ -195,14 +195,27 @@ void widget_add_icon_element(Widget* widget, uint8_t x, uint8_t y, const Icon* i
     widget_add_element(widget, icon_element);
 }
 
-void widget_add_frame_element(
+void widget_add_rect_element(
     Widget* widget,
     uint8_t x,
     uint8_t y,
     uint8_t width,
     uint8_t height,
-    uint8_t radius) {
+    uint8_t radius,
+    bool fill) {
     furi_check(widget);
-    WidgetElement* frame_element = widget_element_frame_create(x, y, width, height, radius);
-    widget_add_element(widget, frame_element);
+    WidgetElement* rect_element = widget_element_rect_create(x, y, width, height, radius, fill);
+    widget_add_element(widget, rect_element);
+}
+
+void widget_add_circle_element(Widget* widget, uint8_t x, uint8_t y, uint8_t radius, bool fill) {
+    furi_check(widget);
+    WidgetElement* circle_element = widget_element_circle_create(x, y, radius, fill);
+    widget_add_element(widget, circle_element);
+}
+
+void widget_add_line_element(Widget* widget, uint8_t x1, uint8_t y1, uint8_t x2, uint8_t y2) {
+    furi_check(widget);
+    WidgetElement* line_element = widget_element_line_create(x1, y1, x2, y2);
+    widget_add_element(widget, line_element);
 }

applications/services/gui/modules/widget.h

@@ -152,21 +152,57 @@ void widget_add_button_element(
 void widget_add_icon_element(Widget* widget, uint8_t x, uint8_t y, const Icon* icon);
 
 /** Add Frame Element
+  *
+  * @param      widget  Widget instance
+  * @param      x       top left x coordinate
+  * @param      y       top left y coordinate
+  * @param      width   frame width
+  * @param      height  frame height
+  * @param      radius  frame radius
+  * 
+  * @warning deprecated, use widget_add_rect_element instead
+  */
+#define widget_add_frame_element(widget, x, y, width, height, radius) \
+    widget_add_rect_element((widget), (x), (y), (width), (height), (radius), false)
+
+/** Add Rect Element
  *
  * @param      widget  Widget instance
  * @param      x       top left x coordinate
  * @param      y       top left y coordinate
- * @param      width   frame width
- * @param      height  frame height
- * @param      radius  frame radius
+ * @param      width   rect width
+ * @param      height  rect height
+ * @param      radius  corner radius
+ * @param      fill    whether to fill the box or not
  */
-void widget_add_frame_element(
+void widget_add_rect_element(
     Widget* widget,
     uint8_t x,
     uint8_t y,
     uint8_t width,
     uint8_t height,
-    uint8_t radius);
+    uint8_t radius,
+    bool fill);
+
+/** Add Circle Element
+ *
+ * @param      widget  Widget instance
+ * @param      x       center x coordinate
+ * @param      y       center y coordinate
+ * @param      radius  circle radius
+ * @param      fill    whether to fill the circle or not
+ */
+void widget_add_circle_element(Widget* widget, uint8_t x, uint8_t y, uint8_t radius, bool fill);
+
+/** Add Line Element
+ *
+ * @param      widget  Widget instance
+ * @param      x1      first x coordinate
+ * @param      y1      first y coordinate
+ * @param      x2      second x coordinate
+ * @param      y2      second y coordinate
+ */
+void widget_add_line_element(Widget* widget, uint8_t x1, uint8_t y1, uint8_t x2, uint8_t y2);
 
 #ifdef __cplusplus
 }

applications/services/gui/modules/widget_elements/widget_element.h

@@ -5,6 +5,8 @@
 
 #pragma once
 
+#include <input/input.h>
+
 #ifdef __cplusplus
 extern "C" {
 #endif

applications/services/gui/modules/widget_elements/widget_element_circle.c

@@ -0,0 +1,45 @@
+#include "widget_element_i.h"
+
+typedef struct {
+    uint8_t x;
+    uint8_t y;
+    uint8_t radius;
+    bool fill;
+} GuiCircleModel;
+
+static void gui_circle_draw(Canvas* canvas, WidgetElement* element) {
+    furi_assert(canvas);
+    furi_assert(element);
+    GuiCircleModel* model = element->model;
+    if(model->fill) {
+        canvas_draw_disc(canvas, model->x, model->y, model->radius);
+    } else {
+        canvas_draw_circle(canvas, model->x, model->y, model->radius);
+    }
+}
+
+static void gui_circle_free(WidgetElement* gui_circle) {
+    furi_assert(gui_circle);
+
+    free(gui_circle->model);
+    free(gui_circle);
+}
+
+WidgetElement* widget_element_circle_create(uint8_t x, uint8_t y, uint8_t radius, bool fill) {
+    // Allocate and init model
+    GuiCircleModel* model = malloc(sizeof(GuiCircleModel));
+    model->x = x;
+    model->y = y;
+    model->radius = radius;
+    model->fill = fill;
+
+    // Allocate and init Element
+    WidgetElement* gui_circle = malloc(sizeof(WidgetElement));
+    gui_circle->parent = NULL;
+    gui_circle->input = NULL;
+    gui_circle->draw = gui_circle_draw;
+    gui_circle->free = gui_circle_free;
+    gui_circle->model = model;
+
+    return gui_circle;
+}

applications/services/gui/modules/widget_elements/widget_element_i.h

@@ -73,21 +73,29 @@ WidgetElement* widget_element_button_create(
 /** Create icon element */
 WidgetElement* widget_element_icon_create(uint8_t x, uint8_t y, const Icon* icon);
 
-/** Create frame element */
-WidgetElement* widget_element_frame_create(
+/** Create rect element */
+WidgetElement* widget_element_rect_create(
     uint8_t x,
     uint8_t y,
     uint8_t width,
     uint8_t height,
-    uint8_t radius);
+    uint8_t radius,
+    bool fill);
 
+/** Create text scroll element */
 WidgetElement* widget_element_text_scroll_create(
     uint8_t x,
     uint8_t y,
     uint8_t width,
     uint8_t height,
     const char* text);
 
+/** Create circle element */
+WidgetElement* widget_element_circle_create(uint8_t x, uint8_t y, uint8_t radius, bool fill);
+
+/** Create line element */
+WidgetElement* widget_element_line_create(uint8_t x1, uint8_t y1, uint8_t x2, uint8_t y2);
+
 #ifdef __cplusplus
 }
 #endif

applications/services/gui/modules/widget_elements/widget_element_line.c

@@ -0,0 +1,41 @@
+#include "widget_element_i.h"
+
+typedef struct {
+    uint8_t x1;
+    uint8_t y1;
+    uint8_t x2;
+    uint8_t y2;
+} GuiLineModel;
+
+static void gui_line_draw(Canvas* canvas, WidgetElement* element) {
+    furi_assert(canvas);
+    furi_assert(element);
+    GuiLineModel* model = element->model;
+    canvas_draw_line(canvas, model->x1, model->y1, model->x2, model->y2);
+}
+
+static void gui_line_free(WidgetElement* gui_line) {
+    furi_assert(gui_line);
+
+    free(gui_line->model);
+    free(gui_line);
+}
+
+WidgetElement* widget_element_line_create(uint8_t x1, uint8_t y1, uint8_t x2, uint8_t y2) {
+    // Allocate and init model
+    GuiLineModel* model = malloc(sizeof(GuiLineModel));
+    model->x1 = x1;
+    model->y1 = y1;
+    model->x2 = x2;
+    model->y2 = y2;
+
+    // Allocate and init Element
+    WidgetElement* gui_line = malloc(sizeof(WidgetElement));
+    gui_line->parent = NULL;
+    gui_line->input = NULL;
+    gui_line->draw = gui_line_draw;
+    gui_line->free = gui_line_free;
+    gui_line->model = model;
+
+    return gui_line;
+}

applications/services/gui/modules/widget_elements/widget_element_rect.c

@@ -0,0 +1,55 @@
+#include "widget_element_i.h"
+
+typedef struct {
+    uint8_t x;
+    uint8_t y;
+    uint8_t width;
+    uint8_t height;
+    uint8_t radius;
+    bool fill;
+} GuiRectModel;
+
+static void gui_rect_draw(Canvas* canvas, WidgetElement* element) {
+    furi_assert(canvas);
+    furi_assert(element);
+    GuiRectModel* model = element->model;
+    if(model->fill) {
+        canvas_draw_rbox(canvas, model->x, model->y, model->width, model->height, model->radius);
+    } else {
+        canvas_draw_rframe(canvas, model->x, model->y, model->width, model->height, model->radius);
+    }
+}
+
+static void gui_rect_free(WidgetElement* gui_rect) {
+    furi_assert(gui_rect);
+
+    free(gui_rect->model);
+    free(gui_rect);
+}
+
+WidgetElement* widget_element_rect_create(
+    uint8_t x,
+    uint8_t y,
+    uint8_t width,
+    uint8_t height,
+    uint8_t radius,
+    bool fill) {
+    // Allocate and init model
+    GuiRectModel* model = malloc(sizeof(GuiRectModel));
+    model->x = x;
+    model->y = y;
+    model->width = width;
+    model->height = height;
+    model->radius = radius;
+    model->fill = fill;
+
+    // Allocate and init Element
+    WidgetElement* gui_rect = malloc(sizeof(WidgetElement));
+    gui_rect->parent = NULL;
+    gui_rect->input = NULL;
+    gui_rect->draw = gui_rect_draw;
+    gui_rect->free = gui_rect_free;
+    gui_rect->model = model;
+
+    return gui_rect;
+}

applications/system/js_app/examples/apps/Scripts/gui.js

@@ -19,8 +19,8 @@ let jsLogo = icon.getBuiltin("js_script_10px");
 let stopwatchWidgetElements = [
     { element: "string", x: 67, y: 44, align: "bl", font: "big_numbers", text: "00 00" },
     { element: "string", x: 77, y: 22, align: "bl", font: "primary", text: "Stopwatch" },
-    { element: "frame", x: 64, y: 27, w: 28, h: 20, radius: 3 },
-    { element: "frame", x: 100, y: 27, w: 28, h: 20, radius: 3 },
+    { element: "frame", x: 64, y: 27, w: 28, h: 20, radius: 3, fill: false },
+    { element: "frame", x: 100, y: 27, w: 28, h: 20, radius: 3, fill: false },
     { element: "icon", x: 0, y: 5, iconData: cuteDolphinWithWatch },
     { element: "icon", x: 64, y: 13, iconData: jsLogo },
     { element: "button", button: "right", text: "Back" },

applications/system/js_app/js_modules.c

@@ -270,6 +270,7 @@ static const char* extra_features[] = {
     "gpio-pwm",
     "gui-widget",
     "serial-framing",
+    "gui-widget-extras",
 };
 
 /**