HTML and PIC communication

[Ioannis]

I am trying to understand how can a PIC communicate to an HTML page for displaying and receive data.

Say that on the HTML page there is a text box to enter a value and a button to send this value to PIC.

Also a value from the PIC is to be send and displayed on the HTML page.

Anyone done this?

I attach the test HTML code I have done so far that displays buttons and input text boxes but have no clue how to use that.

Ioannis

Attachment 8878

[pedja089]

First you need TCPIP communication.
You can go with ethernet phy on pic eg PIC18F87j60. Any pic with external phy eg ENC28j60, and implement TCPIP on pic.
Or go with w5500 with integrated TCPIP. Or go fuli integrated like some of microchip RN wifi modules, esp8266, or go with GSM/EDGE solution, with full TCPIP https etc...
When you sort that, then it's easy. Like little more complicated serial port.
Simplest would be using some modem with fully integrated IP application.
I could give you more specific answer, but I need more details.

[Art]

It obviously isn’t PBP, but Microchip has an evaluation board and sample code that does exactly what you describe.
It was later expanded by hobbyists to include Chan’s SD card library to host a web page, which is where I started on it,
and made some demos, one of which could control a garage door with a smart phone, or other internet connected device.
Not something I’d trust to use practically, but it worked.

The code was a bit flaky, and didn’t work at all with some routers I’ve owned over the years, which is why I didn’t do much with it.

[sayzer]

Google for ESP8266 wifi module.
There are many sample codes for posting button command to PIC with values from textbox.

Then PIC responds back to the visitor.

[towlerg]

I agree with sayzer, wifi is definatly the easiest way to go.

[Ioannis]

Thanks for the replies. The phy layer is not difficult and either with cable or wireless will be OK. Even better a GSM modem (which is my final goal) as pedja089 pointed.

My concern is on the html part and how to complete the communication. These examples I'm after right now.

ESP examples is I guess a good starting point.

Ioannis

[richard]

i think you need to add php or java to your repertoire .
i went python , that does the whole lot in one go and be a/the server too . none of the options are easy or painless

[Ioannis]

I really hoped could get away with just html for now. Besides there are not much needed on such a project.

Just receive and send some data, mostly numeric to set parameters on the PIC side and ON/OFF buttons to set or reset something.

A simple html page might be enough for this.

Can PBP handle all the TCP parameters and stack on a, say 18F87j60 chip? Or the ENC28J60 chip?

I am a bit worry about it.

Ioannis

[richard]

in this day and age it would seem a retrograde step to need a wired interface . those nodemcu esp8266 things are so cheap , heaps of pins to i/f to pic.
i have been using raspberrypi's as a go between. next project i will look again at the esp offerings. i had a go with the esp-01 but found them unreliable and subject to lockups , surely they have improved

[Ioannis]

Agreed Ricahrd.

But right now the physical layer is not my main concern. There are many options either wired or wireless (though I prefer wire for many reasons and all my devices are static IP, wired connected except my phone which has sometimes problems(!)).

I have to succeed first communication of the PIC with the html page and the rest will follow.

For example what is the html syntax to update a specific field in a specific page (if there are more than one)? Such things

Ioannis

[richard]

you should be able to store/retrieve/edit data in an xml file with html ,i'm not sure how though its the blind leading the blind ,i'm watching with great interest
afaik html has no native access to any physical comms layers , i/o is a client server type arrangement using put/get post etc.
access to a tcpip socket needs java or similar

where are all the perl php java experts when you need one

[Ioannis]

Once I had a device (GSM remote controller) that was communicating to the PC via a RS-232 cable. On the PC side there was a small bridge program that opened the RS232 and a page in a browser.

Then a connection was established to the device and a simple text page with buttons, input boxes and radio buttons was loaded from the device.

All seemed just plain html. No java anything else was needed to load or use. And fast enough.

I attach 3 screenshots of that interface which is represents exactly what I want to make.

Ioannis

[richard]

i guessing you don't have the source code . do you know what code language/s were used.
python does that sort of thing fairly easily , it can do serial/ tcp sockets or just about anything else
sql included

