add notification pings for examples

Author: terryzfeng

index.html

@@ -326,9 +326,18 @@
           <!-- Input Panel -->
           <div id="inputPanel" class="flex flex-col dark:bg-dark">
             <div id="inputPanelHeader" class="header h-7 justify-start flex-none drop-shadow-sm">
-              <button id="GUITab" type="button" class="header-item">GUI</button>
-              <button id="HIDTab" type="button" class="header-item">HID</button>
-              <button id="SensorTab" type="button" class="header-item">SENSOR</button>
+              <button id="GUITab" type="button" class="header-item flex items-center justify-center relative">
+                GUI
+                <span id="GUIPing" class="animate-ping absolute top-0 right-0 h-2 w-2 rounded-full bg-orange opacity-75 hidden"></span>
+              </button>
+              <button id="HIDTab" type="button" class="header-item flex items-center justify-center relative">
+                HID
+                <span id="HIDPing" class="animate-ping absolute top-0 right-0 h-2 w-2 rounded-full bg-orange opacity-75 hidden"></span>
+              </button>
+              <button id="SensorTab" type="button" class="header-item flex items-center justify-center relative">
+                SENSOR
+                <span id="SensorPing" class="animate-ping absolute top-0 right-0 h-2 w-2 rounded-full bg-orange opacity-75 hidden"></span>
+              </button>
             </div>
             <div id="GUIContainer" class="dark:bg-dark-2 w-full h-full">
               <div id="GUIPanel" class="w-full h-full relative overflow-hidden">

src/components/examples/examples.ts

@@ -9,6 +9,7 @@
 
 import DropdownElement from "@/components/navbar/dropdownElement";
 import NestedDropdown from "@/components/navbar/nestedDropdown";
