Custom ML themes/menus!

[Kromofone]

As said in the title, could it be possible, in the future, of course, to integrate/install custom Magic Lantern menus (themes, if you will)?

I've seen a lot of progress in the ''Design proposal'' topic, and was wondering if it could be done? I would love to be able to choose between different menu styles every now and then, just like in the old Sony Ericsson phones with  custom flash menus supported!

Current top menu style creators IMO are:
 - Novosibirets
 - davekatague

[SDX]

Lets get a bit life into this topic again.
We have seen good ideas for designs, indeed. I would like to discuss how to implement a system for choosing themes.

My thoughts:
 - design a file which represents a theme
    * Should contain dimensions of the different areas in the menu (header, footer, scrollbar?, body) - the layout.
    * Should contain textures for the different areas.
    * Define whenever texture should be repeated or stretched to fill
    * Main menu Icons
    * Icons for sub-menus and values
    * Fonts?
    * Color palette for texts, menu items, hovered menu items, ...
    * more?
 - create simple application to create these files. A python script or something should be enough.
 - write a interpreter on the camera-side
 - add stuff to existing menu structure
 - add menu item to choose between different theme files

Also, I think the current "menu-engine" would need a system to properly set linebreaks (when reached end of horizontally available space).

I don't think we should use something like xml for this. A from ground up, non-human-readable file design should be good enough.

I have spend a bit time on figuring out, how it could look like.
Look at this file, please read it carefully.
What I forgot in it for now:
 - spacing between menu items
 - alternative to 31b 31c
 - "main Menu selected background texture"
 - 3rd option for "stretch and repeat", none.
 - to be continued

Tell me what I forgot. It would be nice, if we could get the designers of the currently existing sketches here. They know better than I what is required.

I know, that this is going to be a lot of work. Some parts of the menu are generated "by hand", hardcoded.

Until now, I have not spent a single thought on anything else than the menu. What do you think, what about the LV?

EDIT:
Just to sum it up - these designs exists:
[spoiler]davekatague

Novosibirets

iamtehlolrus

Arthur
[/spoiler]

