coloring text with colors of the 64 colors pallet

Hey, I am trying to use colors from the 64 colors pallet in my watch face. I've set settings as follows:

<settings>

    <setting propertyKey="@Properties.TextColor" title="@Strings.TextColorTitle">
        <settingConfig type="list">
            <listEntry value="0x0000FF">@Strings.ColorBlue</listEntry>
            <listEntry value="0xFF0000">@Strings.ColorRed</listEntry>
            <listEntry value="0x00FFFF">@Strings.ColorTurquoise</listEntry>
            <listEntry value="0xFF5500">@Strings.ColorOrange</listEntry>        
            <listEntry value="0x555500">@Strings.ColorOliveGreen</listEntry>
            <listEntry value="0x00FF00">@Strings.ColorGreen</listEntry>                            
        </settingConfig> 
    </setting>

    <setting propertyKey="@Properties.ShowSeconds" title="@Strings.ShowSecondsTitle">
        <settingConfig type="boolean" />
    </setting>

</settings>

I can't find a way to use them in the view.mc file 

I tried the following: 

var SelectedColor;
    SelectedColor = Application.Properties.getValue("TextColor");

dc.setColor(SelectedColor, Graphics.COLOR_TRANSPARENT);
 

but it doesn't work out. I know for sure there's a way to do so but I can't find it. I feel like I'm missing only one line because if I using the values of the colors I've entered instead of the SelectedColor var in the dc.setColor, I will get the color I want.

Can you help me please? TY in advance!

  • What's the <property> definition for TextColor? Do you have a default value?

    What happens with the existing code? Does it crash? If it doesn't crash, what color does it set?

    What happens if you print out the value of SelectedColor to the console? e.g.

    var SelectedColor;
        SelectedColor = Application.Properties.getValue("TextColor");

    System.println("SelectedColor = " + SelectedColor); // <======


    dc.setColor(SelectedColor, Graphics.COLOR_TRANSPARENT);

  • Hey , here are the properties: 

    <properties>
    
        <property id="TextColor" type="number">0x000000</property>
        <property id="ShowSeconds" type="boolean">true</property>
    
    </properties>
    and here are the strings: 
    <strings>
    
        <string id="AppName">Digital Elegant</string>
    
        <string id="TextColorTitle">Displayed color</string>
        <string id="ShowSecondsTitle">Show seconds</string>
    
        <string id="ColorBlue">Blue</string>
        <string id="ColorRed">Red</string>
        <string id="ColorTurquoise">Turquoise</string>
        <string id="ColorOrange">Orange</string>
        <string id="ColorOliveGreen">OliveGreen</string>
        <string id="ColorGreen">Green</string>                
    
    </

    what it said when I ran it with my code is :Undefined symbol "SelectedColor" detected. It does the same when I return the setColor to normal (Graphics.COLOR_BLUE) but using the line:

    System.println("SelectedColor = " + SelectedColor); // <======

    I feel like I missed something with the coding so in any case I will send the view.mc here: https://pastebin.com/WHP6nsHW

    Just to make sure it is clear. The code here is with the 

    var SelectedColor;
        SelectedColor = Application.Properties.getValue("TextColor");

    but without the System.println or the setColor with the SelectedColor var instead of the Graphics.COLOR_BLUE.

    TY for the help, really appreciate it!

  • Okay, I get it, now that there's more context.

    You've got this:

        function initialize() {
            WatchFace.initialize();
            BG = WatchUi.loadResource(Rez.Drawables.BG);
            Battery = WatchUi.loadResource(Rez.Drawables.Battery);
     
        var SelectedColor;
        SelectedColor = Application.Properties.getValue("TextColor");
        }

    "var SelectedColor" is inside initialize(), which means that it's a local variable which won't be available outside of initialize().

    In this case you want SelectedColor to be a member variable so it's available in onUpdate(), which means it should be defined outside of initialize().

        var SelectedColor;
    
        function initialize() {
            WatchFace.initialize();
            BG = WatchUi.loadResource(Rez.Drawables.BG);
            Battery = WatchUi.loadResource(Rez.Drawables.Battery);
     
            SelectedColor = Application.Properties.getValue("TextColor");
        }

  • Oh wow. Huge thanks! These small but super important things drives me crazy!

  • It's actually a bit more complex, in that you probably don't want to just read Application.Properties in initialize(), but also in onSettingsChanged().

  • Hey jim, Ive read about onSettingsChanged in the API documentation but I didn't understand why I need it and how to use it properly

  • Let's say you are using the watchface, then use GCM or the Connect IQ app to changes some colors.  onSettingChanged() is called in that case, telling your watch face there's been a change and to reload the Properties.