2

The title pretty much says it all:

What would be the most obvious way to setup the Arduino (shields?), the Sketch (libraries?) and PC (webserver, ajax, plain html?) so that I get the following system working:

  1. I open some page in a browser. The page has some labels/fields/values;
  2. I power up Arduino, which is connected to some sensors (or even potentiometers);
  3. The sensor values display keep being constantly updated in the page, with a sensible refresh rate (the fastest as possible, as to control some browser-based game for example);

The fundamental idea here is to use the Browser, and not some other GUI toolkit, or Processing, or the command line.

2

The most obvious way? Not what is the best way? It is a subjective question. The most obvious way would be to do it in a way you know how to. I am sure there are at least 20 ways to do this.

The way I know, and that I would do it is write a PC service that establishes serial communications with the Arduino, transfers data using JSON, and presents a web server I could connect TCP to. Knowing C# and using existing code I have, it would take less than 15 minutes.

  • I don't know much about web servers, and I have previously used UDP to transfer data from Android to C#. There is also the HTML/Javascript part, which I have not experience either. I asked the question not because I think it is difficult (I believe it might even be trivial depending on the implementer's background), but because I don't know even where to start, and I think it makes a good canonical question – heltonbiker May 26 '15 at 14:26
1

I guess there are a number of ways to tackle the problem. Using the Ethernet shield is probably the most intuitive option, but this isn't something I have explored in too much detail - I would usually opt for other micros at this stage and I am confident you will get an answer from someone else detailing this.

To get the most out of the Arduino and leverage what the Arduino is good at, I would probably make a C# console application or Windows service which communicates with the Arduino over serial, and use the 'System.Web.Http.SelfHost' assembly to make the data available through a RESTful web service which a html page could use JQuery to poll for information. It would be pretty easy to extend this to push the data to the page using SignalR.

The fundamental drawback of this architecture is that your device isn't serving the website, so these must be hosted somewhere else, or run from flat files. Also a PC must be attached to facilitate the data transfer over serial and provide the web service.

To get started you will want to familiarise yourself with c# and the SelfHost module, and WebApi 2.0 if you aren't already, this is all covered here, and of course you will need Visual Studio Community edition or greater to start creating projects.

Next, write a Windows Service or Console Application which implements an object model holding your data, and updates this periodically with the Arduino via serial.

The Self Host module is pretty incredible in that it allows you to add a web interface to any .Net application very easily, and directly manipulate your model. The tutorial linked above is very easy to follow, and can easily be adapted.

For testing and development purposes, I would highly recommend Postman, which can be used to test and trigger your API endpoints. It's a comprehensive and well polished tool specifically for this job.

In terms of the network logistics, I would then use JQuery to make periodic posts to the self-host service in the same fashion that Postman would. You can use the function call backs to trigger successive queries on completion to maximise the data refresh rate without causing excessive consumption. A time interval would be another option you could consider between requests, and is discussed in this article on polling.

The typical Ajax request structure would look something like this:

$.ajax({
    url: 'yourApiMethodAddress',
    type: 'get',
    error: function (jqXHR, status, ex) {
        /* Something went wrong. Maybe you could stop 
           the update process and show a message and
           a retry button. */
        console.log("Error: " + status);
        console.log(ex);
    },
}).done(function (data) {
    // Update page with information stored in 'data'. View console for hints
    console.log(data);
});

I would recommend using Twitter Bootstrap in your webpage file to pretty things up and maintain readability. Don't forget to include the javascript and css files for both Bootstrap and JQuery in your html document (if used).

In summary, I would recommend implementing an application which runs on a computer attached via USB/Serial to the Arduino, with the .Net Self Host module utilised to provide a RESTful API. This API can then be polled from a html page using javascript and JQuery to obtain the information and update the page.

I hope this information helps, and as there a lot of moving parts I didn't provide many code examples for simplicity sake. If you find this useful and would like more information adding, mention it in the comments and I will update my answer.

0

Your question actually exists out of multiple questions...

1. How to connect arduino to network/internet.

I would suggest using a cheap WIFI module or Ethernet module

2. How to send values from arduino over ethernet.

The fastest would be using a direct connection (TCP/IP or UDP?)

3. How to receive values from arduino over ethernet on a PC.

The problem with this would (I think) be that a webserver usually does not enable a direct TCP/IP connection, but instead would use HTML to transfer data/webpages. But I'm not a web-developer at all. I would create a dedicated program in processing/c++/python or something similiar.

  • The first two parts I think are not difficult, I guess. But the third part is the part I am actually interested (although I must agree it's not an Arduino question...) – heltonbiker May 26 '15 at 14:22
  • I'm actually also interested in this, (I'm at 'work' now) but I suggest you check out some similiar projects on the internet. You're not interested in running the webserver on arduino are you? arduino.cc/en/Tutorial/WebServer You want to make the arduino a controller/client from an online game? The last part is indeed a bit off-topic, but there might be people on here who have knowledge on it or have done a similiar project with arduino. You should check if you can receive raw tcp/ip on a webserver. As webserver vs dedicated program is quite a difference – Paul May 26 '15 at 14:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.