Closed GoogleCodeExporter closed 8 years ago
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:
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
[deleted comment]
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
[deleted comment]
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:
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
> 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
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
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
> 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
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
> 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
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:
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
Hi David,
What is the status of this issue? Did you give up on it or are you actually
using it?
If no further work has been done since the prototype, I would suggest to rather
pursue this idea in the context of
http://code.google.com/p/openhab/issues/detail?id=24, where it might be
possible to support TVs through some special theme.
Original comment by kai.openhab
on 2 Feb 2012 at 9:33
Original issue reported on code.google.com by
teichsta
on 17 Aug 2011 at 7:59