Add an HTML display of the led

Luos-io · Feb 20, 2024 · e224a7b · e224a7b
1 parent 9dc740b
commit e224a7b
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 8 deletions.
diff --git a/examples/projects/browser/led/lib/Led/led.cpp b/examples/projects/browser/led/lib/Led/led.cpp
@@ -50,29 +50,77 @@ const char led_OFF[768] = "\n"
                           "/_____________________________________________//\n"
                           "`---------------------------------------------'\n";
 
+using namespace client;
+
+static bool isBrowser;
+[[cheerp::genericjs]] HTMLElement *ledDisplay;
+
 /*******************************************************************************
  * Function
  ******************************************************************************/
-static void Led_MsgHandler(service_t *service, const msg_t *msg);
+static void
+Led_MsgHandler(service_t *service, const msg_t *msg);
 
 void clear_screen(void)
 {
     // clear the console
     printf("\x1B[2J\x1B[H");
 }
 
+[[cheerp::genericjs]] void define_browser()
+{
+    __asm__("typeof %1 !== 'undefined'" : "=r"(isBrowser) : "r"(&client::window));
+}
+
+[[cheerp::genericjs]] void browser_init()
+{
+    client::HTMLElement *body = client::document.get_body();
+    HTMLElement *board        = document.createElement("div");
+    board->setAttribute("style", "width: 200px; height: 100px; background-color: #449944; display: flex; border-radius: 5%; border: 2px solid #000000;");
+    body->appendChild(board);
+    HTMLElement *chip = document.createElement("div");
+    chip->setAttribute("style", "margin: 25px; width: 50px; height: 50px; background-color: #101010; border-radius: 10%; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 15px; font-weight: bold;");
+    chip->appendChild(document.createTextNode("MCU"));
+    board->appendChild(chip);
+    ledDisplay = document.createElement("div");
+    ledDisplay->setAttribute("style", "margin: 30px; width: 30px; height: 30px; background-color: #F0F0F0; border-radius: 50%");
+    board->appendChild(ledDisplay);
+}
+
+[[cheerp::genericjs]] void browser_display(bool state)
+{
+    if (state)
+    {
+        ledDisplay->setAttribute("style", "margin: 30px; width: 30px; height: 30px; background-color: #00ff00; border-radius: 50%");
+    }
+    else
+    {
+
+        ledDisplay->setAttribute("style", "margin: 30px; width: 30px; height: 30px; background-color: #F0F0F0; border-radius: 50%");
+    }
+}
+
 /******************************************************************************
  * @brief init must be call in project init
  * @param None
  * @return None
  ******************************************************************************/
 PUBLIC void Led_Init(void)
 {
+    define_browser();
     revision_t revision = {.major = 1, .minor = 0, .build = 0};
     Luos_CreateService(Led_MsgHandler, STATE_TYPE, "led", revision);
     clear_screen();
     printf("LED service running.\n\n");
-    printf(led_OFF);
+    if (isBrowser)
+    {
+        browser_init();
+        browser_display(false);
+    }
+    else
+    {
+        printf(led_OFF);
+    }
 }
 
 /******************************************************************************
@@ -99,11 +147,25 @@ static void Led_MsgHandler(service_t *service, const msg_t *msg)
             printf("LED service running.\n\n");
             if (Led_last_state == LED_OFF)
             {
-                printf(led_OFF);
+                if (isBrowser)
+                {
+                    browser_display(false);
+                }
+                else
+                {
+                    printf(led_OFF);
+                }
             }
             else if (Led_last_state == LED_ON)
             {
-                printf(led_ON);
+                if (isBrowser)
+                {
+                    browser_display(true);
+                }
+                else
+                {
+                    printf(led_ON);
+                }
             }
             else
             {

diff --git a/examples/projects/browser/led/src/main.html b/examples/projects/browser/led/src/main.html
@@ -6,9 +6,6 @@
     <script type="module" src="main.mjs"></script>
   </head>
   <body>
-    <h1 id="pagetitle">
-      Open the console log (Ctrl + Shift + J or Ctrl + Option + J) to read the
-      output
-    </h1>
+    <h1>Luos_engine led example</h1>
   </body>
 </html>