Skip to content

Dynamic branding color for different build types - #5166

Open
rubiefawn wants to merge 19 commits into
LMMS:masterfrom
rubiefawn:dynamic-icon
Open

Dynamic branding color for different build types#5166
rubiefawn wants to merge 19 commits into
LMMS:masterfrom
rubiefawn:dynamic-icon

Conversation

@rubiefawn

@rubiefawn rubiefawn commented Sep 3, 2019

Copy link
Copy Markdown
Contributor

Adds scripts that, if run, change the color of the branding to indicate unstable builds.

  • Colors the splash, app icon and project icons: 💚 "STABLE", 💙 "BETA|ALPHA", 💜 "NIGHTLY"
  • Brands the installation directory
    • macOS: /Applications/LMMS Nightly, etc
    • Windows: C:\Program Files\LMMS Nightly, etc
  • Separates the config files between release types:
    -rw-r--r--     1 owner  staff    1557 Mar  6 04:13 .lmmsrc-nightly.xml
    -rw-r--r--     1 owner  staff    1659 Mar  5 02:21 .lmmsrc.xml
    

Developers notes:

  • Brands the splash screen, app icon, project file icon
  • Adds new optional build dependencies: rsvg-convert, imagemagick
    • fallback support for inkscape, gimp
  • Adds new build option WANT_DYNAMIC_BRANDING (default ON)
  • Adds new modules to cmake/modules/branding/
    cmake/modules/branding
    ├── BrandingHelpers.cmake
    ├── BrandingInstall.cmake
    ├── IconUtilConvert.cmake
    ├── MagickConvert.cmake
    ├── SetupBrandingEnv.cmake
    ├── SvgConvert.cmake
    ├── SvgRecolor.cmake
    └── gimp_convert.scm.in
    
  • Adds new BRANDING_DEBUG (default OFF) for troubleshooting branding related issues

⚠️Todo

  • Properly auto-detect build type from git tag (or assume unstable otherwise)
  • Provide example screenshots here
  • echo message regarding build type & corresponding branding in cmake
  • Trigger soft warning when bash and other command-line tools aren't available (Windows compatibility, see issues below)
  • Document command-line dependencies

❓ Optional

  • Show build type in splash screen
  • Show build type in about dialog
  • (SKIPPED) Use the svg resources directly in LMMS (would require significant effort, documentation)
  • Re-implement the entire concept in cmake to increase cross-platform compatibility (big task)

