diff --git a/CrabbyHome-comp/CrabbyHome-conn/data/Icon2.ico b/CrabbyHome-comp/CrabbyHome-conn/data/Icon2.ico new file mode 100644 index 0000000..7761faf Binary files /dev/null and b/CrabbyHome-comp/CrabbyHome-conn/data/Icon2.ico differ diff --git a/CrabbyHome-comp/CrabbyHome-conn/data/Styles.css b/CrabbyHome-comp/CrabbyHome-conn/data/Styles.css new file mode 100644 index 0000000..dde686b --- /dev/null +++ b/CrabbyHome-comp/CrabbyHome-conn/data/Styles.css @@ -0,0 +1,113 @@ +body { + background-image: url("background.jpg"); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: 100% 100%; +} + +.logo-row, .name { + text-align: center; +} + +.logo { + width: 190px; + height: 190px; + text-align: center; +} + +.grid-container { + margin-left: 2vw; + margin-right: 2vw; + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 1fr 1fr; + grid-gap: 2vw; +} +li { + list-style-type: none; + font-size: 18px; + font-weight: bold; +} +.box { + background-color: rgba(177, 97, 39, 0.7); + border-radius: 15px; + float: left; + + border: 5px solid rgb(119, 63, 22); + padding: 10px; + box-shadow: 5px 10px rgb(51, 27, 9, 0.8); + +} + +.button{ + width: 30%; + margin: auto; + padding: 15px 25px; + font-size: 24px; + text-align: center; + cursor: pointer; + outline: none; + color: #fff; + border: none; + border-radius: 15px; + /* box-shadow: 0 9px #999; */ +} + +.small-button{ + background-color: red; + width: 15%; + /* margin: auto; */ + padding: 15px 25px; + font-size: 24px; + text-align: center; + cursor: pointer; + outline: none; + color: #fff; + border: none; + border-radius: 40px; + + position: relative; + bottom: 0; + right: 20px; + /* box-shadow: 0 9px #999; */ +} + +.light-button-on { + background-color: #4caf4fce; + } + +.light-button-on:hover { + background-color: #00a305ce; +} + + /* .button:hover {background-color: #941414} + + .button:active { + background-color: #3e8e41; + box-shadow: 0 5px #666; + transform: translateY(4px); +} */ + +.light-button-off { + background-color: #af4c4ccc; + cursor: url("kksign.png"), pointer; +} + +.light-button-off:hover { + background-color: #910101cc; + cursor: url("kksign.png"); +} + +.name { + color: #a9322c ; + text-shadow: 2px 2px black; +} + +.text { + color: black; + padding: 30px; +} + +.c { + grid-column: 1 / 3; +} diff --git a/CrabbyHome-comp/CrabbyHome-conn/data/background.jpg b/CrabbyHome-comp/CrabbyHome-conn/data/background.jpg new file mode 100644 index 0000000..26d62bc Binary files /dev/null and b/CrabbyHome-comp/CrabbyHome-conn/data/background.jpg differ diff --git a/CrabbyHome-comp/CrabbyHome-conn/data/index.html b/CrabbyHome-comp/CrabbyHome-conn/data/index.html new file mode 100644 index 0000000..64f1b6a --- /dev/null +++ b/CrabbyHome-comp/CrabbyHome-conn/data/index.html @@ -0,0 +1,63 @@ + + + + + + + + KrabbyHome + + + +
+ +
+ + + + + +
+
+

Karen

+ +
Ambient lights
+ + + +
+ + +
+

Secret formula

+ + + +
+ + +
+

To-do list

+ + + +
+
+ + + + + \ No newline at end of file diff --git a/CrabbyHome-comp/CrabbyHome-conn/data/index.js b/CrabbyHome-comp/CrabbyHome-conn/data/index.js new file mode 100644 index 0000000..adb747f --- /dev/null +++ b/CrabbyHome-comp/CrabbyHome-conn/data/index.js @@ -0,0 +1,88 @@ +const endpoint = "http://192.168.178.103"; +let datas = {}; +$(document).ready(function(){ + console.log("once"); + setInterval(() => { + myTimer(); + getData(); + }, 1000); + + + $("#ambiance-light-btn").click(function() { + if (datas.state.ambiance_light == true) { + $.get(`${endpoint}/api/device?id=ambiance_light&action=off&data=-`, (data) => { + $("#ambiance-light-btn").addClass("light-button-off"); + $("#ambiance-light-btn").removeClass("light-button-on"); + }); + return; + } + if (datas.state.ambiance_light == false) { + $.get(`${endpoint}/api/device?id=ambiance_light&action=on&data=-`, (data) => { + $("#ambiance-light-btn").addClass("light-button-on"); + $("#ambiance-light-btn").removeClass("light-button-off"); + }); + return; + } + + + // $.get(`${endpoint}/api/device?id=ambiance_light&action=on&data=-`, (data) => { + + // }); + }); +}); + + +function myTimer() { + var d = new Date(); + $('.digital-clock').text("Local Time: " + d.toLocaleTimeString()); +} + + +function getData() { + $.get(`${endpoint}/api/currentstate`, ( data ) => { + // set all data from api + if(data.state){ + // set climate info + $('.temp').text("Temperature: " + data.state.main_temp + "C"); + $('.hum').text("Humidity: " + data.state.main_hum + "%"); + + // set text for motion + if(data.state.motion){ + $('.motion').text("Motion detected!"); + }else if(!data.state.motion){ + $('.motion').text("No motion detected"); + } + + // insert once + if(jQuery.isEmptyObject(datas)){ + + // set lights state + if(data.state.ambiance_light){ + $("#ambiance-light-btn").addClass("light-button-on"); + }else if(!data.state.ambiance_light){ + $("#ambiance-light-btn").addClass("light-button-off"); + } + } + } + + datas = data; + console.log(datas); + console.log( "Load was performed." ); + }); + +} + +function turnLights(){ + if (currentState.main_light) { + if (currentState.main_light == true) { + $.get(`${endpoint}/api/device?id=ambiance_light&action=off&data=-`, (data) => { + + }); + return; + } + } + + $.get(`${endpoint}/api/device?id=ambiance_light&action=on&data=-`, (data) => { + + }); +} \ No newline at end of file diff --git a/CrabbyHome-comp/CrabbyHome-conn/data/kksign.png b/CrabbyHome-comp/CrabbyHome-conn/data/kksign.png new file mode 100644 index 0000000..4e89a0d Binary files /dev/null and b/CrabbyHome-comp/CrabbyHome-conn/data/kksign.png differ