API tools faq
paste
Guest User

Untitled

a guest
Apr 1st, 2019
1,945
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.00 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.  
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <title>HardwareMon</title>
  8.  
  9.     <!-- Bootstrap core CSS -->
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  11.  
  12.     <style>
  13.  
  14.         body {
  15.             height: 100%;
  16.             background-color: #111111;
  17.             color: #CCC;
  18.         }
  19.  
  20.     </style>
  21.  
  22. </head>
  23.  
  24. <body class="text-center">
  25.  
  26.     <div class="cover-container p-1">
  27.  
  28.         <!--CPU Row-->
  29.         <div class="row no-gutters" style="height: 33vh">
  30.  
  31.             <div class="col p-1">
  32.  
  33.                 <!--CPU Temp-->
  34.                 <h4 class="p-0 m-0" style="font-size: 2vh">CPU Temp (&#8451;)</h4>
  35.                 <div id="ContainerCPUTemp" style="height: 90%;"></div>
  36.  
  37.             </div>
  38.  
  39.             <div class="col p-1">
  40.  
  41.                 <!--CPU Load-->
  42.                 <h4 class="p-0 m-0" style="font-size: 2vh">CPU Load (%)</h4>
  43.                 <div id="ContainerCPULoad" style="height: 90%;"></div>
  44.  
  45.             </div>
  46.  
  47.         </div>
  48.  
  49.         <!--GPU Row-->
  50.         <div class="row no-gutters" style="height: 33vh">
  51.  
  52.             <div class="col p-1">
  53.  
  54.                 <!--GPU Temp-->
  55.                 <h4 class="p-0 m-0" style="font-size: 2vh">GPU Temp (&#8451;)</h4>
  56.                 <div id="ContainerGPUTemp" style="height: 90%;"></div>
  57.  
  58.             </div>
  59.  
  60.             <div class="col p-1">
  61.  
  62.                 <!--GPU Load-->
  63.                 <h4 class="p-0 m-0" style="font-size: 2vh">GPU Load (%)</h4>
  64.                 <div id="ContainerGPULoad" style="height: 90%;"></div>
  65.  
  66.             </div>
  67.  
  68.         </div>
  69.  
  70.         <!--RAM & HDD Load Row-->
  71.         <div class="row no-gutters" style="height: 33vh">
  72.  
  73.             <div class="col p-1">
  74.  
  75.                 <!--RAM Load-->
  76.                 <h4 class="p-0 m-0" style="font-size: 2vh">RAM Usage (%)</h4>
  77.                 <div id="ContainerRAMLoad" style="height: 90%;"></div>
  78.  
  79.             </div>
  80.  
  81.             <div class="col p-1">
  82.  
  83.                 <!--HDD Load-->
  84.                 <h4 class="p-0 m-0" style="font-size: 2vh">HDD Usage (%)</h4>
  85.                 <div id="ContainerHDDLoad" style="height: 90%;"></div>
  86.  
  87.             </div>
  88.  
  89.         </div>
  90.  
  91.     </div>
  92.  
  93.     <!--Bootstrap/Jquery JS Files from CDN-->
  94.     <!--JQuery must be loaded first-->
  95.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  96.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  97.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  98.  
  99.     <!--Highcharts JS from CDN-->
  100.     <script src="https://code.highcharts.com/highcharts.src.js"></script>
  101.     <script src="http://code.highcharts.com/highcharts-more.js"></script>
  102.     <script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
  103.  
  104.     <script type="text/javascript">
  105.  
  106.         $(function () {
  107.  
  108.             var gaugeOptions = {
  109.  
  110.                 chart: {
  111.                     type: 'solidgauge',
  112.                     backgroundColor: '#111111',
  113.                     spacing: [5, 5, 5, 5]
  114.                 },
  115.  
  116.                 title: null,
  117.  
  118.                 pane: {
  119.                     center: ['50%', '50%'],
  120.                     size: '100%',
  121.                     startAngle: 0,
  122.                     endAngle: 360,
  123.                     background: {
  124.                         backgroundColor: '#222222',
  125.                         innerRadius: '60%',
  126.                         outerRadius: '100%',
  127.                         shape: 'arc',
  128.                         borderWidth: 0
  129.                     }
  130.                 },
  131.  
  132.                 tooltip: {
  133.                     enabled: false
  134.                 },
  135.  
  136.                 credits: {
  137.                     enabled: false
  138.                 },
  139.  
  140.                 // the value axis
  141.                 yAxis: {
  142.                     stops: [
  143.                         [0.1, '#00554F'], // green
  144.                         [0.5, '#00B2A7'], // yellow
  145.                         [0.9, '#00FFEF'] // red
  146.                     ],
  147.                     lineWidth: 0,
  148.                     minorTickInterval: null,
  149.                     tickPixelInterval: 400,
  150.                     tickWidth: 0,
  151.                     labels: {
  152.                         enabled: false
  153.                     }
  154.                 },
  155.  
  156.                 plotOptions: {
  157.                     solidgauge: {
  158.                         dataLabels: {
  159.                             borderWidth: 0,
  160.                             useHTML: true,
  161.                             verticalAlign: 'middle',
  162.                             y: -5
  163.                         }
  164.                     }
  165.                 }
  166.             };
  167.  
  168.             // CPU Temp Gauge
  169.             var ChartCPUTemp = Highcharts.chart('ContainerCPUTemp', Highcharts.merge(gaugeOptions, {
  170.  
  171.                 yAxis: {
  172.                     min: 0,
  173.                     max: 100
  174.                 },
  175.  
  176.                 series: [{
  177.                     name: 'CPUTemp',
  178.                     data: [0],
  179.                     dataLabels: {
  180.                         format: '<div style="text-align:center"><span style="font-size:8vh;color:#CCCCCC;font-family:helvetica;font-weight:300;">{y}</span></div>'
  181.                     }
  182.                 }]
  183.  
  184.             }));
  185.  
  186.             // CPU Load Gauge
  187.             var ChartCPULoad = Highcharts.chart('ContainerCPULoad', Highcharts.merge(gaugeOptions, {
  188.  
  189.                 yAxis: {
  190.                     min: 0,
  191.                     max: 100
  192.                 },
  193.  
  194.                 series: [{
  195.                     name: 'CPULoad',
  196.                     data: [0],
  197.                     dataLabels: {
  198.                         format: '<div style="text-align:center"><span style="font-size:8vh;color:#CCCCCC;font-family:helvetica;font-weight:300">{y}</span></div>'
  199.                     }
  200.                 }]
  201.  
  202.             }));
  203.  
  204.             // GPU Temp Gauge
  205.             var ChartGPUTemp = Highcharts.chart('ContainerGPUTemp', Highcharts.merge(gaugeOptions, {
  206.  
  207.                 yAxis: {
  208.                     min: 0,
  209.                     max: 100
  210.                 },
  211.  
  212.                 series: [{
  213.                     name: 'GPUTemp',
  214.                     data: [0],
  215.                     dataLabels: {
  216.                         format: '<div style="text-align:center"><span style="font-size:8vh;color:#CCCCCC;font-family:helvetica;font-weight:300">{y}</span></div>'
  217.                     }
  218.                 }]
  219.  
  220.             }));
  221.  
  222.             // GPU Load Gauge
  223.             var ChartGPULoad = Highcharts.chart('ContainerGPULoad', Highcharts.merge(gaugeOptions, {
  224.  
  225.                 yAxis: {
  226.                     min: 0,
  227.                     max: 100
  228.                 },
  229.  
  230.                 series: [{
  231.                     name: 'GPULoad',
  232.                     data: [0],
  233.                     dataLabels: {
  234.                         format: '<div style="text-align:center"><span style="font-size:8vh;color:#CCCCCC;font-family:helvetica;font-weight:300">{y}</span></div>'
  235.                     }
  236.                 }]
  237.  
  238.             }));
  239.  
  240.             // RAM Load Gauge
  241.             var ChartRAMLoad = Highcharts.chart('ContainerRAMLoad', Highcharts.merge(gaugeOptions, {
  242.  
  243.                 yAxis: {
  244.                     min: 0,
  245.                     max: 100
  246.                 },
  247.  
  248.                 series: [{
  249.                     name: 'RAMLoad',
  250.                     data: [0],
  251.                     dataLabels: {
  252.                         format: '<div style="text-align:center"><span style="font-size:8vh;color:#CCCCCC;font-family:helvetica;font-weight:300">{y}</span></div>'
  253.                     }
  254.                 }]
  255.  
  256.             }));
  257.  
  258.             // HDD Load Gauge
  259.             var ChartHDDLoad = Highcharts.chart('ContainerHDDLoad', Highcharts.merge(gaugeOptions, {
  260.  
  261.                 yAxis: {
  262.                     min: 0,
  263.                     max: 100
  264.                 },
  265.  
  266.                 series: [{
  267.                     name: 'HDDLoad',
  268.                     data: [0],
  269.                     dataLabels: {
  270.                         format: '<div style="text-align:center"><span style="font-size:8vh;color:#CCCCCC;font-family:helvetica;font-weight:300">{y}</span></div>'
  271.                     }
  272.                 }]
  273.  
  274.             }));
  275.  
  276.             // Bring life to the dials refresh every 1000 msec
  277.             setInterval(function () {
  278.                 $.getJSON('data.json', function (data) {
  279.  
  280.                     var Computer = data.Children[0]; // Get master Computer object
  281.                     var ComputerChildren = Computer.Children; // Get child objects of Computer
  282.  
  283.                     //////////// CPU Temp & Load ////////////
  284.  
  285.                    var CPU = ComputerChildren[1]; // Get CPU object
  286.                     var CPUChildren = CPU.Children; // Get child objects of CPU
  287.  
  288.                     var CPUTemps = CPUChildren[1];
  289.                     var CPULoad = CPUChildren[2];
  290.  
  291.                     // Core Temp calcs
  292.                     var CPUTotal = 0;
  293.                     var CPUCores = 0;
  294.                     var CPUTempVal = 0;
  295.  
  296.                     // Append values if CPU Core is detected
  297.                     $.each(CPUTemps.Children, function (key, value) {
  298.                         if (value.Text.indexOf("CPU Core") >= 0) {
  299.                             CPUTotal += parseInt(value.Value.split(' ')[0]); // Splits string to get number value on Temp
  300.                             CPUCores++
  301.                         }
  302.                     });
  303.  
  304.                     CPUTempVal = CPUTotal / CPUCores; // Divide total Temp by Core count
  305.  
  306.                     // Core Load calcs
  307.                     var CPULoadVal = 0;
  308.  
  309.                     // Find value based on 'CPU Total' Counter
  310.                     $.each(CPULoad.Children, function (key, value) {
  311.                         if (value.Text.indexOf("CPU Total") >= 0) {
  312.                             CPULoadVal = value.Value.split(' ')[0];
  313.                         }
  314.                     });
  315.  
  316.                     //////////// GPU Temp & Load ////////////
  317.  
  318.                    var GPU = ComputerChildren[3]; // Get GPU object
  319.                     var GPUChildren = GPU.Children; // Get child objects of GPU
  320.  
  321.                     var GPUTemps = GPUChildren[1];
  322.                     var GPULoad = GPUChildren[2];
  323.  
  324.                     // Core Temp calcs
  325.                     var GPUTempVal = 0;
  326.  
  327.                     // Append values if GPU Core is detected
  328.                     $.each(GPUTemps.Children, function (key, value) {
  329.                         if (value.Text.indexOf("GPU Core") >= 0) {
  330.                             GPUTempVal = value.Value.split(' ')[0];
  331.                         }
  332.                     });
  333.  
  334.                     // Core Load calcs
  335.                     var GPULoadVal = 0;
  336.  
  337.                     // Append values if GPU Core is detected
  338.                     $.each(GPULoad.Children, function (key, value) {
  339.                         if (value.Text.indexOf("GPU Core") >= 0) {
  340.                             GPULoadVal = value.Value.split(' ')[0];
  341.                         }
  342.                     });
  343.  
  344.                     //////////// RAM Load ////////////
  345.  
  346.                     var RAM = ComputerChildren[2]; // Get GPU object
  347.                     var RAMChildren = RAM.Children; // Get child objects of GPU
  348.  
  349.                     // RAM Load calcs
  350.                     var RAMLoad = RAMChildren[0];
  351.                     var RAMLoadVal = 0;
  352.  
  353.                     // Append values if GPU Core is detected
  354.                     $.each(RAMLoad.Children, function (key, value) {
  355.                         if (value.Text.indexOf("Memory") >= 0) {
  356.                             RAMLoadVal = value.Value.split(' ')[0];
  357.                         }
  358.                     });
  359.  
  360.                     //////////// HDD Load ////////////
  361.  
  362.                     var HDD = ComputerChildren[4]; // Get GPU object
  363.                     var HDDChildren = HDD.Children; // Get child objects of GPU
  364.  
  365.                     // HDD Load calcs
  366.                     var HDDLoad = HDDChildren[0];
  367.                     var HDDLoadVal = 0;
  368.  
  369.                     // Append values if GPU Core is detected
  370.                     $.each(HDDLoad.Children, function (key, value) {
  371.                         if (value.Text.indexOf("Used Space") >= 0) {
  372.                             HDDLoadVal = value.Value.split(' ')[0];
  373.                         }
  374.                     });
  375.  
  376.                     //////////// Update Charts ////////////
  377.  
  378.                     // CPU Temp update
  379.                     var point = ChartCPUTemp.series[0].points[0];
  380.                     point.update(Math.round(CPUTempVal));
  381.  
  382.                     // CPU Load update
  383.                     var point = ChartCPULoad.series[0].points[0];
  384.                     point.update(Math.round(CPULoadVal));
  385.  
  386.                     // GPU Temp update
  387.                     var point = ChartGPUTemp.series[0].points[0];
  388.                     point.update(Math.round(GPUTempVal));
  389.  
  390.                     // GPU Load update
  391.                     var point = ChartGPULoad.series[0].points[0];
  392.                     point.update(Math.round(GPULoadVal));
  393.  
  394.                     // RAM Load update
  395.                     var point = ChartRAMLoad.series[0].points[0];
  396.                     point.update(Math.round(RAMLoadVal));
  397.  
  398.                     // HDD Load update
  399.                     var point = ChartHDDLoad.series[0].points[0];
  400.                     point.update(Math.round(HDDLoadVal));
  401.  
  402.                 });
  403.             }, 1000);
  404.  
  405.         });
  406.  
  407.     </script>
  408.  
  409. </body>
  410.  
  411. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!