Host Engineering Forum

General Category => Do-more CPUs and Do-more Designer Software => Do-more Programming Examples => Topic started by: plcnut on May 01, 2013, 08:08:04 AM

Title: Example: WebServing from DoMore
Post by: plcnut on May 01, 2013, 08:08:04 AM
This is a small example to help someone who wants to set up a server on a DoMore.
Please feel free to critique the program and post back.
To run the program, simply download and open with DMD, and load the program onto the simulator. Turn on X0 on the simulator. Use a web browser and enter: http:// xxx.xxx.xxx.xxx:8080 (replace x's with your computers ip address), or simply type: localhost:8080

This is a little way of giving back a small portion of what has been given to me on these forums.

Regards, Jason W

EDIT: See the program posted below \/
Title: Re: Example: WebServing from DoMore
Post by: plcnut on May 01, 2013, 08:15:13 AM
If you are a FireFox user then the webpages will not display properly (unless you set the port to 80).
Google chrome seems to work fine.

If anyone has any advice on what needs changed to make FireFox display html on a port other than 80 then please let me know.
Title: Re: Example: WebServing from DoMore
Post by: plcnut on August 30, 2013, 11:04:34 AM
If anyone has any advice on what needs changed to make FireFox display html on a port other than 80 then please let me know.

As a follow-up:
The DoMore is not able to send the proper response header for HTML.
Most web browsers will automatically parse a page as HTML when it comes over port 80 even without the proper header because it is the standard HTTP port.
So, the options are:
1) Use Chrome for the browser.
2) Set up a Reverse Proxy on a local server (contact me for details)
3) Use port 80, and only allow one connection at a time.
Title: Re: Example: WebServing from DoMore
Post by: BobO on August 30, 2013, 11:28:03 AM
If anyone has any advice on what needs changed to make FireFox display html on a port other than 80 then please let me know.

As a follow-up:
The DoMore is not able to send the proper response header for HTML.
Most web browsers will automatically parse a page as HTML when it comes over port 80 even without the proper header because it is the standard HTTP port.
So, the options are:
1) Use Chrome for the browser.
2) Set up a Reverse Proxy on a local server (contact me for details)
3) Use port 80, and only allow one connection at a time.

What is required that we aren't able to do?
Title: Re: Example: WebServing from DoMore
Post by: plcnut on August 30, 2013, 11:40:13 AM
Here is a screenshot of a DoMore response header, and a google.com response header, side by side.
Web browsers (since HTML5 I believe) have stopped using meta tags to determine the content-type, and now use the "Content-Type" variable of the Response header.
Title: Re: Example: WebServing from DoMore
Post by: BobO on August 30, 2013, 02:48:41 PM
Right...but aren't you the one providing the content? Do-more isn't doing any of that anyway, and should be able to output anything you give it. What am I missing?
Title: Re: Example: WebServing from DoMore
Post by: plcnut on August 30, 2013, 03:21:39 PM
I have no control over the "Response Header". DoMore issues a "HTTP/0.9 200 OK" each time it STREAMs. I can only edit the "Content" of the STREAM.
I can edit these headers when I configure WAMP server, or IIS in windows, but it appears DoMore is using a generic response.
I don't know how that works from your end, but if you want to view the headers, you can get an extension for firefox called "Live HTTP headers 0.17" so you can view them.
I would really like to be able to edit the headers some how, but I figured it was asking an awful lot from you guys, because I don't know that many would use it.

