Web server + android tablet

Questions and comments specific to a particular plugin should go here.

Web server + android tablet

Postby sebnil » Mon Jul 18, 2011 5:12 am

A while ago I started working on a web gui for eventghost. I just finished a new version with better support for tablets. Then I took an old android tablet and attached it to the wall:
Image

Some screens (in Swedish):
Image
Image
Image
Image

New in this version is that the web app can be hosted on a regular web server and communicate with Eventghost via cross-domain ajax calls. Better since the web server in Evenghost is very simple and lack some functionality. By hosting on a regular server html5 caching is possible which makes it run smoother (no loading time).

More info and downloadable source code is available on my blog: http://sebastiannilsson.com/open-source/eventghost-web-gui/87-new-better-version
User avatar
sebnil
 
Posts: 8
Joined: Sun Sep 27, 2009 12:13 pm
Location: Gothenburg, Sweden

Re: Web server + android tablet

Postby Livin » Tue Jul 19, 2011 7:48 am

very nice - thx for sharing!
setup... XBMC, W7MC for DVR & Live OTA TV, JRMC for multi-zone audio, EG, MiCasaVerde Vera3, USB-UIRT IR receiver, Harmony remote, 5.2 home theater system
User avatar
Livin
Experienced User
 
Posts: 778
Joined: Wed Oct 08, 2008 4:56 am

Re: Web server + android tablet

Postby krambriw » Tue Jul 19, 2011 1:54 pm

Do you support websocket in this solution?
krambriw
Plugin Developer
 
Posts: 1401
Joined: Sat Jun 30, 2007 2:51 pm

Re: Web server + android tablet

Postby eatmeimadanish » Tue Jul 19, 2011 8:13 pm

I can not get this to work inside the Eventghost web server. It only renders the raw html data but none of the JQUERY graphics.
eatmeimadanish
Experienced User
 
Posts: 98
Joined: Thu Oct 01, 2009 5:11 pm

Re: Web server + android tablet

Postby sebnil » Wed Jul 20, 2011 6:19 am

krambriw wrote:Do you support websocket in this solution?

No. But it probably could be done.

About issues with Eventghost server. I just realized that my project requires php to render the css and js. That is why it is not working in eventghost server. Perhaps a workaround is possible but I think just running a WAMP/LAMP server is easier.
User avatar
sebnil
 
Posts: 8
Joined: Sun Sep 27, 2009 12:13 pm
Location: Gothenburg, Sweden

Re: Web server + android tablet

Postby Livin » Wed Jul 20, 2011 6:34 am

sebnil,
Awesome job! If I can ask for one feature request?

It would be great to have a page that would autogenerate based on specific text being in an Event Name or Macro name.

Macro Example...

Watch Movie [web]

-- your code would look for [web] to know it would auto generate a button for this Macro

there are some cool, more integrated, things that could be done with this but I'd be happy just to have a simple generated page.
setup... XBMC, W7MC for DVR & Live OTA TV, JRMC for multi-zone audio, EG, MiCasaVerde Vera3, USB-UIRT IR receiver, Harmony remote, 5.2 home theater system
User avatar
Livin
Experienced User
 
Posts: 778
Joined: Wed Oct 08, 2008 4:56 am

Re: Web server + android tablet

Postby eatmeimadanish » Thu Oct 13, 2011 11:11 pm

That request is a little complicated. Everytime the page would be rendered, EG would need to pass javascript html to dynamically build web pages all the time. JS does not store variables between sessions unless you are saving them to something (like an XML) and that would still be a challenge to auto generate and organize buttons.

The better solution is to create a static remote, and map buttons in EG. Changing the text in the HTML is far easier than writing some dynamic function.

HOWEVER: using global variables in EG can be used to "sneak" in HTML.

example:
eg.globals.webbutton = "<p>test html</p>"

Thus {{eg.globals.webbutton}} could be placed anywhere in the HTML and EG will render the page with the HTML contained in the variable. This is a great way for "mapping" buttons in EG. You can use the PVAR plugin (use my updated one, the original one had problems with alpha strings) to save your variable lists between sessions.

Just a thought.
eatmeimadanish
Experienced User
 
Posts: 98
Joined: Thu Oct 01, 2009 5:11 pm

Re: Web server + android tablet

Postby joels » Thu Oct 20, 2011 2:23 pm

Hello!

Neat thing you have created, just what i want. Though i have run in to some trouble... I am kind of new to EG and have never before used WAMP, AJAX, PHP and so forth. Though I am familiar with C and to some extent Python and HTML, I think I understand how stuff is connected in your GUI. Now to my problem.

EG does not record any events, nothing happens. I installed WAMP using the guide on http://www.jesterwebster.com/setting-up-a-test-bench-web-server-with-apache-php-mysql-and-more-on-windows/26. It seems to be working, when i push buttins in the GUI Apache´s "access.log" seems to be sending AJAX- reguests, for example: 127.0.0.1 - - [20/Oct/2011:15:39:47 +0200] "GET /ajax.xhr?mood.qualitytv_down&_=1319117987608 HTTP/1.1" 200 -.
I have had error-messages in Apache´s "error.log": [Thu Oct 20 13:52:15 2011] [error] [client 127.0.0.1] File does not exist: C:/websites/example/online/minifest.manifest.
I simply renamed the file "manifest.manifest" to "minifest.manifest" as i can't see where this error comes from. Perhaps anybode here has a clue?

