Visual Console Refactor: finished the default sizing for the elements which use icons

Former-commit-id: b8504d22eecdaeee8ac64a2d008ff847c07aa4d2

pandora_console/include/rest-api/models/VisualConsole/Items/Group.php

@@ -277,18 +277,23 @@ final class Group extends Item
 
             // If the width or the height are equal to 0 we will extract them
             // from the real image size.
-            if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
+            $width = (int) $data['width'];
+            $height = (int) $data['height'];
+            if ($width === 0 || $height === 0) {
                 // TODO: This will be the default behaviour after we finish the
                 // builder. Don't delete this code.
+                // $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
+                // $data['width'] = $sizeImage[0];
+                // $data['height'] = $sizeImage[1];
                 $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
-                if ($sizeImage[0] < 70 || $sizeImage[1] < 70) {
+                $imageHeight = $sizeImage[1];
-                    $data['width'] = $sizeImage[0];
+
-                    $data['height'] = $sizeImage[1];
+                if ($width === 0) {
-                } else {
-                    // Default value. Will be replaced by a dynamic image size
-                    // calculation after the phase 3.
                     $data['width'] = 70;
-                    $data['height'] = 70;
+                }
+
+                if ($height === 0) {
+                    $data['height'] = ($imageHeight > 70) ? 70 : $imageHeight;
                 }
             }
 

pandora_console/include/rest-api/models/VisualConsole/Items/Icon.php

@@ -117,18 +117,23 @@ final class Icon extends Item
 
         // If the width or the height are equal to 0 we will extract them
         // from the real image size.
-        if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
+        $width = (int) $data['width'];
+        $height = (int) $data['height'];
+        if ($width === 0 || $height === 0) {
             // TODO: This will be the default behaviour after we finish the
             // builder. Don't delete this code.
+            // $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
+            // $data['width'] = $sizeImage[0];
+            // $data['height'] = $sizeImage[1];
             $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
-            if ($sizeImage[0] < 70 || $sizeImage[1] < 70) {
+            $imageHeight = $sizeImage[1];
-                $data['width'] = $sizeImage[0];
+
-                $data['height'] = $sizeImage[1];
+            if ($width === 0) {
-            } else {
-                // Default value. Will be replaced by a dynamic image size
-                // calculation after the phase 3.
                 $data['width'] = 70;
-                $data['height'] = 70;
+            }
+
+            if ($height === 0) {
+                $data['height'] = ($imageHeight > 70) ? 70 : $imageHeight;
             }
         }
 

pandora_console/include/rest-api/models/VisualConsole/Items/StaticGraph.php

@@ -176,18 +176,25 @@ final class StaticGraph extends Item
 
         // If the width or the height are equal to 0 we will extract them
         // from the real image size.
-        if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
+        $width = (int) $data['width'];
+        $height = (int) $data['height'];
+        if ($width === 0 || $height === 0) {
             // TODO: This will be the default behaviour after we finish the
             // builder. Don't delete this code.
-            $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
+            // $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
-            if ($sizeImage[0] < 70 || $sizeImage[1] < 70) {
+            // $data['width'] = $sizeImage[0];
-                $data['width'] = $sizeImage[0];
+            // $data['height'] = $sizeImage[1];
-                $data['height'] = $sizeImage[1];
-            } else {
             // Default value. Will be replaced by a dynamic image size
             // calculation after the phase 3.
+            $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
+            $imageHeight = $sizeImage[1];
+
+            if ($width === 0) {
                 $data['width'] = 70;
-                $data['height'] = 70;
+            }
+
+            if ($height === 0) {
+                $data['height'] = ($imageHeight > 70) ? 70 : $imageHeight;
             }
         }
 

pandora_console/include/visual-console-client/vc.main.959e6e64.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,wBAAwB;AAC1B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;ACbA;EACE,wBAAwB;EACxB,kCAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.959e6e64.css","sourcesContent":["#visual-console-container {\n  margin: 0px auto;\n  position: relative;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\n.visual-console-item {\n  position: absolute;\n  display: flex;\n  flex-direction: initial;\n  justify-items: center;\n  align-items: center;\n}\n","@font-face {\n  font-family: Alarm Clock;\n  src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  justify-items: center;\n  align-content: center;\n  align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n  font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n  font-size: 50px;\n\n  /* To improve legibility */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n  font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n  font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock .hour-hand {\n  animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n  animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n  animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}

pandora_console/include/visual-console-client/vc.main.ba23d758.css

@@ -18,6 +18,10 @@
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 @font-face {
@@ -82,5 +86,4 @@
   animation: rotate-second 60s infinite linear;
 }
 
-
+/*# sourceMappingURL=vc.main.ba23d758.css.map*/
-/*# sourceMappingURL=vc.main.959e6e64.css.map*/

pandora_console/include/visual-console-client/vc.main.ba23d758.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,wBAAwB;AAC1B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;ACdA;EACE,wBAAwB;EACxB,kCAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.ba23d758.css","sourcesContent":["#visual-console-container {\n  margin: 0px auto;\n  position: relative;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\n.visual-console-item {\n  position: absolute;\n  display: flex;\n  flex-direction: initial;\n  justify-items: center;\n  align-items: center;\n  user-select: none;\n}\n","@font-face {\n  font-family: Alarm Clock;\n  src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  justify-items: center;\n  align-content: center;\n  align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n  font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n  font-size: 50px;\n\n  /* To improve legibility */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n  font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n  font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock .hour-hand {\n  animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n  animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n  animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}

visual_console_client/src/items/Group.ts

@@ -62,22 +62,19 @@ export function groupPropsDecoder(data: UnknownObject): GroupProps | never {
 
 export default class Group extends Item<GroupProps> {
   protected createDomElement(): HTMLElement {
-    if (this.props.showStatistics) {
+    const element = document.createElement("div");
-      const div = document.createElement("div");
+    element.className = "group";
-      div.className = "group";
+
-      if (this.props.html != null) {
+    if (!this.props.showStatistics && this.props.statusImageSrc !== null) {
-        div.innerHTML = this.props.html;
+      // Icon with status.
+      element.style.background = `url(${this.props.statusImageSrc}) no-repeat`;
+      element.style.backgroundSize = "contain";
+      element.style.backgroundPosition = "center";
+    } else if (this.props.showStatistics && this.props.html != null) {
+      // Stats table.
+      element.innerHTML = this.props.html;
     }
 
-      return div;
+    return element;
-    } else {
-      const img: HTMLImageElement = document.createElement("img");
-      img.className = "group";
-      if (this.props.statusImageSrc !== null) {
-        img.src = this.props.statusImageSrc;
-      }
-
-      return img;
-    }
   }
 }

visual_console_client/src/items/Icon.ts

@@ -32,10 +32,12 @@ export function iconPropsDecoder(data: UnknownObject): IconProps | never {
 
 export default class Icon extends Item<IconProps> {
   protected createDomElement(): HTMLElement {
-    const img: HTMLImageElement = document.createElement("img");
+    const element = document.createElement("div");
-    img.className = "icon";
+    element.className = "icon";
-    img.src = this.props.imageSrc;
+    element.style.background = `url(${this.props.imageSrc}) no-repeat`;
+    element.style.backgroundSize = "contain";
+    element.style.backgroundPosition = "center";
 
-    return img;
+    return element;
   }
 }

visual_console_client/src/items/Service.ts

@@ -54,17 +54,17 @@ export function servicePropsDecoder(data: UnknownObject): ServiceProps | never {
 
 export default class Service extends Item<ServiceProps> {
   public createDomElement(): HTMLElement {
-    const img: HTMLImageElement = document.createElement("img");
-    if (this.props.statusImageSrc !== null) {
-      img.className = "icon";
-      img.src = this.props.statusImageSrc;
-    } else {
-      if (this.props.encodedTitle !== null) {
     const element = document.createElement("div");
+    element.className = "service";
+
+    if (this.props.statusImageSrc !== null) {
+      element.style.background = `url(${this.props.statusImageSrc}) no-repeat`;
+      element.style.backgroundSize = "contain";
+      element.style.backgroundPosition = "center";
+    } else if (this.props.encodedTitle !== null) {
       element.innerHTML = decodeBase64(this.props.encodedTitle);
+    }
+
     return element;
   }
 }
-    return img;
-  }
-}

visual_console_client/src/items/StaticGraph.ts

@@ -67,21 +67,23 @@ export function staticGraphPropsDecoder(
 
 export default class StaticGraph extends Item<StaticGraphProps> {
   protected createDomElement(): HTMLElement {
-    const img: HTMLImageElement = document.createElement("img");
+    const imgSrc = this.props.statusImageSrc || this.props.imageSrc;
-    img.className = "static-graph";
+    const element = document.createElement("div");
-    img.src = this.props.statusImageSrc || this.props.imageSrc;
+    element.className = "static-graph";
+    element.style.background = `url(${imgSrc}) no-repeat`;
+    element.style.backgroundSize = "contain";
+    element.style.backgroundPosition = "center";
 
     // Show last value in a tooltip.
     if (
       this.props.lastValue !== null &&
       this.props.showLastValueTooltip !== "disabled"
     ) {
-      img.className = "static-graph image forced_title";
+      element.className = "static-graph image forced_title";
-      img.setAttribute("data-use_title_for_force_title", "1");
+      element.setAttribute("data-use_title_for_force_title", "1");
-      img.setAttribute("data-title", this.props.lastValue);
+      element.setAttribute("data-title", this.props.lastValue);
-      img.alt = this.props.lastValue;
     }
 
-    return img;
+    return element;
   }
 }

visual_console_client/src/main.css

@@ -11,4 +11,5 @@
   flex-direction: initial;
   justify-items: center;
   align-items: center;
+  user-select: none;
 }