HTML with MCU's?

Hello,

I have always wondered how HTML ties in with PIC32 MCU's. I never really bothered to look into this until I came across this you tube video:

http://www.youtube.com/watch?v=0h0ATUdXq8o

If you go to the 7:00/19:56 location of the video, you will see as to why I am confused. You can watch the whole video if you like so you can get better acquainted with the idea of what he is doing. But at location 7:00, he talks about how he does HTML with front page and makes it appear on the screen of his smart phone ?????

I am confused... how can he do that!

questions:

1) How does HTML mix with front page?
2) How does he load the front page program onto his smart phone?
3) Can this be done with an iPhone as opposed to a smart phone with android?
4) At 2:26 of the video, how is he able to view on his smart phone the IP address of the small MCU's web server board???
4) I guess, data can be sent from our smart phone to the internet provider and from there the data comes into our home through our high speed modem. Now,,,, to get this data from the high speed modem to an MCU.... I don't quite understand it. Would the output of the high speed modem connect to the MCU ??? Can the MCU act as an Ethernet connection???

A little discouraged!


All feedback is very appreciated as I really don't know much about this stuff.

thanks all!

r

rougie said:

I am confused... how can he do that!

questions:

1) How does HTML mix with front page?
2) How does he load the front page program onto his smart phone?
3) Can this be done with an iPhone as opposed to a smart phone with android?
4) At 2:26 of the video, how is he able to view on his smart phone the IP address of the small MCU's web server board???
4) I guess, data can be sent from our smart phone to the internet provider and from there the data comes into our home through our high speed modem. Now,,,, to get this data from the high speed modem to an MCU.... I don't quite understand it. Would the output of the high speed modem connect to the MCU ??? Can the MCU act as an Ethernet connection???

r

Click to expand...

This PIC32 board with Ethernet has several demo programs. See the TCP/IP for a web-server app.

http://www.microchip.com/stellent/idcplg?IdcService=SS_GET_PAGE&nodeId=2615&dDocName=en545713

http://www.microchip.com/stellent/idcplg?IdcService=SS_GET_PAGE&nodeId=2680&dDocName=en537041

Abstract Welcome to the first in a series of Microchip?s web seminars on building embedded web applications. We?ll be discussing the HTTP2 web server module included with Microchip's free TCP/IP Stack, and more specifically, how you can use Dynamic Variables to present data from your system to a web browser.

Click to expand...

http://www.microchip.com/stellent/idcplg?IdcService=SS_GET_PAGE&nodeId=2813&dDocName=en543032

rougie said:

1) How does HTML mix with front page?
2) How does he load the front page program onto his smart phone?
3) Can this be done with an iPhone as opposed to a smart phone with android?
4) At 2:26 of the video, how is he able to view on his smart phone the IP address of the small MCU's web server board???
4) I guess, data can be sent from our smart phone to the internet provider and from there the data comes into our home through our high speed modem. Now,,,, to get this data from the high speed modem to an MCU.... I don't quite understand it. Would the output of the high speed modem connect to the MCU ??? Can the MCU act as an Ethernet connection???

Click to expand...

1) Front Page is essentially an HTML editor. HTML code is a text file. It is the text files (or HTML text generated directly) that is being sent.

2) Possibly, but seldom would that be necessary.

3) In principle, yes.

4) Your computer can tell you the IP address of whoever it received packets from because that information is in the packet header. If nothing else, it needs that information so that it can respond to the packet, if necessary, even to acknowledge that the packet was received.

5) As long as the PIC is part of a system that supports Ethernet connectivity, sure. I don't know if any PICs support the PHY directly, but there are tiny, cheap modules that do that you could interface to the PIC.

Hello WBahn,

This is so nice of you to explain these things. I really appreciate you taking the time to reply to my questions.

If I may confirm one thing:

>1) Front Page is essentially an HTML editor. HTML code is a text file. It is the >text files (or HTML text generated directly) that is being sent.

So is he uploading the HTML code file to his smart phone and then running it?


Sincere regards,
r

How can I possibly know that?

