{{tag>category:"presentation server" }}

====== Button controls ======

=== Published 26 JUL 2013 at 12:01:42AM ===

== Updated on 25 JUL 2013 at 12:01:42AM ==

Perhaps one of the controls most in need of a face-lift in OpenInsight is the Button (a.k.a PUSHBUTTON) control, and in this post we'll take a look at some of the new features we've added to it for version 10.

==== Image API ====

Buttons in OpenInsight have always supported background images and version 10 is no different.  However we've extended the number of image states from 6 to 10 to give you a few more options if you want to use them:

  - Up
  - Down
  - Disabled
  - ////
  - Up with focus
  - Down with Focus
  - Hot
  - Hot with focus
  - Default
  - Default with focus

Of course you don't have to supply all of these images - the system will attempt to pick the closest match based on the **IMAGECOUNT** supplied.  Access to the image properties is exposed via the normal [[http://revdevx.wordpress.com/2013/02/07/the-image-api/|Image AP]]I with the exception of the **IMAGENUMBER **property which is managed automatically depending on the button state.

==== Glyph API ====

One of the biggest drawbacks with using buttons in previous versions of OpenInsight is that images have only ever been applied to the background as a whole.  In order to create a button with an icon (or //glyph//, as we'll refer to it henceforth) it has always been necessary to provide an image file with the entire button background drawn on it as well as the required glyph and text.  This makes it very difficult to provide a solution that looks good across different color schemes and visual styles, and it also makes any sort of runtime customization problematic too.

For version 10 a new API has been added for buttons called the "Glyph API". This allows you to specify an image for the button that is drawn on top of the //normal// background like so:

[caption id="attachment_1025" align="aligncenter" width="189"][[http://revdevx.files.wordpress.com/2013/07/bn_glyph_classic.png|{{16644.0011805556_1.png}}]] Classic-style button with glyph[/caption]

[caption id="attachment_1033" align="aligncenter" width="189"][[http://revdevx.files.wordpress.com/2013/07/bn_glyph_xp1.png|{{16644.0011805556_2.png}}]] XP-style button with glyph[/caption]

[caption id="attachment_1024" align="aligncenter" width="189"][[http://revdevx.files.wordpress.com/2013/07/bn_glyph1.png|{{16644.0011805556_3.png}}]] Aero-style button with glyph[/caption]

[caption id="attachment_1026" align="aligncenter" width="189"][[http://revdevx.files.wordpress.com/2013/07/bn_glyph_win8.png|{{16644.0011805556_4.png}}]] Windows 8-style button with glyph[/caption]

It is exposed via the following properties:

  * **GLYPH** (similar to the **BITMAP** or **IMAGE** property)
  * **GLYPHALIGN**
  * **GLYPHCOLORKEY**
  * **GLYPHCOUNT**
  * **GLYPHFRAMECOUNT**
  * **GLYPHFRAMENUMBER**
  * **GLYPHOFFSET**
  * **GLYPHORIGIN**
  * **GLYPHLAYOUT**
  * **GLYPHSPACING**
  * **GLYPHSIZE**
  * **GLYPHTRANSLUCENCY**

These properties are very similar to their counterparts in the normal Image API with the exception of the following Button-glyph specific ones:

**GLYPHLAYOUT property**

This property specifies how the glyph is laid out in relation to the text, and can be one of the following values:

  * "0" - Glyph to the left, text to the right
  * "1" - Glyph to the top, text to the bottom
  * "2" - Glyph to the right, text to the left
  * "3" - Glyph to the bottom, text to the top.

[caption id="attachment_1010" align="aligncenter" width="294"][[http://revdevx.files.wordpress.com/2013/07/bn_glyphlayout.png|{{16644.0011805556_5.png}}]] Aero-style buttons showing glyph layouts[/caption]

**GLYPHSPACING property**

This property is simply the number of pixels between the glyph and the text.

**Where's the GLYPHNUMBER property?**

Just as the Button Image API has no **IMAGENUMBER** property there is// //no corresponding **GLYPHNUMBER** property either - this is because you can provide more than one image for a glyph and the system will automatically select one for you based on the button state (just like with background images).  These states are:

  - Button up
  - Button down
  - Button disabled
  - Button hot
  - Button default

Note that if you don't supply a disabled Glyph image and you disable the button the system will draw a grayed version of the glyph for you:

[caption id="attachment_1012" align="aligncenter" width="294"][[http://revdevx.files.wordpress.com/2013/07/bn_glyph_disabled.png|{{16644.0011805556_6.png}}]] Aero-style buttons with system-drawn disabled glyph[/caption]

==== Flat buttons ====

Flat "toolbar" style buttons are supported by the boolean **FLAT** property.  I.e. the actual background is not painted until the mouse is moved over the button.

[caption id="attachment_1016" align="aligncenter" width="255"][[http://revdevx.files.wordpress.com/2013/07/bn_flat.png|{{16644.0011805556_7.png}}]] Aero-style flat button[/caption]

[caption id="attachment_1020" align="aligncenter" width="287"][[http://revdevx.files.wordpress.com/2013/07/bn_flat_2.png|{{16644.0011805556_8.png}}]] Aero-style flat buttons with 50% translucency[/caption]

==== Custom colors ====

The button **BACKCOLOR** property fully supports custom colors and generates a set of matching 3D highlight and shadow colors to use when rendering.

[caption id="attachment_1018" align="aligncenter" width="216"][[http://revdevx.files.wordpress.com/2013/07/bn_custom_backcolor.png|{{16644.0011805556_9.png}}]] XP-style button with red BACKCOLOR[/caption]

The **FORECOLOR** property also makes a welcome return and is now respected regardless of the visual style in use.

[caption id="attachment_1019" align="aligncenter" width="214"][[http://revdevx.files.wordpress.com/2013/07/bn_custom_forecolor.png|{{16644.0011805556_10.png}}]] Aero-style button with red FORECOLOR[/caption]

==== Extended mouse support ====

Like the updated [[http://revdevx.wordpress.com/2013/07/23/label-controls/|Label control]] the Button now supports the following new properties when the button is in the "hot" state (i.e. the mouse is moving over it):

  * **HOTFONT**
  * **HOTFORECOLOR**
  * **HOTBACKCOLOR**

It also supports the new **MOUSEOVER** event so you can easily track mouse movements without having to resort to using **WINMSG** events.

==== Text Alignment and position ====

A **TEXTORIGIN** property is provided that allows you to specify the exact XY position that you wish the text to be drawn at in a similar manner to the **GLYPHORIGIN** property.  Horizontal text alignment is also supported by the **TEXTALIGN** property.

//(Disclaimer: This article is based on preliminary information and may be subject to change in the final release version of OpenInsight 10).//


=== Comments ===


----

=== At 26 JUL 2013 12:45AM Chris Meyer wrote:  ===

<QUOTE>Is there anyway we can get an animated GIF on a form?

</QUOTE>

----

=== At 26 JUL 2013 07:13AM Captain C wrote:  ===

<QUOTE>The IMAGE API supports the IMAGEFRAMECOUNT and IMAGEFRAMENUMBER properties which can pick out the individual frames within an animated GIF. If all else fails you could use this with the updated v10 BITMAP control and animate the image on a TIMER event - I'll have to have a look to see if we can grab the animation rate from the GIF itself - I'm not 100% sure if the Windows Imaging Component exposes that - if it does then it's possible we could do the animation automatically.

</QUOTE>

----

=== At 22 AUG 2013 12:15AM BarryStevens wrote:  ===

<QUOTE>Chris, you can can do this now from far back OI versions using the TIMER event to change the frame no, See help for IMAGENUMBER where the timer event would add 1 to the number each time thru until reacheaches the limit you set then resets and starts again.

</QUOTE>





== Original ID: revdevx.wordpress.com/?p=961 ==