LinuxMCE Forums

General => Developers => Topic started by: tschak909 on July 27, 2008, 09:42:09 pm

Title: Calling all UI Designers for new Basic Skin
Post by: tschak909 on July 27, 2008, 09:42:09 pm
Calling all UI designers to do the first phase of skin development, designing a replacement for the Basic skin.

Requirements:

* Must be able to understand capabilities of Designer and Orbiter, watch my screencasts.
* Must be able to work in a team.

Anyone interested in designing a complete replacement for all 5 major UI targets, please reply to this thread.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: HorstJ on July 28, 2008, 11:52:08 am
Hi Thom,
I would be interested joining you team, but at the moment I try to get a java HADesigner running as I had more crashes with the original one as it is agreeable for me. Unfortunately I have less time at the moment so it could take some weeks to finish it... but then count me in  :)
Title: Re: Calling all UI Designers for new Basic Skin
Post by: golgoj4 on July 28, 2008, 06:23:18 pm
Im in. I have been watching the screencasts and I would really like yo jump in on this.

-Golgoj4
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 03, 2008, 10:34:00 pm
Is anything still happening with this?  I am actively pursuing this same goal, but could use some assistance from someone who is good with creating graphics and textures.  Thom, thanks for all you patience and work helping people get their heads around this system.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 12:47:40 am
This ticket is still open. Looking for people to work with on this... initially we need a complete aesthetic proof set done for all variations, which we can then build upon.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 05:30:30 am
Count me in
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 04, 2008, 02:50:35 pm
I agree that we need to get a complete asthetic proof down as Thom has said so the whole thing is well planned and executed so I guess I'll post my thoughts and the direction I'm thinking of going.

Currently the screens are quite cluttered with multiple buttons being repeated from one screen to another, as far as I can tell this could be cleaned up and reworked to eliminate all that redundancy and put the focus back on the media.  Instead of how UI1 and UI2 are currently laid out with everything available from the main menu I'm thinking it should be physically laid out in different windows.  Combine this with the way UI1 organizes the categories in a vertical manner and the main menu issues would be solved.  UI2 is nice but has a lot of unnecessary information displayed and placeholders for it the remainder of the time.  This issue I think could be addressed by having a "header" at the top of every window and creating an invisible button in this header so that any time the top left corner of an orbiter is clicked/touched, etc. you are taken back or possibly always taken back to the main menu.  Using this method we can get rid of another button and clean up the screen real estate.  Just some ideas I've been playing with here, but since I'm not so good with graphics and textures I don't exactly have something beautiful.

I'm also curious to play with the media windows and see what kind of tricks can be pulled off on that as I don't like seeing both covers and a list at the same time, it doesn't make sense to me...I'd rather choose to see the files one way or another, but not both at once.  The covers are nice and I'd like to push the list off the screen if it has to remain then expand the covers so they take up the whole screen...the obvious issue with this is that you cannot scroll the list, but is it possible to create a button to scroll the list?  If we could do that then the bottom left and bottom right corners can have invisible buttons or a small graphic with a much larger transparent button to accomodate touch screens etc.

Just some ideas I've been toying with and playing around with to find a good layout that looks elegant and stylish to fit all variants of orbiters.

What are you guys thinking about doing?  I wanted to post this so we can find the happy medium and get a plan together since we'll be working together on this and am not convinced that I have it all figured out so let's get some discussion going so we can make some progress :)
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 02:59:26 pm
Yeah, let's start just throwing up some layout bits, even if it's just squares with placeholder text at the moment, so we can get a sense of space.

We do have the ability to do popups, but we have to be  very careful how they are used, particularly:

* Popups are not composited with the rest of the display in UI1, basically, alpha is ignored. Again this goes back to the fact that in Orbiter, everything is pre-rendered. and most importantly, any transparent areas are ignored, so popups need to contain all opaque pixels, otherwise you see black.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 07:05:15 pm
In the INTEREST of trying to get something done, we may want to split this into two distinct goals:

* Phase 1: Simple skin-graft for UI1 and UI2.
* Phase 2: Re-lay out of Basic

The reasoning is very simple,

We should get something done as quickly as possible to show progress, but FURTHERMORE, this will show everyone involved the effects of graphic rendering in orbiter while working on our own stuff.

Why am I bringing this up specifically? Because of the way Orbiter renders its graphics:

1. They're pre-composited.
2. They're pre-scaled.. (read that one again)... So hair-thin lines etc, WILL DISAPPEAR if you're not careful.
3. We'll be able to test the simpler ideas so we don't waste months with nothing to show.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 07:19:21 pm
Well, in my short experience with LMCE I havent had a chance to set up all of the home automation stuff yet. The problem is I dont really have a solid idea of the best layout since I dont use all of the functions regularly just yet. Maybe we should start by deciding which buttons we actually need on the menu make a list(so we dont leave one out accidentally) go from there. I am not sure that I can recall what buttons are on the menu now, and I am at work so I can get on HAD atm.

I am willing to take some rough sketches from someone and turn them into pretty design pictures so we can have something to look at for the different concept models.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 07:22:20 pm
I use virtually ALL aspects of the system.

If I hadn't already bought christmas presents for my family, I would pay for a conference, so that I could show you my entire setup.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 07:49:08 pm
Something to keep in mind.

The name of the game here, is balance.

Yes, reductionism is important when laying out a UI, I am a happy believer in less visible is more...

HOWEVER...

Keep in mind that if you hide something in a menu, that means you have to SHOW that menu. This typically translates into more button presses.

So yes, finding the things we use most, is important.

I have the following orbiter surfaces:

* On screen display in Bedroom, with Fiire Chief, MCE IR, and Gyration Go Mouse 2.4's as remotes
* Five WebDT 366/360 tablets running PadOrbiter. The two main ones I use are in the bedroom, and the Kitchen. I also have one in the bathroom.
* A Cisco 7970 Phone orbiter at my main laptop's desk
* A Nokia N810, which floats around everywhere
* A Nokia N70 phone as my Mobile Orbiter
* an iPAQ 3115 Windows PDA for testing the PDA variant.

So I can test just about everything in a real world setting.

One of the things I can tell you, is to record your interactions with the system, make note of how many times you press buttons to do things, and the choices you have to make, for example:

I did a rough interaction log in one 6 hour evening, and found:

* I went into videos 18 times
   * I searched for a video using search 2 times
   * I searched for a video using a detail filter 9 times
   * I searched for a video with no filter 6 times
   * I searched for a video using just the high def media type 1 time (because I knew it was an HD movie)
* I went into audio roughly 7 times
   * I played a playlist 2 times
   * I played an entire album 2 times
   * I played a filter selection (genre: ambient) 1 time
   * I played individual songs, 2 times.
* I changed lights in the bedroom 3 times
* I changed lights in the foyer using the floorplan, twice
* I used follow me for media, once to bounce media from the bedroom to the kitchen
* I used the computing section 3 times to browse sites.

