MicroView Widget Style Guide

Featured_Image-1-12

This is a visual guide for the various MicroView widget styles that are part of the MicroView Library. Please note that any fuzziness or lack of clarity in the display is due to the shutter speed of my camera having to be open long enough to capture the full display without worrying about refresh rates.

All examples are screenshots taken of the MicroView running the example sketch, “MicroViewWidgetDemo”, provided upon installation of the MicroView Library in the Arduino IDE. The full code is provided at the bottom for reference, and the library can be downloaded from the GeekAmmo GitHub Arduino Library repository.

MicroView Widget Styles – Sliders


MicroView Widget Style Guide 11. Horizontal MicroView Slider Style 0

widget1 = new MicroViewSlider(4, 16, 0, 100, WIDGETSTYLE0);
widget2 = new MicroViewSlider(4, 32, 0, 100, WIDGETSTYLE0 + WIDGETNOVALUE);

The top slider displays the numerical value to the right of the graphical display. The bottom slider suppresses the numerical value. In both cases, the triangle indicator slides left and right across the meter as the value changes by using the spin() method.

MicroView Widget Style Guide 22. Horizontal MicroView Slider Style 1

widget1 = new MicroViewSlider(0, 10, 100, 200, WIDGETSTYLE1);
widget2 = new MicroViewSlider(0, 32, 100, 200, WIDGETSTYLE1 + WIDGETNOVALUE);

The top slider displays the numerical value below and justified with the left side of the slider. The bottom slider suppresses the numerical value. In both cases, the triangle indicator slides left and right across the meter as the value changes by using spin() method.

MicroView Widget Style Guide 33. Vertical MicroView Slider Style 2

widget1 = new MicroViewSlider(10, 12, 0, 5000, WIDGETSTYLE2);
widget2 = new MicroViewSlider(48, 12, 0, 5000, WIDGETSTYLE2 + WIDGETNOVALUE);

The left slider displays the numerical value below and justified with the left side of the slider. The right slider suppresses the numerical value. In both cases, the triangle indicator slides up and down across the meter as the value changes by using the spin() method. Described in the documentation as “like 0, but vertical”.

MicroView Widget Style Guide 44. Vertical MicroView Slider Style 3

widget1 = new MicroViewSlider(16, 4, -20, 20, WIDGETSTYLE3);
widget2 = new MicroViewSlider(54, 4, -20, 20, WIDGETSTYLE3 + WIDGETNOVALUE);

The left slider displays the numerical value to the right of the slider. The right slider suppresses the numerical value. In both cases, the triangle indicator slides up and down across the meter as the value changes by using the spin() method. Described in the documentation as “like 1, but vertical”.



MicroView Widget Styles – Gauges


MicroView Widget Style Guide 55. MicroView Gauge Style 0

widget1 = new MicroViewGauge(15, 24, 0, 200, WIDGETSTYLE0);
widget2 = new MicroViewGauge(48, 24, 0, 200, WIDGETSTYLE0 + WIDGETNOVALUE);

The left gauge displays the numerical value right justified at the base of the gauge, looking centered with a three digit value. The right gauge suppresses the numerical value. In both cases, the needle indicator rotates around the meter as the value changes by using the spin() method.

MicroView Widget Style Guide 66. MicroView Gauge Style 1

widget1 = new MicroViewGauge(32, 24, -10, 150, WIDGETSTYLE1);

A single large gauge displaying the numerical value at the base, inside the circle of the gauge face. The needle indicator rotates around the meter as the value changes by using the spin() method.

MicroView Widget Style Guide 77. MicroView Gauge Style 1

widget1 = new MicroViewGauge(32, 24, 0, 240, WIDGETSTYLE1 + WIDGETNOVALUE);

A single large gauge with the numerical value suppressed. The needle indicator rotates, as above, around the meter however no value is present. Rotation is performed via the spin() method.


MicroView Widget Styles – Custom Value Displays

The following images are examples of the styles from above, with the default numerical value display suppressed, then replaced by a value in a different format in custom locations. The correspond with demos 8 through 13 in the code at the bottom.