From 59cb0dd7520043a1994fbdb121f2d67b75cf6f55 Mon Sep 17 00:00:00 2001
From: Tatiana Leon <Tatiana.Leon@digi.com>
Date: Mon, 2 May 2022 18:49:15 +0200
Subject: [PATCH] connectcore-demo-example: set relative path for static
 resources

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

Signed-off-by: Tatiana Leon <Tatiana.Leon@digi.com>
---
 connectcore-demo-example/index.html           | 100 +++++++++---------
 connectcore-demo-example/management.html      |  76 ++++++-------
 connectcore-demo-example/static/js/common.js  |   4 +-
 .../static/js/dashboard.js                    |   2 +-
 4 files changed, 92 insertions(+), 90 deletions(-)
diff --git a/connectcore-demo-example/index.html b/connectcore-demo-example/index.html
index ac89ffe..b271281 100644
--- a/connectcore-demo-example/index.html
+++ b/connectcore-demo-example/index.html
@@ -9,10 +9,10 @@ Digi Demo - Dashboard
     <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css" rel="stylesheet">
 
-    <link rel="stylesheet"  href="/static/css/login.css">
-    <link rel="stylesheet"  href="/static/css/general.css">
-    <link rel="stylesheet"  href="/static/css/toastr.css">
-    <link rel="stylesheet"  href="/static/css/xterm.css">
+    <link rel="stylesheet"  href="./static/css/login.css">
+    <link rel="stylesheet"  href="./static/css/general.css">
+    <link rel="stylesheet"  href="./static/css/toastr.css">
+    <link rel="stylesheet"  href="./static/css/xterm.css">
 
     <!-- JS, Popper.js, and jQuery -->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
@@ -25,18 +25,18 @@ Digi Demo - Dashboard
     <script>
         google.charts.load("current", {"packages":["line"]});
     </script>
-    <script type="text/javascript" src="/static/js/common.js"></script>
-    <script type="text/javascript" src="/static/js/devices.js"></script>
-    <script type="text/javascript" src="/static/js/jquery.pjax.js"></script>
-    <script type="text/javascript" src="/static/js/jquery.matchHeight-min.js"></script>
-    <script type="text/javascript" src="/static/js/toastr.min.js"></script>
+    <script type="text/javascript" src="./static/js/common.js"></script>
+    <script type="text/javascript" src="./static/js/devices.js"></script>
+    <script type="text/javascript" src="./static/js/jquery.pjax.js"></script>
+    <script type="text/javascript" src="./static/js/jquery.matchHeight-min.js"></script>
+    <script type="text/javascript" src="./static/js/toastr.min.js"></script>
 </head>
 <body>
     <nav id="topBar" class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
         <div class="nav-container">
             <a id="banner-link" class="navbar-brand align-middle" href="/">
                 <div class="d-flex align-items-baseline">
-                    <img id="banner-logo" class="banner-icon" src="/static/images/Digi_logo_banner.png">
+                    <img id="banner-logo" class="banner-icon" src="./static/images/Digi_logo_banner.png">
                     <p id="banner-text">ConnectCore Demo</p>
                 </div>
             </a>
@@ -47,7 +47,7 @@ Digi Demo - Dashboard
             <div class="data-usage-panel-wrapper">
                 <div id="data_usage_loading" class="data-usage-loading">
                     <div class="data-usage-loading-background"></div>
-                    <img class="data-usage-loading-icon" src="/static/images/loading.gif" alt="Loading..." />
+                    <img class="data-usage-loading-icon" src="./static/images/loading.gif" alt="Loading..." />
                     <div class="data-usage-loading-text">Loading data...</div>
                 </div>
                 <div id="data_usage_content" class="data-usage-content">
@@ -140,26 +140,26 @@ Digi Demo - Dashboard
             </div>
         </div>
         <div>
-            <img src="/static/images/board.png" class="device-title-img" title="Device">
+            <img src="./static/images/board.png" class="device-title-img" title="Device">
         </div>
         <div id="device-name"></div>
         <div>
