Digi
/
dey-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
David Escalona 2023-10-30 11:47:55 +01:00
parent b17458c8b7
commit cf8b2b0412
13 changed files with 80 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
connectcore-demo-example/index.html
View File

@ -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");
}
});
});

15
connectcore-demo-example/static/css/general.css
View File

@ -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 {

BIN
connectcore-demo-example/static/images/led_bubble_blue.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

5
connectcore-demo-example/static/js/ccimx6ulsbc.js
View File

@ -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);

5
connectcore-demo-example/static/js/ccimx8m-nano.js
View File

@ -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);

5
connectcore-demo-example/static/js/ccimx8mm-dvk.js
View File

@ -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);

5
connectcore-demo-example/static/js/ccimx8x-sbc-pro.js
View File

@ -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);

3
connectcore-demo-example/static/js/ccimx93-dvk.js
View File

@ -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);

5
connectcore-demo-example/static/js/ccmp133-dvk.js
View File

@ -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);

5
connectcore-demo-example/static/js/ccmp157-dvk.js
View File

@ -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);

2
connectcore-demo-example/static/js/common.js
View File

@ -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";

27
connectcore-demo-example/static/js/dashboard.js
View File

@ -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;

7
connectcore-demo-example/static/js/devices.js
View File

@ -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
@ -525,4 +525,9 @@ class ConnectCoreDevice {
supportsDualEthernet() {
return this.SUPPORTS_DUAL_ETHERNET;
}
// Returns the color of the device PCB.
getPCBColor() {
return this.PCB_COLOR;
}
}