Is there a component for multiple number picker similar to wallet PIN input?

In the app I'm working on am looking to add an input for a PIN number. It will be used for simple one-time authentication. The standard picker component is too clunky. I really like the input method on the wallet app.

Are there component libraries that are open-sourced that developers could use from standard Garmin apps or other cool sources to get good-looking user input components?

Cheers!

Top Replies

dbrobert 9 months ago +2

I have a number picker barrel I'm working on; the code works but I just need to properly extract it from one of my projects and clean it up. Looks like this:

Would that be of interest?
jim_m_58 9 months ago +1

There is nothing standard in CIQ. Recall that things in the native FW like this aren't written in CIQ.

Also note, even the pin entry for Garmin Pay look/act different on different devices.
dbrobert 9 months ago in reply to FlowState +1

FlowState said:
Yeah but it isn’t optimal to use the same UI for buttons and touch.

My number picker barrel utilizes layouts (but could be setup for direct draw), so you could have a layout for touch (similar…

All Replies

0 dbrobert 9 months ago in reply to Naz Avo

Naz Avo said:
Very much interested! I think for non-touch input it could even be a navigation around the numbers with up/down move to next column kind of thing?

Okay, I'll try and clean up the code this weekend and get a first release pushed to GitHub.

Yes, that's exactly how the non-touch input works (by default), though you can override the input delegate and handle things however you want.

0 Naz Avo 9 months ago in reply to dbrobert

Let me know when the code is out. I might be your first barrel user ;)

0 dbrobert 9 months ago in reply to Naz Avo

I've been working on it; I'm currently having an issue with layouts but I'll get it sorted.

The code is already in use with two projects but yeah, you would be the first external user of it.

0 dbrobert 9 months ago in reply to Naz Avo

Naz Avo said:
Let me know when the code is out

Okay, I figured out the issue with layouts; the compiler doesn't seem to like it if the barrel utilizes a layout but the layout is within a "family" folder. So I had to create a small, placeholder template in "resources/" and have now moved the other layouts to a folder outside of the build so that they can be used as starting points (rather than taking up space and unnecessarily increasing code size). You'll see what I mean when you look at the repo.

https://github.com/douglasr/ciqtools-number-picker

It's still a bit rough around the edges and I need to add more details to the README, but you can probably figure it out. However, to help get things started, here's some code:

1. Include the barrel (using the functionality in VS Code).

2. Create a number picker class that extends the GenericNumberPicker in the barrel.

import Toybox.Graphics;
import Toybox.Lang;
import CIQToolsNumberPicker;

class NumberPicker extends CIQToolsNumberPicker.GenericNumberPicker {

    function initialize(selectedButton as Number?, textHint as String?) {
        GenericNumberPicker.initialize(selectedButton, textHint);
    }

    function onLayout(dc as Dc) as Void {
        setLayout(Rez.Layouts.NumberPicker(dc));
        GenericNumberPicker.onLayout(dc);
    }

}

3. Create a layout for number picker (there are samples in the repo) but you an modify/position them however.

<layout id="NumberPicker">
    <label id="TitleLabel" x="center" y="25" font="Graphics.FONT_SMALL" justification="Graphics.TEXT_JUSTIFY_CENTER|Graphics.TEXT_JUSTIFY_VCENTER" color="Graphics.COLOR_LT_GRAY" />
    <drawable id="Number1" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">65</param>
        <param name="ypos">65</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">1</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number2" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">130</param>
        <param name="ypos">65</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">2</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number3" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">195</param>
        <param name="ypos">65</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">3</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number4" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">65</param>
        <param name="ypos">116</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">4</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number5" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">130</param>
        <param name="ypos">116</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">5</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number6" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">195</param>
        <param name="ypos">116</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">6</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number7" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">65</param>
        <param name="ypos">167</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">7</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number8" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">130</param>
        <param name="ypos">167</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">8</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number9" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">195</param>
        <param name="ypos">167</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">9</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="Number0" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">130</param>
        <param name="ypos">218</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">0</param>
        <param name="font">Graphics.FONT_TINY</param>
    </drawable>
    <drawable id="OkayLabel" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">65</param>
        <param name="ypos">218</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">"OK"</param>
        <param name="font">Graphics.FONT_TINY</param>
        <param name="bgcolor">Graphics.COLOR_TRANSPARENT</param>
    </drawable>
    <drawable id="DeleteLabel" class="CIQToolsNumberPicker.PickerButton">
        <param name="xpos">195</param>
        <param name="ypos">218</param>
        <param name="height">46</param>
        <param name="width">60</param>
        <param name="text">"<<"</param>
        <param name="font">Graphics.FONT_TINY</param>
        <param name="bgcolor">Graphics.COLOR_TRANSPARENT</param>
    </drawable>
</layout>

4. Push the view on to the stack.

var view = new NumberPicker(null, null);
WatchUi.pushView(view, new GenericNumberPickerDelegate(view), WatchUi.SLIDE_LEFT);