Hemautomation med Arduino... Och JavaScript! (4 / 6 steg)

Steg 4: Klientsidan (webbläsaren)

Vi kommer nu att arbeta med våra /public mapp, där, vi kommer att lägga till indexet för vår app och JS-filer som kommer att göra det dynamiska, så låt oss gå:

Skapa först en mapp som heter "tillgångar", och inuti den, skapa två mer heter "lib" och "stilar", på mappen/lib, sätta bootstrap, jquery och p5 filer, dessa kommer att hjälpa oss närma sig våra mål, bootstrap se slät, och p5 och jquery för att lägga till anpassade funktioner och ett diagram att spåra house temperaturen.

Sedan i huvudmappen (/ offentliga) skapa en fil som heter index.html, kan du kolla min och klistra in den om du vill, och när du slutar den instructable anpassa det för dig och ha kul!

Här är min index.html

Efter att du har din indexfil måste det också vara två javascript-filer, en av dem att styra gränssnittet med jquery, och en annan att skapa ett diagram som visar temperaturen på realtid. Dessutom börjar vi arbeta med socket.io just nu.

Socket.IO är en kraftfull JS bibliotek att bygga realtime webbprogram, vi kommer att dra nytta av det och använda den för att släppa ut händelser från Arduino-servern till klienten och viceversa, kan du kontrollera i dokumentationen för socket.io här och det finns också många exempel på hur man använder den. Låt oss fortsätta att våra filer som tidigare nämnts.

Att kommer kallas en fil script.js och måste innehålla följande:

$(function() {
var socket = io.connect ("http://localhost:3000");
Slider med jQuery UI
$(#slider-sortiment-max) .slider({
utbud: "max",
min: 0,
Max: 255,
värde: 0,
bild: funktion (händelse, ui) {
Tilldela reglaget till dimbara led-ingången
$("#amount") .val (ui.value);
Skicka händelsen till servern med namnet och värdet av det
socket.Emit ("dimbara-ledda", ui.value);
Console.log ("reglaget värde:" + ui.value);
}
});
$("#amount") .val ($(#slider-sortiment-max) .slider ("värde"));
Både detta och nästa ($("#other-rooms-btn").click()) ändra det anropande knappen åtgärdstillståndet och släpper ut händelsen via uttaget
$("#living-room-btn").click(function() {
changeBtnState ("#living-room-btn", "#living-room-light");
socket.Emit ("living room-light", $("#living-room-light").val());
Console.log($("#Living-Room-BTN").val());
});
$("#other-rooms-btn").click(function() {
changeBtnState ("#other-rum-btn", "#other-rum-light");
socket.Emit ("andra-rum-ljus", $("#other-rooms-light").val());
Console.log($("#other-Rooms-BTN").val());
});
Kontrollerar om händelser skickas från arduino ändra vardagsrummet eller varje annat rum på grund av en tryckknapp eller fotomotstånd
socket.on ("living-room-ljus-tryckknapp", function() {changeBtnState ("#living-room-btn", "#living-room-light")});
socket.on ("bakgård-ljus-förändring", function(value) {
IF(Value) {
IF($("#Backyard-Light").val() == "Off") {
$("#backyard-light").val("On");
}
}
annat if($("#backyard-light").val() == "På") {
$("#backyard-light").val("Off");
}
});
Jag behöver ändra detta om du vill hantera fotomotstånd endast en gång per stat / / /
socket.on ("fotomotstånd-förändring", function() {changeBtnState ("#living-room-btn", "#living-room-light")});
socket.on ("andra-rum-förändring", function() {changeBtnState ("#other-rum-btn", "#other-rum-light")})
En funktion att styra dem alla, Tja, UI knapparna...
BTN: knapp-id för att ändra---ingång: input id ändra
funktion changeBtnState (btn, indata) {
var btnClass = $(btn).attr('class');
var texten, staten, newBtnClass, oldBtnClass;
om (btnClass === "btn btn-framgång") {
oldBtnClass = "btn-framgång";
newBtnClass = "btn-risk",
text = "off";
State = "On";
} else om (btnClass === "btn btn-fara") {
oldBtnClass = "btn-risk",
newBtnClass = "btn-framgång";
text = "på";
State = "Off";
}
$(btn).removeClass(oldBtnClass);
$(btn).addClass(newBtnClass);

$(btn) .text ("Vända" + text);
Console.log (btn + "är" + staten);
$(input).val(state);
}
});

Här vi hanterar händelserna UI (klickas och ett reglage) och med dem sända ut meddelanden via sockets som kommer att tas emot på servern och kommer att göra Arduino arbeta baserat på dem.

I den andra fil, som vi kommer namn "temperature_canvas_sketch" vi kommer att visa de data som vi fick från temperaturgivare med hjälp av p5.js, en stor JS bibliotek baserat på bearbetning lang. Så i vår temperature_canvas_sketch.js fil låt oss lägga till detta:

var chartpoints = []; chartpoints.push ({x: 0, y: 0});
var socket = io.connect ("http://localhost:3000");
Skapa en duk där diagrammet visas och matchande anslutningen med uttaget
funktion setup() {
cnv = createCanvas (displayWidth/2, displayHeight/5);
cnv.Parent("termo-container");
Blir en förändring när temperaturgivaren ändrar och anger det till dess element
socket.on ("temperatur", function(temperature) {
$("#termometer").val (temperatur + "° C");
createPoint(temperature);
});
}
Hantera diagram poäng att Visa
funktionen draw() {
Background(255);
noFill();
stroke(0);
Här drar vi det sista temperatur värdet från chartpoints array där det är tänkt att vara
Börjar dra i punkt
beginShape();
för (var jag = 0; jag < chartpoints.length; i ++) {
var P = chartpoints [i];
vertex (P.x, höjd - P.y);
text (P.y, P.x, höjd - P.y);
om (P.x < 0)chartpoints.pop(i);
P.x--;
}
endShape();
Ändarna Rita punkt
}
Den här funktionen anropas när tmp36 skickar ett nytt värde till klienten
funktion createPoint(temp) {
var t = random (0, höjd-20);
Skapar en ny punkt med x -> live bredden på duken & y -> temperatur värdet från arduino
var P = nya poäng (bredd, temp);
chartpoints.push(P);
}
Anpassad klass av punkter som kommer att vara ritat
var poäng = function()
{
var x;
var y;
var konstruktören = funktion Points(x, y)
{
This.x = x;
This.y = y;
};
returnera konstruktorn;
}();

Detta kommer att ta hand om Rita ett diagram med data vi skickar, i detta fall är att Visa live temperaturen i vårt hem.

Men nu har vi sockets på klienten och inte i servern, måste vi gå tillbaka dit och lägga till dem att fungera ordentligt, så gå på.