javascript - Arduino Webserver Update -

-

i have small tidbit of code webserver on arduino connected ethernet shield:

client.println("<html><head><title>arduserv</title></head><body>"); client.print("current temperature: ");client.println(gettmp()); client.println("<form method=get>input:<input type=text size=25 name=inp><input type=submit value=submit></form>"); client.println("</body></html>");

is there way can update temperature using javascript don't have redraw page every second? can change temperature?

i not use arduino http server couple of reasons.

  1. performance - micro controller, have limited resources. serving of headers , content can expensive if want interaction real time.

  2. manageability - i'm sure you're aware, it's frustrating having manage source of web page through strings in double quotes on multiple lines that.

the solution

i've found effective way make web controller interface arduino host page somewhere on computer locally or on server if have one. then, make arduino web socket server instead of http server.

this allow communicate using websocket class in javascript, while not having worry overhead of hosting web content.

i've used this web socket server implementation arduino , works great.

here's basic example based on showed us.

arduino

assuming ethernet ethernetserver, , socket websocketserver.

// initialize ethernet , socket server in setup() here ...  void loop(void) {     ethernetclient client = ethernet.available();      if (client.connected() && socket.handshake(client))     {         while (client.connected())         {             string response;              // add temperature response              response += gettmp();              // send response javascript interface             socket.senddata(response);              // update every 250 milliseconds             delay(250);         }     }      // wait let client disconnect     delay(100); }

javascript

// assuming have <div id="temperature"></div> in document var temperature = document.getelementbyid('temperature');  // whatever ip assigned ethernetserver var ip = '192.168.0.99';  var socket = new websocket('ws://'+ ip);  socket.onmessage = function(e) {     // update temperature text     temperature.innerhtml = e.data; };

you can find more information javascript web sockets here.


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more