Compare commits
3 Commits
051e246f0a
...
7c322b3faf
| Author | SHA1 | Date | |
|---|---|---|---|
| 7c322b3faf | |||
| c2c0315757 | |||
| 47ffa00851 |
@ -3,5 +3,8 @@
|
||||
// for the documentation about the extensions.json format
|
||||
"recommendations": [
|
||||
"platformio.platformio-ide"
|
||||
],
|
||||
"unwantedRecommendations": [
|
||||
"ms-vscode.cpptools-extension-pack"
|
||||
]
|
||||
}
|
||||
|
||||
BIN
CrabbyHome-comp/CrabbyHome-conn/data/Icon2.ico
Normal file
BIN
CrabbyHome-comp/CrabbyHome-conn/data/Icon2.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
113
CrabbyHome-comp/CrabbyHome-conn/data/Styles.css
Normal file
113
CrabbyHome-comp/CrabbyHome-conn/data/Styles.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
CrabbyHome-comp/CrabbyHome-conn/data/background.jpg
Normal file
BIN
CrabbyHome-comp/CrabbyHome-conn/data/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
63
CrabbyHome-comp/CrabbyHome-conn/data/index.html
Normal file
63
CrabbyHome-comp/CrabbyHome-conn/data/index.html
Normal file
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"></htmllang>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KrabbyHome</title>
|
||||
<link rel="shortcut icon" href="Icon2.ico"/>
|
||||
<link rel="stylesheet" href="Styles.css"/>
|
||||
|
||||
<div class="logo-row">
|
||||
<img src="kksign.png" alt="logo" class="logo">
|
||||
</div>
|
||||
|
||||
</head>
|
||||
|
||||
<!--Hier kan je alles aan en uit zetten-->
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<div class="box a">
|
||||
<h1 class="name" >Karen</h1>
|
||||
|
||||
<div class="button" id="ambiance-light-btn">Ambient lights</div>
|
||||
<!-- <div class="small-button" id="all-on-light-btn">All lights</div>
|
||||
<div class="small-button" id="all-off-light-btn">All lights</div> -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--Deze laat informatie zien als temperatuur enzo-->
|
||||
<div class="box b">
|
||||
<h1 class="name" >Secret formula</h1>
|
||||
|
||||
<ul class="text">
|
||||
<li class="digital-clock">Local time: .. AM</li>
|
||||
<li class="temp">Temperature: ..C</li>
|
||||
<li class="hum">Humidity: ..%</li>
|
||||
<!-- <li class="motion">No motion detected</li> -->
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Taken voor je dag-->
|
||||
<div class="box c">
|
||||
<h1 class="name" >To-do list</h1>
|
||||
|
||||
<ul class="text">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
<li>Milk</li>
|
||||
<li>Milk</li>
|
||||
<li>Milk</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="./index.js"></script>
|
||||
</html>
|
||||
88
CrabbyHome-comp/CrabbyHome-conn/data/index.js
Normal file
88
CrabbyHome-comp/CrabbyHome-conn/data/index.js
Normal file
@ -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) => {
|
||||
|
||||
});
|
||||
}
|
||||
BIN
CrabbyHome-comp/CrabbyHome-conn/data/kksign.png
Normal file
BIN
CrabbyHome-comp/CrabbyHome-conn/data/kksign.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@ -13,7 +13,10 @@ platform = espressif8266
|
||||
board = d1_mini_pro
|
||||
framework = arduino
|
||||
monitor_speed = 115200
|
||||
board_build.filesystem = littlefs
|
||||
board_build.ldscript = eagle.flash.4m3m.ld
|
||||
|
||||
lib_deps =
|
||||
https://git.aterve.com/Frozenverse/SimpleSerialProtocol.git
|
||||
https://github.com/bblanchon/ArduinoJson.git
|
||||
https://github.com/earlephilhower/arduino-esp8266littlefs-plugin.git
|
||||
@ -7,6 +7,9 @@
|
||||
#include <ESP8266WiFi.h>
|
||||
#include <ESP8266WebServer.h>
|
||||
|
||||
#include <FS.h>
|
||||
#include <LittleFS.h>
|
||||
|
||||
#include <SimpleSerialProtocol.h>
|
||||
|
||||
#include <StateData.h>
|
||||
@ -31,10 +34,12 @@ namespace Connection {
|
||||
void initWifi();
|
||||
void handleWifi();
|
||||
void sendResponse(DynamicJsonDocument response);
|
||||
void handleWifiStatus();
|
||||
|
||||
void onApiStatusRoute();
|
||||
void getCurrentStateRoute();
|
||||
void onDeviceRoute();
|
||||
void onWebpageRoute();
|
||||
}
|
||||
|
||||
// serial
|
||||
@ -78,10 +83,24 @@ void Connection::initWifi(){
|
||||
WiFi.localIP().toString().toCharArray(ipAdress,50);
|
||||
controller.sendPacket("controller", "wifi_details", ipAdress);
|
||||
|
||||
server.on("/", Connection::onWebpageRoute);
|
||||
server.on("/api/status", Connection::onApiStatusRoute);
|
||||
server.on("/api/currentstate", Connection::getCurrentStateRoute);
|
||||
server.on("/api/device", Connection::onDeviceRoute);
|
||||
|
||||
|
||||
LittleFS.begin();
|
||||
|
||||
server.serveStatic("/Icon2.ico", LittleFS, "/Icon2.ico");
|
||||
server.serveStatic("/background.jpg", LittleFS, "/background.jpg");
|
||||
server.serveStatic("/index.js", LittleFS, "/index.js");
|
||||
server.serveStatic("/kksign.png", LittleFS, "/kksign.png");
|
||||
server.serveStatic("/Styles.css", LittleFS, "/Styles.css");
|
||||
|
||||
server.onNotFound([]() {
|
||||
server.send(404, "text/plain", "404: Not Found");
|
||||
});
|
||||
|
||||
server.begin();
|
||||
}
|
||||
|
||||
@ -100,6 +119,14 @@ void Connection::sendResponse(DynamicJsonDocument response) {
|
||||
server.send(200, "application/json", serializedJson);
|
||||
}
|
||||
|
||||
void Connection::handleWifiStatus() {
|
||||
if(WiFi.status() != WL_CONNECTED){
|
||||
controller.sendPacket("controller", "wifi_status", "reconnecting");
|
||||
WiFi.disconnect();
|
||||
WiFi.reconnect();
|
||||
}
|
||||
}
|
||||
|
||||
void Connection::onApiStatusRoute() {
|
||||
// Init Json Document
|
||||
DynamicJsonDocument response(jsonBufferSize);
|
||||
@ -158,3 +185,10 @@ void Connection::onDeviceRoute() {
|
||||
|
||||
sendResponse(response);
|
||||
}
|
||||
|
||||
void Connection::onWebpageRoute() {
|
||||
LittleFS.begin();
|
||||
File file = LittleFS.open("/index.html", "r");
|
||||
server.streamFile(file, "text/html");
|
||||
file.close();
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
const endpoint = "http://192.168.178.60";
|
||||
const endpoint = "http://192.168.178.103";
|
||||
let datas = {};
|
||||
$(document).ready(function(){
|
||||
console.log("once");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user