-            <img src="/static/images/status_offline.png" id="device-connection-status" class="device-title-img" title="Offline">
+            <img src="./static/images/status_offline.png" id="device-connection-status" class="device-title-img" title="Offline">
         </div>
         <div class="vertical-separator"></div>
         <div>
             <button id="devices-list-button" class="btn widget-button" type="button" value="0" onclick="window.open('/','_self');">
-                <img src="/static/images/devices_list_gray.png" id="devices-list-icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Open devices list">
+                <img src="./static/images/devices_list_gray.png" id="devices-list-icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Open devices list">
             </button>
             <button id="data_usage_button" class="btn widget-button" type="button" value="0" onclick="toggleDataUsagePanel();">
-                <img src="/static/images/data_usage.png" id="data_usage_icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Show data usage">
+                <img src="./static/images/data_usage.png" id="data_usage_icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Show data usage">
             </button>
         </div>
         <div class="vertical-separator"></div>
 
             <div class="dropdown digi-gray" id="profile-container">
                 <button class="btn dropdown-toggle" type="button" id="profileMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <img id="profile-logo" class="banner-icon" src="/static/images/profile_gray.png">
+                    <img id="profile-logo" class="banner-icon" src="./static/images/profile_gray.png">
                 </button>
                 <div class="dropdown-menu shadow-sm" aria-labelledby="profileMenuButton">
                     <a class="dropdown-item" href="/access/logout/">Log out</a>
@@ -219,7 +219,7 @@ Digi Demo - Dashboard
         <div class="container-fluid">
 
         <div id="loading">
-            <img id="loading-image" src="/static/images/loading.gif" alt="Loading..." />
+            <img id="loading-image" src="./static/images/loading.gif" alt="Loading..." />
         </div>
         <div id="pjax-container">
 
@@ -231,7 +231,7 @@ Digi Demo - Dashboard
                             <div class="card-body">
                                 <div id="dashboard_device" class="dashboard-device">
                                     <div id="loading_popup" class="popup popup-loading shadow">
-                                        <img class="popup-item" src="/static/images/loading.gif" alt="Loading..." />
+                                        <img class="popup-item" src="./static/images/loading.gif" alt="Loading..." />
                                         <div id="loading_popup_message" class="popup-text">Loading device...</div>
                                     </div>
                                     <div id="info_popup" class="popup popup-info shadow d-none">
@@ -256,10 +256,10 @@ Digi Demo - Dashboard
                                                 <div id="device_toolbar" class="device-toolbar">
                                                     <div id="platform_name" class="platform-name"></div>
                                                     <div id="device-button-show-info" class="device-button" onclick="setInfoPanelsVisible(true)">
-                                                        <img id="device-button-show-info-img" src="/static/images/show_info.png" width="32px" data-toggle="tooltip" data-placement="bottom" title="Show all information panels">
+                                                        <img id="device-button-show-info-img" src="./static/images/show_info.png" width="32px" data-toggle="tooltip" data-placement="bottom" title="Show all information panels">
                                                     </div>
                                                     <div id="device-button-hide-info" class="device-button" onclick="setInfoPanelsVisible(false)">
-                                                        <img id="device-button-hide-info-img" src="/static/images/hide_info.png" width="32px" data-toggle="tooltip" data-placement="bottom" title="Hide all information panels">
+                                                        <img id="device-button-hide-info-img" src="./static/images/hide_info.png" width="32px" data-toggle="tooltip" data-placement="bottom" title="Hide all information panels">
                                                     </div>
                                                     <div class="samples-info-container">
                                                         <table>
@@ -283,7 +283,7 @@ Digi Demo - Dashboard
                                                         <div class="samples-info-overlay" title="Change device sampling settings" data-toggle="tooltip" data-placement="bottom" onclick="changeSampleRate()"></div>
                                                     </div>
                                                 </div>
