connectcore-demo-example: dashboard: add a mechanism to determine the color of the panels

Most of device boards have blue PCBs, but there are some products with green PCBs. In these cases,
the green panels have very poor contrast, so the color needs to be changed dynamically. This commit
adds a mechanism to automatically change the color of the dashboard panels based on the new device
property "PCB_COLOR".

https://onedigi.atlassian.net/browse/DEL-8719

Signed-off-by: David Escalona <david.escalona@digi.com>

connectcore-demo-example/index.html

@@ -647,7 +647,7 @@ Digi Demo - Dashboard
                                             <div id="led_panel" class="led-panel shadow-sm panel-tooltip" onclick="toggleUserLED()">
                                                 <span class="panel-tooltip-text">Toggle LED</span>
                                                 <span id="led_panel_arrow" class="panel-arrow"></span>
-                                                <img id ="led_image" class="led-image" src="./static/images/led_bubble.png"/>
+                                                <img id ="led_image" class="led-image"/>
                                             </div>
                                             <div id="flash_memory_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('flash_memory')">
                                                 <span class="panel-tooltip-text">Storage</span>
@@ -720,10 +720,10 @@ Digi Demo - Dashboard
         // Change image of the LED panel when hovering.
         $("#led_panel").on({
             "mouseover" : function() {
-                $("#led_image").attr("src", "./static/images/led_bubble_hover.png");
+                $("#led_image").addClass("led-image-hover");
             },
             "mouseout" : function() {
-                $("#led_image").attr("src", "./static/images/led_bubble.png");
+                $("#led_image").removeClass("led-image-hover");
             }
         });
     });

connectcore-demo-example/static/css/general.css

@@ -869,6 +869,12 @@ body {
   color: #004e03;
 }
 
