Author Topic: Font used for the icons? (Read 14006 times)

tecgen · « **on:** April 08, 2016, 01:21:48 PM »

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

tecgen · « **Reply #1 on:** April 08, 2016, 01:40:48 PM »

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

a1ex · « **Reply #2 on:** April 08, 2016, 04:24:09 PM »

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:

Code: [Select]

+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 · « **Reply #3 on:** April 13, 2016, 02:04:22 PM »

Quote

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.

I'll try to implement it this way.

Quote

For 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.

Quote

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

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.

argv[0] · « **Reply #4 on:** April 14, 2016, 09:48:36 AM »

"Let me put my two cents"

Code: [Select]

#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)

tecgen · « **Reply #5 on:** April 14, 2016, 10:03:16 AM »

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.

Code: [Select]

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

argv[0] · « **Reply #6 on:** April 14, 2016, 03:00:02 PM »

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 · « **Reply #7 on:** April 14, 2016, 03:28:00 PM »

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.

a1ex · « **Reply #8 on:** April 14, 2016, 03:35:58 PM »

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

tecgen · « **Reply #9 on:** April 14, 2016, 03:54:23 PM »

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

tecgen · « **Reply #10 on:** April 14, 2016, 09:07:14 PM »

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 .

tecgen · « **Reply #11 on:** April 15, 2016, 11:49:17 AM »

In Makefile.platform all currently maintained models are listed. All these platforms should use the full resolution icons.

Code: [Select]

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?

Code: [Select]

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?

a1ex · « **Reply #12 on:** April 15, 2016, 12:17:19 PM »

1100D uses half-res icons.

tecgen · « **Reply #13 on:** April 15, 2016, 12:54:56 PM »

Ok, than its no option. I guess I need to find another way to merge the icons properly into one ico.c file.

tecgen · « **Reply #14 on:** April 25, 2016, 06:10:18 PM »

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.

tecgen · « **Reply #15 on:** April 28, 2016, 10:37:24 AM »

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

josepvm · « **Reply #16 on:** April 28, 2016, 09:39:16 PM »

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 · « **Reply #17 on:** April 28, 2016, 10:28:45 PM »

Good luck on designing the "touchscreen" icons

josepvm · « **Reply #18 on:** April 28, 2016, 10:38:23 PM »

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

a1ex · « **Reply #19 on:** April 29, 2016, 08:29:56 AM »

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 · « **Reply #20 on:** April 29, 2016, 12:46:17 PM »

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.

josepvm · « **Reply #21 on:** April 29, 2016, 01:02:30 PM »

They look fine to me.

tecgen · « **Reply #22 on:** April 29, 2016, 02:26:31 PM »

pull request for the LiveView icon (only 500D):
https://bitbucket.org/hudson/magic-lantern/pull-requests/723/model-specific-icons/diff

josepvm · « **Reply #23 on:** April 29, 2016, 04:51:37 PM »

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 · « **Reply #24 on:** April 29, 2016, 09:16:54 PM »

Your welcome josepvm! I'm glad that I could give at least a little bit back to the ML community.

News:

Author Topic: Font used for the icons? (Read 14006 times)