[mpgmike]

Microsoft has a forum dedicated to all things Visual Studio (Visual Basic in my case). I don't know if you're using VS but here is the link to the forum. Perhaps you can find answers there:

https://social.msdn.microsoft.com/Fo...orum=vbgeneral

[Ioannis]

No code available. The MCU it had was something like NXP LPC series.

Ioannis

[towlerg]

I don't think ESP was suggested because it saved wires rather that it was so easy to talk to a Pic device.

Have a kook at this site https://randomnerdtutorials.com it's Arduino but so is pretty much everything these days.

For example https://randomnerdtutorials.com/esp3...ather-station/ or ESP8266 Multisensor Shield with Node-RED

There are several web site that do exactly what what you want, never used them myself. Goggle IOT (internet of things)

[mark_s]

B4X has a nice program "Basic for Java" or B4J to do desktop apps and it is free. I use the android version, very much like Visual Studio, object oriented.

https://www.b4x.com/b4j.html

[Ioannis]

Here is an interesting html tag:

<meta http-equiv="Refresh" Content="3">

that forces the browser to reload the page every 3 seconds.

Makes the variables update kind of automated.

The problem still is how to update that variable in the first place. Maybe the absolute way is to go for JAVA servlets or similar approach (a bit steep for me right now).

Ioannis

[Amoque]

I think what you may be looking for is HTML forms.

