WebUI for TV

[GoogleCodeExporter]

Hi Kai,

We are working to rewrite the web-ui to TV, this way you can have
openHab running in your HTPC and use it with your TV remote control.

To do that, we choose Google TV Web UI Library, based on jquery and
Closure. And now it's working fine, you can control the app with your
keyboard or your remote.

Are you interested in?

Best regards,

David Morales De Frías

Original issue reported on code.google.com by teichsta on 17 Aug 2011 at 7:59

[GoogleCodeExporter]

We are working on it and actually we have an early version of the UI. 

About technical details, it was easier than we thougth because we have 
rewritten only html. OpenHab have one main html and some snippets to 
paint components, so we have updated this main file and the snippets 
with new code (google tv components, css, javascript...). 

For example, original code in one snippet was 

<a href="javascript:void(0)" onclick="ChangeState('../CMD?%item%=%cmd 
%')" class="iButton iB%type%">%label%</a> 

and we have rewritten it with 

<div class="tv-button focusable ui-button  ui-button-%type%">%label 
%<!--#%item%#%cmd%--></div> 

This way, we have achieved the use of all components with a keyboard 
or remote. Well, as you can see, the final result is a bit ugly but 
it's a matter of design :) 

Original comment by dmora...@gpm.es on 17 Aug 2011 at 8:20

Attachments:

• GTV1.JPG
• GTV2.JPG
• GTV3.jpg
• GTV4.JPG
• GTV5.JPG

[GoogleCodeExporter]

Nice work! Though it would be nice this to work with the new openHAB REST API, 
as the current webUI has some refreshing issues.

Original comment by mishoboss on 17 Aug 2011 at 6:07

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hi David, that looks promising indeed!
What I am wondering is, if this requires a rewrite (i.e. a new bundle copying 
or reusing most code from org.openhab.ui.webapp) or if the two versions could 
actually be merged into one, i.e. having the current UI supporting key 
navigation commands and presenting it good enough for a TV screen. Have you 
gained any insight in this?

A question about your example:
<div class="tv-button focusable ui-button  ui-button-%type%">%label 
%<!--#%item%#%cmd%--></div> 
Isn't that missing the actual action (the original snippet had a "onClick" 
event)? How is the action triggered with this code?

Cheers,
Kai

Original comment by kai.openhab on 17 Aug 2011 at 8:24

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hi there, thanks for your feedback.

About your question, Kai, 

