Webserver and WebSocket

Tutorials & Guides
Post Reply
User avatar
Pako
Plugin Developer
Posts: 2292
Joined: Sat Nov 11, 2006 1:31 pm
Location: Czech Republic
Contact:

Webserver and WebSocket

Post by Pako » Mon May 16, 2016 10:50 am

Here in the forum often come questions about the Webserver and WebSocket.
I prepared a simple program and HTML page as an example application.
It includes a "Virtual house" program and the "Virtual house" plugin.
Installation:
1.) You will need a Webserver plugin version 3.12.1 or later. Version 3.12.1 is available for download here. File __init__.py should be placed in a folder EventGhost\plugins\Webserver
2.) Extract the contents of the file WS_DEMO.zip
3.) Folder VirtualHouse contains VirtualHouse.exe program. It can be placed (for example) in C:\Users\<USER>\AppData\Local
4.) Folder EventGhost contains WebserverWebSocketDemo.xml file and two subfolders. In the subfolder plugins, VirtualHouse plugin are located. Subfolder VirtualHouse (including content) move to folder EventGhost\plugins. Folder www-WSdemo could be anywhere.
5.) Using the program EventGhost open the file WebserverWebSocketDemo.xml
6.) In the setting VirtualHouse plugin type the path to the file VirtualHouse.exe
7.) In the setting Webserver plugin type the path to the folder www-WSdemo (as HTML documents root). You can also change the port, if using 8080 already on your computer.
8.) Open your web browser and in the address line, enter localhost:8080 (or another port if you have changed it).
Now should appear Web forms for Virtual house and Persistent variables demo. If program VirtualHouse.exe is not running, house icon should be gray. Click on it!

Now, if everything works, you can learn how it's done.
Especially javascript part (in the index.html file) is important.
Also, I recommend opening a javascript console in your browser.

Pako
Attachments
WS_DEMO.zip
(5.91 MiB) Downloaded 241 times
You know flattr ? You can Image

allalone747
Experienced User
Posts: 81
Joined: Sun May 03, 2015 2:17 pm

Re: Webserver and WebSocket

Post by allalone747 » Sun May 22, 2016 6:51 am

Hi there Pako
Thank you for your tutorial , just brilliant , although I am a novice and no skill or knowledge in script I have to thank you for making the time to also do tutorial .
I hope tha this will be pickup by more forum members , we need your help ,
Thanks a lot
Cheers

mbonaccors
Posts: 13
Joined: Thu Apr 26, 2012 2:46 am

Re: Webserver and WebSocket

Post by mbonaccors » Fri Sep 09, 2016 4:59 pm

Pako this is fantastic - I modified it and have been using the websocket piece as the basis for realtime communication back and forth between EventGhost and the Website on mobile. I am using an iPhone with iOS, but with the new iOS 10 that was launched, the websocket connection doesn't work anymore! I can't figure out what's happening - now when I access the site it keeps an endless cycle of Connecting and then Disconnecting from the websocket. I cannot figure out what to modify to stop this from happening, and why iOS 10 is breaking things. It is not browser specific either, I have tried both Safari, and Chrome on the iPhone and still having this issue. If I downgrade to iOS 9 it works perfectly, but with the new phones launching next week this will no longer be an option.

Let me know if it is useful to share with you the JS. Code, but I haven't really modified anything you had made in the demo.

krambriw
Plugin Developer
Posts: 2570
Joined: Sat Jun 30, 2007 2:51 pm
Location: Stockholm, Sweden
Contact:

Re: Webserver and WebSocket

Post by krambriw » Fri Sep 09, 2016 9:22 pm

Better donate the new iPhone that you are mentioning to Pako so that he can test ;)
Why share something he already has...

m19brandon
Experienced User
Posts: 177
Joined: Mon Feb 03, 2014 10:36 pm

Re: Webserver and WebSocket

Post by m19brandon » Wed Sep 28, 2016 3:49 am

My wife just upgraded to ios 10 and now she has no tv home remote. :)

It's returning 1006 on WebSocket connection, so its browser/iOS related. I need to debug some more but there is no real dev console it's going to be fun.

Pako's Tornado Webserver with WS still works on ios 10.

If I figure it out this week, I will post the details.

m19brandon
Experienced User
Posts: 177
Joined: Mon Feb 03, 2014 10:36 pm

Re: Webserver and WebSocket

Post by m19brandon » Wed Sep 28, 2016 3:54 am

Should have tried this first but google found that Apple their content security policy :(
http://stackoverflow.com/questions/3949 ... patibility
https://github.com/meteor/meteor/issues/7772
m19brandon wrote:My wife just upgraded to ios 10 and now she has no tv home remote. :)

It's returning 1006 on WebSocket connection, so its browser/iOS related. I need to debug some more but there is no real dev console it's going to be fun.

Pako's Tornado Webserver with WS still works on ios 10.

If I figure it out this week, I will post the details.

mbonaccors
Posts: 13
Joined: Thu Apr 26, 2012 2:46 am

Re: Webserver and WebSocket

Post by mbonaccors » Wed Oct 19, 2016 2:01 pm

What I like about the websocket interface is that I can send events back and forth and also pull variable values form the server into the web interface.