+import InputPanelHeader from "@/components/inputPanel/inputPanelHeader";
 import {
     loadChuckFileFromURL,
     loadDataFileFromURL,
@@ -108,12 +109,18 @@ export default class Examples {
         );
         Examples.newExample(
             "Hello Sine GUI",
-            () => loadChuckFileFromURL("examples/helloSineGUI.ck"),
+            () => {
+                loadChuckFileFromURL("examples/helloSineGUI.ck")
+                InputPanelHeader.setNotificationPing(0, true);
+            },
             guiNested
         );
         Examples.newExample(
             "FM Synthesis GUI",
-            () => loadChuckFileFromURL("examples/fmGUI.ck"),
+            () => {
+                loadChuckFileFromURL("examples/fmGUI.ck")
+                InputPanelHeader.setNotificationPing(0, true);
+            },
             guiNested
         );
 
@@ -125,12 +132,18 @@ export default class Examples {
         );
         Examples.newExample(
             "Mouse PWM HID",
-            () => loadChuckFileFromURL("examples/mouseHID.ck"),
+            () => {
+                loadChuckFileFromURL("examples/mouseHID.ck"),
+                InputPanelHeader.setNotificationPing(1, true);
+            },
             hidNested
         );
         Examples.newExample(
             "Keyboard Organ HID",
-            () => loadChuckFileFromURL("examples/keyboardHID.ck"),
+            () => {
+                loadChuckFileFromURL("examples/keyboardHID.ck")
+                InputPanelHeader.setNotificationPing(1, true);
+            },
             hidNested
         );
 
@@ -145,13 +158,15 @@ export default class Examples {
             () => {
                 loadChuckFileFromURL("examples/gyro/gyroDemo.ck");
                 loadDataFileFromURL("examples/gyro/gyroLoop.wav");
+                InputPanelHeader.setNotificationPing(2, true);
             },
             sensorNested
         );
         Examples.newExample(
             "Accel Demo",
             () => {
                 loadChuckFileFromURL("examples/accelDemo.ck");
+                InputPanelHeader.setNotificationPing(2, true);
             },
             sensorNested
         );

src/components/inputPanel/inputPanelHeader.ts

@@ -6,6 +6,7 @@ export default class InputPanelHeader {
     public static inputButtons: HTMLButtonElement[] = [];
     public static inputContainers: HTMLDivElement[] = [];
     public static inputToggles: InputHeaderToggle[] = [];
+    public static inputPings: HTMLSpanElement[] = [];
 
     public static activeToggleIndex: number = -1;
 
@@ -18,6 +19,9 @@ export default class InputPanelHeader {
         InputPanelHeader.inputContainers.push(
             document.querySelector<HTMLDivElement>("#GUIContainer")!
         );
+        InputPanelHeader.inputPings.push(
+            document.querySelector<HTMLSpanElement>("#GUIPing")!
+        );
 
         // HID
         InputPanelHeader.inputButtons.push(
@@ -26,21 +30,28 @@ export default class InputPanelHeader {
         InputPanelHeader.inputContainers.push(
             document.querySelector<HTMLDivElement>("#HIDContainer")!
         );
+        InputPanelHeader.inputPings.push(
+            document.querySelector<HTMLSpanElement>("#HIDPing")!
+        );
 
-        // HID
+        // Sensor
         InputPanelHeader.inputButtons.push(
             document.querySelector<HTMLButtonElement>("#SensorTab")!
         );
         InputPanelHeader.inputContainers.push(
             document.querySelector<HTMLDivElement>("#SensorContainer")!
         );
+        InputPanelHeader.inputPings.push(  
+            document.querySelector<HTMLSpanElement>("#SensorPing")!
+        );
 
         // Build toggles with containers
         for (let i = 0; i < InputPanelHeader.inputButtons.length; i++) {
             InputPanelHeader.inputToggles.push(
                 new InputHeaderToggle(
                     InputPanelHeader.inputButtons[i],
                     InputPanelHeader.inputContainers[i],
+                    InputPanelHeader.inputPings[i],
                     i
                 )
             );
@@ -74,4 +85,13 @@ export default class InputPanelHeader {
         // Resize GUI
         GUI.onResize();
     }
+
+    /**
+     * Set the notification ping to be visible
+     */
+    static setNotificationPing(tabIndex: number, on: boolean) {
+        for (let i = 0; i < InputPanelHeader.inputButtons.length; i++) {
+            InputPanelHeader.inputToggles[i].setNotificationPing(i == tabIndex && on);
+        }
+    }
 }

src/components/toggle/inputHeaderToggle.ts

@@ -18,13 +18,16 @@ import InputPanelHeader from "../inputPanel/inputPanelHeader";
 
 export default class InputHeaderToggle extends HeaderToggle {
     public tabIndex: number;
+    public notificationPing: HTMLSpanElement;
 
     constructor(
         button: HTMLButtonElement,
         contentContainer: HTMLDivElement,
+        notificationPing: HTMLSpanElement,
         tabIndex: number
     ) {
         super(button, contentContainer, false);
+        this.notificationPing = notificationPing;
         this.tabIndex = tabIndex;
     }
 
@@ -45,6 +48,7 @@ export default class InputHeaderToggle extends HeaderToggle {
             this.button.classList.remove(HOVER_COLOR_CLASS);
             this.button.classList.remove(DARK_TEXT_HOVER_CLASS);
             this.button.classList.remove(DARK_HOVER_COLOR_CLASS);
+            this.notificationPing.classList.add("hidden");
             this.contentContainer.classList.remove("hidden");
 
             this.open = true;
@@ -61,4 +65,16 @@ export default class InputHeaderToggle extends HeaderToggle {
             this.open = false;
         }
     }
+
+    /**
+     * Set the notification ping to be visible
+     * @param on show or hide the notification ping
+     */
+    setNotificationPing(on: boolean) {
+        if (!this.open && on) {
+            this.notificationPing.classList.remove("hidden");
+        } else {
+            this.notificationPing.classList.add("hidden");
+        }
+    }
 }

src/styles/index.css

@@ -315,7 +315,7 @@ td:nth-child(4) {
     height: 36px;
 }
 
-/* LOGGER */
+/* LOG CONSOLE */
 .log-container {
     @apply px-2 py-1 mb-1 overflow-hidden border border-dark-d rounded-lg bg-white dark:bg-dark dark:border-dark-4;
 }