TC
/
oneM2M-lab6


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<html>
    <head>
        <!-- Tocas UI：CSS 與元件 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
        <!-- Tocas JS：模塊與 JavaScript 函式 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
        <script
			  src="https://code.jquery.com/jquery-3.6.0.min.js"
			  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
			  crossorigin="anonymous"></script>
        <style>
            body{
                background-color: #ededed;
            }
            .leftContainer{
                border: 1px solid black;
                padding: 5px;
                margin: 12px;
                height: 250px;
            }
            
            .javainput{
                -webkit-box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71); 
                box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71);
                font-size: 26px;
                padding-top: 4px;
                padding-left: 5px;
                
                margin-top: 16px;
                font-weight: bold;
                
            }

            .double.javainput{
                width: 40px;
                margin-left: 18px;
            }

            .single.javainput{
                width: 30px;
                margin-left: 28px;
            }

            .javabutton{
                background: rgb(229,234,243);
                background: linear-gradient(180deg, rgba(229,234,243,1) 0%, rgba(243,249,252,1) 27%, rgba(196,214,231,1) 100%);
                padding: 1px;
                width: 100px;
                margin-top: 6px;
                -webkit-box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71); 
                box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71);
                border: 1px solid rgb(175, 175, 175);
                font-size: 90%;
                font-weight: bold;
                text-align: center;
            }

            .switchFrame{
                background: rgb(229,234,243);
                background: linear-gradient(180deg, rgba(229,234,243,1) 0%, rgba(243,249,252,1) 27%, rgba(196,214,231,1) 100%);
                width: calc(100% - 20px);
                height: 220px;
                margin-top: 200px;
                border: 1px solid rgb(158, 158, 158);
                padding: 12px;
                padding-top: 25px;
            }

            .onofftext{
                padding-top: 30px;
                margin-left: -12px;
                font-style: italic;
                font-weight: bold;
            }

            .bulbSwitch{
                background: rgb(229,234,243);
                background: linear-gradient(180deg, rgba(229,234,243,1) 0%, rgba(243,249,252,1) 27%, rgba(196,214,231,1) 100%);
                width: calc(100% - 22px);
                margin-top: 30px;
                height: 170px;
                border: 1px solid rgb(158, 158, 158);
                padding-top: 1px;
            }
            .bulbSwitchOffsetText {
                padding-top: 24px;
                margin-left: 12px;
                font-style: italic;
                font-weight: bold;
                font-size: 1.1em;
                transform: scale(1.2, 1);
            }

            .bulb{
                max-height: 240px;
                padding-top: 8px;
                padding-right: 12px;
            }

            .switch{
                margin-left: 5px;
                margin-top: 5px;
            }
        </style>
    </head>
    <body>
        <div class="ts grid">
            <div class="ten wide column">
                <div class="leftContainer">
                    <div class="ts grid">
                        <div class="eight wide column">
                            <img id="bulb0" class="ts image bulb" src="light_off.png">
                        </div>
                        <div class="eight wide column">
                            <div class="bulbSwitch">
                                <img id="bulb0switch" class="ts image bulb switch" src="switch.png">
                                <p class="bulbSwitchOffsetText">Switch LAMP...</p>
                            </div>
                           
                        </div>
                    </div>
                </div>
                <div class="leftContainer">
                    <div class="ts grid">
                        <div class="eight wide column">
                            <img id="bulb1" class="ts image bulb" src="light_off.png">
                        </div>
                        <div class="eight wide column">
                            <div class="bulbSwitch">
                                <img id="bulb1switch" class="ts image bulb switch" src="switch.png">
                                <p class="bulbSwitchOffsetText">Switch LAMP...</p>
                            </div>
                           
                        </div>
                    </div>    
                </div>
            </div>
            <div class="six wide column">
                <div class="switchFrame" align="center">
                    <img id="power" class="ts image" src="switch.png">
                    <p class="onofftext">Switch All</p>
                </div>
            </div>
        </div>
        <script>
            setInterval(function(){
                $.get("./getStatus", function(data){
                    data = JSON.parse(data);
                    if (data.Lamp0 == true){
                        $("#bulb0").attr("src", "light_on.png");
                    }else{
                        $("#bulb0").attr("src", "light_off.png");
                    }

                    if (data.Lamp1 == true){
                        $("#bulb1").attr("src", "light_on.png");
                    }else{
                        $("#bulb1").attr("src", "light_off.png");
                    }
                });
            }, 300);
        </script>
    </body>
</html>