Where is the Tornado Webserver? I can't find this plugin but would love to experiment with it. I also tried looking through the code links about security line, but not sure exactly where to put that in (I put it in my header on my index.html but it didn't fix anything).

Any additional info that anyone finds would be super helpful! Right now my WebApp interface is completely not working :-/

m19brandon
Experienced User
Posts: 177
Joined: Mon Feb 03, 2014 10:36 pm

Re: Webserver and WebSocket

Post by m19brandon » Thu Oct 20, 2016 12:50 am

I can't get the tornado Webserver working on EG 5.

Websockets are much easier to managed than long polling.

User avatar
kgschlosser
Site Admin
Posts: 3917
Joined: Fri Jun 05, 2015 5:43 am
Location: Rocky Mountains, Colorado USA

Re: Webserver and WebSocket

Post by kgschlosser » Thu Oct 20, 2016 2:02 am

Tornado is an included package. I don't know if there is an explicit plugin. But you can use the package from a Python script or you can make a plugin.
If you like the work I have been doing then feel free to Image

piert
Experienced User
Posts: 271
Joined: Tue Jun 14, 2011 2:53 pm

Re: Webserver and WebSocket

Post by piert » Wed Jul 04, 2018 11:16 am

I would like to start improving my webserver, which I set-up a long time ago, with only text-based hyperlinks to trigger actions and without any feedback.
I would like to start using icons/buttons and preferably with feedback/variables.

This thread is quite old and seems to have ended with a question mark.

What is the best approach to start with this? Who has go something like this working with the current version of Eventghost (I know there was a nice tutorial by Palo for this, but it was based on older version of Eventghost)?

Thanks for any pointers/examples,

Perry

User avatar
yokel22
Experienced User
Posts: 229
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city

Re: Webserver and WebSocket

Post by yokel22 » Fri Jul 06, 2018 2:18 pm

This one is for building out a websocket UI with the WX framework. This is the UI that EG uses natively. What I think your wanting is a Web based UI with hyperlinks. There's a websocket demo here for doing that. viewtopic.php?f=13&t=9487

User avatar
kgschlosser
Site Admin
Posts: 3917
Joined: Fri Jun 05, 2015 5:43 am
Location: Rocky Mountains, Colorado USA

Re: Webserver and WebSocket

Post by kgschlosser » Fri Jul 06, 2018 4:31 pm

@ yokel22

I great example of how to utilize feedback based connections with EG would be your Axial Control plugin. You have sliders. and buttons. it's a whole menu system basically. And it's nice looking too. it's very clean. If I had more experience with jquery, css and html it would be something that I would use as a base idea for making a Web Server Menu plugin. You have most of the core controls already made. Make up template files for each of the various controls. add in the ability to change colors and sizing/position of the elements. maybe a drag and drop interface for the elements. and have the plugin assemble the templates and write the web server end of things. have actions where the user would be able to select an element to update and either have it change the code real time or update variables in the web server plugin.

It's a really cool idea. and I have not seen a plugin like it. And I would bet it would end up being one of the most downloaded plugins. I know I would use it. You did a fantastic job with creating the Axial Control web interface. It is really simple to use. and it has a mobile variant as well!
If you like the work I have been doing then feel free to Image

User avatar
yokel22
Experienced User
Posts: 229
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city

Re: Webserver and WebSocket

Post by yokel22 » Fri Jul 06, 2018 5:19 pm

I've thought about making such a plugin. It would be pretty generic in the controls to ensure things would scale nicely on any screen. Mainly grid rows & list items like the AxialControl is setup & the virtual remote in the screen. The WebUI demo does a better job explaining how to use the functions than the Axial. This is a screen of the demo page, it has a lot more web elements to choose from than the Axial page also.

While it may not be super user friendly & does require basic knowledge of HTML & CSS. It is much more customizable than what i could offer in a standalone plugin. Only thing you really need to know(& i'll make a note of this is that thread) about JQuery mobile is how it handles pages. All web pages are housed in one html file. Pages are separated by giving them a data-role tag of page(data-role="page" id="music"), then you link them like so href='#music'.
Attachments
virRemote.jpg
demo_screen.jpg

User avatar
kgschlosser
Site Admin
Posts: 3917
Joined: Fri Jun 05, 2015 5:43 am
Location: Rocky Mountains, Colorado USA

Re: Webserver and WebSocket

Post by kgschlosser » Sat Jul 07, 2018 12:04 am

I have done some poking about css and responsive design and how sizing is done between mobile devices and tablets as well as desktop. One of the things i noticed is that the use of absolute sizing is use a whole lot. it will scale an item only at specific browser size increments. for use in a plugin for EG I would think it would be beneficial to keep it relative except for the use in any sort of a dropdown menu.

I know when using wxPython there are methods like GetTextExtent which would tell you what width and height of a string of text is when using a specific font. and based on that the font can be scaled so that the text would fit in a specified area. a low limit could be set on the size and at that point it would break it into 2 lines at a space. can something like this be done using css or jquery?

or can a dynamic page be made so that a socket connection to the plugin from the webpage be made to grab the UI elements to be created? so this way maybe the things that cannot be calculated using jquery/css/html can be done in python instead?
If you like the work I have been doing then feel free to Image

Post Reply