Stap 4: Client side (de browser)
Wij zullen nu samen met onze toeschouwers map, daar zullen we de index van onze app en de JS-bestanden die dynamisch maken zal, dus laten we gaan toevoegen:
Maak eerst een map met de naam 'activa', en erin, twee meer met de naam 'lib' en 'stijlen', voor de map/lib zetten bootstrap, jquery en de p5-bestanden te maken, deze zal helpen ons benaderen onze doelstelling, bootstrap om te kijken glad, en p5 en jquery aangepaste functionaliteit en een grafiek voor het bijhouden van de temperatuur van het huis toe te voegen.
In de hoofdmap (/ openbare) Maak vervolgens een bestand met de naam index.html, u kunt mij controleren en plakken als u wilt, en na het beëindigen van de instructable voor u aanpassen en veel plezier!
Nadat u uw indexbestand hebt moeten er worden ook twee javascript-bestanden, een van hen om te bepalen van de interface met jquery, en een andere om te maken van een grafiek met de temperatuur op real-time. Ook, zullen we beginnen met het werken met socket.io op dit moment.
Socket.io is een krachtige JS bibliotheek realtime om webtoepassingen te bouwen zullen, wij profiteren van het gebruiken voor het uitzenden van evenementen van de Arduino-server naar de client en viceversa, kunt u de socket.io documentatie hier en er zijn ook veel voorbeelden over hoe het te gebruiken. Laten we blijven onze bestanden eerder vermeldden.
Één bestand zal worden genoemd script.js en moet de volgende gegevens bevatten:
$(function() { var socket = io.connect("http://localhost:3000"); // Slider with jQuery UI $( "#slider-range-max" ).slider({ range: "max", min: 0, max: 255, value: 0, slide: function( event, ui ) { // Assign the slider value to the dimmable-led input $( "#amount" ).val( ui.value ); // Send the event to the server with the name and value of it socket.emit('dimmable-led', ui.value); console.log("Slider value: " + ui.value); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); // Both this and the next ( $("#other-rooms-btn").click() ) change the calling action button state and emit the event via socket $("#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-rooms-btn", "#other-rooms-light"); socket.emit('other-rooms-lights', $("#other-rooms-light").val()); console.log($("#other-rooms-btn").val()); }); // Checks for events sent from arduino to change the living room or every other rooms because of a pushbutton or photoresistor socket.on('living-room-light-pushbutton', function() { changeBtnState("#living-room-btn", "#living-room-light") }); socket.on('backyard-light-change', function(value) { if(value) { if($("#backyard-light").val() == "Off") { $("#backyard-light").val("On"); } } else if($("#backyard-light").val() == "On") { $("#backyard-light").val("Off"); } }); ///// I need to change this to handle the photoresistor only once per state ///// socket.on('photoresistor-change', function() { changeBtnState("#living-room-btn", "#living-room-light") }); socket.on('other-rooms-change', function() { changeBtnState("#other-rooms-btn", "#other-rooms-light") }) // One function to rule them all, well, the UI buttons... // btn: the button id to change ------ input: the input id to change function changeBtnState(btn, input) { var btnClass = $(btn).attr('class'); var text, state, newBtnClass, oldBtnClass; if(btnClass === "btn btn-success") { oldBtnClass = 'btn-success'; newBtnClass = 'btn-danger'; text = 'off'; state = "On"; } else if(btnClass === "btn btn-danger") { oldBtnClass = 'btn-danger'; newBtnClass = 'btn-success'; text = 'on'; state = "Off"; } $(btn).removeClass(oldBtnClass); $(btn).addClass(newBtnClass); $(btn).text("Turn " + text); console.log(btn + " is " + state); $(input).val(state); } }); Hier wij omgaan met de UI-gebeurtenissen (Klik op van en een schuifregelaar) en met hen emitterende berichten via sockets weer die op de server worden ontvangen en Arduino zal doen werk gebaseerd op hen.
In de andere file, die we 'temperature_canvas_sketch' zal noemen we de gegevens die we van de temperatuursensor met behulp van p5.js, een grote JS bibliotheek gebaseerd op Processing lang wordt weergegeven. Dus in onze temperature_canvas_sketch.js-bestand laten we Voeg dit toe:
var chartpoints = []; chartpoints.push({x: 0, y: 0}); var socket = io.connect("http://localhost:3000"); // Creating a canvas where the chart will be displayed and matching the connection with the socket function setup() { cnv = createCanvas(displayWidth / 2, displayHeight / 5); cnv.parent("termo-container"); // Gets a change whenever the temperature sensor changes and sets it to its element socket.on('temperature', function(temperature) { $("#termometer").val(temperature + "°C"); createPoint(temperature); }); } // Handle chart points to display function draw() { background(255); noFill(); stroke(0); // Here we draw the last temperature value from the chartpoints array where it is supposed to be //// Starts draw of point beginShape(); for (var i=0; i < chartpoints.length; i++) { var P = chartpoints[i]; vertex(P.x, height - P.y); text(P.y, P.x, height - P.y); //if (P.x<0)chartpoints.pop(i); P.x--; } endShape(); //// Ends draw of point } // This function is called whenever the tmp36 sends a new value to the client function createPoint(temp) { //var t = random(0, height-20); // Creates a new point with x -> live width of the canvas & y -> the temperature value from arduino var P = new Points(width, temp); chartpoints.push(P); } // Custom class of points that will be drawed var Points = function() { var x; var y; var constructor = function Points(x, y) { this.x = x; this.y = y; }; return constructor; }(); Dit zorgt voor tekenen een grafiek met de gegevens die we sturen, in dit geval is aan te tonen van de live temperatuur van ons huis.
Maar nu we sockets op de client en niet op de server hebben, we moeten terugkeren en ze werken goed, dus ga op toevoegen.