(excuse me if the images are not up to date) (EDIT: the spoilers aren't working  )

EDIT: I see that iamtehlolrus is using a very smart method to place the text of the main menu. Maybe we should implement a setting for this, too.

[SDX]

Okay, twenty fixes later: a updated file.
Added stuff mentioned in previous post.

Up for discussion in design of theme file is:
*What about the LV?
*What about iamtehlolrus way of placing the text for the main menu
*What about the 1100D? I have one here and notice that the screen resolution is... yea.. could be better.
*Need to add sub-submenus (actually they look like windows)
*Scrollbar height value
*Body container width (in percent maybe?)
* .. I forgot things for sure!

Would be cool if some of the designers could come up with things they miss.

EDIT: changed textures to 24bit bmp. Only icons need 32bit. And isn't there a problem with some colors? Afair there was something..

EDIT: updated file to version 0.1.3
*Added LV options
*Placement options for mainmenu text added
*Option added for choosing specific cameras. (So one can choose which camera a theme should work on)
*Sub-submenus added

EDIT: knowledge required:
*How do .FNT files look like and how to generate?
*What is with the colors? Can _all_ colors be drawn? I remember some exceptions.
*What with 32bit textures. Do the existing draw functions support alpha channel?

Meaning from a more experienced developer, maybe?

[3pointedit]

I believe that the performance is based on their context, that is how easy are the various schemes are to read on the back of a camera, instead of on a computer screen.

Would be nifty to include them as a jpegs in a release so that everyone who downloads it could try them out (for legibility) and rate their favourite style (perhaps returing a .sys file of some sort to devs). Then more advanced testing could occur.

[SDX]

When the system works as intended the designers are able to modify the theme within seconds and check whenever it works as expected. It should work in way, so that no developer is required to create a theme.

[a1ex]

Bitmaps need to be just like cropmarks (8-bit with palette, RLE). First 80 colors are safe (same on all cameras). Palette can be customized, but it's hard, so it's better to use the safe palette.

Proportional fonts should have the same format as Canon's: http://magiclantern.wikia.com/wiki/Fonts (this is implemented). Trammell implemented scripts to generate them, it should be one of his latest changesets. This has to be merged with current codebase.

A lot of menu entries need to be no longer hardcoded; custom display logic should send strings to menu engine rather than printing things directly. Menus should be split in two parts: name and value, not a single string as it's now. This is quite a bit of work.

I don't think I'm able to tell what's missing, until actually implementing this.

[Marsu42]

I would love to be able to choose between different menu styles every now and then, just like in the old Sony Ericsson phones with  custom flash menus supported!

Themes are nice and all, but my 2cents is to ask for a default theme that looks as similar to the Canon menus as possible. From what I'm reading, ml is still widely considered a "hack" by seasoned photogs and a seamless integration might help to change this, allowing the user base to grow.

[bart]

I'm thinking of a new official project regarding several things. Where we set goals, work out scenarios and come with working options the community can choose from.

Topics are
- Improve whole menu setup.
    - Maybe define maintabs, secondary tabs in 5D mark III style with two top lines lines (see image)
    - Define operational menu items, preferences. What needs to be accessed fast and what are set-once options
- Are the right buttons used. Personally I think [Menu] is better for prefs and submenus
- What about presenting scripted functions as single page programs. These are task driven. For example I want to make a timelapse I goto the timelapse page with all relevant items in one page, maybe make a wizard to setup your timelapse. Same goes for bulb ramping, rack focus, focus stacks, hdr video, hdr photo. In some of these pages items appear double but that doesn't matter. The goal is to have everything you need to achieve your goal in one place.
- Design menuskins that fit every structure. Personally I like some of the menu designs but i'm also perfectly happy with the current one. Only add an extra topline with the dots and we have space for loads of extra items.


5D mark III menu with 2 toplines. One icon and a set of dots

We need a default theme for the tutorials and manual and articles. I don't want to update a lot of menu screenshots all the time because of some new fancy menudesign. So there is a lot of work to do and I have no problem if it will lead to a whole new menustructure and look of Magic Lantern as long as it improves usability and is flexible enough to last a couple of months/years.

I can't run this project now because I have my hands full with the video tutorial project. Somebody else should lead this one and come up with a decent project proposal. I'll try to provide you with your own project space in the forum and other facilities you need.

[SDX]

Okay, wow. This turns out to be a bigger thing than expected.
I totally agree with you on every mentioned point!

A new system would require a lot of work, since the current way the menus are generated isn't very flexible. Lots of hardcoded stuff as far as I can see.
But I think it would definitely be worth it.

This project would definitely require more than 1 or 2 developers and don't know if I would be ready to be some sort of leader - which of course doesn't in any way mean that I wouldn't help.

What I see what needs to be done:
 -Design a new structure and implement it. (You mentioned the 5DIII menu, which is a great inspiration!)
 -Port the current menu entries into this system (this is a lot of work)
 -Implement some sort of theme system, which only has effect to the visual side of things - how things are drawn (colors, sizes, fonts..). (As discussed here). This also includes the development of a tool for creating themes.

[bart]

Yes it's a lot of work and some tasks have different priority.
So I think we should split it up but keeping all goals in mind.

For me first priority is designing a new flexible menu structure with improved logic and space for additional features. So start with the menu content. A lot of this work can be done by defining main categories of features and if they are operational/submenu items or prefs. I already have a list of all features in the menus. It's a google docs sheet I can share with you. A big menu change was not schedules for version 2.3. So it had to wait.
I want to avoid little changes with every new version. Because people have to learn the interface over and over again and search for their setting on different places. I'd do one major well thought through change and stick with that.

[nanomad]

Since the 1100D port is near completion (only two structs missing that should hopefully solve the last few bugs) I can invest some development time into this. My suggestion is to come up with a proof of concept of the theme file and drawing routines using SDL and a PC. Setting up a development environment is straightforward, just follow this tutorial: http://lazyfoo.net/SDL_tutorials/index.php
The drawing routines are similar and porting this system to ML should be trivial.

[Kromofone]

@B4rt
I understand, I'm glad you guys are taking this into consideration. Also I might have to talk to you about something. I'll send you a PM with the subject in my mind.

@Nanomad
Exactly, what I was thinking in the first place! One question though, is this kind of programming hard to do, can I learn to do it easily or is it complicated?

[nanomad]

Unless you're developing complex things, working with SDL is as easy as calling drawRectangle and such (provided you create a bit of initialization code first)

While we are here I'd like to suggest a soft-limit of 18px to the min font height

[SDX]

SDL is a good idea.

I already have so bunch of ideas and can feel that my inner usability and UX designer wants get cracking..
Should we stick with sketches and descriptions first, until we find something that works (usability-wise)? Afterwards that can be realized with SDL.

Or should everyone who's interested and has the time simply realize his ideas with SDL? We could then show the work to the others, discuss and justify it until we find something, that everybody likes.

[nanomad]

Before we start working on our menus idea I think it should be wise to define a common menu structure (what is what) and how to handle long menus. Do we want scrollbars? Or menu-pages? (From a programmer's standpoint drawing pages is much easier than handling menu scrolling).

[SDX]

Scrollbars aren't a good idea. We should keep it as simple as possible (K.I.S.S.). If one menu is filled, we can add another one.

I think the design of the 5D III is fantastic.
I wanted to draw a simple sketch to show my idea (pretty much the same as nanomad just posted). I think I worked a bit too much on the 'sketch', so please ignore the graphic work.




What you see:

You see the 6 main menus. The icons should be clear enough, so that no text is required. That would fill too much on the little screen and confuse the user. The following groups exists:
-Shoot
    Here is everything that is relevant for shooting. That includes what's found in the current shoot menu as well as the current focus menu. The current exposure menu would also go in there.
-Movie
   Here is everything relevant for filming. The current movie menu and some things from other menus.
-Audio
   This includes the current audio menu, audiometers and sound recoreder.
- Draw
  Since I think, that we will see even more functions in future which now would go into the overlay menu, I created a whole group for this.
- Settings
  Here are all those set-once-and-forget-about-it things. This includes e.g. Image review settings, shortcuts. Also the entries of the custom menu can be set here.
- Custom menu
   Your own stuff

The main groups are placed in a order, so that the less used are far away from the default start point (shoot menu). So that shoot, movie and custom can be accessed fastest.
Also I think that those (as I call them) sub-submenus aren't required anymore. That makes it quicker to access all functions.
Currently there is place for 11 entries in each menu. I reduced this to 8. That gives more space, less (confusing) to look at and makes the content clearer for the user to understand.

I have not included the help menu anywhere. I think that that should be opened via the "Info." button and be separate.
If someone has questions, I can explain my ideas more in depth - just ask!

[ilguercio]

I love this layout

[nanomad]

Looks good to me 

[SDX]

I know, that some groups can end up being quite big. E.g. the shoot menu would require the following entries/submenus/points/whateverwecallit:
-General (Basically just the rest)
-HDR
-Timelapse 1
-Timelapse 2
-Traps (motion detect and trapfocus)
-Flash
-Focus (Rack/Stack/Follow -focus)
-White Balance
-ISO

That are 9 points and I haven't included PictureStyles (they are hard to place somewhere)


What we need to consider now:
What is better? To have sub-submenus again or having a whole bunch of points/entries.

EDIT: okay, followfocus could go into the key-menu in the Settings group.

How I think we from now on should call the different levels:
-Groups (the 6 main 'things')
-Points (calling it points is possibly the best idea, since they are visualized as points in all sketches so far)
-Entries (The different values you find under a point)
-Subentires (I used to call them sub-submenus. They are those things I discussed in this post)

[scrax]

I'm so used to the actual ML menu that it's difficult for me to think in another way to set it up. But at the same time it's a bit slow to change something quickly.
Find out what are the set once then forget options also is not easy because probably that list is not universal, each one can have his options.

How other program like 400Dplus works? I think it's faster to set up because it has a lot of shortcut instead of a big menu with all the function, so it's a bit more easy and quick to use once learned but it's not so self explanatory like ML.
400Dplus has three main menu, one for setting up the various scripts (HDR, intervalometer, etc..), another for starting them quickly and one for loading presets (in settings menu you can chose what has to be saved, only 400Dplus, canon, CFn settings etc...), other two minor menu are the one for naming presets and one for saving them.
Only one button is used to access them (PRINT button on 400D), it changes what menu to open based on what the display is showing when pressed.
So when in canon menu pressing PRINT will open "SETTINGS 400DPLUS" menu
When pressed in  "SETTINGS 400DPLUS" menu it will open a SAVE SETTINGS menu (used for saving current settings in one of the nine slot in the list, they can also be named from that screen pressing JUMP)
with the display in LCD mode (all camera settings shown) pressing PRINT will open "QUICK START" menu and from there one can enable or start scripts.
Pressing PRINT when "QUICK START" menu is shown will open up "LOAD PRESET" with the list of the nine preset we can recall.
Other thing that are not script but unlocked feat like focus pattern, spot metering, intermediate/higher ISO, kelvin WB are enabled again with the PRINT button when in each individual setting menu (for example after pressing ISO button canon will show the iso selection screen, if we press PRINT 400Dplus will set ISO to 3000 when on that camera max ISO from canon is 1600, another example is how to set spot metering; after showing up metering selection screen, with the canon button, pressing PRINT will set the mode to spot even if it's not in the options from canon).

I like a lot how 400Dplus work but ML is too different for a similar approach I suppose (first it has to deal with different buttons on different cameras). The big difference is the quick access menu (this could be added as an user defined menu in ML) and 400Dplus opening from canon menu, that make sense to me because without it I'm used to press menu for changing something then if need more option i'll also press PRINT (or TRASH for ML).

what I want to say? Nothing in particular, only  thinking out loud so maybe someone (that never used 400Dplus) will have a great idea for this.

[SDX]

Those who worked with MagicLantern for months and even years will of course have some problems with a new menu system. But I think that the current has two major problems that require the changes we discuss here:
-The current menu is full. There simply is no more space left in it!
-The current isn't very userfriendly. Once you are used to it, you won't recognize it anymore, but it is. It also gives a dissuasive impression. Its not only the visual, the look, but the entire menu system.

But I think that it is worth it. If done correctly, the oldies will not have to spend more than an hour before using the system is as intuitive as walking. Also, I'm convinced of that this can make the user base of ML grow alot!

[a1ex]

So, rather than having submenus, you say it's better to have separate tabs?

I've been playing with 5D Mark III during the last few days and I found it hard to use.

- There are 21 tabs to scroll through; even with the top scrollwheel, it's still slow. On 5D2 there are 9 tabs.
- Related settings are scattered all over (e.g. you have a page with HDR items, but to set the number of frames you have to go to custom functions).

Now, if you want to setup zebra thresholds, you go to zebra entry, then to the associated submenu. Should be pretty straightforward.

As I understand, with the new layout you will have one tab with operational things (on/off settings: zebra, peaking, false colors etc), and then one tab with zebra preferences, another tab with peaking preferences and so on? Or a few preference tabs with everything squashed in?

The number of submenus is huge, here's a list of them, just before 2.3: http://a1ex.magiclantern.fm/bleeding-edge/menus/MENUS.LOG

[SDX]

That is right and was also my concern. That was the reason for asking.

My idea includes, also as shown on the sketch, that eg. the zebra setting has its own point. That is where you both set it on/off and adjust the threshold.

But I think you are right. Subentries/submenus are required in order to not end up with too many points. That also makes it easier for us to put all relevant stuff into one point. For example Timelapse has got 2 tabs. The reason for that was, that all relevant subentries/submenus got expanded.

By the way: what framerate is the menu usually running with or is the drawing event triggered? Could be cool if we could utilize simple animations in order to make more sense of what is going on. I know most advanced ML users will hate me for saying that . But I think a setting for turning that off wouldn't be hard to implement.
And what about that color thing? Do I remember right, that not all colors could be drawn?

[a1ex]

Now menu is refreshed whenever a change is made from the menu (so it reacts fast to things changed from there) and also 3-4 times per second (to cover a few parameters read from Canon firmware or from some other tasks, and also to "fix" Canon code drawing over ML menu). It's double-buffered, which is kinda slow for animations. It also has some tricks to do partial redraws when you turn the wheels faster than it can handle, or if you hold the +/- buttons pressed.

In current implementation, only the first 80 colors are used ( http://magiclantern.wikia.com/wiki/File:Palette.jpg ). The palette can be changed (see the color scheme feature), but it's a bit of work and will cause some flicker while the palette is changed (since there's a Canon menu in background that need to be masked somehow).

[SDX]

Thank you for sorting out that with the colors.
The animations were just a quick 'n' silly idea.

After some thinking I came to the result that the submenus are required no matter what. Now it's just a question on how they should fit into what has been discussed here. I must admit that I don't like 5DIII menu on that point at all. It' a divided layout. On the left you still can see the menu you are coming from, while the submenu is on the right half. It's separated by a line that fits the length of the text on the right side. In my opinion it simply looks stupid and doesn't make any sense at all. At least this is how I see it. Also I don't have a 5DIII here to check it out, play a bit with it and experience it.
Long in short: We need to figure out how to present submenus.

Another thing is the custom menu. I have no idea whatsoever on how the user should be able to manipulate it. How should all entries the user can choose from be presented? How should the user be able to add points? How to remove? Lots of stuff to think about.

So, please come with our ideas and opinions, no matter how silly they are!