Cup of Codenoodles

For an application I’m working on I needed to create a slider that would allow the user to easily create custom colours. While trying to look around on the internet The most common response was the following:

There is no “slider” component in the BlackBerry API — you’ll have to invent it.

Or this:

The GaugeField can be used for user interaction. With the field focused, the user can press Alt and roll the trackball to change the slider value. Alternatively, the user can press the menu key and choose Change option, which will bring up a dialog with instructions for changing the value.

I’m sorry, but the first solution is kinda bullshit, and the second one sounds like a good way to get a bunch of support tickets from your users saying that your application doesn’t work or is broken or something. Shit I don’t want to deal with.

Anyway, I decided to go out and create a SliderField for the BlackBerry which you can go ahead and use. Currently it displays the slider dongle/widget in blue if it’s inactive or red if the field is in focus. Ugly as old hell, but it’s pretty easy to replace that with something prettier looking.

package com.zeebu.colorgo.field;

/**
* This is released under the public domain, but feel free to give credit to Chris Saunders if you want.
*/

import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.TouchEvent;
import net.rim.device.api.ui.XYRect;

public class SliderField extends Field {

    private static final int MAX_SLIDER_SKIP = 20;
    private static final int BASE_SLIDER_SKIP = 1;
    private static final int NAVIGATION_TIME = 300;

    private int sliderWidgetColor;
    private int scaleColorAtMin = Color.BLACK;
    private int scaleColorAtMax = Color.LIGHTBLUE;

    private int fieldWidth;
    private int fieldHeight;

    private int min;
    private int max;
    private int currentValue;
    private long lastNavigationTime = 0;
    private int sliderSkip = BASE_SLIDER_SKIP;

    private int[] xPts;
    private int[] yPts;
    private int[] colors;

    public SliderField(int min, int max, int sliderWidth, int sliderWidgetHeight) {
        super();
        this.fieldWidth = sliderWidth;
        this.fieldHeight = sliderWidgetHeight;
        this.min = min;
        this.max = max;
        this.currentValue = (max — min) / 2;

        xPts = new int[] {0, 0, fieldWidth, fieldWidth};
        yPts = new int[] {fieldHeight / 4, (fieldHeight * 3) / 4, (fieldHeight * 3) / 4, fieldHeight / 4, };
        colors =  new int[4];
        updateColorsArray();
    }

    protected void layout(int width, int height) {
        setExtent(fieldWidth, fieldHeight);
    }

    public boolean isFocusable() {
        return true;
    }

    public void drawFocus(Graphics g, boolean on) {}

    protected boolean navigationMovement(int dx, int dy, int status, int time) {
        if(System.currentTimeMillis() — lastNavigationTime < NAVIGATION_TIME) {
            sliderSkip *= 2;
            if(sliderSkip > MAX_SLIDER_SKIP) {
                sliderSkip = MAX_SLIDER_SKIP;
            }
        } else {
            sliderSkip = BASE_SLIDER_SKIP;
        }
        lastNavigationTime = System.currentTimeMillis();

        if(dx > 0) {
            currentValue += sliderSkip;
            currentValue = (currentValue > max) ? max : currentValue;
        } else if(dx < 0) {
            currentValue -= sliderSkip;
            currentValue = (currentValue < min) ? min : currentValue;
        } else {
            return super.navigationMovement(dx, dy, status, time);
        }
        invalidate();
        fieldChangeNotify(0);
        return true;
    }

    public boolean touchEvent(TouchEvent event) {
        int message = event.getEvent();
        int touchX = event.getX(1);
        int touchY = event.getY(1);
        if(message == TouchEvent.DOWN || message == TouchEvent.MOVE) {
            currentValue = determineCurrentValue(touchX);
            invalidate();
            fieldChangeNotify(0);
            return true;
        }
        return false;
    }

    protected int determineCurrentValue(int positionInField) {
        float ratio = (float) positionInField / (float) fieldWidth;
        return (int) (ratio * max);
    }

    protected int determineWidgetXPositionOnSlider() {
        float ratio = (float) currentValue / (float) max;
        ratio = (ratio < 0.0) ? 0.0f : ratio;
        ratio = (ratio > 1.0) ? 1.0f : ratio;
        return (int) (ratio * fieldWidth);
    }

    protected void paint(Graphics graphics) {

        graphics.drawShadedFilledPath(xPts, yPts, null, colors, null);

        int cX = determineWidgetXPositionOnSlider();
        int cY = fieldHeight / 2;
        int pX = cX + (cY);
        int pY = cY;
        int qX = cX;
        int qY = cY + (cY);
        int startAngle = 0;
        int endAngle = 0;

        graphics.setColor(Color.BLUE);
        if(isFocus()) {
            graphics.setColor(Color.RED);
        }
        graphics.fillEllipse(cX, cY, pX, pY, qX, qY, startAngle, endAngle);

    }

    public int getCurrentValue() {
        return currentValue;
    }

    public void setScaleColorAtMin(int scaleColorAtMin) {
        this.scaleColorAtMin = scaleColorAtMin;
        updateColorsArray();
    }

    public void setScaleColorAtMax(int scaleColorAtMax) {
        this.scaleColorAtMax = scaleColorAtMax;
        updateColorsArray();
    }

    public void updateColorsArray() {
        for(int i = 0; i < colors.length; ++i) {
            if(i < colors.length / 2) {
                colors[i] = scaleColorAtMin;
            } else {
                colors[i] = scaleColorAtMax;
            }
        }
        invalidate();
    }

}

Here is a little preview of the sliders: