Web server + android tablet

[sebnil]

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:


Some screens (in Swedish):





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

[Livin]

very nice - thx for sharing!

[krambriw]

Do you support websocket in this solution?

[eatmeimadanish]

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.

[sebnil]

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.

[Livin]

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.

[eatmeimadanish]

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.

[joels]

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

[eatmeimadanish]

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.

[joels]

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

[eatmeimadanish]

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.

[joels]

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

[eatmeimadanish]

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]

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
});
});

[joels]

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
   });
}