I think my problem lies in EG. When loading you XML-file EG says: Plugin: <Unknown Plugin "DynamicWebserver"> and Error starting plugin: DynamicWebserver. I downloaded the newest version in Dynamic Webserver I could find and simply replaced it, also tried with regular Webserver.

EG Dynamic Webserver is set to port 81, WAMP to port 80. WAMP is set to localhost, so i did the same thing in config.js. In EG DW i set "HTML Documents Root" to the folder where the GUI is placed.


So to sum it up, i believe the GUI-WAMP thing is working and the problem lies in EG, what may it be?


I hope somebody out there managed to read my post and that you may have some idea about anything that can help me.

Thanks, Joel
joels
 
Posts: 4
Joined: Thu Oct 20, 2011 2:01 pm

Re: Web server + android tablet

Postby eatmeimadanish » Fri Oct 21, 2011 11:39 pm

Question: Are you testing this with a browser on the same machine, or from a device on the network.

If its on a separate device, than you need to change your serverUrl to an actual IP address. Using LOCALHOST will only work running the browser on the same machine. Plus its always a good idea anyway to put in the IP.
eatmeimadanish
Experienced User
 
Posts: 98
Joined: Thu Oct 01, 2009 5:11 pm

Re: Web server + android tablet

Postby joels » Mon Oct 24, 2011 10:19 am

Hi

It's now working, I believe i got stuff mixed up in my head, or just plainly am to new to this field. I have not done anything magic, the folder with the webpage is set correctly in EG, port is set correctly etc.

After a few days of reading I am getting some changes to work, it's so thrilling when you realise what you can do :) And learing a new language is quite exciting.

But I still don't understand what the linevar serverUrl = 'http://localhost:80/'; does, when I remove it everything still works, both on the PC with EventGhost and on my Android mobile.
The Android is connected via WiFi, same as the PC. Is the line only necessary when using WAMP to run the webpage online?

Right now I have Apache turned off, for now I´m happy with my WiFi set up, but in a while it would be really neat to be able to go "online" with everything, making it easier to access.

Thanks
Joel
joels
 
Posts: 4
Joined: Thu Oct 20, 2011 2:01 pm

Re: Web server + android tablet

Postby eatmeimadanish » Mon Oct 24, 2011 6:51 pm

serverUrl = 'http://localhost:80/

This variable is the location it uses to build the html string its invoking. All this is doing is sending Eventghost a weburl that is triggering an event. For instance, typeing http://localhost:80/?hello generates an event HTTP.HELLO in the event log of Eventghost. We are using AJAX to hide the URL string so we dont see it in the browser (sending it in the background) or require a page refresh.

The reason you want to not use localhost is because localhost is always the root machine that your are viewing the web page in, and not the target Eventghost machine. Replacing the IP address with the actual IP address of the Eventghost server will allow other browsers from other devices to generate events as well.
eatmeimadanish
Experienced User
 
Posts: 98
Joined: Thu Oct 01, 2009 5:11 pm

Re: Web server + android tablet

Postby joels » Fri Dec 16, 2011 1:57 pm

Hello again

If you comment the line var serverUrl = 'http://myip:81/';, or "localhost" as i used before, nothing changes. This variable is not useed in the file.

The ajax-commands seems to be sorting everything out themselves?

I have made som changes from the original code in this function, but it does exactly the same thing. Though I have added a test-line:

$(".myBtn").tap(function() {
var action = this.title;
$.ajax({
url: 'ajax.xhr?'+action,
cache: false
});
$.ajax({
url: 'serverUrl'+'?'+action,
cache: false
});
});

Even if i comment the declaration of serverURL, EG will receive two calls. Why is this?

I have tried to clear the webbrowser history.

//Joel
joels
 
Posts: 4
Joined: Thu Oct 20, 2011 2:01 pm

Re: Web server + android tablet

Postby eatmeimadanish » Mon Dec 19, 2011 11:06 pm

Trust me, it will work even less by commenting out the server URL string. You have to have that variable set to the IP of the host web address. I cheat and put it in the HTML page, and then mask it with a variable from EG. {{eg.globals.ipaddress}}

Then I use some scripting in EG to always determine the ip at bootup, and this resolves having to modify the HTML file.
eatmeimadanish
Experienced User
 
Posts: 98
Joined: Thu Oct 01, 2009 5:11 pm

Re: Web server + android tablet

Postby eatmeimadanish » Mon Dec 19, 2011 11:09 pm

P.S. I highlighted where you are going wrong. Also port 80 is the default web port, make sure nothing else is taking it. You can always use 8080 or 8081 to test as well.

If you comment the line var serverUrl = 'http://myip:81/';, or "localhost" as i used before, nothing changes. This variable is not useed in the file.

