Untitled

<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>HardwareMon</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <style>

        body {
            height: 100%;
            background-color: #000000;
            color: #CCC;
        }

    </style>

</head>

<body class="text-center">

    <!--CPU Row-->
    <div class="row no-gutters" style="height: 33vh">

        <div class="col-6 col-xs-6 col-sm-6 col-md-6 p-1">

            <!--CPU Temp-->
            <h4 class="p-0 m-0" style="font-size: 2vh">CPU Temp (&#8451;)</h4>
            <div id="ContainerCPUTemp" style="height: 90%;"></div>

        </div>

        <div class="col-6 col-xs-6 col-sm-6 col-md-6 p-1">

            <!--CPU Load-->
            <h4 class="p-0 m-0" style="font-size: 2vh">CPU Load (%)</h4>
            <div id="ContainerCPULoad" style="height: 90%;"></div>

        </div>

    </div>

    <!--GPU Row-->
    <div class="row no-gutters" style="height: 33vh">

        <div class="col-6 col-xs-6 col-sm-6 col-md-6 p-1">

            <!--GPU Temp-->
            <h4 class="p-0 m-0" style="font-size: 2vh">GPU Temp (&#8451;)</h4>
            <div id="ContainerGPUTemp" style="height: 90%;"></div>

        </div>

        <div class="col-6 col-xs-6 col-sm-6 col-md-6 p-1">

            <!--GPU Load-->
            <h4 class="p-0 m-0" style="font-size: 2vh">GPU Load (%)</h4>
            <div id="ContainerGPULoad" style="height: 90%;"></div>

        </div>

    </div>

    <!--RAM & HDD Row-->
    <div class="row no-gutters" style="height: 33vh">

        <div class="col-6 col-xs-6 col-sm-6 col-md-6 p-1">

            <!--RAM Load-->
            <h4 class="p-0 m-0" style="font-size: 2vh">RAM Usage (%)</h4>
            <div id="ContainerRAMLoad" style="height: 90%;"></div>

        </div>

        <div class="col-6 col-xs-6 col-sm-6 col-md-6 p-1">

            <!--HDD Load-->
            <h4 class="p-0 m-0" style="font-size: 2vh">HDD Usage (%)</h4>
            <div id="ContainerHDDLoad" style="height: 90%;"></div>

        </div>

    </div>

    <!--<div style="text-align: center">
        <table style="margin: 0 auto;">
            <tr>
                <td>
                    <div style="background: #000000; padding: 5px 20px; border: 2px solid #AAAAAA; border: none;">
                        <div id="ndTime1" style="">
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>-->

    <!--Bootstrap/Jquery JS Files from CDN-->
    <!--JQuery must be loaded first-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!--Highcharts JS from CDN-->
    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
    <script src="http://code.highcharts.com/modules/solid-gauge.js"></script>

    <script type="text/javascript">

        $(function () {

            var gaugeOptions = {

                chart: {
                    type: 'solidgauge',
                    backgroundColor: '#000000',
                    spacing: [5, 5, 5, 5]
                },

                title: null,

                pane: {
                    center: ['50%', '50%'],
                    size: '100%',
                    startAngle: 0,
                    endAngle: 360,
                    background: [{
                        backgroundColor: '#222222',
                        className: 'highcharts-pane',
                        innerRadius: '80%',
                        outerRadius: '100%',
                        shape: 'circle',
                        borderWidth: 0
                    }]
                },

                tooltip: {
                    enabled: false
                },

                credits: {
                    enabled: false
                },

                // the value axis
                yAxis: {
                    stops: [
                        [0.1, '#00554F'], // green
                        [0.5, '#00B2A7'], // yellow
                        [0.9, '#00FFEF'] // red
                    ],
                    lineWidth: 0,
                    minorTickInterval: null,
                    tickPixelInterval: 200,
                    tickWidth: 0,
                    labels: {
                        enabled: false
                    }
                },

                plotOptions: {
                    solidgauge: {
                        dataLabels: {
                            borderWidth: 0,
                            useHTML: true,
                            verticalAlign: 'middle'
                        },
                        rounded: true
                    }
                }
            };

            // CPU Temp Gauge
            var ChartCPUTemp = Highcharts.chart('ContainerCPUTemp', Highcharts.merge(gaugeOptions, {

                yAxis: {
                    min: 0,
                    max: 100
                },

                series: [{
                    name: 'CPUTemp',
                    data: [{
                        radius: '98%',
                        innerRadius: '82%',
                        y: 0
                    }],
                    dataLabels: {
                        format: '<div id="CpuTempDisplay" style="position:relative;left:-6.5vh;top:-7vh;font-size:12vh;color:#CCCCCC;font-family:helvetica;font-weight:300"></div>'
                    }
                }]

            }));

            // CPU Load Gauge
            var ChartCPULoad = Highcharts.chart('ContainerCPULoad', Highcharts.merge(gaugeOptions, {

                yAxis: {
                    min: 0,
                    max: 100
                },

                series: [{
                    name: 'CPULoad',
                    data: [{
                        radius: '98%',
                        innerRadius: '82%',
                        y: 0
                    }],
                    dataLabels: {
                        format: '<div id="CpuLoadDisplay" style="position:relative;left:-6.5vh;top:-7vh;font-size:12vh;color:#CCCCCC;font-family:helvetica;font-weight:300"></div>'
                    }
                }]

            }));

            // GPU Temp Gauge
            var ChartGPUTemp = Highcharts.chart('ContainerGPUTemp', Highcharts.merge(gaugeOptions, {

                yAxis: {
                    min: 0,
                    max: 100
                },

                series: [{
                    name: 'GPUTemp',
                    data: [{
                        radius: '98%',
                        innerRadius: '82%',
                        y: 0
                    }],
                    dataLabels: {
                        format: '<div id="GpuTempDisplay" style="position:relative;left:-6.5vh;top:-7vh;font-size:12vh;color:#CCCCCC;font-family:helvetica;font-weight:300"></div>'
                    }
                }]

            }));

            // GPU Load Gauge
            var ChartGPULoad = Highcharts.chart('ContainerGPULoad', Highcharts.merge(gaugeOptions, {

                yAxis: {
                    min: 0,
                    max: 100
                },

                series: [{
                    name: 'GPULoad',
                    data: [{
                        radius: '98%',
                        innerRadius: '82%',
                        y: 0
                    }],
                    dataLabels: {
                        format: '<div id="GpuLoadDisplay" style="position:relative;left:-6.5vh;top:-7vh;font-size:12vh;color:#CCCCCC;font-family:helvetica;font-weight:300;"></div>'
                    }
                }]

            }));

            // RAM Load Gauge
            var ChartRAMLoad = Highcharts.chart('ContainerRAMLoad', Highcharts.merge(gaugeOptions, {

                yAxis: {
                    min: 0,
                    max: 100
                },

                series: [{
                    name: 'RAMLoad',
                    data: [{
                        radius: '98%',
                        innerRadius: '82%',
                        y: 0
                    }],
                    dataLabels: {
                        format: '<div id="RamLoadDisplay" style="position:relative;left:-6.5vh;top:-7vh;font-size:12vh;color:#CCCCCC;font-family:helvetica;font-weight:300"></div>'
                    }
                }]

            }));

            // HDD Load Gauge
            var ChartHDDLoad = Highcharts.chart('ContainerHDDLoad', Highcharts.merge(gaugeOptions, {

                yAxis: {
                    min: 0,
                    max: 100
                },

                series: [{
                    name: 'HDDLoad',
                    data: [{
                        radius: '98%',
                        innerRadius: '82%',
                        y: 0
                    }],
                    dataLabels: {
                        format: '<div id="HddLoadDisplay" style="position:relative;left:-6.5vh;top:-7vh;font-size:12vh;color:#CCCCCC;font-family:helvetica;font-weight:300"></div>'
                    }
                }]

            }));

            // Bring life to the dials refresh every 1000 msec
            setInterval(function () {
                $.getJSON('data.json', function (data) {

                    var Computer = data.Children[0]; // Get master Computer object
                    var ComputerChildren = Computer.Children; // Get child objects of Computer

                    var MOB;
                    var CPU;
                    var RAM;
                    var GPU;
                    var HDD;

                    $.each(ComputerChildren, function (key, value) {
                        //console.log(key, value);
                        switch (value.ImageURL) {
                            case 'images_icon/mainboard.png':
                                MOB = value;
                                break;
                            case 'images_icon/cpu.png':
                                CPU = value;
                                break;
                            case 'images_icon/ram.png':
                                RAM = value;
                                break;
                            case 'images_icon/nvidia.png':
                                GPU = value;
                                break;
                            case 'images_icon/ati.png':
                                GPU = value;
                                break;
                            case 'images_icon/hdd.png':
                                HDD = value;
                                break;
                            default:
                                console.log('could not identify this Root object.', key, value);
                        }
                    });

                    //////////// CPU Vals ////////////
                    if (CPU) {

                        var CPUChildren = CPU.Children; // Get child objects of CPU

                        //// CPU Vars ////
                        var CPUClocks;
                        var CPUTemps;
                        var CPULoad;
                        var CPUPowers;

                        // Dynamically assign them
                        $.each(CPUChildren, function (key, value) {
                            //console.log(key, value);
                            switch (value.Text) {
                                case 'Clocks':
                                    CPUClocks = value;
                                    break;
                                case 'Temperatures':
                                    CPUTemps = value;
                                    break;
                                case 'Load':
                                    CPULoad = value;
                                    break;
                                case 'Powers':
                                    CPUPowers = value;
                                    break;
                                default:
                                    console.log('could not identify this CPU child.', key, value);
                            }
                        });

                        //// CPU Clocks ////
                        var CPUCores = 0;
                        var CPUSpeed = 0;
                        var CPUSpeedVal = 0;

                        if (CPUClocks) {
                            // Append values if CPU Core is detected
                            $.each(CPUClocks.Children, function (key, value) {
                                if (value.Text.indexOf("CPU Core") >= 0) {
                                    CPUSpeed += parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                                    CPUCores++
                                }
                            });
                        }

                        CPUSpeedVal = CPUSpeed / CPUCores;

                        //// CPU Temps ////
                        var CPUCores = 0;
                        var CPUTemp = 0;
                        var CPUTempVal = 0;

                        if (CPUTemps) {
                            // Append values if CPU Core is detected
                            $.each(CPUTemps.Children, function (key, value) {
                                if (value.Text.indexOf("CPU Core") >= 0) {
                                    CPUTemp += parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                                    CPUCores++
                                }
                            });
                        }

                        CPUTempVal = CPUTemp / CPUCores;

                        //// CPU Load ////
                        var CPULoadVal = 0;

                        if (CPULoad) {
                            // Append values if CPU Core is detected
                            $.each(CPULoad.Children, function (key, value) {
                                if (value.Text.indexOf("CPU Total") >= 0) {
                                    CPULoadVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                                }
                            });
                        }

                        //// CPU Powers ////
                        var CPUPowerVal = 0;

                        if (CPUPowers) {
                            // Append values if CPU Core is detected
                            $.each(CPUPowers.Children, function (key, value) {
                                if (value.Text.indexOf("CPU Package") >= 0) {
                                    CPUPowerVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                                }
                            });
                        }
                    }

                    //////////// GPU Vars ////////////

                    var GPUChildren = GPU.Children; // Get child objects of GPU

                    //// GPU Vars ////
                    var GPUClocksCore;
                    var GPUClocksMem;
                    var GPUTemps;
                    var GPULoad;
                    var GPUData;

                    // Dynamically assign them
                    $.each(GPUChildren, function (key, value) {
                        //console.log(key, value);
                        switch (value.Text) {
                            case 'Clocks':
                                GPUClocks = value;
                                break;
                            case 'Temperatures':
                                GPUTemps = value;
                                break;
                            case 'Load':
                                GPULoad = value;
                                break;
                            case 'Data':
                                GPUData = value;
                                break;
                            default:
                                console.log('could not identify this GPU child.', key, value);
                        }
                    });

                    //// GPU Clocks ////
                    var GPUCoreSpeedVal = 0;
                    var GPUMemSpeedVal = 0;

                    if (GPUClocks) {
                        // Append values if GPU Core is detected
                        $.each(GPUClocks.Children, function (key, value) {
                            if (value.Text.indexOf("GPU Core") >= 0) {
                                GPUCoreSpeedVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                            }
                            if (value.Text.indexOf("GPU Memory") >= 0) {
                                GPUMemSpeedVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                            }
                        });
                    }

                    //// GPU Temps ////
                    var GPUTempVal = 0;

                    if (GPUTemps) {
                        // Append values if GPU Core is detected
                        $.each(GPUTemps.Children, function (key, value) {
                            if (value.Text.indexOf("GPU Core") >= 0) {
                                GPUTempVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                            }
                        });
                    }

                    //// GPU Load ////
                    var GPULoadVal = 0;

                    if (GPULoad) {
                        // Append values if GPU Core is detected
                        $.each(GPULoad.Children, function (key, value) {
                            if (value.Text.indexOf("GPU Core") >= 0) {
                                GPULoadVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                            }
                        });
                    }

                    //////////// RAM Vars ////////////

                    var RAMChildren = RAM.Children; // Get child objects of RAM

                    //// RAM Vars ////
                    var RAMLoad;
                    var RAMData;

                    // Dynamically assign them
                    $.each(RAMChildren, function (key, value) {
                        //console.log(key, value);
                        switch (value.Text) {
                            case 'Load':
                                RAMLoad = value;
                                break;
                            case 'Data':
                                RAMData = value;
                                break;
                            default:
                                console.log('could not identify this RAM child.', key, value);
                        }
                    });

                    //// RAM Load ////
                    var RAMLoadVal = 0;

                    if (RAMLoad) {
                        // Append values if GPU Core is detected
                        $.each(RAMLoad.Children, function (key, value) {
                            if (value.Text.indexOf("Memory") >= 0) {
                                RAMLoadVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                            }
                        });
                    }

                    //////////// HDD Load ////////////

                    var HDDChildren = HDD.Children; // Get child objects of HDD

                    //// HDD Vars ////
                    var HDDLoad;

                    // Dynamically assign them
                    $.each(HDDChildren, function (key, value) {
                        //console.log(key, value);
                        switch (value.Text) {
                            case 'Load':
                                HDDLoad = value;
                                break;
                            default:
                                console.log('could not identify this HDD child.', key, value);
                        }
                    });

                    //// HDD Load ////
                    var HDDLoadVal = 0;

                    if (HDDLoad) {
                        // Append values if GPU Core is detected
                        $.each(HDDLoad.Children, function (key, value) {
                            if (value.Text.indexOf("Used Space") >= 0) {
                                HDDLoadVal = parseInt(value.Value.split(' ')[0]); // Splits string to get number value
                            }
                        });
                    }

                    //////////// Update Charts ////////////

                    // CPU Temp update
                    var point = ChartCPUTemp.series[0].points[0];
                    point.update(Math.round(CPUTempVal));

                    $('#CpuTempDisplay').text(("0" + (Math.round(CPUTempVal))).slice(-2));

                    //ndCpuTempDisplay.setText(Math.round(CPUTempVal));
                    //ndCpuTempDisplay.setText(("0" + (Math.round(CPUTempVal))).slice(-2));

                    // CPU Load update
                    var point = ChartCPULoad.series[0].points[0];
                    point.update(Math.round(CPULoadVal));

                    $('#CpuLoadDisplay').text(("0" + (Math.round(CPULoadVal))).slice(-2));

                    //ndCpuLoadDisplay.setText(Math.round(CPULoadVal));
                    //ndCpuLoadDisplay.setText(("0" + (Math.round(CPULoadVal))).slice(-2));

                    // GPU Temp update
                    var point = ChartGPUTemp.series[0].points[0];
                    point.update(Math.round(GPUTempVal));

                    $('#GpuTempDisplay').text(("0" + (Math.round(GPUTempVal))).slice(-2));
                    //ndGpuTempDisplay.setText(("0" + (Math.round(GPUTempVal))).slice(-2));

                    // GPU Load update
                    var point = ChartGPULoad.series[0].points[0];
                    point.update(Math.round(GPULoadVal));

                    $('#GpuLoadDisplay').text(("0" + (Math.round(GPULoadVal))).slice(-2));
                    //ndGpuLoadDisplay.setText(("0" + (Math.round(GPULoadVal))).slice(-2));

                    //$('#GpuCoreDisplay').text(GPUCoreSpeedVal/1000);
                    //$('#GpuMemDisplay').text(GPUMemSpeedVal/1000);

                    // RAM Load update
                    var point = ChartRAMLoad.series[0].points[0];
                    point.update(Math.round(RAMLoadVal));

                    $('#RamLoadDisplay').text(("0" + (Math.round(RAMLoadVal))).slice(-2));
                    //ndRamLoadDisplay.setText(("0" + (Math.round(RAMLoadVal))).slice(-2));

                    // HDD Load update
                    var point = ChartHDDLoad.series[0].points[0];
                    point.update(Math.round(HDDLoadVal));

                    $('#HddLoadDisplay').text(("0" + (Math.round(HDDLoadVal))).slice(-2));
                    //ndHddLoadDisplay.setText(("0" + (Math.round(HDDLoadVal))).slice(-2));

                });
            }, 1000);

        });

    </script>

</body>

</html>