Kodi Community Forum

Full Version: Making a touch screen skin (whats it need)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6
I'm making a touch screen skin (as a side project) and was wondering what people who actually have a touchscreen (since I don't) think a skin designed for one needs.

Here is what I come up with so far
  • All needed things need to be on screen, so you can click em
  • Easy access to Parent Dir Item
  • Needs to be big items in selections (so your finger doesn't sit on 2 items)
  • buttons need to have a selected background (not just text) so its easy to tell whats focused before click
  • Needs to have "close window" buttons everywhere on anything that pops up
  • Needs to have easy access to Playback controls (stop pause FF RW etc..)
  • Needs to have page controls (scrollbars, arrows) visible on the screen so you can use them

Anything ELSE ?

P.S. try to keep it in normal XBMC stuff not stuff like multitouch for zoom and all that because xbmc doesn't have those sort of features.

P.P.S if people actually help I might post a couple of screenshots of what I have allready Rolleyes
Is this what THIS has turned into I'd really like to see that project come to fruition.
oh no thats completely unrelated but it does have the same color theme and some styles but its way too complicated for touchscreen
Ah well that's a bummer that other skin is definitely one of the better 'concepts' i have seen here.

As a suggestion for the touchscreen skin I'd say that larger BOLD fonts would really help.
Yeah maybe I guess it depends on if we are going for screens that people put in cars or screens that people would have in the kitchen or on the wall somewhere I'm thinking around 720p 15" and up myself.

And the bits I have done so far are readable at that and the buttons are big enough to click easy, (would probably work on 12" too)
I think of 2 sorts of touchscreen: Small touchscreen in case and big touchscreen as display. Both have different purposes.

From this topic:

3 Screen saver modes : http://forum.xbmc.org/showthread.php?tid=68936

* Diaporama : Rotation of images to use touch screen like a LCD Photo Frame.
* Dimming : If viewing a film the screen dim for better film confort.
* Currently : auto switch to Currently if listening music.

And also a clock screensaver would be great.
Bulkzooi Wrote:I think of 2 sorts of touchscreen: Small touchscreen in case and big touchscreen as display. Both have different purposes.

From this topic:

3 Screen saver modes : http://forum.xbmc.org/showthread.php?tid=68936

* Diaporama : Rotation of images to use touch screen like a LCD Photo Frame.
* Dimming : If viewing a film the screen dim for better film confort.
* Currently : auto switch to Currently if listening music.

And also a clock screensaver would be great.
Your kind of missing the point its not a touchscreen remote control for xbmc its a touchscreen version of a skin for xbmc and all the 3 screen savers you listed above are already part of xbmc
Jezz_X I was a long time xlobby touchscreen user and switched to xbmc once I found a touchscreen skin that worked. I have been using Touch! by virtualhours on my touchscreen (http://forum.xbmc.org/showthread.php?tid=57940) the last couple of months which is in my kitchen running at 1080p being driven by a laptop sitting in the attic running windows 7. In general it works well and never ceases to impress visitors.

Some other functions to include would be;

-the ability to queue albums and tracks and save playlists via different touchable buttons.
-back buttons everywhere, never have to use the hold down for right click function via the computer. Although it does work with windows 7 if needed.
-scroll arrows buttons to scroll down and up.
-ability to control, watch and escape from movies.
-ability to get to all the menus via touchscreen, i.e. to get album information currently I have to hold finger down for 5 seconds to right mouse click.
-A halo on buttons once you touch, so you know you've touched them.
-Also, I don't think its possible in XBMC but the ability to scroll via dragging (like the iphone). Its supported in windows 7 but marginally works with xbmc.

Just some thoughts.
Thanks great reply my replys are under yours in bold

-the ability to queue albums and tracks and save playlists via different touchable buttons.
We get into troubles here because xbmc lacks the ability to put those sort of buttons into the list currently and when you leave the list to click then it no longer knows what one you mean. Might be something I can convince jmarshall to work on though

-back buttons everywhere, never have to use the hold down for right click function via the computer. Although it does work with windows 7 if needed.
Yep putting as many back/close buttons in as I can so you never have to right click for that

-scroll arrows buttons to scroll down and up.
indeed already planned

-ability to control, watch and escape from movies.
For the most part this is possible but one thing that needs to be added would be mouse input/jumping on progress bars (again a jmarshall thing)

-ability to get to all the menus via touchscreen, i.e. to get album information currently I have to hold finger down for 5 seconds to right mouse click.
Not a lot as a skinner I can currently do about that one

-A halo on buttons once you touch, so you know you've touched them.
You mean like a pulse effect to say its been clicked ? or just an area so you know its focused

-Also, I don't think its possible in XBMC but the ability to scroll via dragging (like the iphone). Its supported in windows 7 but marginally works with xbmc
I think jmarshall is working on that sort of thing with gestures, but again scrollbars should help to make scrolling easy even if its not as cool Smile
Windows 7 gesture support for scrolling in lists is in the works, yes. I just need to find some time to clean it up and commit it.

Note that both queuing and album info could be handled via the same mechanism - we need a button in list style thing.

I suspect the queue could be hacked already using the multiselecttext control or whatever it is...
Jezz_X Wrote:-A halo on buttons once you touch, so you know you've touched them.
You mean like a pulse effect to say its been clicked ? or just an area so you know its focused

Just something that shows you that you've touched, a color change or halo, etc. since you don't get any tactile feeling of actually pushing a button.

Personally, I think with the release of the iphone, android, ipad, etc. Touchscreens are going to become the preferred interface so its great to hear that you are developing a touch focused skin and xbmc will be adding some of those cool features and functionality.

I would love to see an xbmc interface where you could drag albums/tracks to queue but guessing thats a ways down the road.
I'm about to hook up my 22" Multitouch to my HTPC so this interests me.

I think some of the usability features for a touch screen would require some XBMC code enhancements, as you'd already pointed out. I suggest looking at interfaces from high-end media & automation companies like Crestron, Elan, Meridian, and others to see what they do - they usually build the easiest to use and most thought out systems - for people with serious cash Wink So they spend a lot of time on the UIs... it is good they have paid for the research for you Smile

main touchscreen usage models...

1) Secondary/supplemental screen for remote control of the main screen.
- this would be the need for the primary screen to be a duplicate of the touch screen. Ideally, when a video is played, the touch screen would stay on the menu, or go to screen saver (or black)

2) Primary screen
- I see this as a much smaller usage case. More for mobile devices (tablets, slates, handhelds) or screens in places where you are only a foot or so away (kitchens, bathrooms, etc)

Issues to contend with...

1) Screen size & resolution

