After having published my previous tutorial, some users wrote me asking a way to send bigger images using Arduino and the ethernet shield.
The guys who develop EtherCard library are rewriting the way it handles TCP packets, in the meantime you can get around this problem including in your HTML page references to images hosted by other websites:
I wrote the following example for a user who asked a way to control a relay via Internet with a GUI optimized for smartphones.
The example uses 3 elements: Arduino, Ethernet Shield and a relay module from eBay, connected to a PIN of Arduino:
The Ethernet Shield is connected to my home ADSL router, configured to NAT incoming connections to TCP port 80 to the IP address assigned to Arduino:
I can reach Arduino from Internet knowing the public IP my ISP gave to my connection or, better, using a dynamic DNS service (maybe keeping it updated using Arduino, as I explained here).
The interface was kept intentionally simple: a label with the actual state and a button to switch relay on/off:
Tip for webmasters: with the following META tag you can adapt your webpage to the smartphone‘s display:
You can download two static example pages from Github.
The sketch for Arduino draws on my previous examples; I changed the lines that prepare and send the HTML page:
The source code is as usual available on Github.
[youtube id=”hf5GkqW7xs8″ width=”600″ height=”350″]