added info-block to the scale page

Author: xwu2git

content-provider/frontend/html/css/scale.css

@@ -168,3 +168,49 @@
   }
 }
 
+#scale [info-block] {
+  position: absolute;
+  left: calc(50vw - 172px);
+  bottom: 0px;
+  width: 350px;
+  height: 300px;
+  color: white;
+  font-size: 25px;
+  opacity: 0;
+  animation-name: info-block-animation;
+  animation-fill-mode: forwards;
+  animation-duration: 16s;
+}
+
+#scale [info-block] tr:first-child td {
+  text-align: center;
+}
+
+#scale [info-block] tr:last-child td {
+  text-align: center;
+}
+
+#scale [info-block] tr:last-child td a:link {
+  color: white;
+}
+
+#scale [info-block] tr:last-child td a:visited {
+  color: white;
+}
+
+#scale [info-block] [line-break] {
+  line-height: 0.7;
+}
+
+@keyframes info-block-animation {
+  0% {
+     opacity: 0;
+  }
+  99% {
+     opacity: 0;
+  }
+  100% {
+     opacity: 1;
+  }
+}
+

content-provider/frontend/html/js/scale.js

@@ -19,6 +19,7 @@ function mklayout() {
 
     var ncolumns=spec("ncols")?Math.floor((parseInt(spec("ncols"),10)+1)/2)*2:2;
     var nrows=spec("nrows")?parseInt(spec("nrows"),10):3;
+    $("#scale [info-block] [channel]").text(nrows*ncolumns);
 
     var header_height=144;
     var margin=5;

content-provider/frontend/html/scale.html

@@ -39,13 +39,24 @@
       <img src="image/home-url.png" />
     </div>
 
+    <div info-block>
+        <table><tbody>
+            <tr><td colspan="2">AI-Based AD-Insertion</td></tr>
+            <tr line-break><td colspan="2">&nbsp;</td></tr>
+            <tr><td>Mode:</td><td mode>Object Detection</td></tr>
+            <tr><td>Model:</td><td model>MobileNet SSD</td></tr>
+            <tr><td>Precision:</td><td model>FP16</td></tr>
+            <tr><td>Channel:</td><td channel>24</td></tr>
+            <tr line-break><td colspan="2">&nbsp;</td></tr>
+            <tr><td colspan="2"><a href="https://github.com/OpenVisualCloud/Dockerfiles">OpenVisualCloud Software Stack</a></td></tr>
+        </tbody></table>
+    </div>
+
   </div>
 
   <div id="template">
       <div signal>
       </div>
-
-      
   </div>
 
 </body>