<FORM></FORM> tags define the boundaries and allow the definition of a method of transferring element content as a delimited list from inside an HTML document. The [Apply Changes] button (in your example above) is a [SUBMIT] button with a custom caption. To write values (default or otherwise) the "VALUE" property of the control is given a value. Here is an example (you may cut and paste this into Notepad, name with an .HTML extension, and open in a web browser:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">      'The value "Mickey" will appear as default text when the control is loaded. the "sent" value would be firstname&Mickey;[next name&value pair]; etc.
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Apply Changes">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>


This is from https://www.w3schools.com/html/html_forms.asp - a competent tutorial, free and concise. It even allows you to test your code in a WYSIWYG environment. Quite nice.

Other types of controls can return numerical values, true or false values, coordinates from image maps...
Of course, this example is for the internet and a remote server, on a MCU, you might generate and evaluate your "page" in subroutines, transferring the created file/s back and fourth to a browser by wifi, serial link, or other other means.



HTH -
Amoque

[Ioannis]

Hi Amoque.

Well, this is the general idea, but is not yet clear how this action will be performed on the PIC instead of a server.

Ioannis

[Amoque]

Yes, I'm sorry that it is not so easy, from there.

I think it may be necessary to visit forums for programming - depending on your operating system. The crux of your issue is the "bridge" program - it seems that it will be necessary to catch incoming serial data, then send it to an internal router address and port. It's quite easy to point your browser at an internal port, but how to route the serial... beyond me.

Years ago I was a VB programmer and we had specific tools for capturing Com Port I/O and, likely there were/are similar internet gateway tools now. Unfortunately they aren't included in PB3.0. ;-)

[Amoque]

You know... Putty may be an answer.

This: looks promising.

[Ioannis]

Thank for the info.

Such a simple thing, too complicated to implement...

Ioannis

[Amoque]

This might have possibilities: https://chrome.google.com/webstore/d...kmbjnmlo?hl=en

[mark_s]

Did a google search for "html serial port communication" . There are aurduino examples.

https://www.google.com/search?ei=Ca-...iz.jgdazA1-eMw

[Ioannis]

Well, from the above, interested are the Node-webkit and Involt.

An Arduino is supposed to communicate with a web page through RS232 or Bluetooth.

Tried that emulating a serial device on COM3 (a terminal really) and Involt on COM2 but no joy yet...

I added these lines in the app.html file

<div class="ard show A0"></div>
<button class="ard button P5 value-123">Click me</button>
<input type="text" class="ard involt-input S0" placeholder="test">

that should display the analog value and return something to "Arduino" but either side is not responding.

Ioannis

[Ioannis]

Update:

Managed communication on 57600 baud.

My app.html file looks like this:

<!doctype html>
<html lang="en">
<head>
	<title>Involt</title>
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
	<script src="core/jquery/jquery-2.1.0.min.js"></script>
	<script src="core/jquery/jquery.nouislider.min.js"></script>
	<script src="core/jquery/jquery.knob.js"></script>
	<script src="core/jquery/insQ.min.js"></script>
	<script src="settings.js"></script>
	<script src="core/bridge.js"></script>
	<script src="core/framework.js"></script>
	<link rel="stylesheet" type="text/css" href="css/framework.css">


</head>

<body>
	

	<!--This is the homepage of your App. Put your Layout Here
	
	<div id="involtThankYou">Thank you for choosing Involt.</div>   -->


<p>  

<p> <body>
	<div class="ard show A0"></div>  <!--Show analog on page-->
	<div class="ard toggle P3 value-0">toggle</div>    <!--Send toggle P3V0/1-->
	<button class="ard button P5 value-0">Send</button>    <!--Send value of text box to RS232-->
	<input type="text" class="ard involt-input S0" placeholder="test"> <!--Text box-->
</body>

</html>

and displays the "analog value" sent by "arduino"

then a toggle button that toggles a value sent to "arduino"

and finally A Send button that send the content of the text box that follows.

Ioannis

[Amoque]

That, my friend, is awesome!

I have an aquarium controller project (2.0) that is paused for just such an interface - my interest was not altogether altruistic. Please elaborate on "Involt" is this a third party from somewhere, a hobby web site... Link? How do you address your browser?

[Ioannis]

Post #25, Mark (thank you!) posted a link and I found this in the link:

https://www.instructables.com/id/How...g-HTML-Chrome/

From that the Involt and the rest came up. Free and open source but limited as it seems. Also only RS232. Would be nice to offer USB also.

Ioannis

[pedja089]

First, I didn't read all post. But from what i did, you got on wrong way... You have whole PC in middle. If you want that write simple server in vb .net(there is a lot examples) and use USB example from forum.
This shouldn't take much of time, maybe week or two if you don't have any knowledge in VB .net.

If you want GPRS modem start with that. As it will be shortest and easiest way to get to final goal. I were few years ago in same place as you were. And it was overwhelming. But since then I menage to get PIC with eth phy on it working to serve page, get FTP client on pic with modem, use HTTP POST/GET, etc...

If your goal is GPRS control and monitoring then you need:
1. Server to host page that user can access, log in, view and set parameters
2. You need GSM/GPRS modem that has IP application on it, or at least TCPIP.
Your workflow should be:
1. Find server
2. Get it working, eg host simple .txt file on it
3. Chose protocol over which you get that file to PIC. Eg HTTP GET or FTP(you have user/pass). You have GPRS modem with FTP client/server on it. I used TCPIP stack, and implement FTP client in PBP.
4. Send file on server(quickest way is HTTP POST), easiest is FTP as it doesn't request nothing custom on server side.
5. Get file from server, parse it and do what ever.
6. Make front end html page that will show your values from files, and save values.
Other much more complicated way is to get fixed IP on your modem, run server on modem, host everything on PIC. Biggest problem is getting public fixed IP on GPRS.

[Ioannis]

Thanks pedja089.

Although I got up to that point that I post, I had that feeling it was not in the right direction.

But, after your post, seems higher then Everest...!

Fixed IP on GPRS is not available at least in my country, so a dedicated server is needed in every case. This is a problem to solve. What the server will be, what software etc.

The main thing that I want is to have a PIC board connected to a PC and configure it through a web browser, using text boxes, radio buttons or check boxes. Maybe sliders too for analog values. This should work either way (meaning PIC show values on screen).

If that works, then this connection alternatively could then be a GPRS modem to configure from far away.

All that you posted seems logical but hard to implement right now.

Thanks for your directions.
Ioannis

[pedja089]

That is almost two totally separate things.
One is configuration over PC, other is over web.
Because it uses two totally different physical layer and probably different protocols.
If you use GPRS modem, then all lower protocols are taken away from you, which is really good thing.
Same is if you use PBP USB stack.
So separate that into two independent things.

For PC<>Pic simplest is serial over usb, then HID usb.
You can use external USB<>Serial, or implement CDC in PIC. But you need PID and VID, you can get it for free from microchip. But if you want your VID it may cost up to 5000$/year. I use simple USB<>ttl serial FTDI cable.
You need application for that on PC. This application can be what ever you like, but it need installation. It can be server on local host, so you can do things from browser.
As most user arent familiar with networking(firewalls, ports etc), it is much easier to make stand alone .exe, so they can just double click on it, and run it.
Look on app can be exactly same as on web page.

Other thing is modem. I suggest to get some dev board for desired modem, connect to serial port, and start typing commands in some terminal program.
Here is example of accessing FTP from simcom modem
http://dostmuhammad.com/blog/ftp-file-download-sim900/
Also you probably want to use flow control on modem, so you can pause receiving file while you process received part.
If you decide to try server for free
https://www.000webhost.com/
Only downside is you can't access it 2 every 24.


PS
Public fixed IP on GPRS aren't available anywhere in world as far as I know.

EDIT:
To test post/get etc I use https://httpbin.org/#/HTTP_Methods/patch_patch
And when you already have server, don't be afraid of PHP, JavaScript, Ajax etc... As they can change just part of page, without reloading whole page. And that refresh tag someone posted, can be rely annoying, because you start typing into txt box, and it refresh, so you type faster, but then try to set value, and another refresh... Isn't rely useful for input.

[pedja089]

Double post

[Amoque]

So it appears that the MCU [Arduino] maintains an array, sending and receiving elements serially. It looks as though the PC portion is worked out (other than the USB). I'm guessing here, but is it converting the Arduino library to PBPro that is the "sticky wicket"? "Managed 57600" seems to indicate you can RX/TX, but haven't yet developed/ duplicated management functions from the library.

Keep us posted, please, of progress and opportunities to help.

Thanks!

[mark_s]

Post #25, Mark (thank you!) posted a link and I found this in the link:

https://www.instructables.com/id/How...g-HTML-Chrome/

From that the Involt and the rest came up. Free and open source but limited as it seems. Also only RS232. Would be nice to offer USB also.

Ioannis

That's great. Maybe you could use a USB to RS232 bridge IC or module like the FT232 to go USB?

[Ioannis]

Yes, it is a solution the USB bridge. But needs a setup from the end user to set this on a specific com port.

But pedja089 described the correct route for such project.

Ioannis

[pedja089]

Your device can send specific string to port. Then list all ports at start, and search port with specific data.

[pedja089]

Here is script that I made for user on another forum

    <html>
    <body>
    <?php
    echo "POST Vars: <br/>";
    print_r ($_POST);
    echo "<br/>GET Vars: <br/>";
    print_r ($_GET);

    $myfile = fopen("1.txt", "w") or die("Unable to open file!");

    $txt = "POST Vars: \r\n";
    fwrite($myfile, $txt);

    $txt = print_r ($_POST, TRUE);
    fwrite($myfile, $txt);

    $txt = "\r\n GET Vars: \r\n";
    fwrite($myfile, $txt);

    $txt = print_r ($_GET, TRUE);
    fwrite($myfile, $txt);

    fclose($myfile);

    ?>
    </body>
    </html>

It will log to file any variable name and value and display it on page, sent by POST or GET method.

[Ioannis]

Thanks for the post, but is it correct? Does not seem to "load" on a browser.

Ioannis

[pedja089]

It contains PHP. It isn't pure HTML.
So script need to be hosted on server.
You can use free server for testing.
eg: www.000webhost.com
This isn't ad, just sharing one that worked for me.
Try to create acc. And host script in some file with .php extension. eg script.php
Then you put in your browser address bar: https://blablabla.000webhostapp.com/....php?x=a&y=133
If you don't manage to do that, I could create some mail, and acc and setup script. Just to get it working.