Author Topic: Calling all UI Designers for new Basic Skin  (Read 18704 times)

los93sol

  • Guru
  • ****
  • Posts: 396
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #105 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.

itspac

  • Veteran
  • ***
  • Posts: 136
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #106 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.

tschak909

  • LinuxMCE God
  • ****
  • Posts: 5498
  • DOES work for LinuxMCE.
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #107 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

rages

  • Guru
  • ****
  • Posts: 182
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #108 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

Seer

  • Regular Poster
  • **
  • Posts: 19
    • View Profile
    • Gamehendge
Re: Calling all UI Designers for new Basic Skin
« Reply #109 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:
  • The color.  I wish you could select a color (or four) for the base, and have a script auto-gen the highlight, dark-light, and text color based on that.  It might be hard to code, but it would make users able to "own" the UI a little.  SVG might make this a little easier, as SVG files are text and can be changed via scripts
  • The text.  Linux is getting much better at things like kerning and AA text generation.  If we are already using the alpha channel for UI2, why not have subpixel text rendering?  It's not like the MD's have to do this is real time, it's all pre-rendered, right?
  • The fact that the pop-up menus cover the media
  • And lastly, the static nature of the UI2.

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!

tschak909

  • LinuxMCE God
  • ****
  • Posts: 5498
  • DOES work for LinuxMCE.
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #110 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



eNoodle

  • Veteran
  • ***
  • Posts: 93
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #111 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


tschak909

  • LinuxMCE God
  • ****
  • Posts: 5498
  • DOES work for LinuxMCE.
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #112 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

eNoodle

  • Veteran
  • ***
  • Posts: 93
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #113 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

tschak909

  • LinuxMCE God
  • ****
  • Posts: 5498
  • DOES work for LinuxMCE.
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #114 on: March 05, 2009, 07:42:14 pm »
yes.

Seer

  • Regular Poster
  • **
  • Posts: 19
    • View Profile
    • Gamehendge
Re: Calling all UI Designers for new Basic Skin
« Reply #115 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 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.

colinjones

  • Alumni
  • LinuxMCE God
  • *
  • Posts: 3003
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #116 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 :)

tschak909

  • LinuxMCE God
  • ****
  • Posts: 5498
  • DOES work for LinuxMCE.
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #117 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

eNoodle

  • Veteran
  • ***
  • Posts: 93
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #118 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

matrex

  • Veteran
  • ***
  • Posts: 67
  • 16 Years Linux exp.
    • View Profile
Re: Calling all UI Designers for new Basic Skin
« Reply #119 on: March 07, 2009, 04:44:16 pm »
Is this the UI3 Project?
Hybrid core Gigabyte GA-EP45-UD3R m/b 2.8Ghz 2 gig ram. HVR1600 on the core. 2 Orbiter on Android for control 1 phone the other tablet. Running 10.04