Hi all,
I am trying to start a WEB server with graphical objects stored into SD card.
Web server works fine, SD card initialized and jpg file opened (return 0) but what is the way to jpg file in html code?
img src=file.jpg not working
Thanks!
ENC28J60 WEBserver and FAT SD card
Moderator: Benj
-
- Posts: 36
- Joined: Mon Dec 22, 2014 10:04 pm
- Location: TALLINN
- Has thanked: 5 times
- Been thanked: 2 times
- Contact:
Re: ENC28J60 WEBserver and FAT SD card
Could any help?
How I can make in HTML code link to picture stored in SD card?
How I can make in HTML code link to picture stored in SD card?
- Benj
- Matrix Staff
- Posts: 15312
- Joined: Mon Oct 16, 2006 10:48 am
- Location: Matrix TS Ltd
- Has thanked: 4803 times
- Been thanked: 4314 times
- Contact:
Re: ENC28J60 WEBserver and FAT SD card
Hello,
I believe a html web server works like this.
First the client requests the webpage html code using a GET command.
The HTML code may contain a reference to an image but first all the HTML code is transferred to the client.
The client then requests all the associated files referenced in the HTML e.g. the image file using more GET commands.
So you basically have to look out for the GET command and then action the get request by going to the right directory on the SD card, opening the file specified and then streaming back the contents of the file.
I believe a html web server works like this.
First the client requests the webpage html code using a GET command.
Code: Select all
GET index.htm
Code: Select all
<img src="pics/image.jpg" />
Code: Select all
GET pics/image.jpg
Regards Ben Rowland - MatrixTSL
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
-
- Posts: 36
- Joined: Mon Dec 22, 2014 10:04 pm
- Location: TALLINN
- Has thanked: 5 times
- Been thanked: 2 times
- Contact:
Re: ENC28J60 WEBserver and FAT SD card
But what is the right directory?Benj wrote:So you basically have to look out for the GET command and then action the get request by going to the right directory on the SD card, opening the file specified and then streaming back the contents of the file.Code: Select all
GET pics/image.jpg
For example, in Windows Android phone sd card directory is F:/, but the same directory in Android is /SDCARD/
In this case, index.htm file is saved in pic internal memory, and pictures saved in external memory (sd card)
Attached example is edited example from Wiki
Thanks!
- Attachments
-
- ENC28J60_Example4.fcfx
- (26.53 KiB) Downloaded 302 times
- Benj
- Matrix Staff
- Posts: 15312
- Joined: Mon Oct 16, 2006 10:48 am
- Location: Matrix TS Ltd
- Has thanked: 4803 times
- Been thanked: 4314 times
- Contact:
Re: ENC28J60 WEBserver and FAT SD card
I would do it so that everything is saved on the SD card HTML files and all. This is how a webserver works. I've been meaning to generate something like this for a while.
The actual directory doesn't matter as long as the files and folders can be fetched from that directory.
For example I would create a folder on the SD card say called website and in here I would place all the various files.
On a PC this would look like this. "F:/Website/Index.htm"
On an Android phone it might look like this. "/SDCARD/Website/Index.htm"
The GET request would probably look like this. GET index.htm and it's the webserver that knows which folder the files live in.
For simplicity remember to keep your filenames to within the 8.3 simple filename format or you'll run into issues of not being able to find the files you need.
This article may be useful. http://www.matrixtsl.com/article.php?a=672
The actual directory doesn't matter as long as the files and folders can be fetched from that directory.
For example I would create a folder on the SD card say called website and in here I would place all the various files.
On a PC this would look like this. "F:/Website/Index.htm"
On an Android phone it might look like this. "/SDCARD/Website/Index.htm"
The GET request would probably look like this. GET index.htm and it's the webserver that knows which folder the files live in.
For simplicity remember to keep your filenames to within the 8.3 simple filename format or you'll run into issues of not being able to find the files you need.
This article may be useful. http://www.matrixtsl.com/article.php?a=672
Regards Ben Rowland - MatrixTSL
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
-
- Posts: 36
- Joined: Mon Dec 22, 2014 10:04 pm
- Location: TALLINN
- Has thanked: 5 times
- Been thanked: 2 times
- Contact:
Re: ENC28J60 WEBserver and FAT SD card
Thanks, I try to check it.
But next problem for me, if I make index.htm and put it into SD card, how I can insert values of variables from pic flowchart to index.htm text? For example "System voltage = 24,52 Volts", where 20,52 is value of variable.
But next problem for me, if I make index.htm and put it into SD card, how I can insert values of variables from pic flowchart to index.htm text? For example "System voltage = 24,52 Volts", where 20,52 is value of variable.
- Benj
- Matrix Staff
- Posts: 15312
- Joined: Mon Oct 16, 2006 10:48 am
- Location: Matrix TS Ltd
- Has thanked: 4803 times
- Been thanked: 4314 times
- Contact:
Re: ENC28J60 WEBserver and FAT SD card
Good question. The way we do this in the current webserver examples is to use the % character.
The code that is taking bytes from the FAT file and sending them to the comms network should be on the lookout for the '%' character. If it finds it then the character after the symbol will be the index of the variable to send out.
If you actually need to send a % symbol in the HTML then put two next to each other in the HTML code %%.
The code that is taking bytes from the FAT file and sending them to the comms network should be on the lookout for the '%' character. If it finds it then the character after the symbol will be the index of the variable to send out.
If you actually need to send a % symbol in the HTML then put two next to each other in the HTML code %%.
Code: Select all
byte = ReadByteFromFile
if (byte = '%')
{
byte2 = ReadByteFromFile
if (byte2 = '0')
{
str = ToString$(Var0)
CommsSendString (str)
}
if (byte2 = '1')
{
str = ToString$(Var1)
CommsSendString (str)
}
if (byte2 = '%')
{
CommsSendByte ('%')
}
}
else
{
CommsSendByte (byte)
}
Regards Ben Rowland - MatrixTSL
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel
Flowcode Product Page - Flowcode Help Wiki - Flowcode Examples - Flowcode Blog - Flowcode Course - My YouTube Channel