Tornado (webserver with WebSocket)

[leothlon]

Enjoying this plugin greatly. I have a nice remote for my family room built using it with lots of jquery for css stuff. Works great on my two Androids and PCs but my main phone is an iPhone and iPhones like to disconnect the Wifi when locked. This is javascripting problem versus the plugin and was looking for some pointers. How can I correctly close the websocket connection when the screen locks. Right now I have refresh the page when I unlock the device to use the page again. T

Hi.
Unfortunatly i can't help you with your question.
But i have recently started building my own web-based remote for my home automation and was i was woundering if you might be willing to share abit more about your setup? maby a screenshot or so.
i know abut if jquery and css but it would be nice to get ideas and such.

I'll post my setup and screenshot when i get home.

[leothlon]

Here is my current setup.
Howerver i am realy bad at webdesign and such. i used a wysiwyg editor to put the icons on top of a background image (the general gui) it looks good in 10" android tablet but not to good elswhere.



i put the data-action on my lamp icons so i get the event in EG correctly, but now i need some help.
I am looking to with EG broadcast information like for example:

lampHallway

then with jquery do a refresh on the html item with id=lamphallway (i will have boolean variables for each lamp, then i have the lamp icons named trueLamp.png and falseLamp.png, and in the html code use {{eg.globals.hallwaylamp}})
and then some function to send currently playing and system volume and such.

i was thinking like "sysVol=20" and i would then know that html item id sysVol should get a value of 20%.

Can anyone help me with this or is there a better way to do it?
i am having abit of problem understanding from the musicbee examples :/

[m19brandon]

I have attached my html and java. It takes me forever to write HTML/JS but jquery make it is super simple and there are looks of video and examples.

I am currently only using the fmr.html page which is a one page quick remote for my family room TV. I use hidden divs and jquery css controls to change the page around based on broadcasted values from EventGhost, it work nicely, even if a few devices each have the page up.




If you look at Pako's scripts.js (my is Pako's with a few extra ELSE IFs at the end) and the RenewValues function, you can add a new else if key == lampHallway then statement (mine is faimly_status) followed by some jquery css actions.

Code: Select all

