iPhone web app supporting long button presses

[paseant]

I have been working on an iphone web application for use with the webserver plugin. I think I got some improvements over the inspiring examples in this forum, so i am uploading it in case anybody is interested.

Some comments:

1 - It is designed as a web app that can be launched from the iPhone home screen, so, if you want to try it, load the application in Safari and click on the + button in the bottom toolbar. Then select Add to Home Screen.

2 - It supports native long button presses on desktop browsers and iphone. In order to do that, the application uses different events depending on browser type. In iphone it uses 'touchstart' and 'touchend' events, and this is what makes posible the long button presses. It is not posible to use 'mousedown' and 'mouseup' events in iphone because they are fired (also with the 'onclick' event) one after another after finger leaves the screen firing 'touchend' event.

3 - The application is faster than a regular web page because it doesn't use the 'onomousedown', 'onmouseup', or 'onClick' event, that has a delay on the iPhone. The mentiioned events are triggered with about 300 milliseconds delay to see if a user needed to perform gestures. While this is normally unnoticeable, it is annoying on a remote. Now the eventghost event is initiated as soon as the finger touches the screen and ends when the finger leaves the screen.

4 - I have implemented the buttons as table cells with some aditional attributes. For example, to assign an eventghost event to a button include the declaration egevent="eventname". To make it jump to another page, include a jump="page". To make it do another action, put action="function". The system is easily expandable. Eventghost events are initiated after 'touchstart' on iphone and after 'mousedown' on other browsers. Jumps and actions are initiated after 'touchend' and 'mouseup'.


The application doesn't works in explorer. It does with Safari and Firefox. I haven't tried other browsers, but should works if they are css compliant. In writing it, I have merciless copied code from whatever place seemed adequate. Special thanks to the WebserverDemo, the iui framework for his ccs code, and the web remote control http://www.eventghost.org/forum/viewtopic.php?f=2&t=996 from who this app evolved. I have just started to learn html, css and javascript, so bear with my mistakes. Hopefully my english is not too nasty either.

I have included two files. One is SimpleRemote.zip, with is a simple example of how the web app works. The other one is Remote.zip, which contains my evolving application in its actual state.

[CommandFusion]

If you're interested in a native app, rather than web app for iPhone (native app works MUCH faster), then checkout our app and plugin here:
viewtopic.php?f=2&t=1995

[Jostein]

Hi paseant.

I preveusly used my own made interface but it was way more slower and less user friendly. After modifyiing for a couple of hours i know have this working for my setup. Thanks this is way more beter.

I have some questions:

• In the Settings part you have some on/off switches. Could you please tell me how you get those to work. Some of theme are on all the time here and some are off. When i press a switch it comes up in eventghost but it doesend switch over. I gues i have to do some sort of phyton scripting in eventghost?
  
• Is there a way that i could have the computer(eventghost) deside witch page should show on the phone. Say for instanse i use the harmony remote to switch on XBMC could the phone interface then switch to the XBMC page automaticly.

Regards Jostein

[DraZtiK]

Hey paseant, Thanks for this....will try it out tonight!

[paseant]

Hi Jostein,

The settings part requires in fact some phyton scripting. When a switch is pressed, a start or quit event is sent depending on the "toggled" attribute of the switch. In order to get the toggled attributes in its correct states, a little script is executed: it runs a bat command that writes the result of a tasklist command in a text file with name "taskcsv.txt". Then it processes the file a bit in order to produce another file called "data.txt" that contains a list of the states of the relevant applications. That file is requested from the web page through an ajax call and attributes are assigned. You can see the files mentioned in the "processes" folder.

I am not convinced this is a very elegant solution but at least it works. Tell me if you want a copy of my eventghost configuration file to see it in more detail.

Respect to your second question, I am not sure. An obvious solution would be to poll the web server at regular intervals (to see, for example, if XBMC is active) and change the page acordingly but I am not sure I like it. So, if anyone can confirm this is the only way to update the web app from the server or suggest another method, I would be very grateful to hear about it.

