App Label Backgrounds & Text Centering

[Grizzly-Adam]

I have colored label backgrounds working and themeable, but it would be good to make improvements.

Is there a way to determine how wide an app name is so we can use that info to center label text and set width for label background?

Is there a way to implement colorizing the textcolor_bg image instead of needing a new colored image each time we wish to change colors?

mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, (mtos.theme.app_textcolor_bg), "")..

[bell07]

Is there a way to determine how wide an app name is so we can use that info to center label text and set width for label background?

Unfortunately, no. Even worse, it looks different depending on screen resolution and DPI size. Maybe this will be beter in future.

Is there a way to implement colorizing the textcolor_bg image instead of needing a new colored image each time we wish to change colors?

Unfortunately I do not know such way to :-(

the screenshot looks nice! Would be nice to see the PR for this ;-) Hm, you use a "button" for the background to be clickeable. You can add the label to the button too, then the get_label() above is not needed anymore .. Maybe you try this? (e.def.app_name instead of "") mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, (mtos.theme.app_textcolor_bg), e.def.app_name)..

[bell07]

EDIT: Sorry,

Is there a way to implement colorizing the textcolor_bg

Yes: https://github.com/minetest/minetest/blob/master/doc/lua_api.txt#L499

textcolor_bg.."^[colorize:"#141E28:128"

[bell07]

YES: I tried it with text in button and the text becomes centered on the button ;-) Can you pls. do the app_textcolor_bg colorized in theme and try the line mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, mtos.theme.app_textcolor_bg, e.def.app_name)

[Grizzly-Adam]

I will work in it when I get home in a little over six hours. Look forward to playing with this one.

[Grizzly-Adam]

mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, 'laptop_theme_app_textcolor_bg_white.png', "")..

^Above works fine, shows white background.

Below gives error ')' expected near #

I have been messing it for a while, like beating my head against the wall.

mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, 'laptop_theme_app_textcolor_bg_white.png'.."^[colorize:"#141E28:128", "")..

Re: centering I bumped it up to x-.5 and it is centered here now. Can we set it to automatically set the width to match (be slightly more than) the appname?

mtos.theme:get_image_button((x-.5)..','..(y+1.08)..';2,.4', 'app', e.name, mtos.theme.app_textcolor_bg, e.def.app_name)

[bell07]

Below gives error ')' expected near #

mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, 'laptop_theme_app_textcolor_bg_white.png^[colorize:#141E28:128', '').. or mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, 'laptop_theme_app_textcolor_bg_white.png^[colorize:'..mtos.theme.app_textcolor_bg, '')..

note : " and ' does have the same functionality, but we do not should to mix them...

Can we set it to automatically set the width to match (be slightly more than) the appname?

still no :-( But we know the app names and can rename them for beter displaying

[Grizzly-Adam]

Both of these fixes remove the text and it's bg all together.

It should be one of the two below but neither show up at all. If I remove the colorize portion, they both show up, as the white background.

                  mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, 'laptop_theme_app_textcolor_bg_white.png^[colorize:#141E28:128', e.def.app_name)

or

mtos.theme:get_image_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, 'laptop_theme_app_textcolor_bg_white.png^[colorize:'..mtos.theme.app_textcolor_bg, e.def.app_name)

[bell07]

I did not get managed to use them too :-(

But what I seen is the "app" prefix is used in theme:get_image_button() That means the texture is basically set to theme.app_button texture. And it seems the provided *app_button.png" textures are not used at the time.

So if you modify the "*app_button.png" textures according the requirement, it should be the beter way. Note: different themes can share some texture.

We do not need the second image "laptop_theme_app_textcolor_bg_white.png" for now,

mtos.theme:get_button((x-.4)..','..(y+1.08)..';2,.4', 'app', e.name, e.def.app_name)) <- 'app' is used as prefix to load the theme.app_button image!

[bell07]

And it seems the provided *app_button.png" textures are not used at the time.

That is wrong. The images are used as background under the app icon. (In previous line, get_image_button(x..','..y..';1,1', 'app' ...)

So may we need an new prefix.

In meantime I see the used prefixes are not really self explanatory so maybe we need to rename them all, in all themes?

Some sorting:

All Apps

app_bg = ok (Background used for all apps) textcolor => Maybe shoul dbe renamed to app_textcolor because valid for whole app (used if no prefix given or as fallback if no prefix_textcolor set)

titlebar_textcolor = ok

back_button = ok back_textcolor = ok

exit_button = ok exit_textcolor = ok exit_character = ok,

major_button = ok major_textcolor - unused but possible to set

minor_button = ok minor_textcolor - unused but possible to set

contrast_bg = ok ==> Workaround for

Launcher

launcher_bg = ok (Launcher Background)

app_button = "app" is used for whole app background. New proposal: launcherentry_button ?? app_textcolor => launcherentry_textcolor ?? Then new prefix "launcherentry_label" for the new "label-Button" that result to "launcherentry_label_button "and "launcherentry_label_textcolor" settings?

taskbar_clock_position_and_size = ok

Other

node_color ==> implemented in framework, but not used

[Grizzly-Adam]

OK, I am in agreement. However, I would like to propose these changes that use common computer terms:

launcher_bg = ok (Launcher Background) desktop_bg

app_button = "app" is used for whole app background. New proposal: icon_image ?? app_textcolor => icon_textcolor Then new prefix "icon_label" for the new "label-Button" that result to "icon_label_bg "and "icon_label_textcolor" settings?

taskbar_clock_position_and_size = ok

[bell07]

The wording "launcher" was because I developed it with android in mind (just an app, replaceble). But agree "desktop" is more common name for this.

launcher_bg = (Launcher Background) desktop_bg => desktop_background (avoiding not self explanatory cuts)

app_button => icon_image => icon_button - "image" is the additional value in get_image_button() call. The suffix "_button" is hard-coded for button textures in get_button() and get_image_button(). The new prefix is of course "icon" for app entry in launcher.

New prefix "icon_label" (or iconlabel?) => icon_label_button for the background (=button texture, if get_button() is used) and icon_label_textcolor for text color

[Grizzly-Adam]

I think icon_label, part of the icon set.

[bell07]

ok

[bell07]

There was already a discussion about "File Manager" (#64). Assume we need icons for File manager too that should be differ. Maybe the launcher icons should be prefixed by desktop_icon and desktop_icon_label instead of "icon" and "icon_label"? Part of the "desktop" set?

[Grizzly-Adam]

Yeah, that could work. But we could keep it simpler as everyone calls desktop icons "icons." We could just then differentiate any other icons as subsets of their app, such as fm-icon

[bell07]

The "icons" theming for other apps should be the same across all apps. Thats because the file manager should be same-themed like the "file save as / file open" dialog, that is used in all supported apps. The difference is based on the desktop background (image) vs app background (white) / (desktop_background vs. app_bg (=> app_background)) So we need both: desktop_icon namespace and app_icon namespace. (Assume "app_*" should be the set valid for all apps?)

[Grizzly-Adam]

That works.

[Grizzly-Adam]

I made black, white, and grey desktop_icon_label_button textures. All 1x1 pixel and indexed to reduce size. Pull request submitted.