Font used for the icons?

Started by tecgen, April 08, 2016, 01:21:48 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

tecgen

Dear all,

I've got three different DSLRs. 550d, 50d and 5d2. Only the 550d has a Q-button. The function of the Q-button on the 50d is the FUNC.-button. On the 5d2 the picture style button is the Q-button.
I like to see the matching icon within Magic Lantern on each model. Currently the icons/Q-back.png and icons/Q-forward.png files are used. For the 50d and 5d2 builds I like to use different icons in future.

Which font has been used to create the Q icon or other parts of ML?

best regards,
Marco 
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

tecgen

Here you can see the two icons I created for the 50D. I used the font Arial and the triangle from the original Q-button icon.

https://bitbucket.org/tecgen/magic-lantern/branch/50D_FUNC_instead_of_Q_icon#diff
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

a1ex

Nice touch.

To include them in the code with minimal effort, I guess the simplest way would be to use ifdef's in ico.c to replace the Q symbols on 50D and 5D2.

For some reason, the new symbols look a bit weird, especially  the FUNC text. For example:

+0x1f, 0xc7, 0x22, 0x42, 0x7c, //    #######   ###  #   #  #    #  #####
+0x3f, 0xc4, 0x21, 0x62, 0x40, //   ########   #    #    # ##   #  #
+0x7f, 0xc4, 0x22, 0x72, 0x80, //  #########   #    #   #  ###  # #
+0xff, 0xcd, 0x22, 0x52, 0x80, // ##########  ## #  #   #  # #  # #
+0x7f, 0xc4, 0x21, 0x4a, 0x80, //  #########   #    #    # #  # # #
+0x3f, 0xc4, 0x22, 0x4c, 0xc0, //   ########   #    #   #  #  ##  ##
+0x1f, 0xc4, 0x32, 0x46, 0x40, //    #######   #    ##  #  #   ##  #
+0x0f, 0xc4, 0x1c, 0x44, 0x7c, //     ######   #     ###   #   #   #####


That's probably because the image isn't black and white, but grayscale. Can you try to threshold it, then fine-tune it manually, then re-convert the icons?

The fonts in ML were custom-designed by stevefal, using this editor: http://rbfeditor.sourceforge.net/ (but you will need an older Linux system in order to run it). Here's an alternative editor (didn't try it): https://chdk.setepontos.com/index.php?topic=12813.0

tecgen

QuoteTo include them in the code with minimal effort, I guess the simplest way would be to use ifdef's in ico.c to replace the Q symbols on 50D and 5D2.
I'll try to implement it this way.

QuoteFor some reason, the new symbols look a bit weird, especially  the FUNC text.
I fix the png pixel for pixel and generate ico.c from a black and white version again. I even don't like the generated picture style icon as it is currently. I guess I need some iterations to generate a pretty icon. ;) 

QuoteThe fonts in ML were custom-designed by stevefal, using this editor: http://rbfeditor.sourceforge.net/ (but you will need an older Linux system in order to run it). Here's an alternative editor (didn't try it): https://chdk.setepontos.com/index.php?topic=12813.0
Thanks! Maybe its more easy to simply copy the single chars F u n c from a screenshot of ML and reuse the letters for the icon.
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

argv[0]