...I don't know enough to be able to dissect where the header is located in the packet using wireshark, but I did find this page that may help: http://wiki.wireshark.org/HowToDissectAnything
Title: Re: Example: WebServing from DoMore
Post by: BobO on August 30, 2013, 03:42:55 PM
That isn't Do-more, at least not my code. It is possible that the IP stack is doing something without my consent, but I would have thought all stream content was coming from your code only. If it is coming from the stack, it needs to be fixed.
Title: Re: Example: WebServing from DoMore
Post by: plcnut on November 03, 2015, 05:27:50 PM
I just went back and looked over some of this code and scared myself that I would post such a thing!
I made a couple of changes so that now it may actually work without tweaking...
Title: Re: Example: WebServing from DoMore
Post by: plcnut on July 01, 2016, 10:48:47 AM
I just deployed a new application using the Do-more webserver as the sole HMI. I was forced to use another port besides 80 (HTTP) and finally learned how to make a browser render the html on a non-http port. Simply add this string to the very beginning of the STRPRINT for the WebPagePrefix:
Code: [Select]
HTTP/1.0 200 OK$0D$0AContent-type: text/html$0D$0A$0D$0A

This is the actual Response header. Each line of the header must be separated by the CRLF, and the header is ended with 2 CRLF's.
Enjoy!
Title: Re: Example: WebServing from DoMore
Post by: franji1 on July 01, 2016, 11:12:43 AM
I just deployed a new application using the Do-more webserver as the sole HMI.