$(".myBtn").tap(function() {
var action = this.title;
$.ajax({
url: 'ajax.xhr?'+action,
cache: false
});
$.ajax({
url: 'serverUrl'+'?'+action,
cache: false
});
});
eatmeimadanish
Experienced User
 
Posts: 98
Joined: Thu Oct 01, 2009 5:11 pm

Re: Web server + android tablet

Postby joels » Tue Jan 03, 2012 6:30 pm

Hello again

I have been playing around a bit and it's now working. I have used a newver version of jQuery and changed some of the content in "config.js". This may be the reason nothing worked before, I am not sure.

I will try and explain what I have done. I believe it's according to how jQuery should be implemented.
The thing that fixed my problems was moving
Code: Select all
var serverUrl = 'http://myip:81';

It is now located at the top of the file as a global variable, is this bad in javascript?


Here are all (?) my modifications:
Code: Select all
$(document).ready(function() {
   $('div').live('pagecreate',function(event, ui){
      initButtons();
   });
   initButtons();
   $('.ui-btn-back').live('tap',function() {
      history.back();
      return false;
   }).live('click',function() {
      return false;
   });
});

Was changed to
Code: Select all
$('div').live('pageinit',function(){   
   initButtons();
   initEventSlider();               
});

By doing this, the function
Code: Select all
initEventSlider(nameOfSlider){

could be changed to
Code: Select all
initEventSlider(){

It can now be called directly after instead of within "initButtons()", which I think is more logical.

If I read my notes correctly the slider did not work when 'pagecreate' was used, a change to 'pageinit' was therefore done. Perhaps one explanation is here http://jquerymobile.com/test/docs/api/events.html.

Maby I missed something, but this code is obsolete (back-button works w/o it)? I found no class marked 'ui-btn-back', is this used for class-C browsers or dows jQuery fix this class-tjing by itself?
Code: Select all
$('.ui-btn-back').live('tap',function() {
   history.back();
   return false;
}).live('click',function() {
   return false;
});



In every HTML-file I also changed
Code: Select all
<a href="index.html" data-direction="reverse">Tillbaka</a>
to
Code: Select all
<a href="index.html" data-rel="back">Tillbaka</a>

I can't remember why, both ways work.


To ensure that the only thing I wanted to be buttons actually were buttons I changed
Code: Select all
$("li[title]").unbind();

to
Code: Select all
$(".myBtn").unbind();

Maby it will save loading time? This of course implies that all HTML-files have to be changed, e.g
Code: Select all
<button class="myBtn" title="spotify.power">Power</button>


Just for fun I also removed the bindings to mouse-down etc., now only taps are used. This works at least on Android, PC & iPhone.
Code: Select all
$(".myBtn").tap(function() {



The solution to, and reasons for my previous problems follows here (this may be wrong, and I am new to it, I could have used this "guide" when I started):
In EG the plugin "Dynamic Webserver" is no longer supported, though this project will not work properly with plugin "Webserver" (it does w. "Dynamic").
A WAMP server or something like that is therefore needed. To do everything properly the WAMP should host the homepage, and EG should only receive AJAX-calls. In EG the "Webserver" plugin setting HTML documents root: should therefore not be the location of the webpage folder, if can be anything else. It has also been mentioned that a file called "ajax.html" is needed in that folder, I don't know why, seems to work fine w/o it.

As I understand it a server should be able to send info back with an ajax-call, but "Webserver" is not sophisticated enough for that?
If EG's Webserver is NOT set to the folder where the website is located, calls must be sent specifically to EG. This is done using the variable serverUrl. In the original code, this variable is never used, perhaps something was done behind the scenes (in no longer used "'ajax.xhr?'"?)?
In my revisioned code the variable is declared globally, it is the used as follows:
Code: Select all
function initButtons() {
   $(".myBtn").unbind();
   $(".myBtn").tap(function() {
      var action = this.title;
      $.ajax({
         url: serverUrl+'?'+action,
         cache: false
      });
   });
}



The slider function is also modified a bit, though i won't compare new and old code, this is the result:
Code: Select all
function initEventSlider() {
   $('.mySlider').mouseup(function(event) {
      nameOfSlider = $(event.target).closest('div.mySlider').attr('name');
      update = true;
      sliderUpdateController(nameOfSlider);
   });
   $('.mySlider').touchend(function(event) {
      nameOfSlider = $(event.target).closest('div.mySlider').attr('name');
      update = true;
      sliderUpdateController(nameOfSlider);
   });
   $('input[title]').hide(); //TODO: have this apply only to sliders
}


And as last part:
Code: Select all
function sliderAjax(nameOfSlider, value) {
   /*$.ajax({
      url: 'ajax.xhr?'+nameOfSlider+'.'+value,
      cache: false
   });*/
   $.ajax({
      url: serverUrl+'?'+nameOfSlider+'.'+value,
      cache: false
   });
}
joels
 
Posts: 4
Joined: Thu Oct 20, 2011 2:01 pm

Next

Return to Plugin Support

Who is online

Users browsing this forum: No registered users and 3 guests