"Let me put my two cents"  :)
#if defined(CONFIG_5D2) || defined(CONFIG_50D)
{
// 'm'
.width = 40,
.height = 34,
.yoff = 3,
.display_width = 40,
.bitmap = {
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0xc0, 0x00, //                         ##
0x0f, 0xe6, 0x30, 0xe0, 0x00, //     #######  ##   ##    ###
0x0c, 0x06, 0x30, 0xf0, 0x00, //     ##       ##   ##    ####
0x0c, 0x06, 0x30, 0xf8, 0x00, //     ##       ##   ##    #####
0x0f, 0x86, 0x30, 0xfc, 0x00, //     #####    ##   ##    ######
0x0c, 0x06, 0x30, 0xfe, 0x00, //     ##       ##   ##    #######
0x0c, 0x06, 0x30, 0xff, 0x00, //     ##       ##   ##    ########
0x0c, 0x03, 0xe0, 0xff, 0x80, //     ##        #####     #########
0x00, 0x00, 0x00, 0xff, 0xc0, //                         ##########
0x0c, 0x61, 0xe0, 0xff, 0x80, //     ##   ##    ####     #########
0x0c, 0x63, 0x30, 0xff, 0x00, //     ##   ##   ##  ##    ########
0x0e, 0x66, 0x00, 0xfe, 0x00, //     ###  ##  ##         #######
0x0d, 0x66, 0x00, 0xfc, 0x00, //     ## # ##  ##         ######
0x0c, 0xe6, 0x00, 0xf8, 0x00, //     ##  ###  ##         #####
0x0c, 0x63, 0x30, 0xf0, 0x00, //     ##   ##   ##  ##    ####
0x0c, 0x61, 0xe0, 0xe0, 0x00, //     ##   ##    ####     ###
0x00, 0x00, 0x00, 0xc0, 0x00, //                         ##
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //

},
},
{
// 'n'
.width = 40,
.height = 34,
.yoff = 3,
.display_width = 40,
.bitmap = {
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x01, 0x80, 0x00, 0x00, //                ##
0x00, 0x03, 0x87, 0xf3, 0x18, //               ###    #######  ##   ##
0x00, 0x07, 0x86, 0x03, 0x18, //              ####    ##       ##   ##
0x00, 0x0f, 0x86, 0x03, 0x18, //             #####    ##       ##   ##
0x00, 0x1f, 0x87, 0xc3, 0x18, //            ######    #####    ##   ##
0x00, 0x3f, 0x86, 0x03, 0x18, //           #######    ##       ##   ##
0x00, 0x7f, 0x86, 0x03, 0x18, //          ########    ##       ##   ##
0x00, 0xff, 0x86, 0x01, 0xf0, //         #########    ##        #####
0x01, 0xff, 0x80, 0x00, 0x00, //        ##########                   
0x00, 0xff, 0x86, 0x30, 0xf0, //         #########    ##   ##    ####
0x00, 0x7f, 0x86, 0x31, 0x98, //          ########    ##   ##   ##  ##
0x00, 0x3f, 0x87, 0x33, 0x00, //           #######    ###  ##  ##     
0x00, 0x1f, 0x86, 0xb3, 0x00, //            ######    ## # ##  ##     
0x00, 0x0f, 0x86, 0x73, 0x00, //             #####    ##  ###  ##     
0x00, 0x07, 0x86, 0x31, 0x98, //              ####    ##   ##   ##  ##
0x00, 0x03, 0x86, 0x30, 0xf0, //               ###    ##   ##    ####
0x00, 0x01, 0x80, 0x00, 0x00, //                ##
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //
0x00, 0x00, 0x00, 0x00, 0x00, //

},
},
#else //defined(CONFIG_5D2) || defined(CONFIG_50D)

'm' 'n'

tecgen

Hi argv[0],

the ico.c file is generated from a list of PNGs. Have a look at the make-icons.py script how its been done. Currently a diff is used to insert the #ifndef lines.

I modified the FUNC png's as well and now it looks like the following code snippet.


0x00, 0x00, 0x00, 0x03, 0xf0, //                               ######
0x3d, 0x12, 0x21, 0x83, 0xf8, //   #### #   #  #   #    ##     #######
0x21, 0x13, 0x22, 0x03, 0xfc, //   #    #   #  ##  #   #       ########
0x21, 0x13, 0x24, 0x03, 0xfe, //   #    #   #  ##  #  #        #########
0x39, 0x12, 0xa4, 0x03, 0xff, //   ###  #   #  # # #  #        ##########
0x21, 0x12, 0xa4, 0x03, 0xfe, //   #    #   #  # # #  #        #########
0x21, 0x12, 0x64, 0x03, 0xfc, //   #    #   #  #  ##  #        ########
0x21, 0x12, 0x62, 0x03, 0xf8, //   #    #   #  #  ##   #       #######
0x20, 0xe2, 0x21, 0x93, 0xf0, //   #     ###   #   #    ##  #  ######
0x00, 0x00, 0x00, 0x03, 0xe0, //                               #####


It's an interesting idea how you aligned the FUNC in two lines. Currently I prefer to have it in one line, but we have to see how it looks on the cameras display. Let us decide later which pngs we use ;)

best regards
Marco
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

argv[0]