else if (key == 'family_status'){
                if (value == 'off') {
					fmr_remove_active_btn();				
					
					$(id).hide();
					$('#family_quick_remote_music').hide();
					$('#family_quick_remote_tv').hide();
					$('#family_footer_vol').hide();
					}
				else if (value == 'pc') {
					fmr_remove_active_btn();				

					$('#family_set_pc').addClass("ui-btn-active");

Im working on new quick remote page for Spotify like Pako's MusicBee but it will be far less featured rich.

The TV, AV Receiver and Cable Box are controlled by a GlobalCache ip2ir unit and my HTPC also runs EventGhost and the main EventGhost box and HTPC send messages through Tornado to each other. You are welcome to all my EventGhost xml if you want.

[m19brandon]

With the Send Event to Another Eventghost server can I added a payload? I do not see it in the py either.

Thanks,

[leothlon]

anyone mind telling me why this wont work?

Code: Select all

$(".dimmable")
       // .html(orig_message)  // Remove this line
        .on("mousedown", function (e) {
            console.log("#########mousedown"); 
            var ids = this.id;
            var $this = $(this);
            console.log(ids);
            $('#'+ids).data("checkdown", setTimeout(function () {
                console.log('inne');
                $('.slid').remove();   
                var val = document.getElementById(ids).getAttribute('value');
                console.log(val);
                $( "body" ).append('<div class="slid" id="' + ids + '_slider" style="width:40px; height:200px;"></div>');
                e.preventDefault();
                $('#'+ids + '_slider').css( 'position', 'absolute' );
                $('#'+ids + '_slider').css( 'top', e.pageY-200 );
                $('#'+ids + '_slider').css( 'left', e.pageX-5 );
                $('#'+ids + '_slider').show();
                console.log('2');
                $('#'+ids + '_slider').slider({
                    orientation: "vertical",
                    range: "min",
                    min: 0,
                    max: 100,
                    value: val,
                    step: 5,
                    slide: function( event, ui ) {
                        //$('#'+ids).html(ui.value);
                        console.log('slide');
                    },
                    change: function(event, ui){
                        console.log('change');
                        $('#'+ids).attr('value', ui.value);
                        //$('#'+ids+'_slider').remove();                     
                    }       
                });               
            }, mousepress_time));
        }).on("mouseup", function () {
            clearTimeout($(this).data("checkdown"));                      
        }).on("mouseout", function () {
            clearTimeout($(this).data("checkdown"));
        }).on("click", function () {
            //clearTimeout($(this).data("checkdown"));
        });

Code: Select all

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.9.2.js"></script>
<script src="js/script-and-config.js"></script>

<img src="images/FalseLamp.png" class="dimmable" value="50" data-action="lights.AllOff" id="LampAllOff" alt="" style="width:147px;height:147px;">

here is a jsfiddle i made that have what i want: http://jsfiddle.net/leothlon/hsP46/2/

The thing i want to do is click on a lampimage and i get the event in eg, hold down on a lamp image and a slider appears letting me send eg a dim value.
Running it with google developer tools i can see that i get the div created, and in the right spot, i get the "console.log('2');" output. but i cant see the slider :/

help please! i don't know how to fix it!

[m19brandon]

This is appending a slider to the page but it is adding the slider outside my main div, so I can see it either. I tried moving the append from the body to my button's div and it shows up but not like in Fiddle. Sorry.

[leothlon]

i "almost" got it working now, but a question... can i send payloads with tornado? if so how?

if not, then how can i take event "Lights.LampHallway.100" and "Lights.LampHallway.0" and use the last suffix (100 / 0) and set it in a persistent variable?

prefferably i wanna do when event "lights*" variable suffix1 = suffix2
so lights.LampHallway.0 would set variable LampHallway to 0 and so on...

[m19brandon]

I changed the base code a little but Pako's code three or four examples. The code is my version passes a payload if the $(this) object (a button) has a value from the data-action. The value is than passed into the wsSend command or if no value was found, just an event would be sent.

When you get your dynamic slider working can you share, I am wanting it now .

Code: Select all

    $("*[data-action]").bind('click', function(){
        var action = $(this).attr("data-action");
        var href = $(this).attr("href");
        var cnvsent = $(this);
        var cmd = new Object({'method' :'TriggerEvent'});
        if (action.indexOf('.') > 0){
            cmd['kwargs'] = {'prefix':action.split('.')[0]};
            cmd['args'] = [action.split('.').slice(1).join('.')];
        }
        else {cmd['args'] = [action];}
        // send message. this will trigger an event in eventghost
		var value = $(this).val();
		if (value != 'null'){
			wsSend({'args':[$(this).attr('id'), value],'kwargs':{'prefix':'HTTP'},'method' :'TriggerEvent'});
		}
		else{
			wsSend(cmd);
		}
    });

[leothlon]

Here is my webgui Note that it's a work in proggress so there is alot of code commented out (i keep it incase i need to compare and stuff).
Also i had to remove the images, zip was to big to upload otherwise. if you want i can zip them and upload somewhere els.
To add dimmable support (slider) it'd just to add class="dimmable".
clicking a dimmable will work as normal (if lamp light over 0 it will turn off, if lamp off it will turn on by sending 0 and 100 in payload)
as for non-dimmable switches and for example tv i use 0 and 100 as "binnary"

currently i am not changing the icon right away because i was planning on setting eg to "broadcast all values" and then depending on what is recieved it changes icon. that way it should update all devices viewing the page and not just on the one the action was made. also if an icon didn't update it will update next time an action is sent nomather what action it is.
if a value comes in that's not numeric it will instead set the id to the text (for updating artis and track) and so on.

note that variable name in eg should match id to update in page!

Code: Select all

<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-ui-1.9.2.custom.js"></script>

Made me able to use the slider.

i then had to find "jquery.ui.touch-punch.js" in order to make the slider work for touchscreen.

my next step will be setting upp all actions in eventghost. then to get file size on images down so loading page is abit faster

[m19brandon]

Thanks, I like the idea of the slider on images. Lights are my next project and this will be useful.

I have eg broadcasting values for my family room remote, which hides and change divs around based on what we are watching or using. Works great with 3 users trying change the channel and raise the volume, everyone is in sync. The only problem is iOS devices close their connection to the server when the screen locks but I will figure that out soon.

[V_J]

I'm having problems installing the Tornado plugin...

I unzipped the Tornado.zip (0.1) in the plugins folder: there is now the __init__.py file and a subfolder (which holds another Tornado folder with a number of files. I think I'm still missing something: Eventghost freezes when I try to add the plugin to the configuration tree... any thoughts?
(eventghost 0.4.1r1640 on Win 7 pro x64)
edit: I tried with a fresh configuration tree, no other plugins were loaded.
Thanks!

J├Ârg

[Pako]

Use the command line argument -debug when running EventGhost.
You get a debug log file, which is saved under C:\Users\<Name>\AppData\Roaming\EventGhost. Give it here.

Pako

[V_J]

It works now...
My mistake: I run EventGhost in a layer in Symantec Workspace Virtualization, and it did not have proper access to the Tornado files (theoretically it should have, but something apparently did not work as it should). I added the Tornado files to the same layer, and now the plugin loads. Haven't tested it yet (will be for this evening), but everything so far appears fine.

edit: just to confirm, it seems to work nicely (haven't installed MusicBee, but events get triggered). Now to try and get it to work with WinAmp, which means learning more on how the whole WebSocket thing works (but this is IMO not the thread for that).

[sfalkman]

I keep getting 304 (Not modified) responses from the server, even though I have modified the file I'm requesting. I tried disabling/enabling the plugin, but still got 304 - I need to restart EG to make the server send a 200 response with the new content. I modified web.py by removing line 742-744 and the server started sending 200 responses.

I didn't have any more time to look into it.. Anyone else experiencing this?

[Pako]

I keep getting 304 (Not modified) responses from the server, even though I have modified the file I'm requesting. I tried disabling/enabling the plugin, but still got 304 - I need to restart EG to make the server send a 200 response with the new content. I modified web.py by removing line 742-744 and the server started sending 200 responses.
I didn't have any more time to look into it.. Anyone else experiencing this?

I can say nothing about it. I have never met with it.
You can attach an html document with which you have this problem?

BTW: I just released a new version 0.2.
There is only added support for WebP image format.

Pako