Link the color and font size to const var?

[A Former User]

Hi
When I try to link font size and color properties to their const variables, Hise doesn't allow that. Am I missing something?

// Font Size
const var Font_Size_Paragraph = 20;

// Color Palette
const var Color_Dark1 = 0xFF111111;


const var Text_label = Content.addLabel("Text_label");
Content.setPropertiesFromJSON("Text_label", {
    "fontName": "Oxygen",
    "fontStyle": "Regular",
    "text": "SAMPLE TEXT",	
    "textColour": Color_Dark1,
    "fontSize": Font_Size_Paragraph
});

[d.healey]

@steve-mohican Why are you setting them in the script and not in the interface designer? Works here on new_layout though.

[A Former User]

@d-healey Actually I want to make a global linking system for the GUI, in case I decide to change in the future. I am using master branch, interesting...

[d.healey]

@steve-mohican said in Link the color and font size to const var?:

global linking system for the GUI,

I don't know what that means, but good luck :)

[A Former User]

@d-healey said in Link the color and font size to const var?:

I don't know what that means, but good luck :)

Thanks :D It's just like a website template's global color / font linking system. So when you change fonts / font sizes / colors, all of the properties will be updated upon these global styles and you won't have to modify each gui element manually.

[d.healey]

@steve-mohican I see, I've done the same thing but I did it in a different way so I didn't have to specify every single component in my script. I have a separate theme file which loads the colour and font properties based on component type. You may be interested in the Content.getAllComponents() function ;)

[A Former User]

@d-healey said in Link the color and font size to const var?:

You may be interested in the Content.getAllComponents() function

Can you please give an exmple for this usage? I couldn't print the array of the Content.getAllComponents() into console.

[d.healey]

@steve-mohican

Can you please give an exmple for this usage?

Sure. Let's say you want to get all of the components with knb in their name, Content.getAllComponents("knb"). If you want to get all the components with knb and btn you can use Content.getAllComponents("(knb)|(btn)") And if you just want to get every single component it's Content.getAllComponents("").

So for example you could run a loop over every single component and assign properties based on the type,

for (c in Content.getAllComponents(""))
{
        local type = c.get("type");
        local allProps = c.getAllProperties();
        local properties = THEME[type]; // I assume you have an object called theme with properties organised by control type

        for (p in properties)
        {
            if (allProps.contains(p))
                c.set(p, properties[p]);
        }                    
}

[A Former User]

@d-healey Thank you! I will check it out.

[A Former User]

One last thing. I need to use my font in different sizes in Windows and macOS systems.

For example if a font size is 22 in Windows, it must be 19 in macOS. I can only assign a constant value to the font size property with below code.

But how can I check the OS and apply the corresponding font size (if Win use 22, if macOS use 19)?

// Font Size for Windows
const var Font_Size_Paragraph = 22;


const var Text_label = Content.addLabel("Text_label");
Content.setPropertiesFromJSON("Text_label", {
    "fontSize": Font_Size_Paragraph
});

[orange]

@steve-mohican

You can use this:

const var Font_Size_Paragraph = (Engine.getOS() == "OSX" ? 19 : 22);

[A Former User]

@orange said in Link the color and font size to const var?:

@steve-mohican

You can use this:

const var Font_Size_Paragraph = (Engine.getOS() == "OSX" ? 19 : 22);

That's it, thank you so much!