Regards.

[Jostein]

Hi paseant.

Thanks.

Yes if you wouldent mind i would like to see your eventghost configuration file so that i can study and understand everything in more detail.

So far i am loving the interface and with your code it was easy to understand and create my own image with acording map for the light control. For me to create this myself would be imposible and i think this is a great starting point for people like me that dont have any coding skils.

Best regards Jostein

[paseant]

Here it is my eventghost configuration file. The relevant part for the settings working is in folder "Applications/Processes Management/Manager for WebServer". Hope you find it useful.

To create the imagemap for light control I used a little program called mapedit ("http://www.boutell.com/mapedit/").

[kricker]

Respect to your second question, I am not sure. An obvious solution would be to poll the web server at regular intervals (to see, for example, if XBMC is active) and change the page acordingly but I am not sure I like it. So, if anyone can confirm this is the only way to update the web app from the server or suggest another method, I would be very grateful to hear about it.

Regards.

I just stumbled across this and I am eager to give it a whirl. As for the question above; Would it be possible to add an action that tells the webserver to change pages when the task.activated.XBMC event happens? Just like you normally switch modes in EG. If there isn't a built in action to talk to the webserver, then maybe some python scripting can do it.

[derelict]

Here it is my eventghost configuration file. The relevant part for the settings working is in folder "Applications/Processes Management/Manager for WebServer". Hope you find it useful..

nice design and a very nice iphone web interface.

however.... do you have a bigger iphone than me? the reason why i'm asking is... i need to scroll the interface up and down for all those buttons and i always catches the scrolling as keypresses on any of the buttons. i do realize that this is because of the faster processing of the keypresses.... but how do you scroll on your iphone without "accidentaly" pressing a key ?

secondly... is the webinterface supposed to show up "fullscreen" on the iphone ? because on my iphone i can still see the addressbar and stuff from safari.

last but not least... how did you manage to control your xbox 360.. .(discrete power off and on ?)

thanks for any help!

Marcel

[Livin]

paseant,
nice work!

You might want to post this in plugins section so it gets wider notice as an offering, not a question

It would be cool if you could work with daniel.n to combine the work you both have done. He has code to autogenerate button and you have a slick interface... to have both would be sweet!

here's his thread... posting.php?mode=quote&f=10&p=12185

[paseant]

:derelict

do you have a bigger iphone than me?

sorry about that. That part was not finished. I have finally decided to disable scrolling and using a page mechanism. The plus button on the upper right part of some pages gives access to new buttons. See the attached file if you like.

on my iphone i can still see the addressbar and stuff from safari.

You need to load the application in Safari, click on the + button in the bottom toolbar, select Add to Home Screen and give a name to the web app. Then quit safari and look for your new web app icon.

how did you manage to control your xbox 360?

Don't have the 360. The xbox is the original (not really used anymore).

:livin

You might want to post this in plugins section

Thanks for the sugestion. I don't really know how to do that but I could look into it. Problem is that I don't know if a web app is appropiate for a plugin as it has to be personalized for anyone wanting to use it.

It would be cool if you could work with daniel.n to combine the work you both have done

Thanks again but I don't know if it really fits in the way I have structured my configuration.There are two separate sections there: a remotes section and a devices and applications section. Macros in devices and applications section all have generic events to make it independents of any change to the remotes section (e.g. Dvd power on macro has a corresponding event "Dvd-PowerOn" ). On the other hand, each macro in the remote section is triggered by his on trigger (e.g. "X10.Maximize") and triggers or jumps to the corresponding "canonical trigger" (e.g. "Dvd-PowerOn").

In this way I can include or delete a remote without affecting the rest of the configuration. Or include a new device or application and test it without messing with all the remotes I can have. The web application is in this respect just one more remote that can be modified without touching anything else.

[Jostein]

Hi.

Have started using bitmonsters webserver plugin to get feedback like temprature, song title, Light states and so on to the interface.

You can find it in this post viewtopic.php?f=9&t=1610

Example

