Page 1 of 1

Webserver and WebSocket

Posted: Mon May 16, 2016 10:50 am
by Pako
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

Re: Webserver and WebSocket

Posted: Sun May 22, 2016 6:51 am
by allalone747
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

Re: Webserver and WebSocket

Posted: Fri Sep 09, 2016 4:59 pm
by mbonaccors
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.

Re: Webserver and WebSocket

Posted: Fri Sep 09, 2016 9:22 pm
by krambriw
Better donate the new iPhone that you are mentioning to Pako so that he can test ;)
Why share something he already has...

Re: Webserver and WebSocket

Posted: Wed Sep 28, 2016 3:49 am
by m19brandon
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.

Re: Webserver and WebSocket

Posted: Wed Sep 28, 2016 3:54 am
by m19brandon
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.

Re: Webserver and WebSocket

Posted: Wed Oct 19, 2016 2:01 pm
by mbonaccors
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 :-/

Re: Webserver and WebSocket

Posted: Thu Oct 20, 2016 12:50 am
by m19brandon
I can't get the tornado Webserver working on EG 5.

Websockets are much easier to managed than long polling.

Re: Webserver and WebSocket

Posted: Thu Oct 20, 2016 2:02 am
by kgschlosser
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.

Re: Webserver and WebSocket

Posted: Wed Jul 04, 2018 11:16 am
by piert
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

Re: Webserver and WebSocket

Posted: Fri Jul 06, 2018 2:18 pm
by yokel22
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

Re: Webserver and WebSocket

Posted: Fri Jul 06, 2018 4:31 pm
by kgschlosser
@ 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!

Re: Webserver and WebSocket

Posted: Fri Jul 06, 2018 5:19 pm
by yokel22
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'.

Re: Webserver and WebSocket

Posted: Sat Jul 07, 2018 12:04 am
by kgschlosser
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?