Also. May be it will be useful for somebody.
mkicon-canon.gz
It's perl script to recreate bitmap for the icon using it textual representation in the comments of the ico.c file.
For example, you may edit "comment" part of any icon directly inside ico.c file using vim editor, then select lines of changed icon using "visual line selection", type ':', append "!perl /path/to/mkicon-canon -o" into vim command line and press <ENTER>. When command was executed, vim replaces selected lines with script output. The "code" part of the replaced lines will contain recreated bitmap.
Optionally script saves bitmap as an image file (append "-i /path/to/image.png" into command line to do it).

tecgen

I tested my current build only on the 50D.

Here you can see a photo how it looks as a menu entry...


...and inside of a submodule.




Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

a1ex

I have a feeling it will not work just as well in the Expo menu :P

tecgen

You're right, there is not much space left in the expo menu ;) The icon uses every available pixel.





Btw, I created a pull request.
https://bitbucket.org/hudson/magic-lantern/pull-requests/706/use-the-func-icons-instead-of-the-q-icons/diff



Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

tecgen

My current implementation has a bug. As you can see in the photo above the Focus icon is not visible. The way how the different ico.c, ico-lowres.c and ico-50D.c class files are merged does not work properly when I use diff --ifdef .
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

tecgen

In Makefile.platform all currently maintained models are listed. All these platforms should use the full resolution icons.
PLATFORM_MAP = \
5D2.212 \
7D.203 \
7D_MASTER.203 \
50D.109 \
60D.111 \
500D.111 \
550D.109 \
5D3.113 \
600D.102 \
650D.104 \
700D.114 \
EOSM.202 \
1100D.105 \
6D.116


Only some models of the unmaintained platforms e.g. 40D, 5DC use the low resolution icons. Right?


PLATFORM_MAP_UNMAINTAINED = \
40D.111 \
5DC.111 \
100D.100 \


I made some tests and it seems that I could generate one ico.c file that contains all full resolution icons plus the alternative Q-button versions for the 50D and 5D2. This would work almost out of the box. 

@a1ex
I would like to disable the merge of the low and the full resolution icons in icons/make-icons.py when generating the ico.c file. I could provide another file e.g. make-lowres-icons.py to be able to generate full+low resolution ico.c . What do you think?
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

a1ex


tecgen

Ok, than its no option. I guess I need to find another way to merge the icons properly into one ico.c file.
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

tecgen

It seems that I found a way to merge all different icon classes together properly. I updated my pull request and tested it on my 50D. Now the Focus icon is visible, which was not visible before I did my bugfix.

Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

tecgen

Since today's nightly build, the following camera models use an icon that matches their button description.

100D: Av button
50D: Func button
5D Mark II: picture-style button
all other: Q button

A1ex and nikfreak, thank you for your work!

PS: Now I need to find out how to change the documentation in the wiki accordingly. There is nothing written about the 100D.
http://wiki.magiclantern.fm/userguide#the_q_button




Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

josepvm

Nice improvement, thanks!

I have just tested it and works perfectly in my 50D.

But I have 2 other cameras, that also lack a Q button: A 500D (that uses the Liveview button) and a EOS-M (that needs tapping the touchscreen instead of pressing a button).

So, we still need more icons [emoji6]

nikfreak

Good luck on designing the "touchscreen" icons  :P
[size=8pt]70D.112 & 100D.101[/size]

josepvm

Probably the word "TAP" would be enough?.  And "LV" for "liveview" on the 500D.

a1ex

For 500D, you may take the LV symbol from here: https://bitbucket.org/hudson/magic-lantern/pull-requests/694/font-updates/diff

For EOS M, a long press on SET/Q can be made to open submenus, in the same way as a long joystick press opens the submenu on 50D/5D2/5D3/7D. Then you can keep the Q icon.

tecgen

Proposal for the LiveView icons:




I used the icons from the pull request a1ex linked and scaled the icons a bit up by adding some pixels right and top by hand. 
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

josepvm


tecgen

Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n

josepvm

Many thanks, tecgen !

I have just build the code from your repo, including latest commits resizing the icons, and tested it in my 500D. This is how it looks:





I think it's Ok this way.








tecgen

Your welcome josepvm! I'm glad that I could give at least a little bit back to the ML community.
Canon 5D Mark II, 50D, 550D/Rebel T2i, EF 40mm f/2.8 STM, Sigma 18-35mm f/1.8, EF 85 f1.8, EF 135 f2.8 SF, Zoom H2n