When you visit my website, the webserver does nothing more than take the files you request (done by your browser when you click a link) and sends them to you without modification. But that's because all of the files on my site are static pages. When you visit most pages on AAC, it almost certainly results in a bunch of database queries with the resulting data being manipulated on and acted on and then the HTML code generated on the fly and transmitted to you. There can also be processing that is done on the receiving end. How much is done by whom depends on how the applications are structured and written.

Many embedded webservers have more-or-less static webpages with a handful of dynamic variables that they use to make on the spot modifications to the HTML text as it is streamed out.

No, what I am trying to ask is we both clearly saw the page with the 3 buttons on it as he made it on his PC with front page right? Well, then that same page with the 3 buttons, how did he get it to display on the smart phone?

In case I am not following, I apologize.

regards

I haven't looked at the video since I only have a slow satellite connection. How did you view the video? You probably displayed it in a web browser, right? How are you viewing the AAC page you are looking at now? You are probably displaying it in a web browser, right? How do people look at websites using their smart phones? They display them in web browsers? How is he displaying the pages being shown on the smart phone? He is probably using a web browser.

aoooh! you mean to say that with a smart phone he accessed his web page that he created on his PC with Front page. Is it that simple???

So it really has nothing to do with the phone!!! and here I was under the impression that I had to load the file onto the phone and bla bla bla .....

If my above assumption is correct, I sincerely thank you for your help!

Regards
Rob

Yes, it is that simple. It's just like using your smart phone to place an order on Amazon. You visit the webpage and click some buttons. The computers at Amazon then get that information and handle billing your credit card and making your order get shipped to you. Here you would use your smart phone to visit the webpage served by the PIC and click some buttons and the PIC then gets the information it needs to do what you've told it to do. As far as the phone is concerned, it is just another webpage.

jeeeze! i thought is was much more complicated then that.

>Here you would use your smart phone to visit the webpage served by the PIC and click some buttons

One thing though, my pic sees this web page also right? and if so, how does my pic know that a button click has occurred on the web page?

r

rougie said:

jeeeze! i thought is was much more complicated then that.

>Here you would use your smart phone to visit the webpage served by the PIC and click some buttons

One thing though, my pic sees this web page also right? and if so, how does my pic know that a button click has occurred on the web page?

r

Click to expand...

Your PIC doesn't 'see' the web page, it IS the web page! Or, more correctly, the PIC is running a webserver and that web page is one of the pages (possibly the ONLY page) it serves. An embedded webserver is a very small, tight piece of code; there just isn't all that much to it, when all is said and done. That doesn't mean it is trivial to write your own, but you wouldn't do that. You would just use the free one that comes with the free Ethernet protocol stack you would download from MicroChip.

Hi WBahn,

okay! so let's see if I get this... I will be using some terms here... so feel free to correct me if I am wrong...

Basically I use Mikroelektronika which is a company that produces compilers and kits which work with PIC32 MCUs. Having said this, I am currently using a kit from Mikroelektronika which provides the option of using Ethernet with the PIC32. You can view the schematic on P. 38 and 39 of the following document:

http://www.mikroe.com/eng/downloads/get/1221/pic32mx7_mmb_manual_v101.pdf

There isn't really anything to read on pages 38 and 39 since they are only pictures and schematics in reference to the web server chip connected to the RJ45 connector and the PIC32 MCU. Mikroelektronika provides an Ethernet library as follows:

=========================================
Ethernet_Init
Ethernet_SetPHYInit
Ethernet_Set_Default_PHY
Ethernet_Enable
Ethernet_Disable
Ethernet_doPacket
Ethernet_putByte
Ethernet_putBytes
Ethernet_putString
Ethernet_putConstString
Ethernet_putConstBytes
Ethernet_getByte
Ethernet_getBytes
Ethernet_UserTCP
Ethernet_UserUDP
Ethernet_getIpAddress
Ethernet_getGwIpAddress
Ethernet_getDnsIpAddress
Ethernet_getIpMask
Ethernet_confNetwork
Ethernet_arpResolve
Ethernet_sendUDP
Ethernet_dnsResolve
Ethernet_initDHCP
Ethernet_doDHCPLeaseTime
Ethernet_renewDHCP
==========================================

