Dynamic branding

[fervent kindle]

Thread for tracking #5166.

This is a continuation of #1347279544960155823 message.

Re-subscribing: @violet herald @kind pike @deep lichen @strange otter @fervent kindle @cunning veldt

Opinions (including non-dev opinions) welcome.

[onyx mauve]

#5166, @rubiefawn: Dynamic branding color for different build types

[deep lichen]

These look great. But shouldn't MacOS have an icon with the larger border radius from the style guidelines?

I made one if you're interested

[strange otter]

i mean if we’re opening that can of worms, mac icons are not actually rounded rectangles but are squircles instead

if you look at the early history of the dynamic branding ticket i was experimenting with that, but it wasn’t well-received on the grounds of pixel-perfectness iirc

though i was trying to apply that to all platforms lol so that’s probably why

[fervent kindle]

Although I greatly appreciate the details macOS goes to for style guidelines, the roundness of a square just seems too specific, especially considering it would potentially pollute other OSs (or require special assets just for Mac).

There's a 0% percent chance this'll make it through the Discord thumbnail process unscathed, but here's my current Desktop (edit thumbnailed OK cool)

I guess it could be altered to match, but it's not strictly followed.

[deep lichen]

LMMS looks quite out of place to me. Roblox and whatever is to the right of it arent even rounded, but i guess because they are tilted they don't look too out of place.

[fervent kindle]

Never bothered me lol but we can adjust it I guess.

This was our first port https://www.youtube.com/watch?v=j1YmUm782dw

You can see that Apple changes it style guidelines

