Home Explore Help
Register Sign In
jamesperet
/
home-automation
Watch 1
Star 0
Fork 0

Browse Source
Webpage light button

The button in the dashboard page sends an http request with vue to the relay controller on the server. The relay controller checks if the relay ID exists, changes state and broadcasts thru socket.io to all dashboard pages.

James Peret 6 years ago
parent
57f18298e0
commit
660213d698
2 changed files with 75 additions and 7 deletions
Show Diff Stats
  1. 31 5
      relay_controller.js
  2. 44 2
      views/index.html

+ 31 - 5
relay_controller.js
View File 

@@ -1,20 +1,46 @@
1 1 
 var logger = require('winston');
2 
-var relay_status = [ 1, 1, 1, 1]
3 2
4 3 
 module.exports.start = function(router, channel){
5 4 
   logger.info("Starting Relay controller module");
6 5
7 6 
   router.post('/switch_relay', function (req, res) {
8 7 
     logger.info("Received request for switching relays", req.body);
9 
-    channel.emit('news', { hello: 'again' });
8 
+    if(req.body != undefined){
9 
+      var relay = req.body;
10 
+      if(relay.code != undefined && relay.status != undefined){
11 
+        var done = switchRelay(relay.code, relay.status);
12 
+        if(done){
13 
+            channel.emit('relay_switch', { code: relay.code, status: relay.status });
14 
+        }
15 
+      }
16 
+    }
10 17 
     res.sendStatus(200);
11 18 
   });
12 19
13 20 
 }
14 21
15 22 
 module.exports.monitor = function(socket, channel){
16 
-  channel.emit('news', { hello: 'world' });
17 
-  socket.on('my other event', function (data) {
18 
-    logger.info("Receiveid data", data);
23 
+  socket.on('relay_switch_update', function (data) {
24 
+    logger.info("relay_switch_update", data);
25 
+    socket.emit("relay_switch", relay_status[0]);
19 26 
   });
20 27 
 }
28 
+
29 
+var relay_status = [
30 
+  {
31 
+    code: "L01",
32 
+    status: true
33 
+  }
34 
+]
35 
+
36 
+var switchRelay = function(code, status){
37 
+  switch (code) {
38 
+    case "L01":
39 
+      // switch on light relay
40 
+      relay_status[0].status = status;
41 
+      return true;
42 
+      break;
43 
+    default:
44 
+      return false;
45 
+  }
46 
+}

+ 44 - 2
views/index.html
View File 

@@ -92,8 +92,8 @@
92 92 
       <div class="col-sm-4">
93 93 
         <div class="statcard">
94 94 
           <i class="fa fa-lightbulb-o icon-header" aria-hidden="true"></i>
95 
-          <button type="button" class="btn btn-outline-secondary " style="float: right; margin-top: 2px;">Turn On</button>
96 
-          <h3 class="statcard-number">OFF</h3>
95 
+          <button type="button" class="btn btn-outline-secondary " v-on:click="switchLight01(false)" style="float: right; margin-top: 2px;">{{light01_btn}}</button>
96 
+          <h3 class="statcard-number">{{light01}}</h3>
97 97 
           <span class="statcard-title">Light</span>
98 98
99 99 
         </div>
 
@@ -128,12 +128,31 @@
128 128 
 <script>
129 129 
   var socket = io.connect('http://localhost:3100/');
130 130
131 
+  var http_post = function(url, data){
132 
+    var xhr = new XMLHttpRequest();
133 
+    xhr.open("POST", url, true);
134 
+    xhr.setRequestHeader('Content-Type', 'application/json');
135 
+    xhr.send(JSON.stringify(data));
136 
+  }
137 
+
131 138 
   var app = new Vue({
132 139 
     el: "#app",
133 140 
     data: {
134 141 
       temperature_external: "--",
142 
+      light01 : "--",
143 
+      light01_status : undefined,
144 
+      light01_btn : ""
135 145 
     },
136 146 
     methods: {
147 
+      switchLight01: function(){
148 
+        var status;
149 
+        if(app.light01_status == true){
150 
+          status = false;
151 
+        } else {
152 
+          status = true;
153 
+        }
154 
+        http_post("/switch_relay", { code: "L01", status: status})
155 
+      },
137 156 
       example: function(example_var){
138 157 
         app.example();
139 158 
       }
 
@@ -145,4 +164,27 @@
145 164 
     app.temperature_external = temp + "ºC";
146 165 
   });
147 166
167 
+  socket.on('relay_switch', function (data) {
168 
+    console.log(data)
169 
+    var status = "ON";
170 
+    var btn = "Turn Off"
171 
+    if(data.status == false){
172 
+      status = "OFF"
173 
+      btn = "Turn On"
174 
+    }
175 
+    switch (data.code) {
176 
+      case "L01":
177 
+        app.light01 = status;
178 
+        app.light01_status = data.status
179 
+        app.light01_btn = btn
180 
+        break;
181 
+    }
182 
+  });
183 
+
184 
+  socket.emit('relay_switch_update', {});
185 
+  setInterval(function () {
186 
+    socket.emit('relay_switch_update', {});
187 
+  }, 5000);
188 
+
189 
+
148 190 
 </script>