In the very short demo (C code) Mikroelektronika provides, they say this:
=====================================
* Description:
Simple Ethernet Demo. Open 192.168.20.60 address in the web browser,
press red buttons displayed on the TFT Touch Panel and see them toggled
on the opened web page.

This code shows how to use the Spi_Ethernet mini library :
- the board will reply to ARP & ICMP echo requests
- the board will reply to UDP requests on any port :
- returns the request in upper char with a header made of remote host IP & port number

- the board will reply to HTTP requests on port 80, GET method with pathnames :
- / will return the HTML main page.
- /s will return board status as text string.
- /t0 ... /t7 will toggle buttons and return HTML main page.

// And the sample code goes like this:
=========================================

#include "Ethernet_Demo_objects.h"
extern void InitPHYPins();
extern char myMacAddr[6];
extern char myIpAddr[4];

void main() {
Start_TP();
InitPHYPins();
Ethernet_Init(myMacAddr, myIpAddr, _ETHERNET_AUTO_NEGOTIATION & _ETHERNET_DEFAULT_MAC);

while (1) {
Check_TP();
Ethernet_doPacket();
}

}
========================================


Based on the information I showed above,

"Your PIC doesn't 'see' the web page, it IS the web page! Or, more correctly, the PIC is running a web server and that web page is one of the pages (possibly the ONLY page) it serves. An embedded web server is a very small, tight piece of code;"

Obviously the Pic really can't contain a web page, I assume in reality as you pointed out, the pic communicates with a web server chip .. in my case is the LAN8720A which comprises a basic web page.... right?.

So let me recap all of this.... what you are saying is, since the web server chip (LAN8720A) communicates with my MCU and it is connected to an Ethernet network by an RJ45 cable, I would simply go to my PC or a smart phone, open a web browser, and type: 192.168.20.60 into the address bar, and the web page stored in my web server chip (LAN8720A) would show up.

Once I press a button on the web page, this will prompt a transfer of data from the web page down the protocol stack within the web server chip and then it is up to me to use the Ethernet library functions provided by Mikroelektronika to fetch the information and use it to do something in my MCU.

Am I getting this WBahn?

So I guess that knowing the following points is an important part of my personal study:

1) How to ping a network node
2) What is a URL
3) What is an IP address
4) What is a DNS server
5) What is a DNS address

Please do get back WBahn... I can't thank you enough for you collaboration to this thread!

regards
robert

rougie said:

1) How to ping a network node
2) What is a URL
3) What is an IP address
4) What is a DNS server
5) What is a DNS address

Click to expand...

I don't mean to be unhelpful but certainly all of these are well explained on the web.

I had used to Pic32 to create a DHCP enabled webserver, basically all the HTML files were preloaded onto an SD Card that were served up by the PIC32 .... all the code and libraries are provided by Microchip to do all this..... By making it DHCP enabled, the pic will automatically get an IP assigned to it when connected to a router/modem from the DNS servers.... then you can use this IP to access the webpages on the PIC from anywhere in the world (as long as you have internet connection).

And you use the standard POST and GET HTML methods to "write" something to the webpage, or "read" from the webpage.

>I don't mean to be unhelpful but certainly all of these are well explained on the >web.

Yes MrChips.... But I have spent most of my time doing C language with simple things like port access, for loops, while loops, array of structs,... ect... The world of Internet/networking is relatively new to me... So I am just making sure!

Hi BMorse,

> I had used to Pic32 to create a DHCP enabled webserver, basically all the HTML files were preloaded onto an SD Card that were served up by the PIC32 ....

Yes but I am using Mikroelektronika's kit, so your explanation has to be in reference to this kit or else I won't understand what you are trying to tell me.

>all the code and libraries are provided by Microchip to do all this.....
Unfortunately, I am using MKE's Ethernet libraries...

>By making it DHCP enabled, the pic will automatically get an IP assigned to it when connected to a router/modem from the DNS servers.... then you can use this IP to access the webpages on the PIC from anywhere in the world (as long as you have internet connection).