(that's my PC in the video)

[fervent kindle]

For clarity, I think it's out of scope of this task, perhaps a separate PR.

[fervent kindle]

The Mint screenshots seem to match the "more round" aesthetic. Here's Ubuntu and Windows. Back when the current icon was chosen Windows 8 was sort of dominating the aesthetic. Maybe it's time for more roundess lol?

[fervent kindle]

Man it looks so weird to me... IDK

[strange otter]

it's because it's a rounded rect instead of a squircle

and the "radius" is incorrect

let me whip up something real quick

[deep lichen]

another thing the guideline explicitly mentions is not to add borders. That could be a reason why

[fervent kindle]

Curious what made you read their latest style guidelines? Non-apple users usually just do what they want lol

[deep lichen]

actually i remember seeing a screenshot or screen recording of your mac a while back and i noticed LMMS looked a bit off

it was a little bit of a rabbit hole

[strange otter]

icon is too big and it's fucked because apple doesn't provide their templates in vector lmao but here's the shape it should be

[fervent kindle]

I mean... We cooooould sneak them in lol

[strange otter]

this is before the colors were ironed out though

and i was a little heavy-handed with the gradients

but the icon sizes at least look more accurate in those examples

[deep lichen]

I think the drop shadow should stay. or maybe it should be inset like apple music

[strange otter]

example i provided was only to demonstrate the outer icon rectangle shape

do not take it as a serious mockup

it has several other problems besides the drop shadow lmao

[fervent kindle]

Too late 🙃

Judged forever

Also I think Discord is already using the roundy boy

<------------

[strange otter]

i am in favor of more roundness

[cunning veldt]

This is actually something I know about for once

Apple is notorious for using what are called G3 radius

They do this almost anywhere there is a radius, mostly on physical devices but in software too

Why do I know this? I make use of G3 curvature in one of my PC case designs (the puke green one)

[strange otter]

I LOVE FREYA HOLMER’S THE CONTINUITY OF SPLINES!!!!

those cases look sick by the way

the googly eyes haha that’s so good

[cunning veldt]

Thanks! The green one is a prototype, I've been working on it on and off for almost 4 years

The black one is the first one I ever made, and NGL it's kind of ass

[strange otter]

so i was wrong, it's not a squircle https://liamrosenfeld.com/posts/apple_icon_quest/

[strange otter]

colors tweaked to match the apple music gradient contrast but the hue is correct

that shape still isn't g3 continuous but it's closer than a rounded rect

[deep lichen]

this looks really nice

[fervent kindle]

We can update the PR with this but we'll also need to update the resources that ship with LMMS, notably lmms.ico, lmms.icns and all of the sizes 16x16, 32x32, etc.

The branding does this task for us, so we could hypothetically exploit the branding process to make all of these for us in green by replacing green with green in the SVG.

[strange otter]

i like the extra roundness and i would like to pursue this further, but i’m not so sure it has to ship with the initial dynamic branding PR

i don’t want to delay it any more than it has been lmao

it is also notably not pixel perfect at smaller resolutions so i do need to figure that out

[fervent kindle]

Well, the PR will certainly make replacing the assets easier when we do.

[strange otter]

apple doesn't provide their templates in vector
turns out they do, just in their own proprietary format for apple sketch

i imported it into figma and exported as svg so now i have the correct shape and drop shadow

[strange otter]

the macos icon assets have a drop shadow and padding to make room for it, so it's not really feasible to use the same assets directly to generate windows icons and such

and for reference, the gradients seen here mimic the apple music icon. the dark color has a luminance of 60% and the bright has a luminance of 68%. saturation is maxed in the oklch color space for the given hue and luminances

nightly????

beta

and PR/draft/dev/whatever

i guess we could have a second asset that's just this thing but without the drop shadow?

[fervent kindle]

It's yellowish in the PR currently.

[fervent kindle]

This may be our best option otherwise we'll need two assets, once for macOS one for Windows/Linux.

How does the dropshadow affect its size?

[strange otter]

the white background in my previews is the bounds of the image rather than the colored rectangle

[strange otter]

oh lol my bad

i’ll make a yellow mockup when i get home

[strange otter]

i was suggesting two assets though?

though maybe we only need the macOS ones and we can tell the other platforms to render only the bounds of the colored rectangle instead

[fervent kindle]

Yeah I re-read that and then realized that. We currently share all the assets between OSs so it would be a slight divergence there if we did.

[strange otter]

yellow

[strange otter]

since svg is a text format, for non-mac platforms the drop shadow object could be dynamically hidden and the viewbox could be altered to fit just the colored rectangle

so there's only the "macOS" assets, but it's adjusted as needed for the other platforms?

not sure if that's worth it though lol that's not saving a lot of effort vs just having separate assets

16x16 with no drop shadow

discord please

[fervent kindle]

I thought of this too. I think it may add too much complexity and two assets is probably preferred.

[cunning veldt]

orb

[fervent kindle]

I do use some dynamic cropping when it comes to the NSIS asset for a similar reason but I think once we get into drop shadows it starts to make the rube goldberg experiment too complex.

[cunning veldt]

just make the new logo bouba

[cunning veldt]

is the bit about splitting assets about splitting between platforms or intended view size? for small 16x16 etc I would suggest we use a much smaller radius as that allows larger icon and high chance of pixel correctness. Versions intended for larger rendered sizes could have the more elegant G2/G3 radius stuff going on

after reading more closely I guess it is about platform split

size split doesn't have to happen if a sensible "one size fits all" radius ratio is selected that will actually pixelize correctly at all intended sizes

[fervent kindle]

It started with a hair brain idea to follow the Apple Style guidelines #1358159641665601604 message. Assuming we apply this to the icon for all OSs, the split occurs with the view box and drop shadow that were taken from the macOS guidelines.

With this Dynamic branding PR we do take some liberties in editing the SVGs before use, but they're very crude color search/replace, nothing complex enough to remove a dropshadow.

[fervent kindle]

Linux does use a vector format on the xdg scalable directory btw, so it would be cropped but still there hiding all cursed-like.

Hiding in the shad... 🙃

[full turret]

Subbing myself here for updates

[fervent kindle]

I think I missed some of the previous subscribers but I can't see them now that I locked the old topic.

[strange otter]

somewhere, i named it something stupid and now it's lost in the ocean of all the other poorly named svg assets i've been screwing around with lmao

i will find it

[fervent kindle]

I'm about ready to commit this eye sore (deleted)

Without your SVG, I had no choice.

The bikeshed is painted red.

Some call it graffiti, others call it art.

[strange otter]

i just took damage looking at that

upon inspecting our existing icon svg, it does in fact have a small amount of baked-in padding we may be able to utilize for a drop shadow

[fervent kindle]

How about we start by you dropping me the apple one then you can tweak them in the PR.

[strange otter]

btw i did find the svg, i'm just trying to fix it to be pixel-perfect

here's it raw, but it has stuff off-canvas lol

[fervent kindle]

Thanks. I wanted to get the split assets pushed for starters.

Well, no surprise, the thumbnail is all messed up. Maybe I should have just been patient lol.

[strange otter]

oh the color codes are different lol

[fervent kindle]

Yeah that too

cmake is not happy lol

CMake Error at /your/mom/lmms/cmake/modules/branding/SvgRecolor.cmake:32 (message):
  Source and destination files are identical, recolor failed

  Set BRANDING_DEBUG=ON to troubleshoot

It's getting late, so I'll commit it now with an identical copy of the one we have so it can be tweaked.

I removed the red and deleted the screenshot so we could regen

Done.

When it's ready, I'll have to regenerate all the assets we bundle. I don't have a way to do this yet so that would be a pretty cool cmake target to add, something like update-source-assets or something.

[strange otter]

here's one that is the same dimensions as the current lmms.svg

no offcanvas nonsense, the color codes are still different though

this one should be usable for all platforms since the original also had the baked-in padding

[strange otter]

comparison with current icons and colors

16x16 icon comparison test

[strange otter]

i'll take a shot at making matching project file icons tomorrow

[fervent kindle]

What's wrong with the project icons? Oh you prob want to match the style/gradient now.

As soon as you update the SVG(s) (and replacement SVG colors) in the PR, I can show some previews in the macOS dock.

[fervent kindle]

@strange otter so are you going to try to make a single asset for all OSs? I assume you're working on fine-tuning this before we update the PR?

[strange otter]

yes

[fervent kindle]

What's great and terrible about Discord is that I know for a fact that Apex Legends is more fun than the Dynamic Branding PR. 😭

[strange otter]

ranked too so i can measure exactly how bad i am at this game

the folded corner in the apple templates for the file icon were genuinely raster assets embedded in an otherwise vector image

and i died inside

[fervent kindle]

AFAIR I stole them from Ubuntu years ago.

[fervent kindle]

Whoops no, I'm thinking of the old ones. You can blame someone else for those, probabably Uros lol

Guilty your honor!

This is the one I stole from Ubuntu: https://raw.githubusercontent.com/LMMS/lmms/9fe74c273098c006045d9ebd58adc0f9a36651ce/cmake/linux/project.svg

[strange otter]

i may just keep the existing assets but apply the new colors to them so that the script works as expected

[fervent kindle]

Your call.

They're due for a refresh and I'm fine tweaking the SVG replacement logic. We can also have separate assets for separate build types if it's easier than trying to hope and pray that the SVG can be manipulated.

The main disadvantage to separate assets is it's a bit more work when we rebrand again

[strange otter]

wait should the project file icon even be themed?

if you install a PR build first and then a normal build, won't the icons be yellow forever?

i still have to update the file type icon to be consistent with the program icon but i just though about how that is kind of a weird thing to theme

[fervent kindle]

They should be if that's the version associated with them.

This is more of a *why are we installing PR versions" questions, IMO. Something I've discussed a bit but haven't tackled.

[strange otter]

yeah that's true

would be a lot easier to test stuff if you didn't have to install it every time lol

not this PR though

[fervent kindle]

I have a plan to offer a script to grab the PR and make it runnable in a portable fashion. Something like curl lmms.sh | bash -s -- pr1234

I've done this for another project, but for the scope of LMMS I just need to add NSIS user-space install support.

Mac will really benefit from this because unquarantining the bundle each time via terminal is a pain in the ass.

It'll also automatically extract the zip file, which is an extra step that just adds two files in everyone's download folder that they have to cleanup later.

I have a prototype that works with both PowerShell and bash as well by detecting the user agent string from the terminal.

[fervent kindle]

So to specifically scope this mimetype problem...

• Linux: Mime association requires a 3rd party daemon anyway, but it completely intercepts execution so --appimage-extract (see #dev-support message) may be too late. Might need a 3rd party extraction tool, which is gross, but possible.
• Windows: No way around this unless we use 7z hacks until we patch our NSIS installer to allow user-space installs (TBD)
• macOS: Already portable by design. Technically lsregister will pick up the file associations but easily reverted by deleting the bundle

[strange otter]

I've added a temporary montage script that collects the branding and creates a consolidated preview (writes it to the Desktop).
source

do you still have this script by chance

six years later lol

[fervent kindle]

I re-read that too... If it wasn't in the source, unlikely

I did backup the source

[strange otter]

rip montage

it's ok i can just build and examine the generated nonsense in the build dir

how do you force it to use a specific branding type again?

do you still have to force a version

[fervent kindle]

https://github.com/LMMS/lmms/blob/080ad14f06f2c9891f4f05dfc9072a3cb553dce9/cmake/branding/recolor_graphics.sh.in#L109-L124

[strange otter]

can i just -DLMMS_BRANDING_COLOR=yellow or does that break things

[fervent kindle]

Hmm... The old PR allowed something of that nature, but the new PR I would recommend trying -DFORCE_VERSION= and a version pattern that a PR would use.

[strange otter]

i was just looking at BrandingInstall.cmake:

if(NOT LMMS_BRANDING_COLOR OR LMMS_BRANDING_COLOR STREQUAL "green")
    # Skip branding for stable releases
    message("Skipping dynamic branding: LMMS_BRANDING_COLOR=\"${LMMS_BRANDING_COLOR}\"")
    return()
endif()
...
set(svg_patterns_replace "svg_patterns_${LMMS_BRANDING_COLOR}")

[fervent kindle]

Yeah that's the install portion, but detecting it is the place where it matters.

calculate_branding I mean.

We could also do the whole check to see if it's set before setting it thing if that's easier...

But rightnow, just rudimentary version parsing, tried to make it super simple.

montage+=" ../png/[email protected]"
🤢 ... because that was a thing...

Might be worth adding on a custom montage target to run the branding steps separate from the build

[strange otter]

i never did get around to testing my changes but it should work if i changed everything correctly

i did build it once but for some reason the assets it produced were the old ones even though the old source assets were literally replaced lmao

probably a skill issue tbh

[fervent kindle]

I started testing them and got sidetracked. It's on my to-do

[sterile wharf]

i'm not sure how all of this is being implemented, and i'm not a dev, but i still want to mention this, even if it's not feasible to implement. firstly: this is such a great idea and will reduce so much headache caused by users not knowing the different versions of LMMS. it's great for accessibility and reducing that confusion. but, speaking of accessibility, it's worth considering adding a unique symbol or addition to the LMMS logo for colorblindness. it doesn't have to be a different LMMS logo - just a logo with a few tweaks or additions, or overlays, whatever. something to make it visually distinct not only in color, but in shape

[fervent kindle]

The current implementation is SVG search/replace making "uniqueness" outside of color hard to accomplish however the latest revision does change the name so we should be in good shape. (fowarded screenshot incomming)

[sterile wharf]

heck yea. i never thought about how the actual program didn't change title, that does help a lot too

[fervent kindle]

Yeah it was a last-minute change. I need to refire builds with @strange otter's latest artwork and then make a few tweaks and get this merged.

[fervent kindle]

So with these new assets, it makes me realize how we need a way to produce stable assets too. The build logic currently tries to avoid this so I have to make some form of toggle to force it, preferably for all platforms. I'll have to put some thought into this.

[fervent kindle]

(blank DMG background is a bug that I have to figure out)

[fervent kindle]

Sorry I'm dragging my feel on this one... It's a lot of careful refactoring to make this happen since we try to skip branding if green=green. It's a few hours of focus that I'm struggling to get the motivation for but will prioritize this month.

[violet herald]

Should self-compiled builds have a different color or still be considered as nightly ?

If we make a distinction, it should be close to Nightly's color

[fervent kindle]

They'll look nightly, at least for now. Hard to detect otherwise.

[violet herald]

aight

[fervent kindle]

It was once proposed to make them red, but it's so hard to detect we never rolled with it.

[violet herald]

My idea would be to tell the automated compile script on GitHub to create a file before compilation. Then, if that file is there, it means it's not self-compiled. Would that work ?

Users wouldn't have that unless they intentionally find it out

[fervent kindle]

Yes, that would work but it would be a bit misleading as all local builds would be red regardless of whether they're stable, nightly, draft, etc.

[violet herald]

alright let's say it works only if it's Nightly

[fervent kindle]

Then what is the purpose of the different color?

[violet herald]

To indicate this build has been made specifically for the machine that runs it, compilers tend to optimise for their host as well iirc

[fervent kindle]

If that's the case, they all should be red.

[violet herald]

ah, true.

[fervent kindle]

But that's not what our colors mean currently, they're for version control.

So it sort of bleeds the purpose of the color to represent trust, which I think might be overreaching.

[violet herald]

yeah, seems like it wasn't the best suggestion then

[fervent kindle]

Assuming "red" is also version control triggered, the best way to do the "red" color is to somehow detect if there are commits locally that aren't in the branch that's being built but that would be hard.

If we do want "red" to suggest trust (and not version-control) it may be better to use another indicator that's in-addition-to the colors we've chosen.

For example, we could surround the icon and splash with a red border or something.

We could even go all firefox and make the equivelent of an IceWeasel logo. I'm not sure how far to go with this, but I think we can probably bolt that on as an enhancement (e.g. later) if everyone's fine with that proposal.

[violet herald]

yeah but let's merge the base feature before that 😆

[fervent kindle]

Still dragging my feet on this one, requoting:

It's a lot of careful refactoring to make this happen since we try to skip branding if green=green. It's a few hours of focus that I'm struggling to get the motivation for but will prioritize this month.

[strange otter]

god damn it https://youtu.be/4usD1hP1nYY