April 19, 2024, 11:51:13 AM

News:

IonicWind Snippit Manager 2.xx Released!  Install it on a memory stick and take it with you!  With or without IWBasic!


7. User's Control Spec

Started by LarryMc, August 13, 2011, 07:43:17 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

LarryMc

The first step in building a custom control is defining what you want the control to do.  On the surface that sounds like a simple, no-brainer. We could say we want to build a grid control or a chart control and end it there.

If that is the extent of your initial definition and planning you'll most likely create headaches for yourself as you get deeper into the coding.  You may find you have coded yourself into a hole that you can only get out of by discarding days, weeks, or even months of coding (depending upon the complexity of your control).  Extra time spent at this stage will pay dividends in the long run.

What I chose for my first attempt at creating a custom control (and the basis for this tutorial) was a round gage. I spent almost 11 years in the Air Force with a great deal of my time spent in the cockpit of numerous kinds of aircraft. After that I spent 25 years in a chemical plant.  As a result, when I started the gage control project I had a pretty good idea of what the final product should look like and how it should work.

For the sake of this tutorial let's define all that we can about where we want to wind up, starting with appearance:
- a round gage with a black border/frame
- a white or gray dial face
- circular scale on dial face with evenly spaced numbers and tick marks
- multiple dial face layouts/types

The various dial face layouts/types

CLOCK (Fig. 7, Fig. 8 )
- 24 hr/12 hr scale
- 1 minute tick marks on 12hr scale
- 30 minute tick marks on 24hr scale
- black second hand
- long red minute hand
- short red hour hand
- text label above center of gage

270 DEGREE (Fig.1, Fig. 2, Fig. 3, Fig.4)
- scale covers 270 degrees (similar to a car's speedometer)
- four styles determined by 90 degree unused area being at bottom, top, left, or right
- 1 to 15 major tic marks w/ numbers
- one minor tic mark between major tic marks
- single red pointer
- text identifier above center of gage
- range multiplier/units below center of gage

360 DEGREE - SINGLE (Fig. 5)
- full circle scale
- fixed scale of 0-9
- intermediate tic marks
- odometer type counter below gage center
- single red pointer
- 1 rev of pointer inc/dec counter by one
- text identifier above center of gage
- range multiplier/units below center of gage

360 DEGREE - DOUBLE (Fig. 6)
- full circle scale
- fixed scale of 0-9
- intermediate tic marks
- odometer type counter below gage center
- short red pointer
- long red pointer
- 1 rev of short pointer inc/dec counter by one
- 10 revs of long pointer = 1 rev of short pointer
- text identifier above center of gage
- range multiplier/units below center of gage

2-PEN VERTICAL (Fig. 9)
- 2 vertical scale arcs in center of gage that share scale numbers
- numbers fixed @ 0-10 in vertical column w/tic marks
- 2 independent red pointers with pivot points at left and right edges of gage
- text identifiers above center of gage on left/right for each pointer
- range multipliers/units below center of gage on left/right for each pointer

2-PEN HORIZONTAL (Fig. 10)
- 2  horizontal scale arcs in center of gage that share scale numbers
- numbers fixed @ 0-10 in horizontal row w/tic marks
- 2 independent red pointers with pivot points at top and bottom edges of gage
- text identifiers and range multipliers/units above center of gage for top pointer
- text identifiers and range multipliers/units below center of gage for bottom pointer

Next we need to identify the things we need to be able to configure/control:
- set the style/type of gage
- set the overall size of the gage
- set the max min values for the raw data sent to a gage
- set the max min values for the displayed range on a gage
- set the text identifier for a gage/pointers
- set the range multiplier/units text for a gage/pointers, if appropriate
- set the offset of clocks to show time zones other than local time.
- set the color of rectangle containing the gage
- set the white/grey color of the dial face
- set the current position of pointer(s), where appropriate
_____________________

Coming Next - Dynamic Link or Static Library
LarryMc
Larry McCaughn :)
Author of IWB+, Custom Button Designer library, Custom Chart Designer library, Snippet Manager, IWGrid control library, LM_Image control library