-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
4 lines (4 loc) · 10.9 KB
/
index.html
1
2
3
4
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><title>AMOR LAMPS</title>
<style>a{text-decoration: none;color: black;} .c { text-align: center; } div, input { padding: 5px; font-size: 1em; } input { height: 2.4rem; width: 80%; max-width: 450px; border-radius: 5px; } body { text-align: center; font-family: verdana; } #favcolor { line-height: 15.0rem; height: 15.0rem; width: 25%; } #colorcode { font-size: 5.0rem; color: #6f6161; background-color: black; border-radius: 10px; margin: 1%; padding: 1%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } button { border: 0; border-radius: 0.3rem; background-color: #1fa3ec; color: #fff; line-height: 2.4rem; font-size: 1.2rem; width: 80%; max-width: 450px; } .hrC { height: 10px; border-width: 0; color: white; background-color: white } i { vertical-align: sub; margin-right: 3px; } .q { float: right; width: 64px; text-align: right; } #todmfxm_b { background-image: linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet); background-size: 400% 400%; animation: gradient 1s ease infinite; -webkit-animation: gradientBG 15s ease infinite; animation: gradientBG 15s ease infinite; } @-webkit-keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .slider { -webkit-appearance: none; width: 80%; height: 2.4rem; background: #000000; outline: none; opacity: 0.85; -webkit-transition: .2s; transition: opacity .2s; background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); } #myColorRange { background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet, red); } #myColorRange2 { background-image: linear-gradient(90deg, red, #FFFFFF); background-image: linear-gradient(90deg, hsl(30, 100%, 50%), #FFFFFF); } #myColorRange3 { background-image: linear-gradient(90deg, red, #000000); } #uxmov_i_range { background-image: linear-gradient(90deg, rgb(201, 199, 199), #1fa3ec); } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.4rem; height: 2.4rem; background: #00000088; cursor: pointer; border-radius: 1.3rem; } .slider::-moz-range-thumb { width: 1.4rem; height: 2.4rem; background: #00000088; cursor: pointer; border-radius: 1.3rem; } </style>
<script> var fileVer = "1.12"; var gateway = 'ws://' + window.location.hostname + ':81/';var wsState = false ;var Socket; window.addEventListener('load', onLoad); function initWebSocket() { console.log('Trying to open a WebSocket connection...' + gateway); Socket = new WebSocket(gateway); Socket.onopen = onOpen; Socket.onclose = onClose; Socket.onmessage = onMessage; } function onOpen(event) { console.log('Connection opened'); Socket.send('Hello Server!');} function onClose(event) { console.log('Connection closed'); wsState = false ;setTimeout(initWebSocket, 20000); } var wsData; function onMessage(event) { console.log(event.data); if (event.data[0] == '{') { wsState = true ; wsData = JSON.parse(event.data); console.table(wsData); wsDataUse(wsData); } } function wsDataUse(wsData) { document.getElementById('ugid_i').value = wsData.deviceId + wsData.groupId; document.getElementById('uxmov_i').value = wsData.x_min_on_value; document.getElementById('uxmov_i_range').value = wsData.x_min_on_value; document.getElementById('myColorRange').value = parseInt(wsData.hue); document.getElementById('myColorRange2').value = parseInt(wsData.sat); var h = ~~((parseInt(wsData.hue) / 255) * 360); var s = ~~((parseInt(wsData.sat) / 255) * 100); console.log("" + h + "," + s); document.getElementById("myColorRange2").style.background = "linear-gradient(90deg,hsl(" + h + "deg,0%,100%),hsl(" + h + "deg,100%,50%))"; document.getElementById("colorcode").style.background = "hsl(" + h + "deg," + (s) + "%," + (100 - (s / 2)) + "%)"; } function onLoad(event) { console.log("page loaded"); initWebSocket(); } function init() { console.log("f init()"); console.log("index version = " + fileVer); } function send_ws_msg(msg) { console.log(msg); Socket.send(msg); if(wsState == false){alert('Lamp not connected! Refresh this page. \n\n(Still not working? Try:\nCloseing other AmorLamps tabs if open.\nRestarting your Lamp.)');}} function ws_method_builder(method, a1 = null, a2 = null, b1 = null, b2 = null) { var myObj = '{"method":"' + method + '","' + a1 + '":"' + a2 + '","' + b1 + '":"' + b2 + '"}'; send_ws_msg(myObj); } function ws_method_builder_plus_w(method, a1 = null, a2 = null, b1 = null, b2 = null) { var myObj = 'w{"method":"' + method + '","' + a1 + '":"' + a2 + '","' + b1 + '":"' + b2 + '"}'; send_ws_msg(myObj); } function todmfxm() { ws_method_builder('turn_on_disco_mode_for_x_mins', 'x', '20'); } function srtA() { ws_method_builder('send_responseToAWS', 'responseMsg', document.getElementById('srtA_i').value); } function uxmov() { var xm = document.getElementById('uxmov_i').value; if (!(xm > 0 && xm < 61)) { xm = 5; } ws_method_builder_plus_w('update_x_min_on_value', 'x', xm);alert('Your lamp is restarting with new settings,Please wait 2-3 mins, then realod this page.');} function uxmov_i_r() { document.getElementById('uxmov_i').value = document.getElementById('uxmov_i_range').value; } function ugid() { let pw = prompt('Do not update group Id if not asked by customer support.\nWARNING:Lamps will stop working(And will Void Warranty).\n\nEnter password', 'Read above message , Password'); if (pw == 'amor123') { console.log('ok ' + pw); ws_method_builder_plus_w('update_groupId', 'gID', document.getElementById('ugid_i').value); } else { console.log('not ok ' + pw); alert('Wrong Password !'); } } function rfcj() { ws_method_builder('readFromConfigJSON', 'key', document.getElementById('rfcj_i').value); } function ufcj() { ws_method_builder('updatetoConfigJSON', 'key', document.getElementById('ufcj_ki').value, 'value', document.getElementById('ufcj_vi').value); } function refcj() { ws_method_builder('removeFromConfigJSON', 'key', document.getElementById('refcj_i').value); } function gespc() { ws_method_builder('get_ESP_core', 'key', document.getElementById('gespc_i').value); } function fuffs() { ws_method_builder('firmware_update_from_fs', 'ota_filename', document.getElementById('fuffs_i').value); } function sgmtgt() { ws_method_builder('send_given_msg_to_given_topic', 'topic', document.getElementById('sgmtgt_ti').value, 'msg', document.getElementById('sgmtgt_mi').value); } function lfsfsws() { console.log('wait'); } function mthd_call(mc, args, plus1arg, s, v) { var myObj = '{"method":"method_handler","mc":"' + mc + '", "args":"' + args + '", "plus1arg":"' + plus1arg + '", "s":"' + s + '", "v":"' + v + '"}'; send_ws_msg(myObj); } function mthd() { mthd_call( document.getElementById('mthd_mi').value, document.getElementById('mthd_ai').value, document.getElementById('mthd_pi').value, document.getElementById('mthd_si').value, document.getElementById('mthd_vi').value ); } function fswc() { let ok = confirm("Confirm Reset Wifi Credentials?"); if (ok) { ws_method_builder('forget_saved_wifi_creds'); alert("Wait for 2 mins then ,setup your device again"); } else { alert("ok! Not reset wifi."); } } function wsutsc(h, s, v) { var myObj = '{"method":"ws_update_tosend_color","h":"' + h + '", "s":"' + s + '", "v":"' + v + '"}'; console.log(myObj); send_ws_msg('w' + myObj); } function updateColor() { var h = document.getElementById("myColorRange").value;var s = document.getElementById("myColorRange2").value;var v = document.getElementById("myColorRange3").value;console.log("" + h + s + v); wsutsc(h, s, v); h = ~~((h / 255) * 360); s = ~~((s / 255) * 100); v = ~~((v / 255) * 100); console.log(">" + h + s + v); document.getElementById("myColorRange2").style.background = "linear-gradient(90deg,hsl(" + h + "deg,0%,100%),hsl(" + h + "deg,100%,50%))"; document.getElementById("myColorRange3").style.background = "linear-gradient(90deg,hsl(" + h + "deg," + s + "%,40%),hsl(" + h + "deg," + s + "%,70%),hsl(" + h + "deg," + s + "%,100%))"; document.getElementById("colorcode").style.background = "hsl(" + h + "deg," + (s) + "%," + (100 - (s / 2)) + "%)"; } </script>
</head><body onload="javascript:init()"><div><br><h1><a href="https://www.amorlamps.com/" target="_blank">Amor Lamps</a></h1></div><div><svg xmlns="http://www.w3.org/2000/svg" width="139" height="139" xmlns:v="https://vecta.io/nano"><path fill="#fff" d="M-1-1h141v141H-1z" /><g stroke="null"><g transform="matrix(0 .4 -.4 0 139.9 -.016035)"><g stroke="none" fill="#0"><path d="M225 75h50v50h-50zM75 75h125v50H75z" /><path d="M75 75h50v125H75z" /></g><g transform="rotate(180 175.08 212.5)" stroke="none" fill="#0"><path d="M225.08 150h50v50h-50zm-150 0h125v50h-125z" /><path d="M75.08 150h50v125h-50z" /></g></g><g stroke="none" fill="#0"><path d="M0 0h110v20H0z" /><path d="M0 0h20v110H0z" /></g><g transform="matrix(-.4 0 0 -.4 169.877 169.877)" stroke="none" fill="#0"><path d="M75 75h275v50H75z" /><path d="M75 75h50v275H75z" /></g><path d="M119.914 0h20v20h-20zM0 119.914h20v20H0z" stroke="none" fill="#0" /></g></svg></div><br/><div><div><!-- <p>Color Mixer</p> --><input type="range" min="0" max="255" class="slider" id="myColorRange" onchange="updateColor()"></div><div><input type="range" min="0" max="255" value="255" class="slider" id="myColorRange2" onchange="updateColor()"></div><div><input type="range" min="103" max="255" value="76" class="slider" id="myColorRange3" onchange="updateColor()" style="display: none;"></div><br><div style="height:70px;"><i id="colorcode" class="material-icons">online_prediction</i></div><br><div><hr class="hrC"><br/><input id="ugid_i" name="ugid_i" type="text" placeholder="gID"><br><br/><button id="ugid_b" onclick="ugid()"><i class="material-icons" style="font-size:auto;color:white;">groups</i>Update Group Id</button><br><hr class="hrC"><br/><input type="range" min="1" max="60" class="slider" id="uxmov_i_range" onchange="uxmov_i_r()"><br><br/><input id="uxmov_i" name="uxmov_i" type="number" placeholder="x" value="20" min="1" max="60"><br><br/><button id="uxmov_b" onclick="uxmov()"><i class="material-icons" style="font-size:auto;color:white;">hourglass_bottom</i>Update ON Duration</button><br><hr class="hrC"><br/><button id="fswc_b" onclick="fswc()"><i class="material-icons" style="font-size:auto;color:white;">wifi_off</i>Reset Wifi Credentials</button><hr class="hrC"><br/><button id="todmfxm_b" onclick="todmfxm()">.<i class="material-icons" style="font-size:auto;color:white;">palette</i>.</button><hr class="hrC"><br/><button id="todm_b" onclick="ws_method_builder('turn_off_rgb')" style="background-color: #d82c2c;"><span><i class="material-icons" style="font-size:auto;color:white;">power_settings_new</i>TURN OFF LAMP</span></button><hr class="hrC"><br/><hr class="hrC"><br/></div></div><div><br><h5><a href="https://www.amorlamps.com/help" target="_blank">Help</a></h5></body></html>