made website working

CrabbyHome-comp/CrabbyHome-conn/src/Connection.h

@@ -34,6 +34,7 @@ namespace Connection {
 
     void onApiStatusRoute();
     void getCurrentStateRoute();
+    void onDeviceRoute();
 }
 
 // serial
@@ -79,6 +80,7 @@ void Connection::initWifi(){
 
     server.on("/api/status", Connection::onApiStatusRoute);
     server.on("/api/currentstate", Connection::getCurrentStateRoute);
+    server.on("/api/device", Connection::onDeviceRoute);
 
     server.begin();
 }
@@ -91,7 +93,9 @@ void Connection::sendResponse(DynamicJsonDocument response) {
     // Prepare data to return
     char serializedJson[jsonBufferSize];
     serializeJson(response, serializedJson);
-    
+
+    //added cors
+    server.sendHeader("Access-Control-Allow-Origin", "*");
     // Send response
     server.send(200, "application/json", serializedJson);
 }
@@ -120,4 +124,37 @@ void Connection::getCurrentStateRoute() {
 
     // Send response
     sendResponse(response);
+}
+
+void Connection::onDeviceRoute() {
+    // Init Json Document
+    DynamicJsonDocument response(jsonBufferSize);
+
+    // Check params 
+    if (server.arg("id").isEmpty() || server.arg("action").isEmpty() || server.arg("data").isEmpty()) {
+        response["status"] = "error";
+        response["msg"] = "Invalid parameter fields!";
+        return sendResponse(response);   
+    }
+
+    // Get parameters from request
+    int idBuffer = server.arg("id").length() + 1;
+    char id[idBuffer];
+    server.arg("id").toCharArray(id, idBuffer);
+    
+    int commandBuffer = server.arg("action").length() + 1;
+    char command[commandBuffer];
+    server.arg("action").toCharArray(command, commandBuffer);
+
+    int dataBuffer = server.arg("data").length() + 1;
+    char data[dataBuffer];
+    server.arg("data").toCharArray(data, dataBuffer);
+    
+    // Send packet to controller
+    controller.sendPacket(id, command, data);
+
+    response["status"] = "success";
+    response["msg"] = "Processed command!";
+    
+    sendResponse(response); 
 }

CrabbyHome-comp/CrabbyHome-master/src/Connection.h

@@ -30,10 +30,11 @@ void Connection::handle() {
 }
 
 void Connection::onNetworkerPacket(Packet packet) {
-    debugger.sendPacket(packet.id, packet.command, packet.data);
 
     // Handle Lights
-    if (strcmp(packet.id, "main_light") == 0) {
+    if (strcmp(packet.id, "ambiance_light") == 0) {
+    debugger.sendPacket(packet.id, packet.command, packet.data);
+
         RFTransmit::handlePacket(&networker, packet.id, packet.command, packet.data);
     }
 }

CrabbyHome-comp/CrabbyHome-master/src/RFTransmit.h

@@ -1,6 +1,7 @@
 #pragma once
 #include <Arduino.h>
 #include <NewRemoteTransmitter.h>
+#include <Screen.h>
 
 #define RF_SEND_PIN 11
 
@@ -19,11 +20,13 @@ void RFTransmit::handlePacket(SimpleSerialProtocol *endpoint, char* id, char* ac
     if(strcmp(id, "ambiance_light") == 0){
         if (strcmp(action, "on") == 0){
             RFTransmit::send(0, rf_type_switch, rf_switch_on);
+            Screen::display(id, "ON");
             endpoint->sendPacket("access", "update_state", "bool;ambiance_light;true");
         }
         
         if (strcmp(action, "off") == 0){
             RFTransmit::send(0, rf_type_switch, rf_switch_off);
+            Screen::display(id, "OFF");
             endpoint->sendPacket("access", "update_state", "bool;ambiance_light;false");
         }
     }
@@ -32,11 +35,13 @@ void RFTransmit::handlePacket(SimpleSerialProtocol *endpoint, char* id, char* ac
     if(strcmp(id, "main_group") == 0){
         if (strcmp(action, "on") == 0){
             RFTransmit::send(0, rf_type_switchgroup, rf_switch_on);
+            Screen::display(id, "ON");
             endpoint->sendPacket("access", "update_state", "bool;ambiance_light;true");
         }
         
         if (strcmp(action, "off") == 0){
             RFTransmit::send(0, rf_type_switchgroup, rf_switch_off);
+            Screen::display(id, "OFF");
             endpoint->sendPacket("access", "update_state", "bool;ambiance_light;false");
         }
     }

CrabbyHome-comp/CrabbyHome-master/src/Screen.h

@@ -12,8 +12,8 @@ namespace Screen{
 
 void Screen::init(){
     lcd.begin();
-    // Print a message to the LCD.
     lcd.backlight();
+    
     lcd.setCursor(3,0);
     lcd.print("CrabbyHome");
     lcd.setCursor(3,1);
@@ -24,6 +24,8 @@ void Screen::display(char* title, char* text){
     int titleSize = strlen(title);
     int textSize = strlen(text);
     lcd.clear();
+    lcd.display();
+    lcd.backlight();
     
     // check if text fits in screen
     if(titleSize <= 16){
@@ -37,4 +39,8 @@ void Screen::display(char* title, char* text){
         lcd.setCursor(offset, 1);
     }
     lcd.print(text);
+    delay(1000);
+
+    lcd.noBacklight();
+    lcd.noDisplay();
 }

CrabbyHome-comp/CrabbyHome-master/src/main.cpp

@@ -10,12 +10,9 @@ void setup() {
   Connection::init();
   Temperature::init();
   Screen::init();
-  RFTransmit::send(1, "switchgroup", "true");
 }
 
 void loop() 
 {
-
-	// delay(500);
   Connection::handle();
 }

CrabbyHome-web/krabbySite/Styles.css

@@ -39,26 +39,64 @@ li {
 
 }
 
-.button {
+.button{
+	width: 30%;
+	margin: auto;
 	padding: 15px 25px;
 	font-size: 24px;
 	text-align: center;
 	cursor: pointer;
 	outline: none;
 	color: #fff;
-	background-color: #4CAF50;
 	border: none;
 	border-radius: 15px;
-	box-shadow: 0 9px #999;
+	/* 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: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 ;

CrabbyHome-web/krabbySite/index.html

@@ -1,7 +1,10 @@
 <!DOCTYPE html>
-<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"/>
@@ -18,7 +21,9 @@
 	<div class="box a">
 		<h1 class="name" >Karen</h1>
 		
-		<div class="button">Ambient lights</div>
+		<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>
@@ -28,9 +33,10 @@
 		<h1 class="name" >Secret formula</h1>
 		
 		<ul class="text">
-			<li>Time: 1:17am</li>
+			<li class="digital-clock">Local time: .. AM</li>
-			<li>Temperature: 19.9 C</li>
+			<li class="temp">Temperature: ..°C</li>
-			<li>No Motion Detected</li>
+			<li class="hum">Humidity: ..%</li>
+			<!-- <li class="motion">No motion detected</li> -->
 		</ul>
 		
 	</div>
@@ -52,4 +58,6 @@
 </div>
 </body>
 
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
+<script src="./index.js"></script> 
 </html>

CrabbyHome-web/krabbySite/index.js

@@ -0,0 +1,88 @@
+const endpoint = "http://192.168.178.60";
+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) => {
+        
+    });
+}