From cf8b2b0412c8e63b4531c85edbbcc2b4c71aa01c Mon Sep 17 00:00:00 2001
From: David Escalona <david.escalona@digi.com>
Date: Mon, 30 Oct 2023 11:47:55 +0100
Subject: [PATCH] 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           |   6 ++--
 .../static/css/general.css                    |  15 ++++++++++
 .../static/images/led_bubble_blue.png         | Bin 0 -> 11965 bytes
 .../static/js/ccimx6ulsbc.js                  |   5 +++-
 .../static/js/ccimx8m-nano.js                 |   5 +++-
 .../static/js/ccimx8mm-dvk.js                 |   5 +++-
 .../static/js/ccimx8x-sbc-pro.js              |   5 +++-
 .../static/js/ccimx93-dvk.js                  |   3 ++
 .../static/js/ccmp133-dvk.js                  |   5 +++-
 .../static/js/ccmp157-dvk.js                  |   5 +++-
 connectcore-demo-example/static/js/common.js  |   2 ++
 .../static/js/dashboard.js                    |  27 +++++++++++++++++-
 connectcore-demo-example/static/js/devices.js |   9 ++++--
 13 files changed, 80 insertions(+), 12 deletions(-)
 create mode 100755 connectcore-demo-example/static/images/led_bubble_blue.png

diff --git a/connectcore-demo-example/index.html b/connectcore-demo-example/index.html
index d0a1447..707ab13 100644
--- a/connectcore-demo-example/index.html
+++ b/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");
             }
         });
     });
diff --git a/connectcore-demo-example/static/css/general.css b/connectcore-demo-example/static/css/general.css
index cb27134..486939b 100644
--- a/connectcore-demo-example/static/css/general.css
+++ b/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 {
diff --git a/connectcore-demo-example/static/images/led_bubble_blue.png b/connectcore-demo-example/static/images/led_bubble_blue.png
new file mode 100755
index 0000000000000000000000000000000000000000..fe8dc08dbfd085f0ffc2e6350f4e9c887b041495
GIT binary patch
literal 11965
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
Di&8iy

literal 0
HcmV?d00001

diff --git a/connectcore-demo-example/static/js/ccimx6ulsbc.js b/connectcore-demo-example/static/js/ccimx6ulsbc.js
index 2b6b995..5d8a8ef 100644
--- a/connectcore-demo-example/static/js/ccimx6ulsbc.js
+++ b/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);
diff --git a/connectcore-demo-example/static/js/ccimx8m-nano.js b/connectcore-demo-example/static/js/ccimx8m-nano.js
index 1a3f802..3adb61a 100644
--- a/connectcore-demo-example/static/js/ccimx8m-nano.js
+++ b/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);
diff --git a/connectcore-demo-example/static/js/ccimx8mm-dvk.js b/connectcore-demo-example/static/js/ccimx8mm-dvk.js
index 2bb21bb..5aad4ad 100644
--- a/connectcore-demo-example/static/js/ccimx8mm-dvk.js
+++ b/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);
diff --git a/connectcore-demo-example/static/js/ccimx8x-sbc-pro.js b/connectcore-demo-example/static/js/ccimx8x-sbc-pro.js
index aac583a..96bd87c 100644
--- a/connectcore-demo-example/static/js/ccimx8x-sbc-pro.js
+++ b/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);
diff --git a/connectcore-demo-example/static/js/ccimx93-dvk.js b/connectcore-demo-example/static/js/ccimx93-dvk.js
index b9a66e0..ddd1b06 100644
--- a/connectcore-demo-example/static/js/ccimx93-dvk.js
+++ b/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);
diff --git a/connectcore-demo-example/static/js/ccmp133-dvk.js b/connectcore-demo-example/static/js/ccmp133-dvk.js
index 737923b..00eb059 100644
--- a/connectcore-demo-example/static/js/ccmp133-dvk.js
+++ b/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);
diff --git a/connectcore-demo-example/static/js/ccmp157-dvk.js b/connectcore-demo-example/static/js/ccmp157-dvk.js
index 8152e03..fc2aa23 100644
--- a/connectcore-demo-example/static/js/ccmp157-dvk.js
+++ b/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);
diff --git a/connectcore-demo-example/static/js/common.js b/connectcore-demo-example/static/js/common.js
index 693e8ab..a49cbe4 100644
--- a/connectcore-demo-example/static/js/common.js
+++ b/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";
diff --git a/connectcore-demo-example/static/js/dashboard.js b/connectcore-demo-example/static/js/dashboard.js
index 0e6adbe..cc02850 100644
--- a/connectcore-demo-example/static/js/dashboard.js
+++ b/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;
diff --git a/connectcore-demo-example/static/js/devices.js b/connectcore-demo-example/static/js/devices.js
index 146bed5..831602a 100644
--- a/connectcore-demo-example/static/js/devices.js
+++ b/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;
+    }
 }