jube-fork/Jube.App/wwwroot/kendo/examples/radial-gauge/car-dashboard.html

<!DOCTYPE html>
<html>
<head>
    <title>Car Dashboard</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div id="gauge-container" class="hidden-on-narrow">
        <div id="rpm"></div>
        <div id="kmh"></div>
        <div id="fuel"></div>
        <div id="water-temprature"></div>
    </div>
    
    <div class="responsive-message"></div>
    
    <script>
        function createDashboard() {
            $("#rpm").kendoRadialGauge({
                theme: "black",

                pointer: {
                    value: 0,
                    color: "#ea7001"
                },

                scale: {
                    startAngle: -45,
                    endAngle: 120,

                    min: 0,
                    max: 6,

                    majorUnit: 1,
                    majorTicks: {
                        width: 1,
                        size: 7
                    },

                    minorUnit: 0.2,
                    minorTicks: {
                        size: 5
                    },

                    ranges: [{
                        from: 4,
                        to: 5,
                        color: "#ff7a00"
                    }, {
                        from: 5,
                        to: 6,
                        color: "#c20000"
                    }],

                    labels: {
                        font: "11px Arial,Helvetica,sans-serif"
                    }
                }
            });

            $("#kmh").kendoRadialGauge({
                theme: "black",

                pointer: {
                    value: 0,
                    color: "#ea7001"
                },

                scale: {
                    startAngle: -60,
                    endAngle: 240,

                    min: 0,
                    max: 220,

                    majorTicks: {
                        width: 1,
                        size: 14
                    },
                    majorUnit: 20,

                    minorTicks: {
                        size: 10
                    },

                    minorUnit: 2
                }
            });

            $("#fuel").kendoRadialGauge({
                theme: "black",

                pointer: {
                    value: 0.5,
                    color: "#ea7001"
                },

                scale: {
                    startAngle: 90,
                    endAngle: 180,

                    min: 0,
                    max: 1,

                    majorUnit: 0.5,
                    majorTicks: {
                        width: 2,
                        size: 6
                    },

                    minorUnit: 0.25,
                    minorTicks: {
                        size: 3
                    },

                    ranges: [{
                        from: 0,
                        to: 0.1,
                        color: "#c20000"
                    }],

                    labels: {
                        font: "9px Arial,Helvetica,sans-serif"
                    }
                }
            });

            $("#water-temprature").kendoRadialGauge({
                theme: "black",

                pointer: {
                    value: 90,
                    color: "#ea7001"
                },

                scale: {
                    startAngle: 180,
                    endAngle: 270,

                    min: 60,
                    max: 120,

                    majorUnit: 30,
                    majorTicks: {
                        width: 2,
                        size: 6
                    },

                    minorUnit: 10,
                    minorTicks: {
                        size: 3
                    },

                    ranges: [{
                        from: 110,
                        to: 120,
                        color: "#c20000"
                    }],

                    labels: {
                        font: "9px Arial,Helvetica,sans-serif"
                    }
                }
            });
        }

        var animateInterval;
        function animateDashboard() {
            if (animateInterval) {
                return;
            }

            var GEARS = [0.14, 0.06, 0.035, 0.027, 0.019],
                IDLE_RPM = 0.9,
                CHANGE_RPM = 4,
                CHANGE_DELAY = 400,
                DECAY_RATE = 0.0017,
                TOP_SPEED = 210,
                ACCELERATION = 0.6,
                INTERVAL = 50;

            var speed = 0,
                skip = 0,
                ratio,
                gear = 0;

            function update() {
                $("#rpm").data("kendoRadialGauge").value(GEARS[gear] * speed + IDLE_RPM);
                $("#kmh").data("kendoRadialGauge").value(speed);
            }

            animateInterval = setInterval(function() {
                if(speed < TOP_SPEED) {
                    if (GEARS[gear] * speed > CHANGE_RPM && gear < GEARS.length) {
                        gear++;
                        skip = CHANGE_DELAY / INTERVAL;
                        update();
                    }

                    if (skip-- < 0) {
                        speed += ACCELERATION - (DECAY_RATE * speed);
                        update();
                    }
                } else {
                    skip = 100;
                    speed = 0;
                    gear = 0;
                }
            }, INTERVAL);
        }

        $(document).ready(function() {
            animateInterval = null;

            createDashboard();
            animateDashboard();

            $(document).bind("kendo:skinChange", function(e) {
                createDashboard();
            });

            $(document).bind("kendo:pageUnload", function(e) {
                clearInterval(animateInterval);
            });
        });
    </script>

    <style>
        #gauge-container {
            margin: 0 auto;
            overflow: hidden;
            width: 614px;
            height: 324px;

            background: transparent url("../content/dataviz/dashboards/car-dashboard.png") no-repeat 50% 50%;
        }

        .k-gauge {
            float: left;
        }

        #rpm {
            width: 142px;
            height: 147px;
            margin: 85px 0 0 38px;
        }

        #kmh {
            width: 216px;
            height: 216px;
            margin: 57px 0 0 20px;
        }

        #fuel {
            width: 77px;
            height: 84px;

            margin: 90px 0 0 68px;
        }

        #water-temprature {
            width: 84px;
            height: 80px;

            margin: -7px 0 0 62px;
        }
    </style>
</div>



    
</body>
</html>