and so on.

Maybe not this detailed, but to give you a mental picture of what you're doing to make yourself aware consciously of the steps you are taking to do a particular task.

-------------------------------------------------------------

A Note about Button Arrays

much of Orbiter's functionality comes from the fact that user scenarios are dynamically generated. Read that again and burn it into your skulls.

To give an example, there is a utility that runs in the background called UpdateEntArea. This little utility takes stock of ALL of the devices in an entertainment area, and figures out what buttons to add to each category on the main page:

Some examples,

Media:
* If a media director is present in a room, TV, Audio, Videos, Docs, Playlists, and any buttons for legacy A/V control are added to media.
* If an optical disk drive is present in a media director, the Manage Drives button is also added to media.

Lights:
* If there are any lights in a room, On and Off scenarios to turn all those lights off at once are added.
* If there is a media director in a room with lights, Showtime is added so the lights can dim. An event is also added to trigger showtime when media starts.

Climate:
* If there is a thermostat ANYWHERE in the house, buttons are added to turn it on and off.

Security:
* If there are any sensors that can be armed, an Armed event is added, which triggers a scenario called Leaving Home, which turns everything off in the house.
* If there is a camera, it's added as a button

Some future examples might include:

* If game ROMs are present in the games directory, the Games button is added to Media
* If you are in the kitchen, a scenario is added to show recipes.

and so on.

Point being, The number of buttons and everything changes depending on what is available, and you have no way of statically controlling these things in a maintainable manner. This is where arrays come in..

arrays are merely areas on a screen where Orbiter can lay out in a grid like fashion sets of designobjs (usually buttons) which are populated by the various plugins. Because arrays are sets of designobjs, they are generated as part of the orbitergen process.

........

I hope I've made it clear, that we have to think way beyond the realm of just trying to make a pretty picture, and that we have to be very holistic in our approach. We have to be aware of the moving parts in this system and know that they all react to one another.

Some stuff to think about,
-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 08:29:51 pm
well, I think I am going to sleep on that....
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 04, 2008, 08:59:11 pm
Thom - Absolutely you are spot on and that explanation will hopefully help serve as a reminder to anyone following this thread that we are up against more than creating a graphically stunning UI since LMCE does so many things dynamically to improve its own usability.  I had understood this prior to this posting and have put together a VERY rough layout in paint to demonstrate what I am thinking about doing.

Along with your notes it is also important to fix current nuisance issues such as LMCE's status popups whenever it is doing something in the background, it currently can cover up several elements of the UI which can leave you blindly navigating in some instances.

A quick note before reviewing my draft, I am proposing that this layout be used throughout the UI and that it stay consistent so it is never confusing to the user.  This layout provides for an unlimited number of scenarios to be added while staying consistent to the UI design and eliminates the current issues where labels do not always fit on buttons completely.  Please give some feedback on this design as I do think that it is at least close to what we need to meet between function and form.

(http://img227.imageshack.us/img227/3946/mainmenumocksq2.png)
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 09:11:18 pm
** Krys rubs his hands together with anticipation... or maybe it is because my office is frickin cold**
Lets see it, at least it will give us a starting point


anyone started a wiki for this yet? might be beneficial to have a place where the information is centralized so once this thread gets to about 30 pages we wont have to scroll through the whole thing.
I am thinking at least a list of items that we would like to change, such as the annoying pop-ups, I personally cant stand the text extending past the edge of the buttons...etc
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 09:12:00 pm
/me points to that sketch above. ;-)

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 09:21:08 pm
*Krys scratches his head wondering what the hell tschak909 is pointing at, can a brother get a link.. I don't think my web filter is letting it through
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 09:22:49 pm
http://img227.imageshack.us/img227/3946/mainmenumocksq2.png

That's the little sketchlet that los came up with.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 09:31:16 pm
Thanks Thom.
As for the layout, I kind of like the roll over pop-up menu that currently exists. It is quick and requires less button pushing.
ex: you want to watch the movie "Iron Man"

UI2 -you bring up the menu, hover over media, click on video = 1 click
proposed- bring up menu, click media, click video = 2 clicks

maybe I just have a disposition for rollover pop-ups

The proposed system would also present a problem (IMHO) because if you wanted to go from the media page to the lighting page you would then need to click a "back" button then click lighting, where as in UI2 you would just move your mouse
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 09:35:12 pm
okay, cool... diverging ideas...

let's try to develop both sketches a bit further as far as basic interaction.. even if it is just something we can print out, and tap our fingers on.

I'll try to block some color in to see what we could come up with color wise on los's sketch in the mean time..

nothing special, i'll just fill in the boxes with some colors/alpha and add a photo background.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 09:41:54 pm
Is it possible to save drawings on wiki, as imageshack is blocked where I am at most of the day which leaves me to view on my iphone...
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 09:42:12 pm
To give an idea. This was a blocking that I did for a potential Compose Mail screen for orbiter:

http://imagebin.ca/view/TETagYe.html

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 09:43:01 pm
wiki's uploads may still be broken.. if it is, try imageshack.ca ... :-/

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: hari on December 04, 2008, 09:43:55 pm
not that i am aware of..
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 04, 2008, 09:51:06 pm
Krys, I tend to agree that the popups are functionally quite slick, my logic is that less is more visibly and for me at least keeping the focus on the media is very important so the more of the media I can see the better in my mind.  I'm not opposed to the popups though, do you have some suggestions to pull it off cleanly with a vertical layout?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 09:51:12 pm
i can view imagebin.ca just fine, that looks nice thom, very clean and I like translucent overlays like that

Los, the wheels are turning... keep going on your route, and i will see if i can make a pop-up idea you can agree with
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 04, 2008, 09:53:10 pm
Thanks, just to note, this is just a blocking, I did it in about 5 mins to get an idea of space. I think we'll do a LOT of these. :)

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 04, 2008, 10:48:20 pm
I was thinking something similar to the current UI2 with a twist. How about instead of the column popping up directly over the tab on the bottom of the screen, the column always pops up on the left hand side like in this picture. This way the menu is never covering up middle (usually the focus of the media).  We would set it up to where you dont actually have to hover over the buttons that pop-up, just the pointer moving/down would highlight your selection.

http://imagebin.ca/view/8Va8qFk.html

imagine the black frame is the frame of your TV
Title: Re: Calling all UI Designers for new Basic Skin
Post by: skeptic on December 04, 2008, 11:13:27 pm
Are you guys interested in end-user (ie me) suggestions?  I really doubt I'll have any time to actually help create UI updates, but as a user I have some ideas even if they may not be feasible.  I can also create some rough drawings (sticking to the recommended sizes for buttons and such).

