ARDUINO‎ > ‎PROJECTS‎ > ‎

An integrated webpage with image

 About: Setting up a webpage with an image on the Arduino Ethernet Shield without using al the SRAM.
 Start date: 20/03/2011
 Last changed: 27/09/2012

INDEX




All YOU NEED TO KNOW ABOUT THIS PROJECT


When you start making a small web page on your Arduino with the Ethernet Shield, you have the option to store the page on an SD-card. But it could very well be that you don't want to do that. So while putting your HTML code into the Sketch, you'll find your self running out of SRAM very quickly. In this example I'll show you how to use the minimum of SRAM (mostly 2048 bytes) and using the Flash memory (mostly 32 Kb) for the HTML and your images.

Here you'll have a very simply page using an image and HTML code within the sketch. The image has been transformed to base64 code, so that it can be included into the sketch.

The trick we'll use, is the use of array's and pointers and using a buffer. This way we get small amounts of what's in the Flash memory into SRAM and back out. We divide every part into 8 pieces (yes also for the image). So for an 800 bytes image, we only need a buffer of 101 bytes, because we feed the buffer 8 times with another piece of the image. This way we don't need 800 bytes of SRAM for showing an image.


HARDWARE REQUIRED


  • Arduino Board
  • Arduino Ethernet Shield
  • a network
  • a computer with webbrowser


SCREENSHOTS





LINKS


The Arduino Ethernet Library: http://www.arduino.cc/en/Reference/Ethernet
The Arduino Webserver Tutorial: http://arduino.cc/en/Tutorial/WebServer
A website for encoding an image to base64: http://www.base64-image.de/

CHANGELOG


WebImage1.0: first release
WebImage2.0: better coding
WebImage2.1: Solved dns problem. Now you can use Arduino IDE 1.0.3


FILES TO DOWNLOAD



ċ
WebImage1_0.zip
View Download
  11k v. 1 7 Jan 2013 05:59 Joeri Gantois
ċ
WebImage2_0.zip
View Download
  11k v. 1 7 Jan 2013 06:00 Joeri Gantois
ċ
WebImage2_1.zip
View Download
  11k v. 1 10 Jan 2013 01:08 Joeri Gantois