Magic Lantern Forum

I'd like to propose a small facelift to the main layout, taking into account the new fonts and other improvement opportunities.

It would be interesting in addition if ML's menu reflected the selected canon "screen color".

I cant wait when ML will start working on a touch friendly interface since it seems like all the new DSLR will have the touch screen ability. :) For now I like what your suggesting here.

nice UI, but I want to solve how to show both helps (.help, .help2) and warnings at same time
sometimes I have to turn on LV or switch something on/off to hide warnings and show .help2 which is in many cases important to see
any ideas?

Love the scroll indicators  :D

Applied most of the tweaks (https://bitbucket.org/hudson/magic-lantern/commits/2c87a946f7d5).

To get the exact color for selection bar, one has to convert it into YUV (and I'm not sure if it's Rec.709 or Rec.601 or camera-specific). Who'd like to do the math for me?

Minor: if I use the exact color for OFF icons as for the OFF text, the icons would appear much brighter because of larger area. So I've brightened them a bit, but not that much.

Quote from: pravdomil on September 24, 2013, 12:47:10 PM
sometimes I have to turn on LV or switch something on/off to hide warnings and show .help2 which is in many cases important to see

When exactly?

I didn't apply the new title font yet. When I'll do that, I'd like to remove Canon font rendering engine completely (so we should have a single way of doing these things (http://www.python.org/dev/peps/pep-0020/)). This also requires the icons to be in a separate RBF font (icons.rbf?)

Nightly builds are being recompiled, so you'll be able to try the new look in a few minutes.

Did I miss anything?

Are there different resolutions of the displays depending on the model?
550D:
(http://i.imgur.com/idfJzqf.png?1)

Did you copy the font files?

No, I'll try...

Thanks, looks very nice. :-)

Are the font files downloaded with the nightly build? cant seem to see them,

Ignore that, all good and new layout is real nice n clean looking guys.

Yes:
/ML/fonts/

Okay, now things looks much slicker!!! :) Good job!

Sorry for the delay..

1) I like how things are looking.

2) I found these for conversion. Not sure if they will help:

Y = R * 0.299 + G * 0.587 + B * 0.114
U = R * -0.169 + G * -0.332 + B * 0.500 + 128;
V = R* 0.500 + G * -0.419 + B * -0.0813 + 128;

2) The colors aren't working very well yet. I understand that the highlight bar conversion is inaccurate, but other colors are off too. I guess this is a palette issue. After settling the layout stuff, I'd like to take another pass at all the colors. It would be nice if any ML colors could be specified in YUV (or RGB), so tuning isn't so mysterious (to me).

3) Can you move the two help lines up 2 pixels?

4) The forward icons are not left justified with the text for me, need to move left 6 pixels.

5) The forward icons should be full white like the text.

6) I think we should get rid of the "tab" treatment in the menu bar. With increasing number of icons, they are getting so close together than there's little room anymore. Also the black tab background can be hard to see depending on final contrast (yes the outline helped, but that's another issue). So I'd rather tune the three colors (background, active icon, inactive icon) so that the UI is clear and clean. Without removing code, can you make the tab color the same as the background for now, so we can try tuning colors with that out of the equation?

7) I know you like to relax line spacing when you can, but I feel that in the 11-row case, the crowding between the bottom of the list and the bottom bar is a worse issue. To my eye, the padding above and below the list (as when the scroll indicators are showing) provides needed relief for the eye, and makes the whole layout, including the list, look less dense, even when the lines are tighter by 1 pixel. Uniformity of placement is good and I feel that the line spacing should be the same everywhere. These small things mean a lot towards achieving elegance. Perhaps you can tighten the spacing by 1 pixel as I suggested, and then after I have a chance to tune everything to the best of my ability, if you think there is a problem, we can revisit?

8 ) Regarding Canon fonts etc, are you suggesting that we put all the menu icons in an rbf font? Makes sense. Can you think of a programmatic way to port them? Otherwise I could recreate them manually, but ugh. Tell me either way.

9) I see a "G" menu in your screenshot. What is that, and is it part of the build?

Quote from: stevefal on September 26, 2013, 12:40:34 AM
9) I see a "G" menu in your screenshot. What is that, and is it part of the build?

G is the game menu, so when you load a game module onto ML that menu becomes visible. :)

QuoteG is the game menu

Thanks. Here's an idea:

(http://popspring.com/mldrop/games.png)

These colors should have more contrast.
It is not possible to distinguish them in bright light conditions.
(http://ipic.su/img/img7/fs/kiss_66kb.1380193675.jpg)

I don't like the bar borders removed, I think it looks better with them than without. I prefer the aesthetics of the borders over the tiny 4 pixel savings. ML looks more refined with them if you ask me.

QuoteI think it looks better with them than without.

I encourage folks to reserve judgement until the build reflects an intentional design. The current state is out of sorts due to discrepancies in color specs (and some layout).

In either case, in order to balance the sentiment with mine, I prefer the aesthetic of no borders. Every line is two more visual transitions, which, at a certain level, is noise. And given constraints and the current font set, the 4 pixels happens to be significant in this case. That said, I'm not happy with the current look yet, so I intend to put more effort into it, developer(s) willing.

In general I think that the need to dress up visuals in order to make things look good is indication of some other problem. So I hope to get to simple unadorned design that also looks good.

Quote from: stevefal on September 27, 2013, 01:48:59 AM
In general I think that the need to dress up visuals in order to make things look good is indication of some other problem.

I don't. That's my professional opinion (as a software engineer who does a lot of design and coding of user interfaces). All we're talking about here is a simple border, I'm not suggesting gradients or drop shadows. It really helps to have clear demarkation of separate visual elements. Just look at the Canon display, there are borders around all of the different boxes. The upper-left lighter border helps give a since of depth and makes the boxes stand out while only using one extra pixel.  Borders are not "noise" they help you do more with less. It's harder to see which icon at the top is selected now because the black is so close to the dark gray icons background. Put a lighter colored border (like there used to be) around it and it stands out much more, and it just looks better.

Appreciate the input. Thanks.