Google TV Api requires registering the handler using the class or the ID of the 
element. As we wanted all components of a kind to behave in the same way, we 
just added the information needed as an HTML comment (<!--#%item%#%cmd%-->). 
Then a class handler is added in the main snippet and it will call the function 
declared in the "OnClick" event with this information.

I've attached the source code, this way you could see it in action and check 
the changes to the code.

I think that it would'nt be very difficult to maintain this TV UI in the same 
bundle... maybe it could be a good idea to ask for the user-agent or similar 
features (to guess if it's a TV or another device). Or maybe, it could redirect 
the request to the appropriate UI. What do you think about?

About the other question (REST API)... we think that it would be better to 
change the current UI and to evolve with it. Is there any plan to upgrade the 
UI?

Best regards

Original comment by dmora...@gpm.es on 18 Aug 2011 at 10:41

Attachments:

• InterfazGTV.7z

[GoogleCodeExporter]

I forgot to tell you that in order to make it works, you need to put the Google 
TV libraries in folder bundles\ui\org.openhab.ui.webapp\web\

You can follow steps 1 and 2 of this how-to: 
http://code.google.com/intl/es-ES/tv/web/lib/closure/gettingstarted.html

Original comment by dmora...@gpm.es on 18 Aug 2011 at 1:16

[GoogleCodeExporter]

> I think that it would'nt be very difficult to maintain this TV UI in the same 
bundle...

My question was rather, if the code in the snippets could be merged together - 
afterall, for the normal clients, there are just some unknown new divs and a 
few comments that they will simply ignore.

Regarding the adjustment of the css, I was thinking about introducing a kind of 
"theme" support for easily changing colors, fonts, icons etc. (related to issue 
41).

So if you would manage to merge the snippets into a version that works on 
smartphones and TVs likewise and all the difference that is required would be 
the css files, I think it is best to do all this in the ui.webapp bundle.

If not, I would rather suggest to create a new bundle like org.openhab.ui.tv 
which could then specifically target TVs.

Original comment by kai.openhab on 18 Aug 2011 at 1:33

[GoogleCodeExporter]

Kai, glad to see you think about some kind of theming. Maybe with DSL syntax 
like the other configurable items?

From what I've seen in the files and the examples, there wouldn't be a problem 
to merge the two interfaces in one. However maybe it's best a JavaScript to 
check what kind is the client (phone, tablet, TV, etc.) and build the 
corresponding HTML snippet.

In fact I was thinking about this method, but in the phone, tablet, PC 
direction. However I'm still stuck in choosing the best HTML5/JavaScript 
Framework for this job. No one seems good enough...

Original comment by mishoboss on 19 Aug 2011 at 7:52

[GoogleCodeExporter]

Hi,

Well, as far as we have read. The best combo will be dojo mobile + phonegapp, 
and i think that this is what someone suggests in the related issue.

We are trying to play with charts, for example, and sencha dooesn't provide 
anything (free) but dojo has a lot of features, as you can see:

http://chrism.dojotoolkit.org/mobile-0.2/make_samples/dojo-samples/demos/mobileC
harting/demo.html

http://chrism.dojotoolkit.org/mobile-0.2/make_samples/dojo-samples/demos/mobileG
auges/demo.html

or in general,

http://chrism.dojotoolkit.org/mobile-0.2/make_samples/dojo-samples/demos/mobile-
gallery/demo.html

So, do you think that it will be a good idea to change the ui framework to 
something like this?

Best regards

Original comment by dmora...@gpm.es on 19 Aug 2011 at 11:35

[GoogleCodeExporter]

> So, do you think that it will be a good idea to change the ui framework to 
something like this?

No, there won't be any "change" of the ui framework - the webapp UI will stay 
as it is and only evolve. But openHAB is designed to be modular and I would 
like to see different UI approaches to come up.

So I was wondering, if the TV has the same requirements as the current webapp 
UI and thus could be easily be done by simply adding a few tags and meta 
information into the existing snippets (and using a different css). If this is 
not the case, I would suggest to build a new bundle org.openhab.ui.tv - if it 
shares most of the code with the ui.webapp, you could depend on that bundle (or 
even build a fragment on top).

For issue 24 (tablet UI), I have started working on a prototype based on Sencha 
Touch. This framework is IMHO excellent for tablet UIs, although it is 
definitely no good candidate for TV support.

Regarding charting, I would like to see this topic completely separate from any 
UI framework discussions. A charting engine should only require access to 
historical data through the REST API (and before this is available, we will 
have to tackle the persistence on the server side). The resulting chart should 
then be embeddable in any (ok most) UIs through some javascript code.

Regarding Sencha, there is as well a free charting engine: 
http://www.sencha.com/products/touch/charts/

Regards,
Kai

Original comment by kai.openhab on 19 Aug 2011 at 2:37

[GoogleCodeExporter]

quoted>> For issue 24 (tablet UI), I have started working on a prototype based 
on Sencha Touch. This framework is IMHO excellent for tablet UIs, although it 
is definitely no good candidate for TV support.
-----
Kai, could you share with us your prototype? is it developed using the rest api?

We think that it could be a good idea to evolve this prototype, since 
http://webapp-net.com/ framework can't give us too much features :(

Original comment by dmora...@gpm.es on 25 Aug 2011 at 12:41

[GoogleCodeExporter]

> Kai, could you share with us your prototype? is it developed using the rest 
api?

I certainly will. But I didn't yet find much time to work on it. The prototype 
will be only static code for the start, not accessing openHAB at all. I just 
want to learn with it, how to use Sencha Touch - creating the content 
dynamically is then the second step.

But please be aware that (as I have mentioned earlier), I doubt that Sencha 
Touch could be of any use for a TV UI; you might rather want to look at other 
frameworks for this use case.

Original comment by kai.openhab on 25 Aug 2011 at 1:09

[GoogleCodeExporter]

Hi all,

We are working on a new mobile UI, based on jquery mobile, which could replace 
the WebApp.Net framework.

At the moment, we are still using the old servlets to make it work (servlets + 
snippets) but we are now thinking about using the new rest api.

We have choosed jquery mobile because the development is closer to html than 
sencha (in fact sencha doesn't generate any html code), so it's very easy to 
understand, develop, maintain and do it more compatible with other frameworks, 
like google tv.

Attached you could find some screenshots. We love to hear your feedback.

Original comment by dmora...@gpm.es on 7 Sep 2011 at 1:10

Attachments:

• JQM1.JPG
• JQM2.JPG
• JQM3.JPG
• JQM4.JPG
• JQM5.JPG

[GoogleCodeExporter]

Thanks David, that looks promising :-)
Definitely still some CSS/UI styling to do (see JQM4.JPG), but it shows that 
you can quickly get something working with jquery mobile.
As you are targeting the TV, it might also be interesting to think about a 
multi-column layout - and ideas about that? Is that feasible with jquery mobile?

Yes, for a newly started UI, the REST API should be the communication channel 
to use. If you feel that you have specific needs that are not yet covered by 
the REST API, please let me know. It will be specifically interesting to design 
the server push part of it...

Original comment by kai.openhab on 8 Sep 2011 at 6:52