The only problem i have is that the interface catches everything and that is normaly veary good but to get the Artist/title i need to update the browser and browse back to get the new song. Is there a way to have it fetch only this info without catche?

Code: Select all

   <div id="Spotify" title="Spotify">
      <table>
         <tr>
            <td egevent="MacrosAV-PowerAllOffFoobar2000" jump="Home" confirmation="Apagar Todo?">AllOff</td>
            <td colspan="2"></td>
            <td egevent="Spotify:MuteToggle"><img src="images/vol_mute.png"/></td>
         </tr >
         <tr >
            <td colspan="3"> </td>
            <td egevent="Spotify:VolumeUp"><img src="images/vol_up.png"/></td>
         </tr >
         <tr >
            <td colspan="3"> </td>
            <td egevent="Spotify:VolumeDown"><img src="images/vol_down.png"/></td>
         </tr >
         <tr >
            <td egevent="Spotify:Stop"><img src="images/stop.png"/></td>
            <td egevent="Spotify:Play" colspan="2"><img src="images/play.png"/></td>
            <td egevent="Spotify:Pause"><img src="images/pause.png"/></td>
         </tr >
         <tr >
            <td egevent="Spotify:Previous"><img src="images/previous.png"/></td>
            <td egevent="Spotify:Rewind"><img src="images/fastbackward.png"/></td>
            <td egevent="Spotify:FastForward"><img src="images/fastforward.png"/></td>
            <td egevent="Spotify:Next"><img src="images/next.png"/></td>
         </tr >
         <tr>
            <td egevent="Spotify:Artist-status" colspan="4" >Artist: {{SpotifyArtist}}</td>
         <tr>
            <td egevent="Spotify:Title-status" colspan="4" >Title: {{SpotifyTitle}}</td>
         <tr>
            <td egevent="Spotify:status" colspan="4" >{{SpotifyStatus}}</td>
         </tr>
      </table >

This is how i built it but there is maby a bether way of doing it.
With this possibility to fetch info in to the interface you can build almost anything.

Regards Jostein

[Livin]

paseant,
Hoping you can help with a small code modification?

I have an app that I want to integrate into your Remote pages.

The example web pages from the app uses onclick in <DIV> to trigger commands. Example: onclick=setActiveZone('0');callUrl('queue.html');

Can you help me integrate into your pages?

Being a bad hack I was thinking something like...

add a a new field to <TD sendcmd= >

AND...
function doEndThing() {
var sendcmd = this.getAttribute("sendcmd");

BUT I don't know how to actually send the cmds?

thx for the help and the really nice EG pages!

[paseant]

@Jostein:

The dynamic web server plugin requires you to reload the entire page where the variables reside to show its updated content. The different remote pages in my web app are in fact one single page that hides and show parts of it dynamically, so it is imposible to cache only some parts of it. It could be rewrited dividing it in as many parts as pages but I think it is better to use ajax calls to update only the information we want without reloading the page.

You can see how it works looking again at the settings section: In your case, in eventghost you should create a macro that writes a file with the relevant information in it (artist, title...) triggered by the adequate events. That file would be requested from the web page through an ajax call and the corresponding attributes asigned with some javascript.

I'll try to make a working example whenever I got some time.

@Livin:

I'm not sure If I fully understand your needs: if you want a button to execute arbitrary javascript code you can simply put an onclick directly on a td, e.g.

<td onclick="alert('test')">test</td>

@kricker:

This is the kind of interaction I am most interested in: pushing data from the web server to the browser. I think it is imposible right now but looking for ways to make it happen and open to suggestions.

[Sheugel]

I'll try to make a working example whenever I got some time.

Hi, I modified the "Simple Remote" to build something similar to Jostein's configuration (thanks to his help) to remote control the Spotify music player. It's nice to interact with the Spotify plugin and be able to see on the iPhone what's currently playing.
I would also be interested not to have to reload the entire page to get the data from the Spotify plugin.
I hope you can get some time soon to show us how to handle that nicely...
Thanks,

Sheugel