ClickableMeter Demo and Documentation

Display sketch code: ClickableMeterDemo.pde The ClickableMeter code is in the file ClickableMeter.pde

ClickableMeters extends ClickablePanel by adding a concept of value to the panel. ClickableMeters function similarly to scrollbars except the user just clicks the bar instead of dragging a scroll button. There are several options for "decorating" a ClickableMeter.

The demo shows two vertical and one horizontal ClickableMeters. To convert a temperature, click on the left or center meter and the others will adjust accordingly. The left hand vertical meter uses the hashmark and value options. The horizontal meter uses the labels and value options. The minimum and maximum values are reversed to reverse the meter. The right hand vertical meter is an output only meter that doesn't respond to clicks. It uses only the labels option. It is created and setup normally but not included in the ClickableGroup with the other two meters. Thus it has to be explicitly displayed in the draw() method. The value is set using the updateClickGrp() method in the same fashion as the values of the other two meters are set.

In addition to being useful in its own right, ClickableMeter is extended to make the classes BarMeter and Thermometer. The code for ClickableMeter and its extensions is found in ClickableMeter.pde.

class ClickableMeter
extends ClickablePanel
which extends Clickable

The meter is a standard vertical or horizontal Clickable meter. While it is designed for input as well as display, it can be used for display only purposes by not checking for clicks in the mouseReleased() method. (Typically that means omitting it from the ClickableGroup and calling its display method in the draw() method.) ClickableMeter can be used "as is" or extended to fancier meters. The constructor's of those extensions use the same argument list as ClickableMeter's constructor. Note: The orientation of the meter determined automatically. The meter has vertical orientation if its width <= its height.

Additional fields

float val - value of the meter.
float minVal, maxVal, valRange - the minimum, maximum and the range displayed by a meter. Note: minVal > maxVal is permitted and is sometimes useful. It just reverses the meter display.
int barLoc - x or y (depending on the orientation) coordinate of line representing the value of the meter.
boolean vertical - true means vertical orientation, false means horizontal
boolean hashShow, labelsShow, valueShow - if true, the corresponding display option is used.
float hashStart, labelsStart - the value of the first hashmark or label.
float hashSpacing, labelsSpacing - The spacing of hash marks or labels.
float xHash, yHash - working value of the next hash mark or label.
int xPixel, yPixel - x and y coordinates in pixels.
float big - the max of minVal and maxVal. (Recall that minVal > maxVal is permitted.)
color barC - color of the value line (or bar) in meters.
** ClickableMeter(int leftX, int topY, int theWidth, int theHeight,
                    String theLabel, color stdColor, color overColor, color barColor,
                    float minValue, float value, float maxValue)
- Constructs a vertical or horizontal Clickable meter given the upper, left corner, the width and height, the label (not shown), three colors, and the min, current, max values. The min and max values can be reversed to reverse the display. The parameter list is the same for all the extensions of ClickableMeter:
* leftX - x (pixel) value of left side of meter.
* topY - y (pixel) value of top of meter.
* theWidth - the width of the meter (in pixels).
* theHeight - the height of the meter (in pixels).
* theLabel - the label for the meter (not normally shown but may be useful for such things as debugging).
* stdColor - the normal color of the meter.
* overColor - the color used when mouse is over the meter.
* barColor - the color used for the value marker line (bar) on the meter.
* minValue - the "minimum" (bottom or left) value displayed on the meter.
* value - the initial value displayed on the meter.
* maxValue - the "maximum" (top or right) value displayed on the meter.
* void display()
- Displays the meter vertically or horizontally and draws a line (bar) corresponding to its value. The background is stdCol (overColor when the mouse is over the meter) while the value line is shown in the barColor. It optionally displays hashmarks, labels and the value if they have been requested.
* boolean checkForClick()
Returns true if the meter has been clicked. Also sets "clicked" to true and updates the current value of the ClickableMeter.
** int calcLoc(float value)
- Calculates and returns the x or y location corresponding to the value depending on whether the meter is horizontal or vertical.
** void setValue(float value)
- Sets the value of the meter and the location of the value line (bar) given the value.
# void calcVal()
- Uses the barLoc to calculate and store val (the value) of the meter.
** void showLabels(float spacing, float start)
- Specifies that regularly spaced labels showing values should be added to the right or bottom of the meter. First label is at start. Note: This version is designed for situations where the minimal value is not a "nice" number and a labels should begin at the specified value. Normally it should be called in setup().
** void showLabels(float spacing)
- Specifies that regularly spaced labels showing values should be added to the right or bottom of the meter. First label is at minVal. Note: This version is designed for situations where the minimal value is a "nice" number. Normally it should be called in setup().
** void showHashmarks(float spacing, float start)
- Specifies that hashmarks should be added to the right or bottom of the meter. First hash is at start. Note: This version is designed for situations where the minimal value is not a "nice" number. Normally it should be called in setup().
** void showHashmarks(float spacing)
- Specifies that hashmarks should be added to the right or bottom of the meter. First hash is at minVal. Note: This version is designed for situations where the minimal value is a "nice" number. Normally it should be called in setup().
** void showValue()
- Specifies that meter's value should be added to the meter. Normally the value is displayed on the right or bottom of the meter. But if showLabels is also used, the value will appear on the left or top of the meter. This prevents the value label from overlapping the other labels. Normally it should be called in setup().
** void textLabel(float value, boolean rightSide)
- Write a label with the given value beside the meter. If rightSide is true, then it is on the right side or bottom (depending on the orientation), if not it is on the left side or top. The value is rounded to two decimal places (but may appear with 0 or 1 decimal places). Should be called directly or indirectly in the draw() method. See showLabels() and showValue() to have this done automatically. This method may be useful for special values.
** float getValue()
- Returns the current value of the meter.
** float getMaxValue()
- Returns the "max" (the top or right end) value of the meter.
** float getMinValue()
- Returns the "min" (the bottom or left) value of the meter.

Method use codes:

** This constructor or method is designed to be called in the user sketch.

* This method is normally not called in the user's sketch unless the Clickable item was not been included in a ClickableGroup. ClickableGroup automatically uses the method as needed. Exception: This method may be needed if the user is extending Clickable with a new class.

# This constructor or method is rarely used in the user program. In Java, it would probably marked "private". Clickable, ScrollBar, and some other abstract constructors would never be called directly by the user sketch because they do nothing useful unless the user is extending a class.


Inherited from ClickablePanel

Fields
clickX, clickY, invisible, wholeSkectch

Constructors
ClickablePanel, ClickablePanel, ClickablePanel

Methods
adjustPanel, checkForClick, display, drawOnPanel, getClickX, getClickY, getPanelX, getPanelY, isOver, setClickX, setClickY, setColor


Inherited from Clickable

Fields
NOTHING_CLICKED, COMBO_BUTTON, DISABLED_COLOR, borderColor, c, clicked, clickedItemNum, colorState, enabled, h, label, over, overC, scrollable, selected, selectedItemNum, visible, w, x, y

Constructors
Clickable

Methods
checkForClick, display, doNotSelect, getClickedItemNum, getColorState, getH, getItem, getLabel, getSelected, getSelectedItem, getSelectedItemLabel, getSelectedItemNum, getW, getX, getY, hasBeenClicked, hideSomething, isOver, setBorderColor, setColorState, setH, setLabel, setScrollable, setSelected, setSelectedItemNum, setEnabled, setVisible, setW, setX, setY, sX, sY

Return to the top of the page

Revised: 04/11/2014