For example, adding to the rough sketch los put up and the pop-up/new menu screen discussion.  Instead of a pop-up extending to the right from the item (media or whatever), have the item menu options (tv, audio, video, games, etc.) appear along the bottom of the screen or in a column on the right hand side.  Additionally, if possible also shrink the current media just enough to fit inside the "frame" created by the menu and top/side pop-ups using the same design object as the video in the on screen remote in the current UI1 (I hope I'm using at least close to the correct terminology).  To me this would give the slick gee-whiz factor so many people ask for while still maintaining the LMCE "media first" philosophy and retaining quick access to menu/submenu items.

Just off the top of my head while reading through the thread and I'm not sure how feasible it is, but I think it at least somewhat addresses all the "what about" questions. 

edit:  Looks like Krys had a similar idea as well.  I'm slow about replying after I open a thread in a new tab.  :)
Title: Re: Calling all UI Designers for new Basic Skin
Post by: randomblink on December 04, 2008, 11:48:16 pm
I'm not a Linux Programmer (yet), so I can't help out with anything other than visual ideas, wiki work, and my opinion.
Basic Skin Development Page (http://wiki.linuxmce.org/index.php/Basic_Skin)

Hope this helps. I'm looking forward to actually getting LinuxMCE installed once I buy my house. I start house shopping next week!
Title: Re: Calling all UI Designers for new Basic Skin
Post by: randomblink on December 04, 2008, 11:51:32 pm
Also, concerning the Wiki, I just got one setup and running on my own site. If you guys are having issues getting the uploads to work? I might be able to point you to the right place. Let me know what the problem is?

Peace
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 01:50:05 am
It is also worth noting guys, that UI2 is ONLY available on the on-screen displays. We can't currently use it on the non-OSD orbiters, nor would we want to.

The same UI for On-screen displays isn't apt for a touch screen. This is why there is a separate variation, and we need to design specifically for it.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: skeptic on December 05, 2008, 02:32:21 am
Is this thread for a new onscreen UI, or a UI1 replacement?  My comments were related to updating UI2 or for a new onscreen UI.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 02:41:56 am
It is for a complete replacement of the Basic UI
which includes the following variations:

* Normal Horizontal (which most incorrectly call UI1)
* V2 Normal horizontal (UI2)
* Symbian (mobile orbiter)
* PDA
* SmallUI (Cisco 7970 skin)

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 02:59:00 am
Here was a quick test, replacing skin graphics for buttons, and then doing an orbiter regen. I did this to illustrate the scaling issue:

There is a 3 pixel border around the button graphic, which distorts slightly when being rendered as a final graphic:

http://www.localeconcept.com/pub/Basic_Work/buttontest1.png
http://www.localeconcept.com/pub/Basic_Work/buttontest2.png

See what I mean?

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 05, 2008, 02:26:20 pm
Hi, I am not a Linux programmer, but I have watched your screencast and I was trying to create a UI1 for touch screen with glass effect buttons.
This is the basic button that I created.. http://digilander.libero.it/rages2/immagini/iconavetro.png
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 02:47:51 pm
very cool. Be careful of drop shadows, keep in mind that these buttons will be rendered next to each other (plus any spacing specified in the array.)

Also keep in mind, that unless constrained by a maximum # or by the bounding box of the array, the buttons will wrap to the next row. This happens for example in the "More..." screens.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 05:08:01 pm
a little more tweaking... I think if we could figure out a way to get local temperature to show by the time that would be sweet! especially if we could have a big red ! exclamation point if there is sever weather around.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 05:10:53 pm
General_Info_Plugin can be modified to get weather information. I have wanted to do this for a while. I would expose a variable for temperature:

<%=TEMP%>

but this will require changes to Orbiter, and thus will only be available once our autobuilds start rolling in.

---------------

I also want to re-emphasise, that we need to work on UI work for all variations, not just UI2. If you need to, install Orbiter on a windows PC, or add the Web Orbiter so it can be tested.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 05:14:21 pm
http://imagebin.ca/view/SRs_U0.html

forgot the link earlier
Title: Re: Calling all UI Designers for new Basic Skin
Post by: bulek on December 05, 2008, 05:19:39 pm
General_Info_Plugin can be modified to get weather information. I have wanted to do this for a while. I would expose a variable for temperature:

<%=TEMP%>

but this will require changes to Orbiter, and thus will only be available once our autobuilds start rolling in.

---------------

I also want to re-emphasise, that we need to work on UI work for all variations, not just UI2. If you need to, install Orbiter on a windows PC, or add the Web Orbiter so it can be tested.

-Thom

I'd just like to express wish, that user interfaces will have some containers that will be filled with some useful text or graphic info (like time, weather, important current temperature in the house, etc...). Then by configuration, one an decide what will be shown...

Regards,

Bulek.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 05, 2008, 06:20:08 pm
That was my idea to the touch....http://digilander.libero.it/rages2/immagini/provaUI1.png

Frankly my first idea was to make a pop-up menu and leave the center of the screen free to imagine as in the UI2.

Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 06:29:14 pm
I like that rage, I think that the images you use on your buttons are self expanatory, could we get away with not having the description underneath. How often is someone not going to know what the button is for? I think it would make the UI look cleaner
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 05, 2008, 07:25:53 pm
   
Yes, you have reason.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 07:36:38 pm
So that everyone understands what the end goal is here:

The final result will be a complete skin/designer changes that will ship with LinuxMCE in the future.

As such, the final result needs to be consistent across all the variations. This doesn't mean, look the same, this means that if you placed an orbiter right next to a TV running UI2, or a Cisco 7970, it wouldn't look out of place.

I know it's early to be saying this, but I wanted to make this point. :)

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 08:12:49 pm
Thom,
are you referring to a post, or just making a point?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 08:23:53 pm
Just making a point.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 05, 2008, 08:50:27 pm
Like this krys ??? http://digilander.libero.it/rages2/immagini/prova3.png
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 08:56:41 pm
Yes I personally like that concept better, lets see what others have to say

Thom can you toss up an image of the existing basic UI please, I dont have one handy
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 05, 2008, 08:58:18 pm
   
I also add a button always visible type of free download manager ... and when you press, the menu looks like F7 button in UI2. with this button will solve many problems of the touch screen.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 08:59:21 pm
That's interesting, can we overlay a graphic underneath?

Also no, UI2 is _Not_ designed for touch screen use.. It should NOT be used for touch screen use... There will be a _TON_ of problems if you try to use this for touch screens.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 09:04:16 pm
   
I also add a button always visible type of free download manager ... and when you press, the menu looks like F7 button in UI2. with this button will solve many problems of the touch screen.

I dont understand what you mean? what does the F7 button currently do, and I am also not familiar with free DL mgr

I do think that we should have a pending tasks button somewhere on the mainscreen though, I use it alot and dont like to have to navigate through 3 screens to get there
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 09:05:23 pm
I agreed, that is a button that can be hidden/shown depending on what tasks are available. It might not even be a button.. could be a popup tab even... lots of possibilities.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 05, 2008, 09:09:51 pm
I do not want to use UI2 in touch, sorry if my English is not perfect but I am Italin.
I think that if you make a skin type that I showed you that no one will regret the UI2 in a touch screen
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 09:13:32 pm
Thom,
Does your dt366 go into slideshow mode like the basic UI does on a media director, or does it always stay on the menu? I went ahead and ordered my 366 today so I will be able to see for myself in the future
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 09:26:39 pm
Not currently. It can, but there is no screen saver running on the dt366 orbiters, yet.

rages, I'm sorry, I am not budging on this one. I have extensive UI design experience, and the same UI that would work well with a pointer, will NOT work well with a finger.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 05, 2008, 09:49:44 pm
The picture that I showed you is not suited for a touch?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 09:51:52 pm
No.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 10:14:51 pm
Okay, time for more feed back. Imagine this on an orbiter, UI1 style on a touchpad. You start out with the main menu, overlaid on top of a "desktop" image that the user can change if they want.
http://imagebin.ca/view/zhqsqJ.html


You click on button 3 and its options are then shown to the right a,b,c etc. a,b,c etc will remain to the right until a different number is selected clicked, at which point its letters will be displayed to the right.
http://imagebin.ca/view/ftxm5xk.html

Now, is it possible to have translucent buttons overlaying an image like this in basic UI? Do you like the idea? Is it functional (it will have an extra click which I generally do not like, but I think having a sweet desktop image would be cool)
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 05, 2008, 11:25:38 pm
No transparency, there is no composite extension in the standard orbiter. Since pop-ups are not pre-rendered to the background, any unused pixels will be black.. but good idea, let's try to expand on it.

It will be an interesting experiment to see if we can mix popups with App Desktop objects, definitely an experiment for someone who wants to try it.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 05, 2008, 11:39:17 pm
i was afraid of that. We can overlay opaque buttons on top of a background like that right?

http://imagebin.ca/view/h5RxME_S.html

also is the idea of the wallpaper background that the user could swap out possible?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 06, 2008, 12:00:29 am
sure.-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 06, 2008, 12:42:39 pm
I agree fully with Thom that this needs to be done for all variations and while each variation doesn't have to be identical they should match.  For that reason I really dislike the idea of using these popups on the main menu.  In my opinion using them is this way is not practical and will likely lead to confusing the user.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 06, 2008, 01:12:59 pm
why i can't open your link krys ?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 06, 2008, 01:17:19 pm
thom, then the problem are the pop-ups and transparency?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 06, 2008, 01:28:57 pm
Rages, I really like those icons you made, can you put them on imageshack so I can get to them tho...web filter is blocking it right now.  I'd like to put them in a new mockup idea I came up with this morning.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: jimmejames on December 06, 2008, 05:50:14 pm
To chime in with my $0.02..

I know that there is this media centered first approach that I worry is hindering different UIs.  While I agree that the media is the reason you're using LMCE in the first place, I think there should also be consideration regarding why someone is invoking the menu.  Almost the only time I display the menu is to change artist, or start a DVD, etc- activities where I don't care if the menu takes up the whole screen and probably prefer to have large, more accessible buttons to quicken the selection process.

For those other reddit readers out there, you may remember this post:  http://jonoscript.wordpress.com/2008/10/28/pie-in-the-sky/  For those with Firefox 3, the gist of the article is here: http://people.mozilla.com/~jdicarlo/piemenus.html

That's all fine and great w/o an example so fortunately for the gimp impaired like me, there's this:  http://linux.softpedia.com/get/Utilities/circular-application-menu-35967.shtml

I'm was more thinking of a spider web like interface where when you click one of the buttons the options available under that button are shown on the next out web- look at the top right circle menu on the Screenshot 2 on the above link.

Obviously, applying a circular interface on a square/rectangular screen leaves the corners unfilled.  But if you were to take some of the ideas presented in previous posts such as temperature/current user/current room you could put those items in the corners.

This same interface could be applied on all three interfaces and orbiters so all devices would look the same.  And, I think navigating would be quicker so even though you're filling up the screen with the menu, selecting items would be quicker allowing the menu to be retracted sooner.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 06, 2008, 06:07:23 pm
can you come up with a proof of concept sketch?

-Thom

Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 06, 2008, 06:36:06 pm
The biggest issue with Piemenu's like that is navigating with a normal remote where you're using directional arrows as opposed to a gyro mouse.  It will become difficult at best for the user to predict which item will be focused next.  I have a seperate plan for a main menu that I will post this afternoon when I have more time which I think would meet your goals.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: jimmejames on December 06, 2008, 06:43:04 pm
Here's the whaaa...  I've been trying with gimp, no luck.  Now going to install fireworks unless there is something better/free.  My copy of Macromedia's software is old.

If no other suggestions and fireworks doesn't work, I'll draw it by hand and scan it in.


los93sol, I agree.  Trying to figure out which sub-piemenu to open such as what was show in the drawing would be difficult.  I think what we have going for us is the "fairly" limited amount of pushable buttons required to get to the desired media.  My media button has only 6 items on it, and my climate menu none.  Presumably those could have a lot more if you add different radio stations and multiple split systems in a house that you would want to control via the climate buttons.  A pie menu with outward expanding menus would be limited in that the buttons on the outside would need to be big enough that you could push them.  This, compared with a linear menu where extra items could just be added to the list and have it scroll down.

I will try to draw up what I'm thinking.  Good to know that the knee jerk reaction was not a 'no way'.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 06, 2008, 07:16:29 pm
los93sol , I am not familiar with imageshack ...    if you want individual icons Here are the links

http://digilander.libero.it/rages2/immagini/user.png
http://digilander.libero.it/rages2/immagini/advanced.png
http://digilander.libero.it/rages2/immagini/phone.png
http://digilander.libero.it/rages2/immagini/illuminazione.png
http://digilander.libero.it/rages2/immagini/security.png
http://digilander.libero.it/rages2/immagini/media.png
http://digilander.libero.it/rages2/immagini/clima.png
http://digilander.libero.it/rages2/immagini/iconavetro.png
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on December 06, 2008, 07:45:13 pm
   
I think that you can not create a UI that is good for a PhoneTouch and a touch screen 17 "...
I for example, I mounted a touch 17 "in the kitchen to watch TV, interact with the house, but I would like to have a great impact ... I would like to see graphic photos scroll, etc. ..
Probably I use with a remote control as well as with my finger
Title: Re: Calling all UI Designers for new Basic Skin
Post by: jimmejames on December 06, 2008, 08:02:22 pm
We're talking about adding extra UIs, correct?  Not necessarily replacing UIs.  If one didn't fit a particular orbiter, UI1 or something else could be used instead.  Else, assuming you have a keyboard on your phone and LMCE listens for keystrokes (I don't know if it does), you could do something like this- http://www.donhopkins.com/drupal/node/128  where every button has an associated key. 

Still working on drawing, but this is sort of along the lines that I was thinking:
http://techknack.net/circular-menus-and-usability/   (the orange/white pie menu at the bottom)


Or this  http://doc.trolltech.com/qq/qq11-piemenu.html   is better
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 07, 2008, 12:12:26 am
Rage...thanks for posting them and I appologize in advance for destroying them :P

At any rate this is another mockup I was considering for the main menu only and this would work nicely with virtually any device, though I still like my original layout better.
http://imagebin.ca/view/oQyhAo.html

If I had some talent with photoshop or equivalent I would have made the menu more rectangular so that only the four corners are rounded and the rest of the buttons would meet squarely at the inside edges...if that makes sense.  If anyone likes this idea can someone with more skill do a more proper mockup of what it would look like with a video or picture in the background and some nice black alpha behind the menu?

I think we should give up on the popup menu's on the main screen, they simply won't traverse over to any device and play nicely which means more work to support all devices appropriately and more confusion.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 07, 2008, 03:40:08 am
I did a new sketch for a replacement shortbutton2.png. Take it, try it out, color it , see what you think. Very simple to make, but effective.

http://www.localeconcept.com/pub/skinwork/shortbutton2.xcf

standard button should be saved as shortbutton2.png
highlighted button should be saved as shortbutton2s.png

put these in all the folders under Button with this filename present. It's separate so that you can color it differently etc.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 09, 2008, 03:05:06 pm
Unfortunately I don't use Gimp, how difficult would it be to put the replacement button textures you created in a .png format?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 09, 2008, 03:09:40 pm
so go download a copy. ;-) It's free.  http://www.gimp.org/

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 11, 2008, 07:55:50 pm
Thom,

As I understand it is not currently possible to integrate MythTV's UI into LMCE, are there plans for this in the future?  As I see it almost all of the MythTV UI can be ditched since LMCE handles everything the MythTV would already except for viewing TV.  I really have a hangup on the duct tape feeling I get when I see the MythTV UI pop up.

Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 11, 2008, 08:22:29 pm
Orbiter can take over all of the functionality that MythUI is doing, we just use mythtv to enable viewing instead of mythfrontend.

We'll need to expose a LOT more data via the MythTV_Plugin... This will take the longest, because we have to replicate what mythfrontend is doing for these database queries.

Once this is done, data grids can be attached, and Orbiter can fully assume the role that mythfrontend was previously doing.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: aussie on December 14, 2008, 01:53:52 am
How can i help out???  not very good at programming but have a various knowledge in photshop???
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 14, 2008, 02:10:21 am
First, install HADesigner, make sure you have a working LinuxMCE core you can connect to

Second, watch my screencasts.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on December 14, 2008, 06:34:54 pm
...Just to add to that, once you have an idea how HADesigner works and what is possible it would be nice to put together some mockups, or build on some of the ones already posted in this thread.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: digilifellc on December 15, 2008, 10:59:40 pm
How about a pie menu that starts, and is based in a corner instead of centrally on the screen? It would be more consistent with the pie menu idea, keep the media-up-front concept, take up less space, and would be easier (of sorts) to navigate because the boundaries of the viewable screen are clearly and consistently defined (the edges of the screen). Also, being that every screen on the planet has four corners, this could give way to specific button arrays the perform specific functions, such as top left = media, top right = automation, bottom left = computing and internet, bottom left = technical. You could even use compass directions to get more use out of the screen (top, left, right, bottom). The only issue is that a pie menu doesn't give much room for text, and would be very icon-heavy to be useful.

To think of it, another perk could be the ability to call up these menus without a touchscreen, such as a phone using its dial pad to navigate. The same numbers could be reused for successive sub-menus because each menu layer would function as its own ?entity? (I don't know how to fully describe that one... please forgive me). It would function much like dialing a normal phone number. In order to go back to a parent sub-menu, a 'back' protocol can be used ('Last' or 'Back' or even '8' on a remote control or phone, left arrow on a keyboard, right click on a gyro mouse, etc. TPs would be able to initialize parent menus from sub-menus directly because they would still be visible.)

For OSDs that use gyro mouse functions, when you hover over a function, its text description can show in a status display, as well as its corresponding dial-in number for use with a remote of cellphone.

I may be barking up the wrong tree, but I was just thinking over the pie menu idea and was inspired by the application's screenshot. I do think it can work, but there would need to be some rules in place for it to be practical.

I'll be posting some graphics on what I have in mind in a few hours, don't worry.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 15, 2008, 11:17:09 pm
a picture is worth a thousand words   8)
Title: Re: Calling all UI Designers for new Basic Skin
Post by: jimmejames on December 15, 2008, 11:23:58 pm
I would guess he's talking about something like this:
http://circledock.wdfiles.com/local--files/start/CircleDockLeft.JPG

or this:
http://www.gadgetell.com/images/032006/origamikeybus.jpg
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 15, 2008, 11:27:03 pm
Please guys, let's be realistic.

We need something approachable that most people can use.

And unlike most of you, I actually have experience with pie menus, and given the scope of what this system needs to do, the number of usable spots is not enough to carry even the most basic functional scope.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 15, 2008, 11:29:54 pm
I would also be concerned that the buttons would not be large enough when you are 10-15 feet away watching tv.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: digilifellc on December 15, 2008, 11:35:09 pm
@krys: Good catch. That could be a problem if the icons aren't big enough. In the same breath, if they are big enough, successions will only be able to go so deep before the screen boundaries are hit.

@jimmejames: That's exactly what I envision for touchpanels. Something a little different for OSDs.

@tschak909: You don't think this interface is usable? Why isn't it (more than "I don't like it")?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 15, 2008, 11:38:30 pm
Thom stated earlier that the number of usable spots wouldn't be enough for all of the buttons that we would need, but I am sure he can expand for you.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: digilifellc on December 15, 2008, 11:43:18 pm
Then wouldn't that require a bit of planning of which buttons would be placed where on the interface? Buttons that are close to the edges would fan out inwardly. Buttons aimed at the center of the screen would fan out evenly. If a sub-menu would take up more space than there were spaces available, then I would get worried.

Is there a sub-menu that would take up more than, say 8 spaces?

Even if that were the case, couldn't the sub-menu be broken up into smaller pieces by anchor (corner or compass direction) or even sub-menu A and B?

I'm not trying to refute the answers given, I'm just trying to exhaust all possibilities. Just don't flame me.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: krys on December 15, 2008, 11:52:37 pm
I would just go look at the current menu, and draw what you are talking about and let us see it maybe your thinking of something that we are not. Or maybe your drawing will inspire a whole new direction of thinking.
FWIW, Thom seems to have more experience with this system than just about anyone on here, so if he is against something there is usually a very good reason.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 16, 2008, 12:06:17 am
Keep in mind fellas, this is for the standard shipped skin.

I do not see how a pie menu will be able to scale to the possibilities of handling menui items.. not the least of which, the entire Array code would have to be rewritten to support it.

If someone wants to do it.. fine...

If someone wants to pursue pie menus for a secondary skin... fine...

but i'm not going to ship a skin that will cause people to scratch their heads the first few moments of using it.

Argument over.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: digilifellc on December 16, 2008, 12:15:29 am
Point taken. Just trying to think up a possible solution that could span over several devices in a single shot. Thanks for the feedback.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: digilifellc on December 16, 2008, 12:23:05 am
Back to the original point, are we talking about theming, or something else? The examples that have been shown here all seem to have the same basic framework--left to right menu succession distinguished by different colors for each "function path". Are we designing buttons shapes? Different progression layouts? New icons? Color themes? Button arrangements and groups?

Basically, what do we want this new UI to do differently that it doesn't do (or do well) now?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on December 16, 2008, 12:27:11 am
Phase 1, basic bitmap replacement. Try to make something more appealing that we can ship quickly.

Phase 2, re-think deficiencies in the layout of the basic skin, along with a new set of bitmaps to create a totally new Basic skin.

Phase 3.... ongoing.


We need to design for all of the variations currently in use:

* Normal Horizontal 3:4 (tablets and the like, aka UI1 in the OSD variety)
* PDA 4:3 (vertically oriented UI1 for portrait oriented PDAs)
* Mobile Phone (skin for mobile phone use)
* V2 Normal Horizontal 16:9 (aka UI2)
* SmallUI for Cisco 7970 - a variation of Normal Horizontal 3:4 for very small displays.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: logrus on January 02, 2009, 09:22:03 am
Sorry to come a bit out of the blue here, but from what I understand of the UI it's currently using bitmap images which are placed around the screen according to some kind of system. These bitmaps are prescaled to the size of the screen when installed or when a UI rebuild is requested.

Now if I've understood that correctly and also understood other comments correctly then it would seem that there are some issues with this approach as bitmaps can get distorted when f.ex. downscaling.

I appreciate that this is the way it works and that redoing it is not an option, however, would it be possible to make it take SVG images instead as these should rescale better? Scaling of svg images should be faster, give more accurate results and I imagine it would not require an extensive rewriting of the code.

Comments?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: totallymaxed on January 02, 2009, 12:14:04 pm
@krys: Good catch. That could be a problem if the icons aren't big enough. In the same breath, if they are big enough, successions will only be able to go so deep before the screen boundaries are hit.

@jimmejames: That's exactly what I envision for touchpanels. Something a little different for OSDs.

@tschak909: You don't think this interface is usable? Why isn't it (more than "I don't like it")?

Its a bit like the UI to a car... you know steering wheel, gear shift, pedals etc etc.... in the early days of the Car everyone tried all kinds of different 'UI's'.... but over time the Car's UI became pretty standard. This was important because enabled end to have more choice (ie all cars have pretty much the same 'UI'... so changing 'platform' was easy... from Ford to Chrysler say). Car manufacturers also gained from this standardisation but could still innovate around this norm.

We need to approach LinuxMCE UI's like this too in my opinion... yes lets innovate for sure... but also lets make sure that users can understand and feel 'familiar' with the UI's we develop too.

Happy New Year!

Andrew
Title: Re: Calling all UI Designers for new Basic Skin
Post by: Zaerc on January 02, 2009, 03:32:18 pm
Using vector graphics instead of bitmaps sounds like a very good idea, but I reckon it won't be implemented anytime soon.  And in all honesty I have no idea what amount of effort that would take, still an interesting idea for the long run.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on January 02, 2009, 03:33:33 pm
simplest solution would literally be using something like librsvg, and rendering out to an ARGB buffer that is passed back to Orbiter.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: itspac on January 04, 2009, 05:13:38 pm
Phase 1, basic bitmap replacement. Try to make something more appealing that we can ship quickly.

Phase 2, re-think deficiencies in the layout of the basic skin, along with a new set of bitmaps to create a totally new Basic skin.

Phase 3.... ongoing.


We need to design for all of the variations currently in use:

* Normal Horizontal 3:4 (tablets and the like, aka UI1 in the OSD variety)
* PDA 4:3 (vertically oriented UI1 for portrait oriented PDAs)
* Mobile Phone (skin for mobile phone use)
* V2 Normal Horizontal 16:9 (aka UI2)
* SmallUI for Cisco 7970 - a variation of Normal Horizontal 3:4 for very small displays.

-Thom


Thom, I can understand your desire for step one, but I feel that unless the bitmap replacements are going to be used in step two, you are losing some effort. I do agree that all variants could should be redone, but I would think you would want to figure out the most used variant and start from there.

I liked the simplified main screen with sub screens for media and security etc. The same buttons could be used for a current ui1 remodel and the new layout.


example.

los93sol's  http://imagebin.ca/view/oQyhAo.html (http://imagebin.ca/view/oQyhAo.html)

and

rages'  http://digilander.libero.it/rages2/immagini/provaUI1.png (http://digilander.libero.it/rages2/immagini/provaUI1.png)

can be achieved with the same images,
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on January 04, 2009, 05:50:55 pm
I'm perfectly willing to have the first step thrown away, because it is merely a learning step for all of us. If we try to make universal graphics for everything to transition between phase 1 and phase 2, I believe we will be bogged down in minutiae.

For me, it is most important that Basic, at any stage, to be something that can be polished and shipped.. and it's far too easy with the approach you suggest, to have something that by phase 2, just looks slapped together.

You would have to do some serious convincing to make me change my mind on this one. Pictures talk loud.. working concepts talk loudest.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: itspac on January 04, 2009, 08:34:10 pm
Im not good with graphics, so here is the start of my concept.

First is the main screen. It provides buttons for the major catagories.

Media - static image uses goto screen to go to newly created media screen which shows all the dynamic buttons under that catagory
Lights - static image uses goto screen to go to newly created lights screen which shows all the dynamic buttons under that catagory
Phone - static image uses goto screen to go to newly created phone screen which shows all the dynamic buttons under that catagory
Climate - static image uses goto screen to go to newly created climate screen which shows all the dynamic buttons under that catagory
Security - static image uses goto screen to go to newly created security screen which shows all the dynamic buttons under that catagory
Adavnce - static image uses goto screen to got to screen with options that are not considered major catagory above, computing, power, adavnced options, etc

now playing moved to larger area, when you click, touch the now playing it takes you to remote for what is playing, or nowhere if no media playing.
room and user button possibly sleep button and clock also. Larger buttons make it easier to use for smaller stouch screen devices, imaginges intstead of the lettering i have will make the screen look better and smoother. adding the extra screen adds more clicks yes, but gives you the option to get more on the menu screens for the catagory as below.

http://www.dremagic.com/LMCE/conceptmain.png (http://www.dremagic.com/LMCE/conceptmain.png)

example media menu.

has as many dynamic buttons as decided needed and more to go to similar screen with additional options as needed. dynamic buttons take you to media grid.
nowplaying functions same as main menu above.
room, user, sleep and clock as designated.

http://www.dremagic.com/LMCE/conceptmediamenu.png (http://www.dremagic.com/LMCE/conceptmediamenu.png)


Thats a start to what is on my mind. using the correct sizing in HADesigner the same button images can be used, in a simple image replacement and not clutter you up on details of the button or look slapped together. Main buttons that use symbols and images (like the ones i pointed out) will make the main menu feel more consistant and easy to use.

planning and organizing prevents the ui from looking slapped together, not the images you use.

If that sounds like a start i will make a progession of more screens down the media line like the grid, remote, etc. If not, let me know and ill let it die for this thread.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on January 05, 2009, 03:10:54 pm
It just occurred to me that a huge problem with making a graphically appealing skin is that scenarios generated will not have icons, they will show up as text labels on buttons.  This brings me back to my layout posted on the first page...it's the only feasible way to accomodate and accounts for an unlimited number of scenarios...
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on January 05, 2009, 03:23:49 pm
But scenarios should have a space for icons _because_ the web admin has a place to upload an icon for any user generated scenario.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: itspac on January 05, 2009, 03:45:10 pm
It just occurred to me that a huge problem with making a graphically appealing skin is that scenarios generated will not have icons, they will show up as text labels on buttons.  This brings me back to my layout posted on the first page...it's the only feasible way to accomodate and accounts for an unlimited number of scenarios...

I upload images for my scenarios via web admin. I like that feature just wish the pics were beiiger on smaller orbiters
Title: Re: Calling all UI Designers for new Basic Skin
Post by: los93sol on January 05, 2009, 07:21:21 pm
Right, I realize it's possible, but since scenarios are automatically and user generated, we can't predict how many or even what scenarios will be there for everyone so shouldn't the default be generic with the option to upload an icon?  My experience with LMCE has shown that it's behavior works this way but we see text not fitting on buttons because it's been skinned with icons in mind rather than the auto-generated scenarios with text, etc.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: itspac on January 06, 2009, 04:23:55 am
Right, I realize it's possible, but since scenarios are automatically and user generated, we can't predict how many or even what scenarios will be there for everyone so shouldn't the default be generic with the option to upload an icon?  My experience with LMCE has shown that it's behavior works this way but we see text not fitting on buttons because it's been skinned with icons in mind rather than the auto-generated scenarios with text, etc.

that is the default. i think we see text not fitting on buttons because the text isnt generated with button sizing in mind. either way its the same problem just sated a different way.

for scenarios i would say use text, but with the option that if icons are uploaded for the non typical scenarios overlay the text. where as the basic scenarios icons can be provided.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on January 06, 2009, 04:27:30 am
Basically guys, just keep in mind that:

(1) NO kerning of text is currently performed,
(2) text will be placed in the specified X and Y and W and H coordinates until it overflows, and it will then be clipped.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: rages on January 11, 2009, 11:53:18 am
   
Sorry if I stayed out a little from the debate, but I have revised my idea of trying to follow the suggestions Thom.
I hope to be able to understand me .. (sorry for my bad English).

I thought of creating another menu at the bottom of the screen, avoiding the pop-up menu with transparency.
I then added a button "control pad" that will serve to display in the menu at the bottom the buttons control for the various sections (play, rec, pause, etc ...).

Here's an image http://digilander.libero.it/rages2/immagini/prova5.png

-Emanuele
Title: Re: Calling all UI Designers for new Basic Skin
Post by: Seer on March 05, 2009, 04:18:17 am
Count me as interested.  I've very happy to run into this thread, or I would have started it myself.

I have a few comments about the UI, but I'm not sure if it's the direction you all are headed in, so take these with a grain of salt. Just replacing "Basic" with prettier buttons is a nice idea, as I think that Basic needs a bunch of work, but I wonder what the "problem space" is for a NewBasic skin is?  Here is a small list of things I don't really care for in Basic:

Now, static icons makes PERFECT sense with "UI1" and orbiter touchpads, but for UI2 I'm not convinced.  Both Microsoft MCE & the PlayStation 3's XMB use movable menus so your eyes don't have to move, your menu does.  That way, you can focus on one area and move the menus to your focus point.  The media selection screens use movable lists, which I believe most people like.  It reminds me of selection lists on the iPhone a little, but built for a remote.

Finally, there are some other UI memes out there that I've grown to love.  I really enjoy TiVo's context based color menus.  Red main menu, green for your media selection, purple in some other sections.  It's simple and it gives you a sense of where you are in menus.  I'm not saying we have to go this route, but I'm just throwing ideas out there.  The Security & Lighting menus don't do the same job as the media intensive ones, so why not give them a slightly different "look" with the same "feel" with something as simple as a different color?

What I would like to know from the readers of this thread is what _problems_ people have with Basic, and maybe we can re-skin Basic with some minor corrections to fix what most people feel is deficiencies with the Basic skin (like text not fitting into buttons).  Doing a re-skin job with backend coding done for things like text rendering and possibly a move to include the possibility of SVG would really help out tschak909's goal of getting a pretty NewBasic out there and would drive big improvements to his goal #2 and #3.

So post your problems, pet peeves, and quirks and lets see if we can all make a better experience for everyone!
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on March 05, 2009, 06:19:31 am
Thanks for the interest.

Coloring skins will take a considerable re-designing of the entire UI paradigm and data structure. So No. Am up to somebody to prove me wrong.

The UI covers over the media. This is a feature. It will not be removed. Any new re-implementation of Basic must keep this in mind.

The Static Nature of UI2 can be overcome somewhat with MNG based graphics, and OpenGL effects for UI2. Look in the Effect/EffectType tables for examples. These were not used because of the processing power required at the time, but they are available in the code.

-Thom


Title: Re: Calling all UI Designers for new Basic Skin
Post by: eNoodle on March 05, 2009, 08:34:08 am
The Static Nature of UI2 can be overcome somewhat with MNG based graphics, and OpenGL effects for UI2. Look in the Effect/EffectType tables for examples. These were not used because of the processing power required at the time, but they are available in the code.

I've seen some MNG graphics within the skin directory, but I haven't seen them used in any DesignObj. Are they for UI2 only? I would like to add some graphical goodies to the UI2 version, so animated graphics and some OpenGL effects extend the possibilities. ;)

eNoodle

Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on March 05, 2009, 08:51:13 am
They are for UI1 and UI2. Although I think the code that renders them may have fallen by the wayside and may need to be coaxed back to life.

According to aaron.b, MNG graphics are split apart, and pre-rendered onto the fully composited destination, one frame at a time, This also means that MNG files that are not perfectly square and contain a complete background of their own may have rendering artifacts if you have many odd shaped MNG files in proximity, as OrbiterGen may not get all possible rendered states rendered.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: eNoodle on March 05, 2009, 04:51:35 pm
Ok, this doesn't sound good. I'll give it a try, when going over to UI2, maybe it is usable in some cases.

One question here, if OrbiterGen is rendering it frame by frame, doesn't this also mean, that embedding MNGs would be time-killing at the end?

eNoodle
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on March 05, 2009, 07:42:14 pm
yes.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: Seer on March 05, 2009, 09:27:28 pm
Hmm. strange.  If we could use SVG's, then it might be simple to change the color of every button.  Look at this sample code for a round button:

Code: [Select]
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" viewBox="0 0 50 50" width="1000" height="1000" id="svg2" sodipodi:version="0.32" inkscape:version="0.45.1" sodipodi:docname="Button-Lightblue.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape" sodipodi:docbase="/home/azatoth/img">
  <metadata id="metadata24">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview inkscape:window-height="978" inkscape:window-width="1177" inkscape:pageshadow="2" inkscape:pageopacity="0.0" guidetolerance="10.0" gridtolerance="10.0" objecttolerance="10.0" borderopacity="1.0" bordercolor="#666666" pagecolor="#ffffff" id="base" inkscape:zoom="1" inkscape:cx="679.6237" inkscape:cy="984.92543" inkscape:window-x="373" inkscape:window-y="31" inkscape:current-layer="svg2"/>
  <style type="text/css" id="style4">
#P0,P1 {stroke:#000;stroke-width:.99999958}
#P0 {fill:url(#L0)}
#P1 {fill:url(#R0)}
#P2 {fill:#fff}
</style>
  <defs id="defs6">
    <linearGradient id="L0" gradientUnits="userSpaceOnUse" x1="9.94695" y1="6.3660479" x2="38.992043" y2="44.297081">
      <stop style="stop-color: rgb(136, 136, 255); stop-opacity: 1;" id="stop9" offset="0"/>
      <stop style="stop-color: rgb(16, 16, 48); stop-opacity: 1;" offset="1" id="stop11"/>
    </linearGradient>
    <radialGradient id="R0" gradientUnits="userSpaceOnUse" cx="24.933687" cy="25.066313" fx="24.933687" fy="25.066313" r="23">
      <stop style="stop-color: rgb(96, 96, 160); stop-opacity: 1;" id="stop14" offset="0"/>
      <stop style="stop-color: rgb(96, 96, 160); stop-opacity: 1;" offset="0.78571427" id="stop16"/>
      <stop style="stop-color: rgb(96, 96, 160); stop-opacity: 0;" offset="1" id="stop18"/>
    </radialGradient>
  </defs>
  <path id="P0" d="M49.634373,24.99999C 49.634373,38.530961 38.665353,49.499981 25.134382,49.499981C 11.603411,49.499981 .63439133,38.530961 .63439133,24.99999C .63439133,11.469019 11.603411,0.49999979 25.134382,0.49999979C 38.665353,0.49999979 49.634373,11.469019 49.634373,24.99999z" transform="translate(-0.134407, -1.53761e-05)" style="stroke-width: 0.25; stroke-miterlimit: 4; stroke-dasharray: none;"/>
  <path id="P1" d="M49.499981,24.99999C 49.499981,38.530961 38.530961,49.499981 24.99999,49.499981C 11.469019,49.499981 .49999979,38.530961 .49999979,24.99999C .49999979,11.469019 11.469019,0.49999979 24.99999,0.49999979C 38.530961,0.49999979 49.499981,11.469019 49.499981,24.99999z" transform="translate(-1.50294e-05, -1.53761e-05)"/>
</svg>

http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg (http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg) to see what it looks like (sorry, it's pretty big.  I just wanted a copyright free version for a sample)

This button is completely round, has a gradient and an outline, and is completely text.  The top part (metadata) is all about inkscape, the creator of this image.  The very bottom part (path) is the shape of the button.  You can see in the middle (the defs) where the gradient and fill are.  It has RGB colors in a very script-editable place.  If we used SVG's for all button backgrounds, it would be trivial to create a webamin page that included a color picker and a sample button.  Then, when you click "submit" to your color choices, it would just edit the SVG files and change the RGB values to the user selected ones.  Also, when you re-gen the oribiters, the _scalable_ vector graphics would all look pixel perfect. 

Any thoughts?  I'm going to download all the code tonight and start looking at the backend of this.  I've been wanting to dig my teeth into something as cool and meaty as LinuxMCE, and this is something that is a "small" change that could effect a bunch of the user experience.

tschak999, do you happen to know where in the code I should start looking?

EDIT: caveat:  I've only used SVG's on webpages and in a catalog I designed, never in software.  I've seen all the open source libraries that deal with SVG's, so I figure we could bolt it on.  I'll take a gander when I get home.
Title: Re: Calling all UI Designers for new Basic Skin
Post by: colinjones on March 05, 2009, 09:42:34 pm
Ok, this doesn't sound good. I'll give it a try, when going over to UI2, maybe it is usable in some cases.

One question here, if OrbiterGen is rendering it frame by frame, doesn't this also mean, that embedding MNGs would be time-killing at the end?

eNoodle

eNoodle - If I could make a suggestion.... at the moment, a critical need is for at least 1 alternative UI2 skin! I think the eye-candy stuff would be a vastly lesser interest to most people who just want am alternative skin to Basic when using UI2 :) the eye-candy stuff can come later... and from what I have read from Thom before on the MNG stuff you would be in for a messy time, and hugely long skin regen times... I would love to see your existing skin transposed to UI2 without the MNG stuff first :)
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on March 06, 2009, 01:22:08 am
A new designObj renderer would need to be added to Orbiter to make this work. Designer would also need to be modified to display it. Any takers on an implementation?

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: eNoodle on March 06, 2009, 09:00:14 am
eNoodle - If I could make a suggestion.... at the moment, a critical need is for at least 1 alternative UI2 skin! I think the eye-candy stuff would be a vastly lesser interest to most people who just want am alternative skin to Basic when using UI2 :) the eye-candy stuff can come later... and from what I have read from Thom before on the MNG stuff you would be in for a messy time, and hugely long skin regen times... I would love to see your existing skin transposed to UI2 without the MNG stuff first :)

Hi colin,

of course, you can always make suggestions. ;)

I like to play with HA Designer and try to see, what is possible. I do this, to get an overview of what can be used within a UI1 skin. Currently I'm only adding support for UI1 Normal Horizontal and PDA version. After that I'll directly try to add a Symbian version. The eye candy stuff isn't that important, I agree at that point, but it is there so I have to see it at least once. ;)

UI2 will be a different task and a harder battle. From what I understand now, there is a lot of stuff hardcoded within different portions of codes. Making a new UI2 skin is not only a question of designing, a lot of programming has to be done too. So I'm still trying to get all that stuff into my head.

eNoodle
Title: Re: Calling all UI Designers for new Basic Skin
Post by: Steve on March 07, 2009, 04:44:16 pm
Is this the UI3 Project?
Title: Re: Calling all UI Designers for new Basic Skin
Post by: tschak909 on March 07, 2009, 05:10:30 pm
No. the so called "UI3" project was abandoned because of lack of manpower, and the people willing to work on it had no understanding of what we already had.

-Thom
Title: Re: Calling all UI Designers for new Basic Skin
Post by: Steve on March 08, 2009, 02:07:59 am
Ok, thanx, Thom