+.panel-area-blue {
+  background-color: #6ec4edb3;
+  border: 2px solid #011377;
+  color: #011377;
+}
+
 .panel-area:hover {
   background-color: #f5e04eb3;
   cursor: pointer;
@@ -1156,6 +1162,15 @@ body {
   position: relative;
   max-width:100%;
   max-height:100%;
+  content: url("../images/led_bubble.png");
+}
+
+.led-image-blue {
+  content: url("../images/led_bubble_blue.png");
+}
+
+.led-image-hover {
+  content: url("../images/led_bubble_hover.png");
 }
 
 .led-panel-area-off {

connectcore-demo-example/static/js/ccimx6ulsbc.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -153,6 +153,9 @@ class CCIMX6ULSBC extends ConnectCoreDevice {
     SUPPORTS_VIDEO_BRIGHTNESS = false;
     SUPPORTS_DUAL_ETHERNET = true;
 
+    // Misc info
+    PCB_COLOR = ID_COLOR_BLUE;
+
     // Constructor.
     constructor(deviceData) {
         super(CCIMX6ULSBC.DEVICE_TYPE, CCIMX6ULSBC.PLATFORM_NAME, deviceData);

connectcore-demo-example/static/js/ccimx8m-nano.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -140,6 +140,9 @@ class CCIMX8MNANO extends ConnectCoreDevice {
     SUPPORTS_VIDEO_BRIGHTNESS = false;
     SUPPORTS_DUAL_ETHERNET = false;
 
+    // Misc info
+    PCB_COLOR = ID_COLOR_BLUE;
+
     // Constructor.
     constructor(deviceData) {
         super(CCIMX8MNANO.DEVICE_TYPE, CCIMX8MNANO.PLATFORM_NAME, deviceData);

connectcore-demo-example/static/js/ccimx8mm-dvk.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -140,6 +140,9 @@ class CCIMX8MMINI extends ConnectCoreDevice {
     SUPPORTS_VIDEO_BRIGHTNESS = false;
     SUPPORTS_DUAL_ETHERNET = false;
 
+    // Misc info
+    PCB_COLOR = ID_COLOR_BLUE;
+
     // Constructor.
     constructor(deviceData) {
         super(CCIMX8MMINI.DEVICE_TYPE, CCIMX8MMINI.PLATFORM_NAME, deviceData);

connectcore-demo-example/static/js/ccimx8x-sbc-pro.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -153,6 +153,9 @@ class CCIMX8X extends ConnectCoreDevice {
     SUPPORTS_VIDEO_BRIGHTNESS = false;
     SUPPORTS_DUAL_ETHERNET = true;
 
+    // Misc info
+    PCB_COLOR = ID_COLOR_BLUE;
+
     // Constructor.
     constructor(deviceData) {
         super(CCIMX8X.DEVICE_TYPE, CCIMX8X.PLATFORM_NAME, deviceData);

connectcore-demo-example/static/js/ccimx93-dvk.js

@@ -153,6 +153,9 @@ class CCIMX93 extends ConnectCoreDevice {
     SUPPORTS_VIDEO_BRIGHTNESS = false;
     SUPPORTS_DUAL_ETHERNET = true;
 
+    // Misc info
+    PCB_COLOR = ID_COLOR_BLUE;
+
     // Constructor.
     constructor(deviceData) {
         super(CCIMX93.DEVICE_TYPE, CCIMX93.PLATFORM_NAME, deviceData);

connectcore-demo-example/static/js/ccmp133-dvk.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -140,6 +140,9 @@ class CCMP133 extends ConnectCoreDevice {
     SUPPORTS_VIDEO_BRIGHTNESS = false;
     SUPPORTS_DUAL_ETHERNET = false;
 
+    // Misc info
+    PCB_COLOR = ID_COLOR_BLUE;
+
     // Constructor.
     constructor(deviceData) {
         super(CCMP133.DEVICE_TYPE, CCMP133.PLATFORM_NAME, deviceData);

connectcore-demo-example/static/js/ccmp157-dvk.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -140,6 +140,9 @@ class CCMP157 extends ConnectCoreDevice {
     SUPPORTS_VIDEO_BRIGHTNESS = false;
     SUPPORTS_DUAL_ETHERNET = false;
 
+    // Misc info
+    PCB_COLOR = ID_COLOR_BLUE;
+
     // Constructor.
     constructor(deviceData) {
         super(CCMP157.DEVICE_TYPE, CCMP157.PLATFORM_NAME, deviceData);

connectcore-demo-example/static/js/common.js

@@ -29,6 +29,8 @@ const ID_BOARD_VARIANT = "board_variant";
 const ID_BT_READ_DATA = "bluetooth_received_data";
 const ID_BT_SENT_DATA = "bluetooth_sent_data";
 const ID_BT_STATE = "bluetooth_state";
+const ID_COLOR_BLUE = "blue";
+const ID_COLOR_GREEN = "green";
 const ID_CONSOLE = "console";
 const ID_CONFIRM_DIALOG = "confirm_dialog";
 const ID_CONFIRM_DIALOG_MESSAGE = "confirm_dialog_message";

connectcore-demo-example/static/js/dashboard.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -49,6 +49,7 @@ const ID_FLASH_MEMORY_PANEL_ARROW = "flash_memory_panel_arrow";
 const ID_FLASH_MEMORY_PANEL_ICON = "flash_memory_panel_icon";
 const ID_HELP_PANEL = "help_panel";
 const ID_HELP_POPUP_SHOWN = "help_popup_shown";
+const ID_LED_IMAGE = "led_image";
 const ID_LED_PANEL = "led_panel";
 const ID_LED_PANEL_AREA = "led_panel_area";
 const ID_LED_PANEL_ARROW = "led_panel_arrow";
@@ -92,9 +93,11 @@ const STREAM_BT_STATE = PREFIX_STREAM + IFACE_BT + "/state";
 const PANEL_ARROW_WIDTH_100 = 20;
 const PANEL_BOARD_WIDTH_100 = 1200;
 
+const CLASS_LED_IMAGE_BLUE = "led-image-blue";
 const CLASS_LED_PANEL_AREA_ON = "led-panel-area-on";
 const CLASS_PANEL_AREA_SELECTED = "panel-area-selected";
 const CLASS_PANEL_AREA_ICON_SELECTED = "panel-area-icon-selected";
+const CLASS_PANEL_BLUE = "panel-area-blue";
 const CLASS_PANEL_TOOLTIP = "panel-tooltip";
 
 const MESSAGE_CHANGING_VIDEO_BRIGHTNESS = "Changing video brightness...";
@@ -421,6 +424,8 @@ function initializeComponents() {
     var cpuPanel = document.getElementById(ID_CPU_PANEL);
     var cpuPanelArrow = document.getElementById(ID_CPU_PANEL_ARROW);
     var cpuPanelArea = document.getElementById(ID_CPU_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        cpuPanelArea.classList.add(CLASS_PANEL_BLUE);
     var cpuPanelIcon = document.getElementById(ID_CPU_PANEL_ICON);
     var cpuInfo = {"panel": cpuPanel, "arrow": cpuPanelArrow, "area": cpuPanelArea, "icon": cpuPanelIcon, "data": device.getCPUComponentData()};
     components[ID_CPU] = cpuInfo;
@@ -428,6 +433,8 @@ function initializeComponents() {
     var memoryPanel = document.getElementById(ID_MEMORY_PANEL);
     var memoryPanelArrow = document.getElementById(ID_MEMORY_PANEL_ARROW);
     var memoryPanelArea = document.getElementById(ID_MEMORY_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        memoryPanelArea.classList.add(CLASS_PANEL_BLUE);
     var memoryPanelIcon = document.getElementById(ID_MEMORY_PANEL_ICON);
     var memoryInfo = {"panel": memoryPanel, "arrow": memoryPanelArrow, "area": memoryPanelArea, "icon": memoryPanelIcon, "data": device.getMemoryComponentData()};
     components[ID_MEMORY] = memoryInfo;
@@ -435,6 +442,8 @@ function initializeComponents() {
     var wifiBtPanel = document.getElementById(ID_WIFI_BT_PANEL);
     var wifiBtPanelArrow = document.getElementById(ID_WIFI_BT_PANEL_ARROW);
     var wifiBtPanelArea = document.getElementById(ID_WIFI_BT_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        wifiBtPanelArea.classList.add(CLASS_PANEL_BLUE);
     var wifiBtPanelIcon = document.getElementById(ID_WIFI_BT_PANEL_ICON);
     var wifiBtInfo = {"panel": wifiBtPanel, "arrow": wifiBtPanelArrow, "area": wifiBtPanelArea, "icon": wifiBtPanelIcon, "data": device.getWifiBtComponentData()};
     components[ID_WIFI_BT] = wifiBtInfo;
@@ -442,6 +451,8 @@ function initializeComponents() {
     var ethernet0Panel = document.getElementById(ID_ETHERNET0_PANEL);
     var ethernet0PanelArrow = document.getElementById(ID_ETHERNET0_PANEL_ARROW);
     var ethernet0PanelArea = document.getElementById(ID_ETHERNET0_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        ethernet0PanelArea.classList.add(CLASS_PANEL_BLUE);
     var ethernet0PanelIcon = document.getElementById(ID_ETHERNET0_PANEL_ICON);
     var ethernet0Info = {"panel": ethernet0Panel, "arrow": ethernet0PanelArrow, "area": ethernet0PanelArea, "icon": ethernet0PanelIcon, "data": device.getEthernetComponentData(0)};
     components[ID_ETHERNET0] = ethernet0Info;
@@ -450,6 +461,8 @@ function initializeComponents() {
         var ethernet1Panel = document.getElementById(ID_ETHERNET1_PANEL);
         var ethernet1PanelArrow = document.getElementById(ID_ETHERNET1_PANEL_ARROW);
         var ethernet1PanelArea = document.getElementById(ID_ETHERNET1_PANEL_AREA);
+        if (device.getPCBColor() == ID_COLOR_GREEN)
+            ethernet1PanelArea.classList.add(CLASS_PANEL_BLUE);
         var ethernet1PanelIcon = document.getElementById(ID_ETHERNET1_PANEL_ICON);
         var ethernet1Info = {"panel": ethernet1Panel, "arrow": ethernet1PanelArrow, "area": ethernet1PanelArea, "icon": ethernet1PanelIcon, "data": device.getEthernetComponentData(1)};
         components[ID_ETHERNET1] = ethernet1Info;
@@ -462,6 +475,8 @@ function initializeComponents() {
     var videoPanel = document.getElementById(ID_VIDEO_PANEL);
     var videoPanelArrow = document.getElementById(ID_VIDEO_PANEL_ARROW);
     var videoPanelArea = document.getElementById(ID_VIDEO_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        videoPanelArea.classList.add(CLASS_PANEL_BLUE);
     var videoPanelIcon = document.getElementById(ID_VIDEO_PANEL_ICON);
     var videoInfo = {"panel": videoPanel, "arrow": videoPanelArrow, "area": videoPanelArea, "icon": videoPanelIcon, "data": device.getVideoComponentData()};
     components[ID_VIDEO] = videoInfo;
@@ -474,6 +489,8 @@ function initializeComponents() {
     var audioPanel = document.getElementById(ID_AUDIO_PANEL);
     var audioPanelArrow = document.getElementById(ID_AUDIO_PANEL_ARROW);
     var audioPanelArea = document.getElementById(ID_AUDIO_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        audioPanelArea.classList.add(CLASS_PANEL_BLUE);
     var audioPanelIcon = document.getElementById(ID_AUDIO_PANEL_ICON);
     var audioInfo = {"panel": audioPanel, "arrow": audioPanelArrow, "area": audioPanelArea, "icon": audioPanelIcon, "data": device.getAudioComponentData()};
     components[ID_AUDIO] = audioInfo;
@@ -481,12 +498,20 @@ function initializeComponents() {
     var ledPanel = document.getElementById(ID_LED_PANEL);
     var ledPanelArrow = document.getElementById(ID_LED_PANEL_ARROW);
     var ledPanelArea = document.getElementById(ID_LED_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        ledPanelArea.classList.add(CLASS_PANEL_BLUE);
     var ledInfo = {"panel": ledPanel, "arrow": ledPanelArrow, "area": ledPanelArea, "data": device.getLEDComponentData()};
     components[ID_LED] = ledInfo;
+    if (device.getPCBColor() == ID_COLOR_GREEN) {
+        var ledImage = document.getElementById(ID_LED_IMAGE);
+        ledImage.classList.add(CLASS_LED_IMAGE_BLUE);
+    }
     // Flash memory component.
     var flashPanel = document.getElementById(ID_FLASH_MEMORY_PANEL);
     var flashPanelArrow = document.getElementById(ID_FLASH_MEMORY_PANEL_ARROW);
     var flashPanelArea = document.getElementById(ID_FLASH_MEMORY_PANEL_AREA);
+    if (device.getPCBColor() == ID_COLOR_GREEN)
+        flashPanelArea.classList.add(CLASS_PANEL_BLUE);
     var flashPanelIcon = document.getElementById(ID_FLASH_MEMORY_PANEL_ICON);
     var flashInfo = {"panel": flashPanel, "arrow": flashPanelArrow, "area": flashPanelArea, "icon": flashPanelIcon, "data": device.getFlashMemoryComponentData()};
     components[ID_FLASH_MEMORY] = flashInfo;

connectcore-demo-example/static/js/devices.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022, Digi International Inc.
+ * Copyright 2022, 2023, Digi International Inc.
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -521,8 +521,13 @@ class ConnectCoreDevice {
         return this.SUPPORTS_VIDEO_BRIGHTNESS;
     }
 
-     // Returns whether the device supports dual ethernet or not.
+    // Returns whether the device supports dual ethernet or not.
     supportsDualEthernet() {
         return this.SUPPORTS_DUAL_ETHERNET;
     }
+
+    // Returns the color of the device PCB.
+    getPCBColor() {
+        return this.PCB_COLOR;
+    }
 }