Watch Face: Lumeo

This is really cool.  Nice follow-up to Crystal.  Consider posting it here on Reddit, too: www.reddit.com/.../

Thanks so much, and great idea - I'll be sure to post there soon!

I love the on-device settings. Can you make a tutorial on how to make something like that? I'd love to implement a color picker for my watch face. Currently I have to write my own HEX codes from the Connect IQ app.

See https://forums.garmin.com/developer/connect-iq/f/discussion/349473/simple-example-wf-that-shows-a-bunch-of-things

It only has one on-device setting, but shows the concept. It's all based on getSettingsView()

Yeah. I've got on-device settings working since before, but I'd love my settings to be more inuative like Lumeo. The complication selector and the HEX selector is brilliant...

using Toybox.Application;
using Toybox.System;
using Toybox.Lang;
using Toybox.WatchUi;

class WatchSettingsMenu extends WatchUi.Menu2 {

    function initialize() {
        Menu2.initialize({:title => "Settings"});

        // Theme toggle
        Menu2.addItem(new WatchUi.MenuItem(WatchUi.loadResource(Rez.Strings.Theme), 
            getThemeName(_settings["Theme"]), "item_theme", {}));
        
        // Progress Bar toggle
        Menu2.addItem(new WatchUi.ToggleMenuItem(WatchUi.loadResource(Rez.Strings.ShowProgressBars), null,
            "item_show_progress_bars", _theme["ShowProgressBars"], null));

        // Debug toggle
        Menu2.addItem(new WatchUi.ToggleMenuItem(WatchUi.loadResource(Rez.Strings.Debug), null,
            "item_debug", _settings["Debug"], null));
    }

}

class WatchSettingsDelegate extends WatchUi.Menu2InputDelegate {

    function initialize() {
        Menu2InputDelegate.initialize();
    }

  	function onSelect(item) {
        var id = item.getId();
        var numberOfThemes = 5;

        // Toggling theme
        if (id.equals("item_theme")) {
            var newTheme = ((_settings["Theme"] + 1) % numberOfThemes);
            item.setSubLabel(getThemeName(newTheme));
            setTheme(newTheme);
        }

        // Toggling progress bars
        if (id.equals("item_show_progress_bars")) {
            _theme["ShowProgressBars"] = !getSetting("ShowProgressBars");
            setSetting("ShowProgressBars", _theme["ShowProgressBars"]);
        }

        // Toggling debug state
        if (id.equals("item_debug")) {
            _settings["Debug"] = !getSetting("Debug");
            setSetting("Debug", _settings["Debug"]);
        }
        
        _initializeWatchFace = false;
  	}

}

I'm considering putting together a tutorial for the complication selector and/or colour picker, as I've had a few requests for that now. The basic idea is that normally, in Menu2InputDelegate.onSelect, you'll just be changing a setting, as in both your and Jim's examples. But you can also call pushView(view, delegate). Again, this is normally a view/delegate pair for a sub-menu, but the view can be a regular WatchUi.View that either uses the layout system, or that you draw yourself. Unlike the main watch face view, you can then handle all user input like taps, drags, swipes and key presses.