SHARE
TWEET

Untitled

a guest Feb 18th, 2020 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML
  2. ====
  3.  
  4. <div id="tf_sum" title="View Traffic Light Streaming" style="display:table;margin: auto;height:100%">
  5. <div class="sum_card" style="display:table-cell;vertical-align:middle;width:120px" align="center">
  6.     <div style="font-size:40px;font-weight:600;color:{{outputColor}}" >
  7.         {{outputValue}}
  8.     </div>
  9.     <div style="color:{{outputColor}}; font-size:20px">
  10.         Humidity
  11.     </div>
  12. </div>
  13. </div>
  14.  
  15. JS
  16. ===
  17.  
  18. self.onInit = function() {
  19. }
  20.  
  21. self.onDataUpdated = function() {
  22.    
  23.     var main_data = self.ctx.data;
  24.     var data_arr = [];
  25.     for(x=0;x<main_data.length;x++){
  26.         keyname = main_data[x].dataKey.name;
  27.         if(typeof(main_data[x]['data'][0]) !== "undefined"){
  28.             if(keyname.startsWith("humidity")){ //sign
  29.                 if(typeof(main_data[x]['data'][0][1]) !== "undefined"){
  30.                     data_arr.push(main_data[x]['data'][0][1]);
  31.                 }
  32.             }
  33.         }
  34.     }
  35.    
  36.     var output = data_arr[0];
  37.     var color = "#01ab1e"; //green
  38.     if(Number.isInteger(output)){ //check if number
  39.         if(output > 30 && output <= 50){
  40.             color = "#c3b400"; //orange
  41.         }else if(output > 50){
  42.             color = "red"; //red
  43.         }
  44.     }
  45.     self.ctx.$scope.outputColor = color;
  46.     self.ctx.$scope.outputValue = output;
  47.     self.ctx.$container.resize();
  48. }
  49.  
  50. self.onResize = function() {
  51. }
  52.  
  53. self.onDestroy = function() {
  54. }
  55.  
  56.  
  57. CSS
  58. ====
  59.  
  60. .sum_card {
  61.     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  62.     /*background-color: #272a3d;*/
  63.     background: #0e1c2d;
  64.     border-radius:5px;
  65.     padding:10px;
  66. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top