-                                                <div id="board_image_container" class="device-board-container">
+                                                    <div id="board_image_container" class="device-board-container">
                                                     <center><img id="board_image" class="device-board-image" width="" src=""/></center>
                                                 </div>
                                             </div>
@@ -403,7 +403,7 @@ Digi Demo - Dashboard
                                                     <div id="console" class="terminal"></div>
                                                     <div id="console_hover_background" class="console-hover-background"></div>
                                                     <div id="console_loading" class="popup shadow" style="top: 33%">
-                                                        <img class="popup-item" src="/static/images/loading.gif" alt="Connecting..." />
+                                                        <img class="popup-item" src="./static/images/loading.gif" alt="Connecting..." />
                                                         <div class="popup-text">Connecting...</div>
                                                     </div>
                                                     <div id="console_error_reconnect" class="popup popup-error-reconnect shadow">
@@ -622,7 +622,7 @@ Digi Demo - Dashboard
                                                     </div>
                                                     <div id="filesystem_items_container" class="filesystem-items-container"></div>
                                                     <div id="filesystem_loading" class="popup shadow" style="top: 33%">
-                                                        <img class="popup-item" src="/static/images/loading.gif" alt="Loading..." />
+                                                        <img class="popup-item" src="./static/images/loading.gif" alt="Loading..." />
                                                         <div class="popup-text">Loading...</div>
                                                     </div>
                                                 </div>
@@ -833,7 +833,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" src="./static/images/led_bubble.png"/>
                                             </div>
                                             <div id="flash_memory_panel_area" class="panel-area panel-tooltip" onclick="toggleInfoPanelVisibility('flash_memory')">
                                                 <span class="panel-tooltip-text">Flash memory</span>
@@ -881,18 +881,18 @@ Digi Demo - Dashboard
         // Change the color of the device toolbar icons when hovering.
         $("#device-button-hide-info").on({
             "mouseover" : function() {
-                $("#device-button-hide-info-img").attr("src", "/static/images/hide_info_green.png");
+                $("#device-button-hide-info-img").attr("src", "./static/images/hide_info_green.png");
             },
             "mouseout" : function() {
-                $("#device-button-hide-info-img").attr("src", "/static/images/hide_info.png");
+                $("#device-button-hide-info-img").attr("src", "./static/images/hide_info.png");
             }
         });
         $("#device-button-show-info").on({
             "mouseover" : function() {
-                $("#device-button-show-info-img").attr("src", "/static/images/show_info_green.png");
+                $("#device-button-show-info-img").attr("src", "./static/images/show_info_green.png");
             },
             "mouseout" : function() {
-                $("#device-button-show-info-img").attr("src", "/static/images/show_info.png");
+                $("#device-button-show-info-img").attr("src", "./static/images/show_info.png");
             }
         });
         // Register file upload change event.
@@ -906,10 +906,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").attr("src", "./static/images/led_bubble_hover.png");
             },
             "mouseout" : function() {
-                $("#led_image").attr("src", "/static/images/led_bubble.png");
+                $("#led_image").attr("src", "./static/images/led_bubble.png");
             }
         });
     });
@@ -944,10 +944,10 @@ Digi Demo - Dashboard
     $(document).ready(function() {
         $("#banner-link").on({
             "mouseover" : function() {
-                $("#banner-logo").attr("src", "/static/images/Digi_logo_banner_gray.png");
+                $("#banner-logo").attr("src", "./static/images/Digi_logo_banner_gray.png");
             },
             "mouseout" : function() {
-                $("#banner-logo").attr("src", "/static/images/Digi_logo_banner.png");
+                $("#banner-logo").attr("src", "./static/images/Digi_logo_banner.png");
             }
         });
     });