SWEET!  Could you post a sample screen shot of your browser/HMI?
Title: Re: Example: WebServing from DoMore
Post by: plcnut on July 01, 2016, 11:50:31 AM
This is a very simple application that monitors the pressure of a water system. There is not much to see, but here is a screenshot of the home screen:
(https://forum.hosteng.com/proxy.php?request=http%3A%2F%2Fi761.photobucket.com%2Falbums%2Fxx256%2Fplcnut%2FPLCs%2FHomePage_zpszngywy9d.png&hash=da17e2be5093cd5b83804e94b7c0b505530bf4d8) (http://s761.photobucket.com/user/plcnut/media/PLCs/HomePage_zpszngywy9d.png.html)
And one of the single settings screen:
(https://forum.hosteng.com/proxy.php?request=http%3A%2F%2Fi761.photobucket.com%2Falbums%2Fxx256%2Fplcnut%2FPLCs%2FSettingsPage_zps7uxulxef.png&hash=51e2ffb4284b9c324a5f0acbb76709e31355b8f7) (http://s761.photobucket.com/user/plcnut/media/PLCs/SettingsPage_zps7uxulxef.png.html)

The system logs the lowest pressure reading as well as the date and time every second. The database holds 20,000 lines and can be downloaded as a .csv file using the link on the home page. It will also send out an email to one of our private email servers whenever the pressure drops below our alarm threshold.
Title: Re: Example: WebServing from DoMore
Post by: HB_GUY on January 05, 2017, 03:49:16 AM
Awesome stuff!
I used this to make a simple dashboard for one of my systems in Northern California!
I also have this DoMore sending daily telemetry to my WebServer for billing purposes.

Great work plcnut, and the whole HostEng team for making such a great product!
Title: Re: Example: WebServing from DoMore
Post by: plcnut on January 05, 2017, 04:22:35 AM
Cool beans!
I'm glad you were able to put the code to use. I have made several new developments with this project including adding in the header information to a csv file so that the downloader in Firefox can display the percent completed, as well as serving up the actual favicon directly from the Do-more. I have not had any play time for quite a while, and so I have not posted any of the code for doing this...
Title: Re: Example: WebServing from DoMore
Post by: henke on January 26, 2017, 09:58:40 PM
This is a very simple application that monitors the pressure of a water system. There is not much to see, but here is a screenshot of the home screen:
And one of the single settings screen:

@plcnut: VERY cool! Fantastic work. Thanks for sharing that. I can't get the settings page to work yet but it's a thrill to just have the PLC serve values to a web browser.
Works great browsing via my phone on that same network too!
Title: Re: Example: WebServing from DoMore
Post by: plcnut on January 27, 2017, 12:44:58 PM
I am very glad that some of you guys have been able to make use of the code. I have invested quite a bit of time in developing this code further, but have not taken the time to document the details of saving the settings, and working with buttons and indicators for an actual HMI. I wish I had the time to go through my programs and put all the info on here, but the code is full of proprietary content, and cannot be put on here without me taking the time to generify it.

I am happy to attempt to answer questions though.
Title: Re: Example: WebServing from DoMore
Post by: plcnut on January 27, 2017, 12:51:13 PM
Also, Do-more can even serve up a favicon (The little icon that is found in the corner of your browser tab, like the blue H that is on this page). It takes some creative manipulation to get it into a string structure, but it does work ;D
Title: Re: Example: WebServing from DoMore
Post by: Bolt on December 01, 2017, 03:51:46 PM
I'm not seeing any links or downloads of the example program?
Title: Re: Example: WebServing from DoMore
Post by: plcnut on December 01, 2017, 04:03:46 PM
It is attached to reply number 8.
Title: Re: Example: WebServing from DoMore
Post by: Bolt on December 04, 2017, 05:31:38 PM
Thanks.  I read the entire post before signing up the forum, and scanned back through it to make sure I wasn't missing anything members only.  Guess I need to work on my scanning skills...

I got it to work, but right now for me the concept needs more programming time than I have to devote to it.

Thank you for posting though!
Title: Re: Example: WebServing from DoMore
Post by: Bolt on January 01, 2018, 01:30:10 PM
Alright, I'm back to working on this and have my page structured as I would like.  I could just use a little help with a button.  How can I get a button to perform an action on the PLC, preferably without changing pages?  Something simple like a oneshot bit toggle.
Title: Re: Example: WebServing from DoMore
Post by: Bolt on January 04, 2018, 06:11:58 PM
Could you help me out with how you structured the "save new setting" button pictured in your screenshot?

As of now I have only been able to build a button, which is linked via
Code: [Select]
<a href = $"1$">, then can use the STR2INT command to find this number 1, and use it to trigger a coil on the PLC.  Then I added some info to the head of the html document
Code: [Select]
<meta http-equiv=$"refresh$" content=$"3;URL='http://" DST18:UB3 "." DST18:UB2 "." DST18:UB1 "." DST18:UB0 ":8080/0'$"> to force the browser to wait 3 seconds and then navigate away from the "command".  Needless to say, it's not as clean as I would like.

Did you use an HTML form and a submit input button, and if so, what's the behind the scene "command" going to the PLC?  Such a scenario requires the web server to process the info, and that's where I am getting lost.
Title: Re: Example: WebServing from DoMore
Post by: plcnut on January 04, 2018, 06:29:54 PM
I hope to have some time soon to be able to help you out.
Title: Re: Example: WebServing from DoMore
Post by: plcnut on January 05, 2018, 08:44:16 PM
Here is a much more advanced version of the WebServer that includes many other features:
-serves a sample favicon.
-has pages that automatically update variables using javascript (without reloading the whole page).
-These pages also have a timer that will re-direct the page after so many minutes of inactivity.
-There is a sample that builds the headers and then builds and streams out a csv file.
-There is a sample that will allow you to save or delete from a list of email addresses (that are formatted to work with the EMAIL instructions).
-There are several link and button samples.

I have devoted considerable time learning and developing this code. There are MANY things that could be done better, but this is where it is currently at.

I hope this will answer many of the questions that people have when building these types of apps.
Title: Re: Example: WebServing from DoMore
Post by: plcnut on January 05, 2018, 08:45:29 PM
If you find neat tricks or add features, please contribute back for myself and others to learn as well :)
Title: Re: Example: WebServing from DoMore
Post by: Mike Nash on January 05, 2018, 09:09:09 PM
Wow, this is pretty neat. Thanks for sharing!
Title: Re: Example: WebServing from DoMore
Post by: Bolt on January 06, 2018, 07:12:13 PM
This is great stuff!

One thing I did on my first attempt at a web interface was add <meta name=$"viewport$" content=$"width=device-width, initial-scale=1.0$"> to the WebPagePrefix, it makes it easier to load on a phones and other small devices, changes the default zoom width or something.