This will be all over the map. How to account for this might be an issue. Most upcoming mobile devices screen sizes are between 5"-10". This is a large difference when it comes to what can fit on the screen and is finger friendly. The guys at Collect3 have done a nice job on the iPhone remote interface... this is ideal for small screens, say <=6". 7" and larger could start to have enough screen real estate for a more "normal" touch interface like the 'Touch!' skin.

2) Navigation

Gestures are becoming 2nd nature so this is almost a must have these days BUT it does not help with large libraries/folders. Indexing (A-Z, 0-9, etc) and search (including onscreen keyboard) on pages displaying media is essential for touch.

Common Buttons: Home, Back, Options, Now Playing, etc -- directly on every screen, in common locations.

Drag'n'Drop: perfect for adding to Queue
Non of my suggestions are really skinning related but stuff that we in core could do to make skinning easier for it, a tad off topic but not to far I'd say

In regard to playlists androids solution is rather nice, by the left of the item you have a special "button" (not really a button, just a place you can press) which you press, hold and drag the item to were it wants to be. Works wonders for rearranging playlists. Althought he normal up down buttons works aswell. (Not the correct app but you get the idea.)
Image

Also another thing to borrow from android would be hold an item to right click, its perhaps not automagic to undertstand but it does work great when you know its there.

As suggested previously adding so each item could have buttons would be real nice, personally I'd say even the remote users could benefit from it instead of using the context menu, which admitely isn't obvious to find since not all htpc apps have one.
topfs2 Wrote:Also another thing to borrow from android would be hold an item to right click, its perhaps not automagic to undertstand but it does work great when you know its there.
Umm thats how it works now I thought but that might be only certain screens and drivers
Well since some nice ideas have come as promised here are some screen shots of the test/ideas I have done allready (click em all for bigger)

Image

Image

Image

Image

Explanation of it all
Image
Pages: 1 2 3 4 5 6