Implementing Multiple Watchface Themes with Configurable Colors

Hi,

Now I want to include three themes on my watch face, each with a distinct set of colors. I want to allow users to switch between these themes via the watch settings.

My layout.xml includes for example a label configured like this:

<label id="HoursLabel" x="35" y="95" font="@Fonts.MyFont" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_YELLOW"/>

In properties.xml:

<properties>
    <property id="Theme" type="number">1</property>
</properties>

settings.xml:

<setting propertyKey="@Properties.Theme" title="@Strings.ThemeTitle">
    <settingConfig type="list">
        <listEntry value="1">@Strings.Theme1</listEntry>
        <listEntry value="2">@Strings.Theme2</listEntry>
        <listEntry value="3">@Strings.Theme3</listEntry>
    </settingConfig>
</setting>

How can I make the layout elements apply different color configurations based on the selected theme? How should I configure the properties and settings to achieve this? I’ve read the array properties section, but it's not entirely clear, and the sample code there has some runtime errors.

Thanks for your help!

0 jim_m_58 1 month ago

Ok, to change the colors on the screen itself, here's how to do that in a watch face using the template.

    function onUpdate(dc as Dc) as Void {
        // Get and show the current time
        var clockTime = System.getClockTime();
        var timeString = Lang.format("$1$:$2$", [clockTime.hour, clockTime.min.format("%02d")]);
        var view = View.findDrawableById("TimeLabel") as Text;
        view.setText(timeString);

//change foreground and background color
        view.setColor(Graphics.COLOR_PINK);
        view.setBackgroundColor(Graphics.COLOR_GREEN);
//done
        // Call the parent onUpdate function to redraw the layout
        View.onUpdate(dc);
    }

As far as settings, the way you are doing it is for app-settings from the phone or Garmin express.

When your app starts or if onSettingsChanged is called, you want to do something like this to read the setting

theme=Application.Properties.getValue("Theme");

that will get the current setting, and then based on if theme is 1, 2, or 3, use the color you want

Array and groups have never really worked for app settings, so I wouldn't use them

0 Juan Domínguez 1 month ago in reply to jim_m_58

Hi jim_m_58,

Oh my, if Array and groups have never really worked for watch settings then there will be a real limitation as I would have to assign the color to my labels manually using the setColor function.

The thing is that I have a label that has a different color and I have some other usages of the setColor function, to render arcs as progress bars, etc.

So my intention was to make it configurable through the device properties and do something like this:

<label 
    id="HoursLabel" 
    x="35" 
    y="95" 
    font="@Fonts.MyFont" 
    justification="Graphics.TEXT_JUSTIFY_CENTER" 
    color="@Properties.Theme.PrimaryColor"
/>

But I understand is not that flexible. Ok nvm, I'll give it a shot using the setColor function.

Thanks anyway for your quick response.

0 jim_m_58 1 month ago in reply to Juan Domínguez

People have done something like what it sounds like you want to do long before Array or Group was added to app-settings.

0 FlowState 1 month ago in reply to Juan Domínguez

I don't think what you're trying to do there would've worked even if arrays and groups worked properly.

color="@Properties.Theme.PrimaryColor"

My understanding of the intent here is that you want Properties.Theme to be dynamic or to allow for some kind of indirection where one property would be used to "select" an element of an array property (e.g. "Properties.Themes[Properties.CurrentTheme].PrimaryColor"), but that isn't possible.

So yeah, you'll have to do some things programmatically, rather than declaring everything in the resource xml.