❌ Issues

  • msvc build environment not handled at all. Windows does not have the tools required to render .svg files without some significant setup. .ico files can be produced with gimp from a set of .png images, though. msvc builds will default to the existing default green raster resources. (Fixed with `choco install imagemagick rsvg-convert)

Previews (as of 2019-09-15)

This PR was rewritten in 2025. The original code is left available here for historical purposes: https://github.com/tresf/lmms/tree/dynamic-icon-old

Comment thread cmake/branding/generate_icons_linux.sh Outdated
@rubiefawn rubiefawn mentioned this pull request Sep 10, 2019
Comment thread cmake/modules/VersionInfo.cmake Outdated
Comment thread cmake/linux/generate_icons_linux.sh.in Outdated
Comment thread cmake/linux/generate_icons_linux.sh.in Outdated
@tresf

This comment was marked as outdated.

@tresf

This comment was marked as outdated.

Comment thread cmake/apple/generate_icons_apple.sh.in Outdated
@rubiefawn

This comment was marked as outdated.

@PhysSong

This comment was marked as outdated.

@tresf

This comment was marked as outdated.

Comment thread cmake/branding/logo-small.svg Outdated
Comment thread cmake/branding/recolor_graphics.sh.in Outdated
Comment thread cmake/branding/recolor_graphics.sh.in Outdated
Comment thread cmake/branding/recolor_graphics.sh.in Outdated
@eagles051387

eagles051387 commented Sep 11, 2019 via email

Copy link
Copy Markdown

@rubiefawn

Copy link
Copy Markdown
Contributor Author

Thanks for the input, @eagles051387, but the red will remain "unknown". See below:

What ❤️ UNKNOWN build type IS

  • A warning, indicating an immature build that is not ready to use and has zero usability guarantee.
  • A fallback, indicating an error somewhere in the version detection script.

What ❤️ UNKNOWN build type IS NOT

  • Binary source security
  • Used or specified intentionally
  • The 💙 BETA Release Candidate option (some new, stable features that need testing)
  • The 💛 NIGHTLY Nightly build option (new, unstable features that need testing)
  • The 💚 STABLE Stable build option (as stable as it gets)

@tresf

tresf commented Sep 11, 2019

Copy link
Copy Markdown
Member

@eagles051387 your comments are a bit out of context because they were placed in the main discussion (I assume they were in reference to this #5166 (comment) review discussion). I gave it a thumbs down because of your history of lazy replies to complicated problems. Please be more considerate of the way the tracker works (you should know, you helped set it up). <3

@RebeccaDeField

Copy link
Copy Markdown
Contributor

Alright, I hope this comment helps to sort things out and provide some assistance. Let's recap a few things:

The files needed for this project are?

  • The Splash. Is this rendering correctly without problems?
  • The Logos. Which we have recently acquired the sources to and working out the details in discord.
  • Anything else? Let me know and I will track it down.

A thorough comb over the discord conversation tells me that somehow different people were under different impressions (including me, previously understanding that we were only finalizing the green/yellow options) for the colors so I wanted to address that here to clarity.

This was the original proposal
unknown

If the script is able to auto-detect the build type, then the red option can be taken out.

I already had the colors used for LMMS documented in our design elements file, but I have separated it out and added it to the directory on its own so that it is easier to use and find in our artwork repo here. Of course, the green and even the yellow can stay exactly as it is, but I wanted to suggest tweaking the hues of the other colors to match these for consistency.

That would these examples all color variations available if matched exactly to these colors (I'm assuming we would just match to the right hue, but wanted to add everything for clear communication):
Colors2

And as per Ian's request, here are the hex codes for all of the colors:
Orange: # db9300
Blue: # 0ac8bb
Red: # 800a1d
Purple: # 3c3282

If we do end up using red, I suggest matching to the wine-red already in our palette.

@tresf

tresf commented Sep 12, 2019

Copy link
Copy Markdown
Member

@RebeccaDeField,

@iansannar has given me permission to help with this script to add multiple SVG size support. What I need:

  • Optimized SVGs for all Desktop icon resolutions
    ... the ones I have now from @Umcaruje will suffice until the optimized SVGs are provided
  • Optimized SVGs for Windows Modern UI tile "UWP"
    ... the ones I have now are OK for proof of concept, but use a color code in the SVG that's off by a hair. I've hand-edited this for now so I can move forward with the script
  • Optimized SVG for splash screen
    ... the one we have now isn't rendering in Chrome properly making it hard to test
  • Optimized SVG for projects/mimetype
    ... the ones I have now from @Umcaruje will suffice until the optimized SVGs are provided. Why do I need these? Well, we're already batching the desktop icons, so I'm going to add the same .ico|.icns creation for consistency purposes

So pretty much ALL SVGs need to be optimized and redelivered. The build colors should be easy to tweak.

Side note, I feel these colors are too close to be used as versioning identifiers.

image

Lastly, we'll need to make a decision on number of colors we're doing. I think Discord is the best place for that conversation?

@Umcaruje

Umcaruje commented Sep 12, 2019

Copy link
Copy Markdown
Member

@tresf can you explain what

use a color code in the SVG that's off by a hair.
for the UWP icons means?

I am in the process of making the optimised SVG's, I'll be delivering them to the artwork repo in a pull request

@tresf

tresf commented Sep 12, 2019

Copy link
Copy Markdown
Member

use a color code in the SVG that's off by a hair.

@Umcaruje please take a look at the green hex color used in the Windows 10 tile. It's off slightly when compared to the icon. e.g. #249a57 instead of #249a56

@Umcaruje

Copy link
Copy Markdown
Member

please take a look at the green hex color used in the Windows 10 tile. It's off slightly when compared to the icon. e.g. #249a57 instead of #249a56

That's because it does not use a gradient, and the background is a solid color, though I suppose we could change it if it will simplify the scripts, it's not that big of a shade difference

@tresf

tresf commented Sep 12, 2019

Copy link
Copy Markdown
Member

That's because it does not use a gradient, and the background is a solid color, though I suppose we could change it if it will simplify the scripts, it's not that big of a shade difference

I'm fine either way, but I can't believe with any reasonable belief that this is intentional. The difference between the colors is indistinguishable by the naked eye. It seems unlikely that this was intentional. I don't mind, but if by some chance it is intentional, I'll need blue, yellow, red equivalents. If these aren't provided, the PR will be merged with the ones I've created.

@Umcaruje

Copy link
Copy Markdown
Member

I'm fine either way, but I can't believe with any reasonable belief that this is intentional. The difference between the colors is indistinguishable by the naked eye. It seems unlikely that this was intentional. I don't mind, but if by some chance it is intentional, I'll need blue, yellow, red equivalents. If these aren't provided, the PR will be merged with the ones I've created.

I'll change them to the hex you said

@Umcaruje

Copy link
Copy Markdown
Member

@tresf @iansannar I have pushed the icons in optimized svg format to LMMS/artwork

You can find them in folder Icon & Mimetypes. @RebeccaDeField also uploaded a optimized svg version of the splash screen, which you can find in the folder Default Theme

Let me know if there is any more issues with these files, all your demands should have been met.

@RebeccaDeField

RebeccaDeField commented Sep 12, 2019

Copy link
Copy Markdown
Contributor

@tresf

So pretty much ALL SVGs need to be optimized and redelivered.

Done.

Side note, I feel these colors are too close to be used as versioning identifiers. Lastly, we'll need to make a decision on number of colors we're doing. I think Discord is the best place for that conversation?

Will put together some clear options and head up the conversation over on discord as soon as I can.

@AW1534 AW1534 modified the milestones: 1.3-alpha.2, 1.3 May 5, 2025
@JMii63

JMii63 commented Jul 14, 2025

Copy link
Copy Markdown

hey @tresf could you try and resolve those conflicts we got going on in this pr?

@tresf

tresf commented Jul 14, 2025

Copy link
Copy Markdown
Member

hey @tresf could you try and resolve those conflicts we got going on in this pr?

Eventually. Since the artwork changed, I've realized the need to offer a way to do this programmatically, which requires a refactor. I'm not sure when I'll jump back into this as IRL things keep taking precedence.

@JMii63

JMii63 commented Jul 14, 2025

Copy link
Copy Markdown

hey @tresf could you try and resolve those conflicts we got going on in this pr?

Eventually. Since the artwork changed, I've realized the need to offer a way to do this programmatically, which requires a refactor. I'm not sure when I'll jump back into this as IRL things keep taking precedence.

oh ok

@JMii63

JMii63 commented Jul 25, 2025

Copy link
Copy Markdown

Eventually. Since the artwork changed, I've realized the need to offer a way to do this programmatically, which requires a refactor. I'm not sure when I'll jump back into this as IRL things keep taking precedence.

Can you not just put the images in a folder and have LMMS refer to that? I might just be dumb, but that sounds like a good option in my head. (For different branches of course)

Edit: You could also just make it a downloadable theme, that exists… I might do that actually.

@tresf

tresf commented Jul 25, 2025

Copy link
Copy Markdown
Member

Eventually. Since the artwork changed, I've realized the need to offer a way to do this programmatically, which requires a refactor. I'm not sure when I'll jump back into this as IRL things keep taking precedence.

Can you not just put the images in a folder and have LMMS refer to that? I might just be dumb, but that sounds like a good option in my head. (For different branches of course)

Yes, we can ABSOLUTELY place the burden of managing artwork at arbitrary sizes (16x16, 16x16@2, 32x32, 32x32@2, 64x64, 64x64@2), formats (.ico, .icns, .svg, .png) and locations (/usr/share/icons/hicolor/, etc) and colors (green, blue, purple, yellow) upon the artwork designer, but this PR already manages all four of those burdens, so we should make it easier to automate this (which is the main remaining task here).

Edit: You could also just make it a downloadable theme, that exists… I might do that actually.

Although this PR does modify files that a theme can take advantage of, theming is not the primary purpose of this PR because the LMMS theme cannot make changes to things like the lmms.exe executable (or in the case of macOS or Linux, the icon used for the bundle). A theme download is only part of the picture here.

Slight scope creep, but this PR will also help isolate versions by applying a default file naming convention to the LMMS properties (.lmmsrc.xml) files.

@JMii63

This comment was marked as off-topic.

@tresf

tresf commented Jul 26, 2025

Copy link
Copy Markdown
Member

LMMS themes have a style.css file that is editable.

This post is off-topic, and I've hid it to keep this thread on-topic. (Yes, we understand how our own themes work, and I've explained why this does NOT solve the problem).

@JMii63

JMii63 commented Jul 27, 2025

Copy link
Copy Markdown

LMMS themes have a style.css file that is editable.

This post is off-topic, and I've hid it to keep this thread on-topic. (Yes, we understand how our own themes work, and I've explained why this does NOT solve the problem).

Oh, my bad.

@JMii63

JMii63 commented Oct 6, 2025

Copy link
Copy Markdown

Since the artwork changed, I've realized the need to offer a way to do this programmatically, which requires a refactor. I'm not sure when I'll jump back into this as IRL things keep taking precedence.

what if the background was its own image that can be hue shifted (or something like that) and we place the headphones on top?

@JMii63

JMii63 commented Oct 6, 2025

Copy link
Copy Markdown

we’d probably have to change the shading of the headphones to be less dependent on the background color, but it could work.

@tresf

tresf commented Oct 6, 2025

Copy link
Copy Markdown
Member

Since the artwork changed, I've realized the need to offer a way to do this programmatically, which requires a refactor. I'm not sure when I'll jump back into this as IRL things keep taking precedence.

what if the background was its own image that can be hue shifted (or something like that) and we place the headphones on top?

The current strategy does no such thing and this recommendation is not very helpful considering we're currently using SVG graphics for the task.

The remaining work on this still is the same; it needs a slight refactor to allow the batching of assets from their SVG counterparts. This isn't a huge task, just one that's held up by the person that wrote and understand the code. Sorry for the delay.

@JMii63

JMii63 commented Oct 6, 2025

Copy link
Copy Markdown

Since the artwork changed, I've realized the need to offer a way to do this programmatically, which requires a refactor. I'm not sure when I'll jump back into this as IRL things keep taking precedence.

what if the background was its own image that can be hue shifted (or something like that) and we place the headphones on top?

The current strategy does no such thing and this recommendation is not very helpful considering we're currently using SVG graphics for the task.

The remaining work on this still is the same; it needs a slight refactor to allow the batching of assets from their SVG counterparts. This isn't a huge task, just one that's held up by the person that wrote and understand the code. Sorry for the delay.

oh, my bad.

@JMii63

JMii63 commented Nov 3, 2025

Copy link
Copy Markdown

if the problem is that we’re unable to render SVG images on Windows (or I guess just in C++ in general), we could use Direct2D.

however, if the problem is something else (i.e. there are too many app icon sizes to just make them manually), then it might be a matter of changing some code infrastructure rather than just throwing in another dependency that needs to be accounted for in OS support.

I suggest we render the splash image and all the UI stuff normally with a few color changes here and there, and just have a simple program that lets us change the background of the app icons on the fly (probably by having gradient rendering, and a headphone image to make the icons) and because it’s an SVG, we can scale it as we need, since it’s a vector image format that’s defined by math instead of individual pixels.

@JMii63

JMii63 commented Nov 3, 2025

Copy link
Copy Markdown

tbh once I learn how to render images in Python I might just make the program myself.

@tresf

tresf commented Nov 3, 2025

Copy link
Copy Markdown
Member

if the problem is that we’re unable to render SVG images on Windows (or I guess just in C++ in general), we could use Direct2D.

Who said anything about not being able to render SVG images on Windows?

however, if the problem is something else (i.e. there are too many app icon sizes to just make them manually), then it might be a matter of changing some code infrastructure rather than just throwing in another dependency that needs to be accounted for in OS support.

The only thing preventing this from being merged is a code refactor.

I suggest we render the splash image and all the UI stuff normally with a few color changes here and there, and just have a simple program that lets us change the background of the app icons on the fly (probably by having gradient rendering, and a headphone image to make the icons) and because it’s an SVG, we can scale it as we need, since it’s a vector image format that’s defined by math instead of individual pixels.

I'm not sure what you're speculating about here. We don't have any issues with this PR, I just have to refactor some of it to make batching of resources easier.

I appreciate the enthusiasm here, but if you don't know what this PR does, I would strongly advise not trying to offer solutions to problems that don't exist. 💚

@JMii63

JMii63 commented Dec 8, 2025

Copy link
Copy Markdown

Who said anything about not being able to render SVG images on Windows?

I think I gaslighted myself into thinking that SVG images couldn’t be rendered on Windows when I made that post

@tresf

tresf commented Dec 8, 2025

Copy link
Copy Markdown
Member

Who said anything about not being able to render SVG images on Windows?

I think I gaslighted myself into thinking that SVG images couldn’t be rendered on Windows when I made that post

Ah, gotcha. Yeah, it was broken on Windows for a while but we fixed that here

@rubiefawn rubiefawn modified the milestones: 1.3-alpha.2, 1.3-alpha.3 Jul 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

10 participants