adding HTML code in Arduino Code

Projects General Guidance
1

Hi all,

I'm using ethernet shield with arduino UNO. I have a question concerning the html code for the webpage. I've made a webpage using Microsoft front page .. but when i copy it's html code into the arduino, it doesn't work. So is there any rules or different syntax i should use to use the front page code into the arudino.

My page includes a picture, title, two interactive buttons. One button should take me to a page where i get readings from a zigbee to the arduino. The other button should take me to a page where i can change some settings in my system. I also need to know what should i change in the interactive button code in order to read the click.

This is the front page code :

<html>
<body onload="FP_preloadImgs(/*url*/'buttonD.jpg',/*url*/'buttonE.jpg',/*url*/'button10.jpg',/*url*/'button11.jpg')">

<table border="0" width="100%">
	<tr>
		<td width="324">
		<img border="0" src="home%20automation%20logo.png" width="315" height="106"></td>
		<td>&nbsp; <font color="#01369A" face="Calibri" size="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		Welcome to your Home Automation Page</font></td>
	</tr>
	<tr>
		<td width="324">
		<p align="center">
		<img border="0" id="img1" src="buttonC.jpg" height="63" width="191" alt="Get Readings" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonD.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonC.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonE.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonD.jpg')" fp-style="fp-btn: Embossed Tab 1; fp-font-size: 14" fp-title="Get Readings"></p>
		<p align="center"><a href="change_settings.htm">
		<img border="0" id="img2" src="buttonF.jpg" height="63" width="191" alt="Change Settings" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button10.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'buttonF.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button11.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button10.jpg')" fp-style="fp-btn: Embossed Tab 1; fp-font-size: 14" fp-title="Change Settings"></a></td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<img border="0" src="home%20page.jpg" width="713" height="532"> </td>
	</tr>
</table>

</body>

</html>
2

What do you mean by

the page doesn't work.

Do you see the page at all, is the page just displaying incorrectly etc etc
Give us a clue :wink:

3

the page loads but it does not display any of the buttons or pictures in the code :slight_smile:

is there anyway i can open linked webpages other than putting them on SD card ?

4

is there anyway i can open linked webpages other than putting them on SD card ?

Kinda depends on what web server code you are using. I wrote my own web server and it supports pictures and linked files e.g. stylesheets, but my code doesn't work with the Ethernet shield it works with a external WiFi module.

What library are you using for your web server?

5

I'm editing in the arduino's example of webserver.

Ok, maybe i'm a little bit confused.

Now i splitted my project into two parts. A code that Get readings from the Zigbee and prints them on a webpage. Another code that Change settings using text boxes and send them to the Zigbee.

Each code is working properly alone. All what i want to do now is to combine them together as in open a home page with two buttons. A "Get readings" button if clicked implements the first code. A "change settings" button that implements the second code.

I have no idea how to do this?

6

I have no idea how to do this?

Is that a question or a statement?

You probably need to start with understanding what the client is asking the server to provide, and making sure you respond appropriately.

When a page contains (links to) other files, the client needs to request each of those files separately. If you provide the same response to every request, its no wonder the displayed data is incorrect.