Spekulaas/CrabbyHome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Spekulaas:051e246f0a4024fb525f2961edb30af29c9cae6e
Branches Tags
Spekulaas:master
...
compare: Spekulaas:7c322b3fafa61630970b2107bac4a90e84ef5852
Branches Tags
Spekulaas:master

3 Commits
051e246f0a ... 7c322b3faf

Author SHA1 Message Date
spekulaas
7c322b3faf changed connection IP 2022-03-20 10:49:54 +01:00
spekulaas
c2c0315757 file hosting through esp 2022-03-20 10:49:29 +01:00
spekulaas
47ffa00851 created data folder to host website 2022-03-20 10:47:15 +01:00
10 changed files with 313 additions and 9 deletions
Show Stats Expand all files Collapse all files

3
CrabbyHome-comp/CrabbyHome-conn/.vscode/extensions.json vendored
View File

@ -3,5 +3,8 @@
// for the documentation about the extensions.json format // for the documentation about the extensions.json format
"recommendations": [ "recommendations": [
"platformio.platformio-ide" "platformio.platformio-ide"
],
"unwantedRecommendations": [
"ms-vscode.cpptools-extension-pack"
] ]
} }

BIN
CrabbyHome-comp/CrabbyHome-conn/data/Icon2.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

113
CrabbyHome-comp/CrabbyHome-conn/data/Styles.css Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

63
CrabbyHome-comp/CrabbyHome-conn/data/index.html Normal file
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

3
CrabbyHome-comp/CrabbyHome-conn/platformio.ini
View File

@ -13,7 +13,10 @@ platform = espressif8266
board = d1_mini_pro board = d1_mini_pro
framework = arduino framework = arduino
monitor_speed = 115200 monitor_speed = 115200
board_build.filesystem = littlefs
board_build.ldscript = eagle.flash.4m3m.ld
lib_deps = lib_deps =
https://git.aterve.com/Frozenverse/SimpleSerialProtocol.git https://git.aterve.com/Frozenverse/SimpleSerialProtocol.git
https://github.com/bblanchon/ArduinoJson.git https://github.com/bblanchon/ArduinoJson.git
https://github.com/earlephilhower/arduino-esp8266littlefs-plugin.git

34
CrabbyHome-comp/CrabbyHome-conn/src/Connection.h
View File

@ -7,6 +7,9 @@
#include <ESP8266WiFi.h> #include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> #include <ESP8266WebServer.h>
#include <FS.h>
#include <LittleFS.h>
#include <SimpleSerialProtocol.h> #include <SimpleSerialProtocol.h>
#include <StateData.h> #include <StateData.h>
@ -31,10 +34,12 @@ namespace Connection {
void initWifi(); void initWifi();
void handleWifi(); void handleWifi();
void sendResponse(DynamicJsonDocument response); void sendResponse(DynamicJsonDocument response);
void handleWifiStatus();
void onApiStatusRoute(); void onApiStatusRoute();
void getCurrentStateRoute(); void getCurrentStateRoute();
void onDeviceRoute(); void onDeviceRoute();
void onWebpageRoute();
} }
// serial // serial
@ -78,10 +83,24 @@ void Connection::initWifi(){
WiFi.localIP().toString().toCharArray(ipAdress,50); WiFi.localIP().toString().toCharArray(ipAdress,50);
controller.sendPacket("controller", "wifi_details", ipAdress); controller.sendPacket("controller", "wifi_details", ipAdress);
server.on("/", Connection::onWebpageRoute);
server.on("/api/status", Connection::onApiStatusRoute); server.on("/api/status", Connection::onApiStatusRoute);
server.on("/api/currentstate", Connection::getCurrentStateRoute); server.on("/api/currentstate", Connection::getCurrentStateRoute);
server.on("/api/device", Connection::onDeviceRoute); 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(); server.begin();
} }
@ -100,6 +119,14 @@ void Connection::sendResponse(DynamicJsonDocument response) {
server.send(200, "application/json", serializedJson); 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() { void Connection::onApiStatusRoute() {
// Init Json Document // Init Json Document
DynamicJsonDocument response(jsonBufferSize); DynamicJsonDocument response(jsonBufferSize);
@ -158,3 +185,10 @@ void Connection::onDeviceRoute() {
sendResponse(response); sendResponse(response);
} }
void Connection::onWebpageRoute() {
LittleFS.begin();
File file = LittleFS.open("/index.html", "r");
server.streamFile(file, "text/html");
file.close();
}

2
CrabbyHome-web/krabbySite/index.js
View File

@ -1,4 +1,4 @@
const endpoint = "http://192.168.178.60"; const endpoint = "http://192.168.178.103";
let datas = {}; let datas = {};
$(document).ready(function(){ $(document).ready(function(){
console.log("once"); console.log("once");