@@ -964,7 +964,7 @@ Digi Demo - Dashboard
 $( document ).ready(function() {
     $("#profile-container").on({
         "mouseover" : function() {
-            $("#profile-logo").attr("src", "/static/images/profile_green.png");
+            $("#profile-logo").attr("src", "./static/images/profile_green.png");
             if (!$("#profile-container").hasClass("digi-green")) {
                 $("#profile-container").addClass("digi-green");
             }
@@ -973,7 +973,7 @@ $( document ).ready(function() {
             }
         },
         "mouseout" : function() {
-            $("#profile-logo").attr("src", "/static/images/profile_gray.png");
+            $("#profile-logo").attr("src", "./static/images/profile_gray.png");
             if (!$("#profile-container").hasClass("digi-gray")) {
                 $("#profile-container").addClass("digi-gray");
             }
@@ -986,18 +986,18 @@ $( document ).ready(function() {
 </script>
 
     <!-- Local JS files and functions -->
-    <script type="text/javascript" src="/static/js/sidebar.js"></script>
-    <script type="text/javascript" src="/static/js/ccimx8mm-dvk.js"></script>
-    <script type="text/javascript" src="/static/js/ccimx8m-nano.js"></script>
-    <script type="text/javascript" src="/static/js/ccimx8x-sbc-pro.js"></script>
-    <script type="text/javascript" src="/static/js/dashboard.js"></script>
-    <script type="text/javascript" src="/static/js/management.js"></script>
-    <script type="text/javascript" src="/static/js/history.js"></script>
-    <script type="text/javascript" src="/static/js/xterm.js"></script>
-    <script type="text/javascript" src="/static/js/xterm-addon-fit.js"></script>
-    <script type="text/javascript" src="/static/js/console.js"></script>
-    <script type="text/javascript" src="/static/js/file-system.js"></script>
-    <script type="text/javascript" src="/static/js/data-usage.js"></script>
+    <script type="text/javascript" src="./static/js/sidebar.js"></script>
+    <script type="text/javascript" src="./static/js/ccimx8mm-dvk.js"></script>
+    <script type="text/javascript" src="./static/js/ccimx8m-nano.js"></script>
+    <script type="text/javascript" src="./static/js/ccimx8x-sbc-pro.js"></script>
+    <script type="text/javascript" src="./static/js/dashboard.js"></script>
+    <script type="text/javascript" src="./static/js/management.js"></script>
+    <script type="text/javascript" src="./static/js/history.js"></script>
+    <script type="text/javascript" src="./static/js/xterm.js"></script>
+    <script type="text/javascript" src="./static/js/xterm-addon-fit.js"></script>
+    <script type="text/javascript" src="./static/js/console.js"></script>
+    <script type="text/javascript" src="./static/js/file-system.js"></script>
+    <script type="text/javascript" src="./static/js/data-usage.js"></script>
     <script>
     $(document).ready(function() {
         // Don't show the loading spinner at the beginning. Initial page
@@ -1048,19 +1048,19 @@ $( document ).ready(function() {
         // Change the color of the devices icon when hovering.
         $("#devices-list-button").on({
             "mouseover" : function() {
-                $("#devices-list-icon").attr("src", "/static/images/devices_list_green.png");
+                $("#devices-list-icon").attr("src", "./static/images/devices_list_green.png");
             },
             "mouseout" : function() {
-                $("#devices-list-icon").attr("src", "/static/images/devices_list_gray.png");
+                $("#devices-list-icon").attr("src", "./static/images/devices_list_gray.png");
             }
         });
         // Change the color of the data usage icon when hovering.
         $("#data_usage_button").on({
             "mouseover" : function() {
-                $("#data_usage_icon").attr("src", "/static/images/data_usage_green.png");
+                $("#data_usage_icon").attr("src", "./static/images/data_usage_green.png");
             },
             "mouseout" : function() {
-                $("#data_usage_icon").attr("src", "/static/images/data_usage.png");
+                $("#data_usage_icon").attr("src", "./static/images/data_usage.png");
             }
         });
 
diff --git a/connectcore-demo-example/management.html b/connectcore-demo-example/management.html
index ae73785..1b6e687 100644
--- a/connectcore-demo-example/management.html
+++ b/connectcore-demo-example/management.html
@@ -9,10 +9,10 @@ Digi Demo - Management
     <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.3/css/bootstrap-slider.min.css" rel="stylesheet">
 
-    <link rel="stylesheet"  href="/static/css/login.css">
-    <link rel="stylesheet"  href="/static/css/general.css">
-    <link rel="stylesheet"  href="/static/css/toastr.css">
-    <link rel="stylesheet"  href="/static/css/xterm.css">
+    <link rel="stylesheet"  href="./static/css/login.css">
+    <link rel="stylesheet"  href="./static/css/general.css">
+    <link rel="stylesheet"  href="./static/css/toastr.css">
+    <link rel="stylesheet"  href="./static/css/xterm.css">
 
     <!-- JS, Popper.js, and jQuery -->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
@@ -25,18 +25,18 @@ Digi Demo - Management
     <script>
         google.charts.load("current", {"packages":["line"]});
     </script>
-    <script type="text/javascript" src="/static/js/common.js"></script>
-    <script type="text/javascript" src="/static/js/devices.js"></script>
-    <script type="text/javascript" src="/static/js/jquery.pjax.js"></script>
-    <script type="text/javascript" src="/static/js/jquery.matchHeight-min.js"></script>
-    <script type="text/javascript" src="/static/js/toastr.min.js"></script>
+    <script type="text/javascript" src="./static/js/common.js"></script>
+    <script type="text/javascript" src="./static/js/devices.js"></script>
+    <script type="text/javascript" src="./static/js/jquery.pjax.js"></script>
+    <script type="text/javascript" src="./static/js/jquery.matchHeight-min.js"></script>
+    <script type="text/javascript" src="./static/js/toastr.min.js"></script>
 </head>
 <body>
     <nav id="topBar" class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
         <div class="nav-container">
             <a id="banner-link" class="navbar-brand align-middle" href="/">
                 <div class="d-flex align-items-baseline">
-                    <img id="banner-logo" class="banner-icon" src="/static/images/Digi_logo_banner.png">
+                    <img id="banner-logo" class="banner-icon" src="./static/images/Digi_logo_banner.png">
                     <p id="banner-text">ConnectCore Demo</p>
                 </div>
             </a>
@@ -47,7 +47,7 @@ Digi Demo - Management
             <div class="data-usage-panel-wrapper">
                 <div id="data_usage_loading" class="data-usage-loading">
                     <div class="data-usage-loading-background"></div>
-                    <img class="data-usage-loading-icon" src="/static/images/loading.gif" alt="Loading..." />
+                    <img class="data-usage-loading-icon" src="./static/images/loading.gif" alt="Loading..." />
                     <div class="data-usage-loading-text">Loading data...</div>
                 </div>
                 <div id="data_usage_content" class="data-usage-content">
@@ -140,26 +140,26 @@ Digi Demo - Management
             </div>
         </div>
         <div>
-            <img src="/static/images/board.png" class="device-title-img" title="Device">
+            <img src="./static/images/board.png" class="device-title-img" title="Device">
         </div>
         <div id="device-name"></div>
         <div>
-            <img src="/static/images/status_offline.png" id="device-connection-status" class="device-title-img" title="Offline">
+            <img src="./static/images/status_offline.png" id="device-connection-status" class="device-title-img" title="Offline">
         </div>
         <div class="vertical-separator"></div>
         <div>
             <button id="devices-list-button" class="btn widget-button" type="button" value="0" onclick="window.open('/','_self');">
-                <img src="/static/images/devices_list_gray.png" id="devices-list-icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Open devices list">
+                <img src="./static/images/devices_list_gray.png" id="devices-list-icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Open devices list">
             </button>
             <button id="data_usage_button" class="btn widget-button" type="button" value="0" onclick="toggleDataUsagePanel();">
-                <img src="/static/images/data_usage.png" id="data_usage_icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Show data usage">
+                <img src="./static/images/data_usage.png" id="data_usage_icon" class="devices-list-icon" data-toggle="tooltip" data-placement="bottom" title="Show data usage">
             </button>
         </div>
         <div class="vertical-separator"></div>
 
             <div class="dropdown digi-gray" id="profile-container">
                 <button class="btn dropdown-toggle" type="button" id="profileMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <img id="profile-logo" class="banner-icon" src="/static/images/profile_gray.png">
+                    <img id="profile-logo" class="banner-icon" src="./static/images/profile_gray.png">
                 </button>
                 <div class="dropdown-menu shadow-sm" aria-labelledby="profileMenuButton">
                     <a class="dropdown-item" href="/access/logout/">Log out</a>
@@ -219,7 +219,7 @@ Digi Demo - Management
         <div class="container-fluid">
 
         <div id="loading">
-            <img id="loading-image" src="/static/images/loading.gif" alt="Loading..." />
+            <img id="loading-image" src="./static/images/loading.gif" alt="Loading..." />
         </div>
         <div id="pjax-container">
 
@@ -228,7 +228,7 @@ Digi Demo - Management
             <div class="row justify-content-lg-center">
                 <div class="col-lg-12 col-xl-12">
                     <div id="loading_popup" class="popup popup-loading shadow">
-                        <img class="popup-item" src="/static/images/loading.gif" alt="Loading..." />
+                        <img class="popup-item" src="./static/images/loading.gif" alt="Loading..." />
                         <div id="loading_popup_message" class="popup-text">Loading information...</div>
                     </div>
                     <div id="info_popup" class="popup popup-info shadow d-none">
@@ -403,10 +403,10 @@ Digi Demo - Management
     $(document).ready(function() {
         $("#banner-link").on({
             "mouseover" : function() {
-                $("#banner-logo").attr("src", "/static/images/Digi_logo_banner_gray.png");
+                $("#banner-logo").attr("src", "./static/images/Digi_logo_banner_gray.png");
             },
             "mouseout" : function() {
-                $("#banner-logo").attr("src", "/static/images/Digi_logo_banner.png");
+                $("#banner-logo").attr("src", "./static/images/Digi_logo_banner.png");
             }
         });
     });
@@ -423,7 +423,7 @@ Digi Demo - Management
 $( document ).ready(function() {
     $("#profile-container").on({
         "mouseover" : function() {
-            $("#profile-logo").attr("src", "/static/images/profile_green.png");
+            $("#profile-logo").attr("src", "./static/images/profile_green.png");
             if (!$("#profile-container").hasClass("digi-green")) {
                 $("#profile-container").addClass("digi-green");
             }
@@ -432,7 +432,7 @@ $( document ).ready(function() {
             }
         },
         "mouseout" : function() {
-            $("#profile-logo").attr("src", "/static/images/profile_gray.png");
+            $("#profile-logo").attr("src", "./static/images/profile_gray.png");
             if (!$("#profile-container").hasClass("digi-gray")) {
                 $("#profile-container").addClass("digi-gray");
             }
@@ -445,18 +445,18 @@ $( document ).ready(function() {
 </script>
 
     <!-- Local JS files and functions -->
-    <script type="text/javascript" src="/static/js/sidebar.js"></script>
-    <script type="text/javascript" src="/static/js/ccimx8mm-dvk.js"></script>
-    <script type="text/javascript" src="/static/js/ccimx8m-nano.js"></script>
-    <script type="text/javascript" src="/static/js/ccimx8x-sbc-pro.js"></script>
-    <script type="text/javascript" src="/static/js/dashboard.js"></script>
-    <script type="text/javascript" src="/static/js/management.js"></script>
-    <script type="text/javascript" src="/static/js/history.js"></script>
-    <script type="text/javascript" src="/static/js/xterm.js"></script>
-    <script type="text/javascript" src="/static/js/xterm-addon-fit.js"></script>
-    <script type="text/javascript" src="/static/js/console.js"></script>
-    <script type="text/javascript" src="/static/js/file-system.js"></script>
-    <script type="text/javascript" src="/static/js/data-usage.js"></script>
+    <script type="text/javascript" src="./static/js/sidebar.js"></script>
+    <script type="text/javascript" src="./static/js/ccimx8mm-dvk.js"></script>
+    <script type="text/javascript" src="./static/js/ccimx8m-nano.js"></script>
+    <script type="text/javascript" src="./static/js/ccimx8x-sbc-pro.js"></script>
+    <script type="text/javascript" src="./static/js/dashboard.js"></script>
+    <script type="text/javascript" src="./static/js/management.js"></script>
+    <script type="text/javascript" src="./static/js/history.js"></script>
+    <script type="text/javascript" src="./static/js/xterm.js"></script>
+    <script type="text/javascript" src="./static/js/xterm-addon-fit.js"></script>
+    <script type="text/javascript" src="./static/js/console.js"></script>
+    <script type="text/javascript" src="./static/js/file-system.js"></script>
+    <script type="text/javascript" src="./static/js/data-usage.js"></script>
     <script>
     $(document).ready(function() {
         // Don't show the loading spinner at the beginning. Initial page
@@ -507,19 +507,19 @@ $( document ).ready(function() {
         // Change the color of the devices icon when hovering.
         $("#devices-list-button").on({
             "mouseover" : function() {
-                $("#devices-list-icon").attr("src", "/static/images/devices_list_green.png");
+                $("#devices-list-icon").attr("src", "./static/images/devices_list_green.png");
             },
             "mouseout" : function() {
-                $("#devices-list-icon").attr("src", "/static/images/devices_list_gray.png");
+                $("#devices-list-icon").attr("src", "./static/images/devices_list_gray.png");
             }
         });
         // Change the color of the data usage icon when hovering.
         $("#data_usage_button").on({
             "mouseover" : function() {
-                $("#data_usage_icon").attr("src", "/static/images/data_usage_green.png");
+                $("#data_usage_icon").attr("src", "./static/images/data_usage_green.png");
             },
             "mouseout" : function() {
-                $("#data_usage_icon").attr("src", "/static/images/data_usage.png");
+                $("#data_usage_icon").attr("src", "./static/images/data_usage.png");
             }
         });
 
diff --git a/connectcore-demo-example/static/js/common.js b/connectcore-demo-example/static/js/common.js
index 36fbe81..9d10e5a 100644
--- a/connectcore-demo-example/static/js/common.js
+++ b/connectcore-demo-example/static/js/common.js
@@ -431,7 +431,9 @@ function roundToGigaBytes(kiloBytes) {
 
 // Returns whether the dashboard page is showing or not.
 function isDashboardShowing() {
-    return window.location.pathname.indexOf("dashboard") > -1;
+    if (window.location.pathname == "/")
+        return true;
+    return window.location.pathname.indexOf("index") > -1;
 }
 
 // Returns whether the management page is showing or not.
diff --git a/connectcore-demo-example/static/js/dashboard.js b/connectcore-demo-example/static/js/dashboard.js
index e6c97dc..0b6d257 100644
--- a/connectcore-demo-example/static/js/dashboard.js
+++ b/connectcore-demo-example/static/js/dashboard.js
@@ -339,7 +339,7 @@ function drawDevice() {
     // Initialize variables.
     var boardImage = document.getElementById(ID_BOARD_IMAGE);
     // Draw the device board image.
-    $(boardImage).attr("src", "../static/images/" + device.getBoardImage());
+    $(boardImage).attr("src", "./static/images/" + device.getBoardImage());
     boardImage.style.width = device.getBoardImageScale() + "%";
     boardImage.style.maxWidth = device.getBoardImageScale() + "%";
     boardImage.style.height = "auto";
