<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <link rel="shortcut icon" href="https://github.com/Autodesk-Forge/learn.forge.viewmodels/raw/master/img/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" />
    <!-- Autodesk Forge Viewer files -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">


    <div id="MyControls" class="adsk control">
        <p style="text-align: center; font-weight: bold;">Robot Controls</p>
        <p id="id_printer">Selected_ID: </p>
        <p id="all_id">All_ID: </p>
        <!--<button id="1F1oor" onclick="move1Floor()">1 Floor</button>
    <button id="2F1oor" onclick="move2Floor()">2 Floor</button>
    <button id="3F1oor" onclick="move3Floor()">3 Floor</button>

    <button id="4F1oor" onclick="move4Floor()">4 Floor</button>
    <button id="5F1oor" onclick="move5Floor()">5 Floor</button>
    <button id="6F1oor" onclick="move6Floor()">6 Floor</button>
    <button id="7F1oor" onclick="move7Floor()">7 Floor</button>
    <button id="8F1oor" onclick="move8Floor()">8 Floor</button>
    <button id="9F1oor" onclick="move9Floor()">9 Floor</button>
    <button id="10F1oor" onclick="move10Floor()">10 Floor</button>
    <button id="11F1oor" onclick="move11Floor()">11 Floor</button>
    <button id="12F1oor" onclick="move12Floor()">12 Floor</button>
    <button id="13F1oor" onclick="moveB1Floor()">B1 Floor</button>-->
        <label>Intensity:</label><input id="LightIntensity" />
        <label>Distance:</label><input id="LightDistance" />
        <label>Angle:</label><input id="LightAngle" />
        <label>Penumbra:</label><input id="LightPenumbra" />
        <label>Decay:</label><input id="LightDecay" />
        <button onclick="setLightValue()">設定燈光</button>
        <button id="Light1" onclick="newALight()">新增燈光</button>
        <button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>
        <button type="button" class="btn btn-danger" onclick="changeColorHotspot()">變更熱點顏色</button>
        <button type="button" class="btn btn-dark" onclick="loadHeatMap()">載入熱圖</button>
        <button type="button" class="btn btn-dark" onclick="hideModel()">隱藏物件</button>
        <button type="button" class="btn btn-dark" onclick="openModel()">顯示物件</button>
        <button type="button" class="btn btn-dark" onclick="transparentModel()">透明化物件</button>
        <button type="button" class="btn btn-dark" onclick="cancelTransparentModel()">取消透明物件</button>
        <button type="button" class="btn btn-danger" onclick="proFile()">剖面</button>
        <button type="button" class="btn btn-dark" onclick="getLevels()">取得levels</button>
        <div style="height: 50px">
            <canvas id="iot-heatmap-legend" width="300" height="50"></canvas>
        </div>
        <button type="button" class="btn btn-info" onclick="showHeat()">顯示熱圖圖示</button>
        <button type="button" class="btn btn-default" onclick="showList()">顯示設備清單</button>
        <!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度-->
        <!-- <input type="range">Main Axis</input> -->
    </div>

    <div>
        <div id="forgeViewer"></div>
    </div>

    <div class="modal" id="hotspotModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link py-3 px-4" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">即時值</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link py-3 px-4 active" id="pills-login-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">基本資料</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link py-3 px-4" id="pills-alarm-tab" data-toggle="pill" href="#pills-alarm" role="tab" aria-controls="pills-alarm" aria-selected="false">異常</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link py-3 px-4" id="pills-operation-tab" data-toggle="pill" href="#pills-operation" role="tab" aria-controls="pills-operation" aria-selected="false">運維</a>
                    </li>
                </ul>
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
                        <div class="modal-header">
                            <h5 class="modal-title" id="loginModalLabel">即時值資訊</h5>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <input id="lightBar" type="range" min="0" max="100" step="1" onchange="changeLightPower()">明亮度
                                    <!--<button type="button" class="btn btn-secondary" onclick="openOrCloseLight()">電源</button>-->
                                </div>
                                <!--<div class="form-group">
                                    <label for="register-recipient-name" class="col-form-label">訂閱時間:</label>
                                    <label class="col-form-label">100</label>
                                </div>
                                <div class="form-group">
                                    <label for="register-pwd-text" class="col-form-label">執行時間:</label>
                                    <label class="col-form-label">200</label>
                                </div>-->
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
                        <div class="modal-header">
                            <h5 class="modal-title" id="loginModalLabel">基本資料</h5>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="login-recipient-name" class="col-form-label">設備名稱:</label>
                                    <label class="col-form-label" id="deviceName"></label>
                                </div>
                                <div class="form-group">
                                    <label for="login-message-text" class="col-form-label">DBID:</label>
                                    <label class="col-form-label" id="deviceDbid"></label>
                                </div>
                                <div class="form-group">
                                    <label for="login-message-text" class="col-form-label">位置:</label>
                                    <label class="col-form-label" id="devicePosition"></label>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-alarm" role="tabpanel" aria-labelledby="pills-alarm-tab">
                        <div class="modal-header">
                            <h5 class="modal-title" id="loginModalLabel">異常資訊</h5>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="alarm-recipient-name" class="col-form-label">異常狀況:</label>
                                    <label class="col-form-label" id="alarmStatus"></label>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-operation" role="tabpanel" aria-labelledby="pills-operation-tab">
                        <div class="modal-header">
                            <h5 class="modal-title" id="loginModalLabel">運維資訊</h5>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="operation-recipient-name" class="col-form-label">運維人員:</label>
                                    <label class="col-form-label" id="operationStatus"></label>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeHotspotModal()">返回</button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>



    <!--Base JS-->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src="js/init.js"></script>

    <!-- Common packages: jQuery, Bootstrap, jsTree -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>


    <script src="js/forge/modeltest.js"></script>
    <!--<script src="js/forge/AdnLevelSectionPanel.js"></script>-->

    <style>
        .show-env-bg-button {
            background: red;
        }

        .hide-env-bg-button {
            background: blue;
        }
    </style>

    <script>
        var curLightIsOpen = true;
        //var light;
        var cavas;
        this.canvas = document.getElementById('iot-heatmap-legend');

        $(document).ready(function () {
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA');
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dGEzaHFzZmZ6cWJub3V4a3BsZGt1a3NldzRzajIxdzUtYmltc19tb2RlbHMvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDMjAyMjEyMDEubndk');
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQ18yMDIyMTIwNS5ud2Q');
            //launchViewer('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLmJ1NzRfMG9kUW1XWUlXWGI2bFBQemc_dmVyc2lvbj02');//wsp
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjEubndk');

            //測試熱圖
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q');

            //三菱 最新urn 資料庫
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDXzEyMjFfMjIzMC5ud2Q');

            //測試單獨 7樓熱圖 DEMO
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxN0ZfREVNT18yMDIyXzEyXzI2Lm53Yw');

            //測試 方案2 7樓熱圖
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MEFSQyVFMyU4MCU5MTdGXzIwMjJfMTJfMjYubndj');

            //測試 方案3 熱圖
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4M18yMDIyXzEyXzI2Lm53ZA');

            //測試 方案4
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');

            //12.28 三菱單層樓 + 系統
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvQVJDJUU1JTk2JUFFJUU1JUIxJUE0K01FUCVFNSU4NSVBOCVFNiVBMyU5Rl83Rl9ERU1PLm53ZA');

            //目前線上整棟模型
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUU2JTk2JUI5JUU2JUExJTg4NF8yMDIyXzEyXzI2Lm53ZA');

            //單層 + 系統
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvTUVQK0FSQzdGX0RFTU9fJUU1JTg5JThBJUU5JUEwJTgyXzEyMjgubndk');

            //單層
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxMUZfREVNT18yMDIyXzEyXzI5Lm53Yw');

            //MEP
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMjkubndj');

            //12.29 整棟
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1pdHN1YmlzaGkvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU5JUExJUFGXzEyMjgubndk');

            //12.30 整棟樓 ARC + MEP
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8xMl8zMC5ud2Q');

            //12.30 整棟樓 ARC + MEP 半透明
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk');
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8lRTUlOEQlOEElRTklODAlOEYlRTYlOTglOEUlRTUlQkIlQkElRTclQUYlODlfMTJfMzAubndk');

            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxXzIwMjJfMTJfMTMubndk');//new ARC
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwTUVQJUUzJTgwJTkxXzIwMjJfMTJfMTMubndj');//new MEP
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxJUU1JTg1JUE4JUU2JUEzJTlGXzIwMjJfMTJfMTMubndj');//全棟 ARC

            //01.06 加上room_id(樓層有燈具)
            //launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDJUU5JTlCJTk5JUU2JUE4JUExJUU1JUJDJThGK01FUCVFNiU4QiU4NiVFNyVCMyVCQiVFNyVCNSVCMV8yMDIzXzAxXzA2Lm53ZA');

            //01.06 樓層刪除燈具
            launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MCVFNSU4RiVCMCVFNSU4QyU5NyVFNCVCOCVBRCVFOCU4RiVCMSVFNSVBNCVBNyVFNiVBOCU5MyVFMyU4MCU5MUFSQyVFOSU5QiU5OSVFNiVBOCVBMSVFNSVCQyU4RitNRVAlRTYlOEIlODYlRTclQjMlQkIlRTclQjUlQjFfJUU1JTg4JUFBJUU3JTg3JTg4JUU1JTg1JUI3XzIwMjNfMDFfMDYubndk');

        });
        //function move1Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(0);
        //    requestAnimationFrame(movElevator);
        //}

        //function move2Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(1);
        //    requestAnimationFrame(movElevator);
        //}

        //function move3Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(2);
        //    requestAnimationFrame(movElevator);
        //}

        //function move4Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(3);
        //    requestAnimationFrame(movElevator);
        //}

        //function move5Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(4);
        //    requestAnimationFrame(movElevator);
        //}

        //function move6Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(5);
        //    requestAnimationFrame(movElevator);
        //}

        //function move7Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(6);
        //    requestAnimationFrame(movElevator);
        //}

        //function move8Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(7);
        //    requestAnimationFrame(movElevator);
        //}

        //function move9Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(8);
        //    requestAnimationFrame(movElevator);
        //}

        //function move10Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(9);
        //    requestAnimationFrame(movElevator);
        //}

        //function move11Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(10);
        //    requestAnimationFrame(movElevator);
        //}

        //function move12Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(11);
        //    requestAnimationFrame(movElevator);
        //}

        //function moveB1Floor() {
        //    setElevatorSpeed(0.2);
        //    setElevatorFloor(-1);
        //    requestAnimationFrame(movElevator);
        //}

        function newALight() {
            //light = newLight();
            //newLight();
        }

        function setLightValue() {
            var intensity = document.getElementById("LightIntensity").value;
            var distance = document.getElementById("LightDistance").value;
            var angle = document.getElementById("LightAngle").value;
            var penumbra = document.getElementById("LightPenumbra").value;
            var decay = document.getElementById("LightDecay").value;
            setLightValues(intensity, distance, angle, penumbra, decay);
        }

        function changeLightPower() {
            var value = document.getElementById('lightBar').value;
            console.log("power: " + value);
            setLightPower(value);
        }

        function openOrCloseLight() {
            //if (light != null) {
                if (curLightIsOpen) {
                    curLightIsOpen = false;
                    setLightOpenOrClose(curLightIsOpen);//, light
                }
                else {
                    curLightIsOpen = true;
                    setLightOpenOrClose(curLightIsOpen);//, light
                }
            //}
        }

        function changeColorHotspot() {
            changeColorForHotspot(10);
        }

        function loadHeatMap() {
            loadHeatmap();
        }
        
        function hideModel() {
            hideObject();
        }

        function openModel() {
            openObject();
        }

        function transparentModel() {
            setObjectTransparent();
        }

        function cancelTransparentModel() {
            cancelObjectTransparent();
        }

        function getLevels() {
            //取得levels
            getLevelsData();
        }

        function proFile() {
            profile();
        }

        function showHeat() {
            const labels = [
                `${(10).toFixed(2) }${"°C"}`,
                `${(40 / 2).toFixed(2)}${"°C"}`,
                `${(30).toFixed(2) }${"°C"}`
            ];
            const colorStops = ['blue', 'green', 'yellow', 'red'];
            createHeatmapRect(labels, colorStops);
        }

        function showList() {
            consoleList();
        }

        function createHeatmapRect(labels, colorStops) {
            if (!this.canvas) {
                return;
            }
            const context = this.canvas.getContext('2d');
            let i, len;
            context.clearRect(0, 0, 300, 50);
            context.fillStyle = 'back';//white
            for (i = 0, len = labels.length; i < len; i++) {
                let x = 10 + 280 * i / (len - 1);
                if (i === len - 1) {
                    x -= context.measureText(labels[i]).width;
                }
                else if (i > 0) {
                    x -= 0.5 * context.measureText(labels[i]).width;
                }
                context.fillText(labels[i], x, 10);
            }
            const gradient = context.createLinearGradient(0, 0, 300, 0);
            for (i = 0, len = colorStops.length; i < len; i++) {
                gradient.addColorStop(i / (len - 1), colorStops[i]);
            }
            context.fillStyle = gradient;
            context.fillRect(10, 20, 280, 20);
        }

        


    </script>


</body>
        </html >