This is something I would try once I fully understand my small MKE code sample !!!
Sorry you lost me.

rougie said:

>I don't mean to be unhelpful but certainly all of these are well explained on the >web.

Yes MrChips.... But I have spent most of my time doing C language with simple things like port access, for loops, while loops, array of structs,... ect... The world of Internet/networking is relatively new to me... So I am just making sure!

Hi BMorse,

> I had used to Pic32 to create a DHCP enabled webserver, basically all the HTML files were preloaded onto an SD Card that were served up by the PIC32 ....

Yes but I am using Mikroelektronika's kit, so your explanation has to be in reference to this kit or else I won't understand what you are trying to tell me.

>all the code and libraries are provided by Microchip to do all this.....
Unfortunately, I am using MKE's Ethernet libraries...

>By making it DHCP enabled, the pic will automatically get an IP assigned to it when connected to a router/modem from the DNS servers.... then you can use this IP to access the webpages on the PIC from anywhere in the world (as long as you have internet connection).

This is something I would try once I fully understand my small MKE code sample !!!
Sorry you lost me.

Click to expand...

I guess you will be better off posting questions on MKE's forum.....

rougie said:

Hi WBahn,

okay! so let's see if I get this... I will be using some terms here... so feel free to correct me if I am wrong...

Basically I use Mikroelektronika....

Am I getting this WBahn?

Click to expand...

We are now firmly back in the "how should I know?" mode. I know nothing about Mikroelektronika and their products, tools, or API and I have no desire or intention of spending the time to learn. Having said that, and with that in mind, what you said seems reasonable. The list of thing you gave that you need to learn seems reasonable, as well. Good luck!

thanks WBahn...

Your help was very useful...

best regards

rougie said:

Obviously the Pic really can't contain a web page,

Click to expand...

Sure it can. Perhaps not in the completely literal sense of the web page being stored entirely on the PIC micro, though even that could be done literally for a single web page, or a number of small web pages (would only be restricted by the limits of the micro's built in storage capacities). It would be more likely that the web pages get stored on an SD card tied to the PIC micro so it can load and transmit the pages requested over it's ethernet connection.

rougie said:

the pic communicates with a web server chip

Click to expand...

Never really heard of a 'web server chip'. I suppose somebody out there may provide a dedicated web server on a chip, but that is most likely either a microcontroller or microprocessor running a dedicated web server application (they could even very well use a PIC micro to do so as well).

The LAN8720A is just an ethernet adapter. It gives the device the ability to transmit and receiver data over a network, but that by no means makes it a web server. A web server is a higher level concept that defines HOW data is transmitted and received. The LAN9720A just gives the web server the ability to transmit that data. The 'web server' is an application running on a given micro/computer. Look at the Apache web server or Microsoft's IIS web server. Both of those are applications/services that can be installed and run on any computer (assuming a compatible operating system) and is then capable of hosting/serving web pages.

Hello jRaskell,

"The LAN8720A is just an ethernet adapter. It gives the device the ability to transmit and receiver data over a network, but that by no means makes it a web server. A web server is a higher level concept that defines HOW data is transmitted and received."

Understood! I thought it was in the LAN8720A .... ooops!

"The 'web server' is an application running on a given micro/computer"

This is where I get lost. Everyone says that a web page is created with MS Front page and then it is converted to a HTML file which gets published onto a server. Then guests from the Internet can access this web page via the Ethernet adapter provided it is connected to a network. However the guy in the video did the same thing but with an MCU... right? But he did mention HTML and MS Front Page if I recall correctly...??? Let me explain myself here....

Having said the above, I have a PIC32, connected to an Ethernet adapter which connects to my network. The Ethernet library demo that comes with my kit comprises the code for the web page along with all the functions necessary to access the web page... hence I guess this is what you mean when you say that a small web page can reside in the MCU. Given the correct IP address anyone around the world can put this address in the Internet browser's address bar and then access the web page in the MCU... right?

So where does HTML/Front page tie into all this????
Is HTML somewhere in my MCU???? if so it must be in the Ethernet library which makes no sense because my compiler compiles only C language and not HTML???

Confused!

R