Difference between revisions of "Eye-Candy Controls"

From Free Pascal wiki
Jump to navigationJump to search
(Used multilingual page template)
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== Overview ==
+
{{Eye-Candy Controls}}
  
=== About ===
+
'''Eye Candy Controls''' (shortly ECControls or EC-Controls) are set of visual controls written for Lazarus. Their design is based on Themes, therefore their look is very native everywhere, no matter what widgetset you use.
 
 
Eye Candy Controls (shortly ECControls or EC-Controls) are set of visual controls written for Lazarus. Their design is based on Themes, therefore their look is very native everywhere, no matter what widgetset you use.
 
  
 
Each release is announced on Lazarus Forum in section Third Party Announcements.
 
Each release is announced on Lazarus Forum in section Third Party Announcements.
Line 9: Line 7:
 
There are always attached files <tt>README.txt</tt> (list of all known issues) and <tt>CHANGELOG.txt</tt> (list of all changes from previous release).
 
There are always attached files <tt>README.txt</tt> (list of all known issues) and <tt>CHANGELOG.txt</tt> (list of all changes from previous release).
  
=== License ===
+
;License
 
 
 
GNU Lesser General Public License 2.0 with linking exception (a.k.a. Modified LGPL). Each file of EC-Controls contains license header. Also, files <tt>COPYING.modifiedLGPL.txt</tt> and <tt>COPYING.LGPL.txt</tt> are bundled to each archive.
 
GNU Lesser General Public License 2.0 with linking exception (a.k.a. Modified LGPL). Each file of EC-Controls contains license header. Also, files <tt>COPYING.modifiedLGPL.txt</tt> and <tt>COPYING.LGPL.txt</tt> are bundled to each archive.
  
=== Author ===
+
;Author
 +
All components are written by [[User:Blaazen|Blaazen]]. Copyright notice and real name are mentioned in the header of each unit. You can contact author on Lazarus Forum (nickname: Blaazen) in any thread about EC-Controls [[Special:EmailUser/Blaazen|(email author)]]. If you are logged in to the forum, you can get author's e-mail or send him private message.
  
All components are written by Blaazen. Copyright notice and real name are mentioned in the header of each unit. You can contact author on Lazarus Forum (nickname: Blaazen) in any thread about EC-Controls. If you are logged in to forum, you can get author's e-mail or send him private message.
+
Credits:
  
== Install ==
+
Alignment of composite components (TECSpinEdit, TECSpinPosition, TECEditBtn, TECColorBtn, TECComboBtn, TECColorCombo) is based on idea of Flávio published on mailing list [http://lists.lazarus.freepascal.org/pipermail/lazarus/2013-March/079971.html]
  
=== Download ===
+
[[TBaseScrollControl]] class is based on [https://github.com/theo222/lazarus-thumbviewer/blob/master/scrollingcontrol.pas TScrollingControl] by Theo.
 
 
Latest release: 0.9.6.10 on 15-th June 2016 (without demos)
 
 
 
Previous release: 0.9.6 on 24-th May 2016 (including demos)
 
 
 
SourceForge: https://sourceforge.net/projects/eccontrols/
 
 
 
UltraShare: http://ultrashare.net/hosting/fl/8c275ee97f
 
(direct link to 0.9.6 released on 24-th May 2016; including demos)
 
 
 
UltraShare: http://ultrashare.net/hosting/fl/a8838060fb
 
(direct link to 0.9.4.16 released on 9-th April 2016; without demos)
 
 
 
UltraShare: http://ultrashare.net/hosting/fl/f523032cb4
 
(direct link to 0.9.4.14 released on 6-th April 2016; without demos)
 
  
 +
;Download
 +
* Latest release: 0.9.44 on 1-st June 2020 (including demos); UltraShare is out of order. This release was tested with Lazarus 2.1
 +
* Previous release: 0.9.30 on 9-th March 2018 (including demos); UltraShare is out of order. This release was tested with Lazarus 1.9 and 1.8
 +
* Previous release: 0.9.24.6 on 24-th October 2017 (without demos); TECGrid is ''Release candidate''; UltraShare is out of order
 +
* Previous release: 0.9.20 on 31-th July 2017 (without demos)
 +
* Previous release: 0.9.6 on 24-th May 2016 (including demos)
 +
* SourceForge: https://sourceforge.net/projects/eccontrols/
 +
* UltraShare: http://ultrashare.net/hosting/fl/8c275ee97f (direct link to 0.9.6 released on 24-th May 2016; including demos)
 +
* UltraShare: http://ultrashare.net/hosting/fl/a8838060fb (direct link to 0.9.4.16 released on 9-th April 2016; without demos)
 +
* UltraShare: http://ultrashare.net/hosting/fl/f523032cb4 (direct link to 0.9.4.14 released on 6-th April 2016; without demos)
 
UltraShare is alternative because SourceForge is blocked in some countries. New releases are always announced in the Third Party section of the Lazarus Forum.
 
UltraShare is alternative because SourceForge is blocked in some countries. New releases are always announced in the Third Party section of the Lazarus Forum.
  
=== Install to Lazarus ===
+
;Install to Lazarus
 
 
 
Open menu <tt>Package => Open package File (*.lpk) ...</tt> and select file <tt>eccontrols.lpk</tt>. Click <tt>Compile</tt> (wait a while) and then <tt>Use >> Install</tt>. Lazarus will ask you "Do you want to rebuild Lazarus now?". Click <tt>Yes</tt> to install the package.
 
Open menu <tt>Package => Open package File (*.lpk) ...</tt> and select file <tt>eccontrols.lpk</tt>. Click <tt>Compile</tt> (wait a while) and then <tt>Use >> Install</tt>. Lazarus will ask you "Do you want to rebuild Lazarus now?". Click <tt>Yes</tt> to install the package.
  
 
== Components ==
 
== Components ==
 
 
EC-Controls are installed to the tab EC-C on the Lazarus component palette.
 
EC-Controls are installed to the tab EC-C on the Lazarus component palette.
  
 
[[File:ecpalette2.png]]
 
[[File:ecpalette2.png]]
 +
 +
 +
New images (from version 0.9.24.6). Resource files (*.lrs) also contains _150 and _200 images for Hi-DPI desktops.
 +
 +
[[File:eccpalette4.png]]
  
 
Components below are listed in order of their appearance on the component palette. All screenshots are taken from KDE4 or Plasma5 (Lazarus+Qt).
 
Components below are listed in order of their appearance on the component palette. All screenshots are taken from KDE4 or Plasma5 (Lazarus+Qt).
Line 53: Line 49:
  
 
==== TECBevel ====
 
==== TECBevel ====
 
+
An alternative to [[TBevel]].
An alternative to TBevel.
 
  
 
[[File:tecbevel.png]]
 
[[File:tecbevel.png]]
  
TECBevel can draw non-rectangular shapes or non-straight lines.
+
[[TECBevel]] can draw non-rectangular shapes or non-straight lines.
  
 
==== TECLink ====
 
==== TECLink ====
 
+
[[TECLink]] provides a weblink. The same links are well known from web-browsers.
A link. The same links are well known from web-browsers.
 
  
 
[[File:teclink.png]]
 
[[File:teclink.png]]
Line 71: Line 65:
  
 
==== TECImageMenu ====
 
==== TECImageMenu ====
 
 
A vertical menu with images. Similar component is frequently used in KDE4 applications and Outlook97
 
A vertical menu with images. Similar component is frequently used in KDE4 applications and Outlook97
  
 
[[File:tecimagemenu.png]]
 
[[File:tecimagemenu.png]]
  
TECImageMenu can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is default). Can be controlled by mouse, by keyboard or by code.
+
[[TECImageMenu]] can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is default). Can be controlled by mouse, by keyboard or by code.
 
 
===== Mouse =====
 
  
Simply left-click on menu item.
+
;Mouse
 +
* Simply left-click on menu item.
 +
* Middle-click or right-click selects an item but does not click.
 +
* Mouse wheel moves the selection and does not click.
  
Middle-click or right-click selects an item but does not click.
+
Keyboard
 
+
* Space nad Enter: click on the selected item.
Mouse wheel moves the selection and does not click.
+
* Arrow Up, Arrow Down, Page Up, Page Down, Home and End: moves the selection but does not click.
 
+
* Acceleration key (Alt + Key) selects and clicks the relevant item (menu doesn't need to be focused)..
===== Keyboard =====
 
 
 
Space nad Enter: click on the selected item.
 
 
 
Arrow Up, Arrow Down, Page Up, Page Down, Home and End: moves the selection but does not click.
 
 
 
Acceleration key (Alt + Key) selects and clicks the relevant item (menu doesn't need to be focused)..
 
  
 
==== TECSpinBtns ====
 
==== TECSpinBtns ====
 
+
An advanced alternative to [[TUpDown]].
An advanced alternative to TUpDown.
 
  
 
[[File:tecspinbtns.png]]
 
[[File:tecspinbtns.png]]
  
TECSpinBtns is based on double precision variables.
+
[[TECSpinBtns]] is based on double precision variables.
  
 
TECSpinBtns cannot have focus. Can be controlled by mouse or by code.
 
TECSpinBtns cannot have focus. Can be controlled by mouse or by code.
  
===== Mouse =====
+
;Mouse
 
+
TECSpinBtns consists from 9 small buttons.  
TECSpinBtns consists from 9 small buttons. Left-click on BtnMin, BtnBigDec, BtnDec, BtnMiddle, BtnMenu, BtnInc, BtnBigInc and BtnMax sets the Value to Min, decreases Value by PageSize, decreases Value by Increment, sets Value to Middle, triggers OnMenuClick event, increases Value by Increment, increases Value by PageSize and sets Value to Max respectively.
+
* Left-click on BtnMin, BtnBigDec, BtnDec, BtnMiddle, BtnMenu, BtnInc, BtnBigInc and BtnMax sets the Value to Min, decreases Value by PageSize, decreases Value by Increment, sets Value to Middle, triggers OnMenuClick event, increases Value by Increment, increases Value by PageSize and sets Value to Max respectively.
 
+
* Middle-click sets Value to Middle or triggers OnMenuClick - depends on MenuControl property. Other mouse buttons can be used for dragging too, depends on DragControl property. Dragging mainly depends on properties: DragOrientation, MouseIncrementX, MouseIncrementY, MouseStepPixelsX, MouseStepPixelsY and Reversed.  
Middle-click sets Value to Middle or triggers OnMenuClick - depends on MenuControl property. Other mouse buttons can be used for dragging too, depends on DragControl property. Dragging mainly depends on properties: DragOrientation, MouseIncrementX, MouseIncrementY, MouseStepPixelsX, MouseStepPixelsY and Reversed.  
 
 
 
===== Code =====
 
  
 +
;Code
 
Simply by assigning any floating-point value to property Value:  
 
Simply by assigning any floating-point value to property Value:  
 
  Value := 10.5;
 
  Value := 10.5;
Line 117: Line 101:
  
 
Precendence of drawing:
 
Precendence of drawing:
 
+
# The highest precedence has the OnDrawGlyph event.
1) The highest precedence has the OnDrawGlyph event.
+
# The second is Caption. It should be short (one or two characters).
 
+
# The third is image from Images. Images must be assigned and ImageIndex must be greater or equal to zero and lesser than Images.Count  
2) The second is Caption. It should be short (one or two characters).
+
# When the OnDrawGlyph is not assigned, Caption is empty string and ImageIndex is -1 then built-in glyph is used. There is five sets of styles, they can be selected with GlyphStyle property.
 
 
3) The third is image from Images. Images must be assigned and ImageIndex must be greater or equal to zero and lesser than Images.Count  
 
 
 
4) When the OnDrawGlyph is not assigned, Caption is empty string and ImageIndex is -1 then built-in glyph is used. There is five sets of styles, they can be selected with GlyphStyle property.
 
  
 
==== TECSpinEdit ====
 
==== TECSpinEdit ====
 
 
An advanced alternative to TSpinEdit and TFloatSpinEdit. It is [[TEdit]] joined together with TECSpinBtns.
 
An advanced alternative to TSpinEdit and TFloatSpinEdit. It is [[TEdit]] joined together with TECSpinBtns.
  
 
[[File:tecspinedit.png]]
 
[[File:tecspinedit.png]]
  
TECSpinEdit can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is default). Can be controlled by mouse, by keyboard or by code.
+
[[TECSpinEdit]] can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is default). Can be controlled by mouse, by keyboard or by code.
 
 
===== Mouse =====
 
  
See TECSpinBtns.
+
:Mouse
 +
See [[TECSpinBtns]].
  
===== Keyboard =====
+
;Keyboard
  
 
(line-edit must be focused)
 
(line-edit must be focused)
Line 144: Line 122:
 
Text value can typed in to the line-edit directly. If entered value is lesser than TECSpinBtnsPlus.MinInEdit or greater than TECSpinBtnsPlus.MaxInEdit then the value will be changed to fit these bounds. Change of Value is done in OnEditingDone event.
 
Text value can typed in to the line-edit directly. If entered value is lesser than TECSpinBtnsPlus.MinInEdit or greater than TECSpinBtnsPlus.MaxInEdit then the value will be changed to fit these bounds. Change of Value is done in OnEditingDone event.
  
Arrow Up/Down do click on BtnInc/BtnDec*.
+
* Arrow Up/Down do click on BtnInc/BtnDec*.
 
+
* PgUp/PgDn do click on BtnBigInc/BtnBigDec*.
PgUp/PgDn do click on BtnBigInc/BtnBigDec*.
+
* Ctrl + Home/End do click on BtnMax/BtnMin*.
 
+
* Ctrl + Space do click BtnMiddle.
Ctrl + Home/End do click on BtnMax/BtnMin*.
+
* Ctrl + Enter do click on BtnMenu.
 
 
Ctrl + Space do click BtnMiddle.
 
 
 
Ctrl + Enter do click on BtnMenu.
 
 
 
 
 
 
<nowiki>*)</nowiki> valid for Reversed = False. For Reversed = True works oppositely.
 
<nowiki>*)</nowiki> valid for Reversed = False. For Reversed = True works oppositely.
  
===== Code =====
+
;Code
 
 
 
Simply by assigning any floating-point value to property Value:  
 
Simply by assigning any floating-point value to property Value:  
 
  Value := 10.5;
 
  Value := 10.5;
Line 164: Line 135:
  
 
==== TECSwitch ====
 
==== TECSwitch ====
 
 
An alternative to TCheckBox. Similar component exists in GTk3.
 
An alternative to TCheckBox. Similar component exists in GTk3.
  
 
[[File:tecswitch.png]]
 
[[File:tecswitch.png]]
  
TECSwitch can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is default). Can be controlled by mouse, by keyboard or by code.
+
[[TECSwitch]] can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is default). Can be controlled by mouse, by keyboard or by code.
 
 
===== Mouse =====
 
 
 
Left-click on switch area (out of knob) will change the State*.
 
 
 
Left-click on the knob and holding the left-mouse button down will capture mouse and knob can be moved even if the mouse-cursor leaves the area of the switch.
 
 
 
===== Keyboard =====
 
 
 
Space or Enter changes the State* (only when focused).
 
  
Acceleration key (Alt + Key) changes the State* (doesn't need to be focused).
+
;Mouse
 +
* Left-click on switch area (out of knob) will change the State*.
 +
* Left-click on the knob and holding the left-mouse button down will capture mouse and knob can be moved even if the mouse-cursor leaves the area of the switch.
  
===== Code =====
+
;Keyboard
 +
* Space or Enter changes the State* (only when focused).
 +
* Acceleration key (Alt + Key) changes the State* (doesn't need to be focused).
  
 +
;Code
 
Simply by assigning any State* or Checked property:
 
Simply by assigning any State* or Checked property:
 
  Checked := True; //False
 
  Checked := True; //False
 
  State := cbChecked; //cbGrayed, cbUnchecked
 
  State := cbChecked; //cbGrayed, cbUnchecked
 
  
 
<nowiki>*)</nowiki> Property State is always changed from checked to unchecked, from grayed to unchecked or from unchecked to checked.
 
<nowiki>*)</nowiki> Property State is always changed from checked to unchecked, from grayed to unchecked or from unchecked to checked.
  
 
==== TECSpeedBtn ====
 
==== TECSpeedBtn ====
 
 
A button with some advanced features and built-in glyphs. An alternative to TSpeedButton and TToggleBox.
 
A button with some advanced features and built-in glyphs. An alternative to TSpeedButton and TToggleBox.
  
 
[[File:tecspeedbtn.png]]
 
[[File:tecspeedbtn.png]]
  
TECSpeedBtn cannot have focus.
+
[[TECSpeedBtn]] cannot have focus.
 
 
Features and differences from TSpeedButton:
 
 
 
* TSpeedButton has property Glyph: TBitmap. TECSpeedBtn has properties ImageIndex: Integer and Images: TImageList instead.
 
  
 +
Features and differences from [[TSpeedButton]]:
 +
* TSpeedButton has property Glyph: TBitmap. TECSpeedBtn has properties ImageIndex: Integer and Images: [[TImageList]] instead.
 
* TECSpeedBtn has property Delay and built-in timer. Therefore it can work as a delay-button (Delay>0) or toggle-box (Delay<0).
 
* TECSpeedBtn has property Delay and built-in timer. Therefore it can work as a delay-button (Delay>0) or toggle-box (Delay<0).
 
+
* TECSpeedBtn has more than 80 built-in glyph (painted via [[TCanvas]] helper). Glyphs can be various for checked and unchecked state.
* TECSpeedBtn has more than 80 built-in glyph (painted via TCanvas helper). Glyphs can be various for checked and unchecked state.
 
 
 
 
* Similarly to TSpeedButton, TECSpeedBtn has properties GroupIndex, Checked and AllowAllUp so buttons can be grouped to radio-group.
 
* Similarly to TSpeedButton, TECSpeedBtn has properties GroupIndex, Checked and AllowAllUp so buttons can be grouped to radio-group.
 
 
* TECSpeedBtn cannot obtain focus but can be pressed by acceleration key (Alt+ [underlined key]).
 
* TECSpeedBtn cannot obtain focus but can be pressed by acceleration key (Alt+ [underlined key]).
 
+
* TECSpeedBtn can be linked with [[TAction]] too.
* TECSpeedBtn can be linked with TAction too.
 
  
 
Precendence of drawing:
 
Precendence of drawing:
 +
# The highest precedence has the OnDrawGlyph event.
 +
# The second is Caption and image from Images. Images must be assigned and at least on of ImageIndex and ImageIndexChecked must be greater or equal to zero and lesser than Images.Count.
 +
# When the OnDrawGlyph is not assigned and both ImageIndex and ImageIndexChecked are -1 then built-in glyph is used (properties GlyphDesign and GlyphDesignChecked). When ImageIndex is valid Image and ImageIndexChecked is -1 or only GlyphDesign is some glyph and GlyphDesignChecked is egdNone then ImageIndex or GlyphDesign is used for checked state too (and vice versa).
  
1) The highest precedence has the OnDrawGlyph event.
+
==== TECBitBtn ====
 +
The same as TECSpeedBtn but derived from TCustomControl, therefore it can have focus. An alternative to TBitBtn and TToggleBox.
  
2) The second is Caption and image from Images. Images must be assigned and at least on of ImageIndex and ImageIndexChecked must be greater or equal to zero and lesser than Images.Count.
+
[[File:tecbitbtn.png]]
 
 
3) When the OnDrawGlyph is not assigned and both ImageIndex and ImageIndexChecked are -1 then built-in glyph is used (properties GlyphDesign and GlyphDesignChecked). When ImageIndex is valid Image and ImageIndexChecked is -1 or only GlyphDesign is some glyph and GlyphDesignChecked is egdNone then ImageIndex or GlyphDesign is used for checked state too (and vice versa).
 
  
 
==== TECEditBtn ====
 
==== TECEditBtn ====
 
+
An alternative to [[TEditButton]].  It is [[TEdit]] joined together with [[TECSpeedBtn]].
An alternative to TEditButton.  It is [[TEdit]] joined together with TECSpeedBtn.
 
  
 
[[File:teceditbtn.png]]
 
[[File:teceditbtn.png]]
  
 
==== TECColorBtn ====
 
==== TECColorBtn ====
 
 
Visual component for selecting color. Line edit displays color code in various formats and associated button triggers color dialog.
 
Visual component for selecting color. Line edit displays color code in various formats and associated button triggers color dialog.
  
Line 239: Line 196:
  
 
==== TECComboBtn ====
 
==== TECComboBtn ====
 
+
A combobox with associated button. It is [[TComboBox]] joined together with [[TECSpeedBtn]].
A combobox with associated button. It is [[TComboBox]] joined together with TECSpeedBtn.
 
  
 
[[File:teccombobtn.png]]
 
[[File:teccombobtn.png]]
  
 
==== TECColorCombo ====
 
==== TECColorCombo ====
 
 
Visual component for selecting color. Combobox contains colors in various formats and associated button triggers color dialog.
 
Visual component for selecting color. Combobox contains colors in various formats and associated button triggers color dialog.
  
Line 255: Line 210:
  
 
==== TECHeader ====
 
==== TECHeader ====
 
+
An alternative to [[THeader]].
An alternative to THeader.
 
  
 
[[File:techeader.png]]
 
[[File:techeader.png]]
Line 263: Line 217:
  
 
==== TECCheckListBox ====
 
==== TECCheckListBox ====
 
+
An alternative to [[TCheckListBox]].
An alternative to TCheckListBox.
 
  
 
[[File:tecchecklistbox.png]]
 
[[File:tecchecklistbox.png]]
Line 273: Line 226:
  
 
==== TECSlider ====
 
==== TECSlider ====
 
+
An advanced alternative to [[TTrackBar]].
An advanced alternative to TTrackBar.
 
  
 
[[File:tecslider.png]]
 
[[File:tecslider.png]]
Line 282: Line 234:
 
TECSlider is based on double precision variables. TECSlider can be controlled by mouse, by keyboard or by code.
 
TECSlider is based on double precision variables. TECSlider can be controlled by mouse, by keyboard or by code.
  
===== Mouse =====
+
;Mouse
 
+
* Left-click on Slider area (out of Knob) will move the knob by PageSize (or less, if mouse cursor is nearer).
Left-click on Slider area (out of Knob) will move the knob by PageSize (or less, if mouse cursor is nearer).
+
* Double-click or Middle-click will move the knob immediately to the mouse cursor (or to the Min/Max, if click is done out of groove and scale area).
 
+
* Left-click on the knob and holding the left-mouse button down will capture mouse and knob can be moved even if the mouse-cursor leaves the area of the slider.
Double-click or Middle-click will move the knob immediately to the mouse cursor (or to the Min/Max, if click is done out of groove and scale area).
+
* Mouse wheel moves knob up/down regardless of the Reversed property. In case of horizontal slider rolling up/down moves knob to the left/right, again, regardless of the Reversed property.
 
 
Left-click on the knob and holding the left-mouse button down will capture mouse and knob can be moved even if the mouse-cursor leaves the area of the slider.
 
 
 
Mouse wheel moves knob up/down regardless of the Reversed property. In case of horizontal slider rolling up/down moves knob to the left/right, again, regardless of the Reversed property.
 
  
 
The increment is:
 
The increment is:
 +
* Mouse wheel: Increment*Mouse.WheelScrollLines
 +
* Ctrl + mouse wheel: Increment.
  
Mouse wheel: Increment*Mouse.WheelScrollLines
+
;Keyboard
 
+
* Space: moves knob to the middle of the groove or to the ProgressMiddlePos in case of ProgressFromMiddle = True
Ctrl + mouse wheel: Increment.
+
* 0-9: moves the knob to position which is the integer multiplier of the PageSize (i.e. 0, 10, ..., 90 for PageSize = 10).
 
+
* PgUp: decreases Position by PageSize
===== Keyboard =====
+
* PgUp: increases Position by PageSize
 
+
* Home: moves the Knob to Min
Space: moves knob to the middle of the groove or to the ProgressMiddlePos in case of ProgressFromMiddle = True
+
* End: moves the Knob to Max
 
+
* +: increases Position by Increment
0-9: moves the knob to position which is the integer multiplier of the PageSize (i.e. 0, 10, ..., 90 for PageSize = 10).
+
* -: decreases Position by Increment
 
+
* Ctrl + ArrowUp: decreases* Position by Increment
PgUp: decreases Position by PageSize
+
* Ctrl + ArrowLeft: decreases* Position by Increment
 
+
* Ctrl + ArrowDown: increases* Position by Increment
PgUp: increases Position by PageSize
+
* Ctrl + ArrowRight: increases* Position by Increment
 
 
Home: moves the Knob to Min
 
 
 
End: moves the Knob to Max
 
 
 
+: increases Position by Increment
 
 
 
-: decreases Position by Increment
 
 
 
Ctrl + ArrowUp: decreases* Position by Increment
 
 
 
Ctrl + ArrowLeft: decreases* Position by Increment
 
 
 
Ctrl + ArrowDown: increases* Position by Increment
 
 
 
Ctrl + ArrowRight: increases* Position by Increment
 
 
 
 
 
 
<nowiki>*)</nowiki> valid for <code>Reversed = False</code>. When <code>Reversed = True</code> works oppositely.  
 
<nowiki>*)</nowiki> valid for <code>Reversed = False</code>. When <code>Reversed = True</code> works oppositely.  
  
===== Code =====
+
;Code
 
 
 
Simply by assigning any floating-point value to property Position:  
 
Simply by assigning any floating-point value to property Position:  
 
  Position := 10.5;  
 
  Position := 10.5;  
Line 334: Line 265:
  
 
==== TECProgressBar ====
 
==== TECProgressBar ====
 
+
An advanced alternative to [[TProgressBar]].
An advanced alternative to TProgressBar.
 
  
 
[[File:tecprogressbar.png]]
 
[[File:tecprogressbar.png]]
Line 342: Line 272:
  
 
==== TECPositionBar ====
 
==== TECPositionBar ====
 
+
An alternative to [[TTrackBar]] or [[TScrollBar]]. Similar components are used in [[Blender]] (3D graphics software).
An alternative to TTrackBar or TScrollBar. Similar components are used in Blender (3D graphics software).
 
  
 
[[File:tecpositionbar.png]]
 
[[File:tecpositionbar.png]]
  
TECPositionBar cannot have focus.
+
[[TECPositionBar]] cannot have focus and is based on double precision variables. TECPositionBar can be controlled by mouse or by code.
  
TECPositionBar is based on double precision variables.
+
;Mouse
 
+
* Left-click will set the position immediately to the mouse cursor (or to the Min/Max, if click is done out of groove and scale area).
TECPositionBar can be controlled by mouse or by code.
+
* Middle-click: moves knob to the middle of the groove or to the ProgressMiddlePos in case of ProgressFromMiddle = True
 
+
* Left-click on the end of the progress on and holding the left-mouse button down will capture mouse and position can be moved even if the mouse cursor leaves the area of a position bar.
===== Mouse =====
+
* Dragging is affected by MouseDragPixels (alone left mouse button) and MouseDragPixelsFine (Ctrl + left mouse button). Deafult values are 1 and 10, i.e. progress will change by one pixel when mouse cursor moves by one pixel (or by 10 pixels in case of dragging with Ctrl key pressed).
 
+
* Mouse wheel moves knob up/down regardless of the Reversed property. In case of horizontal slider rolling up/down moves knob to the left/right, again, regardless of the Reversed property.
 
Left-click will set the position immediately to the mouse cursor (or to the Min/Max, if click is done out of groove and scale area).
 
 
 
Middle-click: moves knob to the middle of the groove or to the ProgressMiddlePos in case of ProgressFromMiddle = True
 
 
 
Left-click on the end of the progress on and holding the left-mouse button down will capture mouse and position can be moved even if the mouse cursor leaves the area of a position bar.
 
 
 
Dragging is affected by MouseDragPixels (alone left mouse button) and MouseDragPixelsFine (Ctrl + left mouse button). Deafult values are 1 and 10, i.e. progress will change by one pixel when mouse cursor moves by one pixel (or by 10 pixels in case of dragging with Ctrl key pressed).
 
 
 
Mouse wheel moves knob up/down regardless of the Reversed property. In case of horizontal slider rolling up/down moves knob to the left/right, again, regardless of the Reversed property.
 
  
 
The increment is:
 
The increment is:
Line 370: Line 289:
 
* Ctrl + mouse wheel: (MouseDragPixels/MouseDragPixelsFine)*Mouse.WheelScrollLines
 
* Ctrl + mouse wheel: (MouseDragPixels/MouseDragPixelsFine)*Mouse.WheelScrollLines
  
===== Code =====
+
;Code
 
 
 
Simply by assigning any floating-point value to property Position:  
 
Simply by assigning any floating-point value to property Position:  
 
  Position := 10.5;  
 
  Position := 10.5;  
Line 377: Line 295:
  
 
==== TECSpinPosition ====
 
==== TECSpinPosition ====
 
+
An alternative to [[TTrackBar]] or [[TScrollBar]]. Similar components are used in Krita (2D graphics software).
An alternative to TTrackBar or TScrollBar. Similar components are used in Krita (2D graphics software).
 
  
 
[[File:tecspinposition.png]]
 
[[File:tecspinposition.png]]
  
 
==== TECRuler ====
 
==== TECRuler ====
 
 
An advanced ruler.
 
An advanced ruler.
  
 
[[File:tecruler.png]]
 
[[File:tecruler.png]]
  
TECRuler cannot have focus. It just displays scale. Can have fixed or movable pointer optionally.
+
[[TECRuler]] cannot have focus. It just displays scale. Can have fixed or movable pointer optionally.
  
 
==== TECRadioGroup ====
 
==== TECRadioGroup ====
 
 
An alternative to TRadioGroup.
 
An alternative to TRadioGroup.
  
 
[[File:tecradiogroup.png]]
 
[[File:tecradiogroup.png]]
  
TECRadioGroup can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is not default). Can be controlled by mouse, by keyboard or by code.
+
[[TECRadioGroup]] can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is not default). Can be controlled by mouse, by keyboard or by code.
 
 
===== Mouse =====
 
 
 
Left-click on any item (out of knob) changes its Checked property to True (or to False if this item is already checked*).
 
 
 
Left-click on the TECRadioGroup out of items sets focus to component only.
 
 
 
===== Keyboard =====
 
 
 
0: deselects all*
 
 
 
1-9: selects (or deselects*) item 1-9
 
 
 
Acceleration key (Alt + Key) changes the Checked property to True or False* (radio group doesn't have to be focused).
 
  
 +
;Mouse
 +
* Left-click on any item (out of knob) changes its Checked property to True (or to False if this item is already checked*).
 +
* Left-click on the TECRadioGroup out of items sets focus to component only.
  
 +
;Keyboard
 +
* 0: deselects all*
 +
* 1-9: selects (or deselects*) item 1-9
 +
* Acceleration key (Alt + Key) changes the Checked property to True or False* (radio group doesn't have to be focused).
 
<nowiki>*)</nowiki> Depends whether egoAllowAllUp is in Options.
 
<nowiki>*)</nowiki> Depends whether egoAllowAllUp is in Options.
  
===== Code =====
+
;Code
 
 
 
Simply by assigning any ItemIndex or Items[].Checked property:
 
Simply by assigning any ItemIndex or Items[].Checked property:
 
  ItemIndex := 1; //selects the second item
 
  ItemIndex := 1; //selects the second item
Line 429: Line 336:
 
TECCheckGroup can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is not default). Can be controlled by mouse, by keyboard or by code.
 
TECCheckGroup can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is not default). Can be controlled by mouse, by keyboard or by code.
  
===== Mouse =====
+
;Mouse
 
+
* Left-click on any item (out of knob) changes its Checked property to True (or to False if this item is already checked*).
Left-click on any item (out of knob) changes its Checked property to True (or to False if this item is already checked*).
+
* Left-click on the TECCheckGroup out of items sets focus to component only.
 
 
Left-click on the TECCheckGroup out of items sets focus to component only.
 
 
 
===== Keyboard =====
 
 
 
0: deselects all*
 
 
 
1-9: selects (or deselects*) item 1-9
 
 
 
Acceleration key (Alt + Key) changes the Checked property to True/False* (check group doesn't have to be focused).
 
 
 
  
 +
;Keyboard
 +
* 0: deselects all*
 +
* 1-9: selects (or deselects*) item 1-9
 +
* Acceleration key (Alt + Key) changes the Checked property to True/False* (check group doesn't have to be focused).
 
<nowiki>*)</nowiki> Depends whether egoAllowAllUp is in Options.
 
<nowiki>*)</nowiki> Depends whether egoAllowAllUp is in Options.
  
===== Code =====
+
;Code
 
 
 
Simply by assigning any Checked[] or Items[].Checked property:
 
Simply by assigning any Checked[] or Items[].Checked property:
 
  Checked[1] := True; //selects the second item
 
  Checked[1] := True; //selects the second item
Line 453: Line 352:
  
 
==== TECTabCtrl ====
 
==== TECTabCtrl ====
 
+
See: [[TECTabCtrl]]
See: http://wiki.freepascal.org/TECTabCtrl
 
  
 
==== TECAccordion ====
 
==== TECAccordion ====
 
+
[[TECAccordion]] is a side menu, works similarly to [[TPageControl]].
A side menu, works similarly to TPageControl.
 
  
 
[[File:tecaccordion.png]]
 
[[File:tecaccordion.png]]
  
 
TECAccordion can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is not default). Can be controlled by mouse, by keyboard or by code.
 
TECAccordion can have focus and can be reached by Tab key (when <code>TabStop = True</code>, which is not default). Can be controlled by mouse, by keyboard or by code.
 
+
;Mouse
===== Mouse =====
 
 
 
 
Left-click on any item opens/closes it.
 
Left-click on any item opens/closes it.
 
+
;Keyboard
===== Keyboard =====
 
 
 
 
Acceleration key (Alt + Key) changes the item (component doesn't have to be focused).
 
Acceleration key (Alt + Key) changes the item (component doesn't have to be focused).
 
+
;Code
===== Code =====
 
 
 
 
Simply by setting ItemIndex property.
 
Simply by setting ItemIndex property.
  
 
==== TECTriangle ====
 
==== TECTriangle ====
 
 
A balance of three values. This is not a color picker!
 
A balance of three values. This is not a color picker!
  
 
[[File:tectriangle.png]]
 
[[File:tectriangle.png]]
  
TECTriangle cannot have focus and cannot be reached by Tab key. Can be controlled by mouse only.
+
[[TECTriangle]] cannot have focus and cannot be reached by Tab key. Can be controlled by mouse only.
 
 
===== Mouse =====
 
 
 
Left-click on triangle area.
 
  
Left-click and hold the pointer can drag.
+
;Mouse
 
+
*Left-click on triangle area.
Left-click on a mark sets more exact value, for example [0,333..., 0.333..., 0.333...].
+
*Left-click and hold the pointer can drag.
 
+
*Left-click on a mark sets more exact value, for example [0,333..., 0.333..., 0.333...].
Mouse wheel can roll the pointer up and down.
+
* Mouse wheel can roll the pointer up and down.
 
 
===== Code =====
 
  
 +
;Code
 
By calling overloaded SetValues method. Parameters can be 1) X and Y coordinates or 2) "Top" and "Bottom" values (the thirds value "Side" is calculated so the sum of the values is always equal to 1).
 
By calling overloaded SetValues method. Parameters can be 1) X and Y coordinates or 2) "Top" and "Bottom" values (the thirds value "Side" is calculated so the sum of the values is always equal to 1).
  
 
==== TECGrid ====
 
==== TECGrid ====
 +
See: [[TECGrid]]
  
See: http://wiki.freepascal.org/TECGrid
+
==== TECLightView ====
 +
See: [[TECLightView]]
  
 
==== TECConfCurve ====
 
==== TECConfCurve ====
 
+
Component for Configuration.
Component for configuration.
 
  
 
[[File:tecconfcurve.png]]
 
[[File:tecconfcurve.png]]
Line 515: Line 401:
  
 
==== TECScheme ====
 
==== TECScheme ====
 
 
An advanced component for configuration of general scheme.
 
An advanced component for configuration of general scheme.
  
Line 527: Line 412:
  
 
==== TECSpinController ====
 
==== TECSpinController ====
 
 
Designed for controlling properties of multiple TECSpinBtns and TECSpinEdit.
 
Designed for controlling properties of multiple TECSpinBtns and TECSpinEdit.
  
 
[[File:tecspincontrollericon.png]]
 
[[File:tecspincontrollericon.png]]
  
TECSpinBtns and TECSpinEdit have properties Controller. When some SpinController is assigned to this property then this Controller can change selected properties of all assigned TECSpinEdits and TECSpinBtns at a time. Adjustable properties are - for example - TimerDelay, TimerRepeat, widths of individual buttons, GlyphsStyle and others.
+
[[TECSpinBtns]] and [[TECSpinEdit]] have properties Controller. When some SpinController is assigned to this property then this Controller can change selected properties of all assigned TECSpinEdits and TECSpinBtns at a time. Adjustable properties are - for example - TimerDelay, TimerRepeat, widths of individual buttons, GlyphsStyle and others.
  
 
Project can have multiple SpinControllers.
 
Project can have multiple SpinControllers.
  
 
==== TECTimer ====
 
==== TECTimer ====
 
 
An advanced timer.
 
An advanced timer.
  
Line 547: Line 430:
  
 
==== Class TECScale ====
 
==== Class TECScale ====
 
 
A scale. It is not a component but can draw itself to any canvas.
 
A scale. It is not a component but can draw itself to any canvas.
  
Line 555: Line 437:
  
 
==== Unit ECTypes ====
 
==== Unit ECTypes ====
 
 
Base types and classes for Eye Candy Controls (EC-C).
 
Base types and classes for Eye Candy Controls (EC-C).
  
Line 563: Line 444:
  
 
==== TBaseScrollControl ====
 
==== TBaseScrollControl ====
 
 
is base class for scrolling components (TECScheme is its descendant).
 
is base class for scrolling components (TECScheme is its descendant).
  
You can derive your own scrolling component from TBaseScrollControl.
+
You can derive your own scrolling component from TBaseScrollControl. [[TECScheme]] and [[TECGrid]] are based on this class.
 
 
Credit: This class is based on [https://github.com/theo222/lazarus-thumbviewer/blob/master/scrollingcontrol.pas TScrollingControl] by Theo.
 
  
 
== Demos ==
 
== Demos ==
 
 
EC-Controls come with several demos. If some of following demos is missing in archive, it may mean that there were no changes and the demo was not included. In that case use the demo from previous release.
 
EC-Controls come with several demos. If some of following demos is missing in archive, it may mean that there were no changes and the demo was not included. In that case use the demo from previous release.
  
 
==== ECC-Demo ====
 
==== ECC-Demo ====
 
 
This demo shows all EC-Controls in various configurations.
 
This demo shows all EC-Controls in various configurations.
  
 
==== ECScale-Demo ====
 
==== ECScale-Demo ====
 
+
This demo shows how you can use [[TECScale]] in our own visual component.
This demo shows how you can use TECScale in our own visual component.
 
  
 
==== ECConfCurve-Demo ====
 
==== ECConfCurve-Demo ====
 
+
This demo shows capabilities of [[TECConfCurve]].
This demo shows capabilities of TECConfCurve.
 
  
 
==== ECSchemeDesc ====
 
==== ECSchemeDesc ====
 
+
This demo shows how you can create descendant component from [[TCustomECScheme]].
This demo shows how you can create descendant component from TCustomECScheme.
 
  
 
==== SchemeDesigner ====
 
==== SchemeDesigner ====
 
 
SchemeDesigner is more than a demo. It shows you how you can create TECScheme configurator in your own application but it can be also used to create your own configurations and store them in *.xml format.
 
SchemeDesigner is more than a demo. It shows you how you can create TECScheme configurator in your own application but it can be also used to create your own configurations and store them in *.xml format.
 
[[Category:Components]]
 

Revision as of 18:11, 29 July 2020

English (en) español (es) русский (ru)

Eye Candy Controls (shortly ECControls or EC-Controls) are set of visual controls written for Lazarus. Their design is based on Themes, therefore their look is very native everywhere, no matter what widgetset you use.

Each release is announced on Lazarus Forum in section Third Party Announcements.

There are always attached files README.txt (list of all known issues) and CHANGELOG.txt (list of all changes from previous release).

License

GNU Lesser General Public License 2.0 with linking exception (a.k.a. Modified LGPL). Each file of EC-Controls contains license header. Also, files COPYING.modifiedLGPL.txt and COPYING.LGPL.txt are bundled to each archive.

Author

All components are written by Blaazen. Copyright notice and real name are mentioned in the header of each unit. You can contact author on Lazarus Forum (nickname: Blaazen) in any thread about EC-Controls (email author). If you are logged in to the forum, you can get author's e-mail or send him private message.

Credits:

Alignment of composite components (TECSpinEdit, TECSpinPosition, TECEditBtn, TECColorBtn, TECComboBtn, TECColorCombo) is based on idea of Flávio published on mailing list [1]

TBaseScrollControl class is based on TScrollingControl by Theo.

Download
  • Latest release: 0.9.44 on 1-st June 2020 (including demos); UltraShare is out of order. This release was tested with Lazarus 2.1
  • Previous release: 0.9.30 on 9-th March 2018 (including demos); UltraShare is out of order. This release was tested with Lazarus 1.9 and 1.8
  • Previous release: 0.9.24.6 on 24-th October 2017 (without demos); TECGrid is Release candidate; UltraShare is out of order
  • Previous release: 0.9.20 on 31-th July 2017 (without demos)
  • Previous release: 0.9.6 on 24-th May 2016 (including demos)
  • SourceForge: https://sourceforge.net/projects/eccontrols/
  • UltraShare: http://ultrashare.net/hosting/fl/8c275ee97f (direct link to 0.9.6 released on 24-th May 2016; including demos)
  • UltraShare: http://ultrashare.net/hosting/fl/a8838060fb (direct link to 0.9.4.16 released on 9-th April 2016; without demos)
  • UltraShare: http://ultrashare.net/hosting/fl/f523032cb4 (direct link to 0.9.4.14 released on 6-th April 2016; without demos)

UltraShare is alternative because SourceForge is blocked in some countries. New releases are always announced in the Third Party section of the Lazarus Forum.

Install to Lazarus

Open menu Package => Open package File (*.lpk) ... and select file eccontrols.lpk. Click Compile (wait a while) and then Use >> Install. Lazarus will ask you "Do you want to rebuild Lazarus now?". Click Yes to install the package.

Components

EC-Controls are installed to the tab EC-C on the Lazarus component palette.

ecpalette2.png


New images (from version 0.9.24.6). Resource files (*.lrs) also contains _150 and _200 images for Hi-DPI desktops.

eccpalette4.png

Components below are listed in order of their appearance on the component palette. All screenshots are taken from KDE4 or Plasma5 (Lazarus+Qt).

Visual

TECBevel

An alternative to TBevel.

tecbevel.png

TECBevel can draw non-rectangular shapes or non-straight lines.

TECLink

TECLink provides a weblink. The same links are well known from web-browsers.

teclink.png

A label which changes its look when hovered by mouse (by default becomes underlined and blue).

It can open URL in default browser, default mail client, file in associated application or just trigger OnClick event.

TECImageMenu

A vertical menu with images. Similar component is frequently used in KDE4 applications and Outlook97

tecimagemenu.png

TECImageMenu can have focus and can be reached by Tab key (when TabStop = True, which is default). Can be controlled by mouse, by keyboard or by code.

Mouse
  • Simply left-click on menu item.
  • Middle-click or right-click selects an item but does not click.
  • Mouse wheel moves the selection and does not click.

Keyboard

  • Space nad Enter: click on the selected item.
  • Arrow Up, Arrow Down, Page Up, Page Down, Home and End: moves the selection but does not click.
  • Acceleration key (Alt + Key) selects and clicks the relevant item (menu doesn't need to be focused)..

TECSpinBtns

An advanced alternative to TUpDown.

tecspinbtns.png

TECSpinBtns is based on double precision variables.

TECSpinBtns cannot have focus. Can be controlled by mouse or by code.

Mouse

TECSpinBtns consists from 9 small buttons.

  • Left-click on BtnMin, BtnBigDec, BtnDec, BtnMiddle, BtnMenu, BtnInc, BtnBigInc and BtnMax sets the Value to Min, decreases Value by PageSize, decreases Value by Increment, sets Value to Middle, triggers OnMenuClick event, increases Value by Increment, increases Value by PageSize and sets Value to Max respectively.
  • Middle-click sets Value to Middle or triggers OnMenuClick - depends on MenuControl property. Other mouse buttons can be used for dragging too, depends on DragControl property. Dragging mainly depends on properties: DragOrientation, MouseIncrementX, MouseIncrementY, MouseStepPixelsX, MouseStepPixelsY and Reversed.
Code

Simply by assigning any floating-point value to property Value:

Value := 10.5;

If the value is out of range (lesser than Min or greater than Max) then Value will be Min or Max.

Precendence of drawing:

  1. The highest precedence has the OnDrawGlyph event.
  2. The second is Caption. It should be short (one or two characters).
  3. The third is image from Images. Images must be assigned and ImageIndex must be greater or equal to zero and lesser than Images.Count
  4. When the OnDrawGlyph is not assigned, Caption is empty string and ImageIndex is -1 then built-in glyph is used. There is five sets of styles, they can be selected with GlyphStyle property.

TECSpinEdit

An advanced alternative to TSpinEdit and TFloatSpinEdit. It is TEdit joined together with TECSpinBtns.

tecspinedit.png

TECSpinEdit can have focus and can be reached by Tab key (when TabStop = True, which is default). Can be controlled by mouse, by keyboard or by code.

Mouse

See TECSpinBtns.

Keyboard

(line-edit must be focused)

Text value can typed in to the line-edit directly. If entered value is lesser than TECSpinBtnsPlus.MinInEdit or greater than TECSpinBtnsPlus.MaxInEdit then the value will be changed to fit these bounds. Change of Value is done in OnEditingDone event.

  • Arrow Up/Down do click on BtnInc/BtnDec*.
  • PgUp/PgDn do click on BtnBigInc/BtnBigDec*.
  • Ctrl + Home/End do click on BtnMax/BtnMin*.
  • Ctrl + Space do click BtnMiddle.
  • Ctrl + Enter do click on BtnMenu.

*) valid for Reversed = False. For Reversed = True works oppositely.

Code

Simply by assigning any floating-point value to property Value:

Value := 10.5;

If the value is out of range (lesser than Min or greater than Max) then Value will be Min or Max.

TECSwitch

An alternative to TCheckBox. Similar component exists in GTk3.

tecswitch.png

TECSwitch can have focus and can be reached by Tab key (when TabStop = True, which is default). Can be controlled by mouse, by keyboard or by code.

Mouse
  • Left-click on switch area (out of knob) will change the State*.
  • Left-click on the knob and holding the left-mouse button down will capture mouse and knob can be moved even if the mouse-cursor leaves the area of the switch.
Keyboard
  • Space or Enter changes the State* (only when focused).
  • Acceleration key (Alt + Key) changes the State* (doesn't need to be focused).
Code

Simply by assigning any State* or Checked property:

Checked := True; //False
State := cbChecked; //cbGrayed, cbUnchecked

*) Property State is always changed from checked to unchecked, from grayed to unchecked or from unchecked to checked.

TECSpeedBtn

A button with some advanced features and built-in glyphs. An alternative to TSpeedButton and TToggleBox.

tecspeedbtn.png

TECSpeedBtn cannot have focus.

Features and differences from TSpeedButton:

  • TSpeedButton has property Glyph: TBitmap. TECSpeedBtn has properties ImageIndex: Integer and Images: TImageList instead.
  • TECSpeedBtn has property Delay and built-in timer. Therefore it can work as a delay-button (Delay>0) or toggle-box (Delay<0).
  • TECSpeedBtn has more than 80 built-in glyph (painted via TCanvas helper). Glyphs can be various for checked and unchecked state.
  • Similarly to TSpeedButton, TECSpeedBtn has properties GroupIndex, Checked and AllowAllUp so buttons can be grouped to radio-group.
  • TECSpeedBtn cannot obtain focus but can be pressed by acceleration key (Alt+ [underlined key]).
  • TECSpeedBtn can be linked with TAction too.

Precendence of drawing:

  1. The highest precedence has the OnDrawGlyph event.
  2. The second is Caption and image from Images. Images must be assigned and at least on of ImageIndex and ImageIndexChecked must be greater or equal to zero and lesser than Images.Count.
  3. When the OnDrawGlyph is not assigned and both ImageIndex and ImageIndexChecked are -1 then built-in glyph is used (properties GlyphDesign and GlyphDesignChecked). When ImageIndex is valid Image and ImageIndexChecked is -1 or only GlyphDesign is some glyph and GlyphDesignChecked is egdNone then ImageIndex or GlyphDesign is used for checked state too (and vice versa).

TECBitBtn

The same as TECSpeedBtn but derived from TCustomControl, therefore it can have focus. An alternative to TBitBtn and TToggleBox.

tecbitbtn.png

TECEditBtn

An alternative to TEditButton. It is TEdit joined together with TECSpeedBtn.

teceditbtn.png

TECColorBtn

Visual component for selecting color. Line edit displays color code in various formats and associated button triggers color dialog.

teccolorbtn.png

Color of the glyph on the button corresponds with the color in the line-edit.

Property Text is not published. If Text is changed via code, EditingDone must be called to validate the change.

TECComboBtn

A combobox with associated button. It is TComboBox joined together with TECSpeedBtn.

teccombobtn.png

TECColorCombo

Visual component for selecting color. Combobox contains colors in various formats and associated button triggers color dialog.

teccolorcombo.png

Color of the glyph on the button corresponds with the color selected in the combobox.

Property Text is not published. If Text is changed via code, Validate must be called to validate the change.

TECHeader

An alternative to THeader.

techeader.png

Main feature is ability to have columns aligned to the left and to the right at a time. This components is designed for TECCheckListBox.

TECCheckListBox

An alternative to TCheckListBox.

tecchecklistbox.png

Can have multiple checkable columns.

Currently, property Sorted is not supported.

TECSlider

An advanced alternative to TTrackBar.

tecslider.png

TECSlider can have focus and can be reached by Tab key (when TabStop = True, which is default).

TECSlider is based on double precision variables. TECSlider can be controlled by mouse, by keyboard or by code.

Mouse
  • Left-click on Slider area (out of Knob) will move the knob by PageSize (or less, if mouse cursor is nearer).
  • Double-click or Middle-click will move the knob immediately to the mouse cursor (or to the Min/Max, if click is done out of groove and scale area).
  • Left-click on the knob and holding the left-mouse button down will capture mouse and knob can be moved even if the mouse-cursor leaves the area of the slider.
  • Mouse wheel moves knob up/down regardless of the Reversed property. In case of horizontal slider rolling up/down moves knob to the left/right, again, regardless of the Reversed property.

The increment is:

  • Mouse wheel: Increment*Mouse.WheelScrollLines
  • Ctrl + mouse wheel: Increment.
Keyboard
  • Space: moves knob to the middle of the groove or to the ProgressMiddlePos in case of ProgressFromMiddle = True
  • 0-9: moves the knob to position which is the integer multiplier of the PageSize (i.e. 0, 10, ..., 90 for PageSize = 10).
  • PgUp: decreases Position by PageSize
  • PgUp: increases Position by PageSize
  • Home: moves the Knob to Min
  • End: moves the Knob to Max
  • +: increases Position by Increment
  • -: decreases Position by Increment
  • Ctrl + ArrowUp: decreases* Position by Increment
  • Ctrl + ArrowLeft: decreases* Position by Increment
  • Ctrl + ArrowDown: increases* Position by Increment
  • Ctrl + ArrowRight: increases* Position by Increment

*) valid for Reversed = False. When Reversed = True works oppositely.

Code

Simply by assigning any floating-point value to property Position:

Position := 10.5; 

If the value is out of range (lesser than Min or greater than Max) then Position will be Min or Max.

TECProgressBar

An advanced alternative to TProgressBar.

tecprogressbar.png

TECProgressBar is based on double precision variables. TECProgressBar cannot have focus. It can be controlled by code only.

TECPositionBar

An alternative to TTrackBar or TScrollBar. Similar components are used in Blender (3D graphics software).

tecpositionbar.png

TECPositionBar cannot have focus and is based on double precision variables. TECPositionBar can be controlled by mouse or by code.

Mouse
  • Left-click will set the position immediately to the mouse cursor (or to the Min/Max, if click is done out of groove and scale area).
  • Middle-click: moves knob to the middle of the groove or to the ProgressMiddlePos in case of ProgressFromMiddle = True
  • Left-click on the end of the progress on and holding the left-mouse button down will capture mouse and position can be moved even if the mouse cursor leaves the area of a position bar.
  • Dragging is affected by MouseDragPixels (alone left mouse button) and MouseDragPixelsFine (Ctrl + left mouse button). Deafult values are 1 and 10, i.e. progress will change by one pixel when mouse cursor moves by one pixel (or by 10 pixels in case of dragging with Ctrl key pressed).
  • Mouse wheel moves knob up/down regardless of the Reversed property. In case of horizontal slider rolling up/down moves knob to the left/right, again, regardless of the Reversed property.

The increment is:

  • Mouse wheel: MouseDragPixels*Mouse.WheelScrollLines
  • Ctrl + mouse wheel: (MouseDragPixels/MouseDragPixelsFine)*Mouse.WheelScrollLines
Code

Simply by assigning any floating-point value to property Position:

Position := 10.5; 

If the value is out of range (lesser than Min or greater than Max) then Position will be Min or Max.

TECSpinPosition

An alternative to TTrackBar or TScrollBar. Similar components are used in Krita (2D graphics software).

tecspinposition.png

TECRuler

An advanced ruler.

tecruler.png

TECRuler cannot have focus. It just displays scale. Can have fixed or movable pointer optionally.

TECRadioGroup

An alternative to TRadioGroup.

tecradiogroup.png

TECRadioGroup can have focus and can be reached by Tab key (when TabStop = True, which is not default). Can be controlled by mouse, by keyboard or by code.

Mouse
  • Left-click on any item (out of knob) changes its Checked property to True (or to False if this item is already checked*).
  • Left-click on the TECRadioGroup out of items sets focus to component only.
Keyboard
  • 0: deselects all*
  • 1-9: selects (or deselects*) item 1-9
  • Acceleration key (Alt + Key) changes the Checked property to True or False* (radio group doesn't have to be focused).

*) Depends whether egoAllowAllUp is in Options.

Code

Simply by assigning any ItemIndex or Items[].Checked property:

ItemIndex := 1; //selects the second item
Items[1].Checked := False; //deselects the second item, regardless of the egoAllowAllUp in Options

TECCheckGroup

An alternative to TCheckGroup.

teccheckgroup.png

TECCheckGroup can have focus and can be reached by Tab key (when TabStop = True, which is not default). Can be controlled by mouse, by keyboard or by code.

Mouse
  • Left-click on any item (out of knob) changes its Checked property to True (or to False if this item is already checked*).
  • Left-click on the TECCheckGroup out of items sets focus to component only.
Keyboard
  • 0: deselects all*
  • 1-9: selects (or deselects*) item 1-9
  • Acceleration key (Alt + Key) changes the Checked property to True/False* (check group doesn't have to be focused).

*) Depends whether egoAllowAllUp is in Options.

Code

Simply by assigning any Checked[] or Items[].Checked property:

Checked[1] := True; //selects the second item
Items[1].Checked := False; //deselects the second item, regardless of the egoAllowAllUp in Options.

TECTabCtrl

See: TECTabCtrl

TECAccordion

TECAccordion is a side menu, works similarly to TPageControl.

tecaccordion.png

TECAccordion can have focus and can be reached by Tab key (when TabStop = True, which is not default). Can be controlled by mouse, by keyboard or by code.

Mouse

Left-click on any item opens/closes it.

Keyboard

Acceleration key (Alt + Key) changes the item (component doesn't have to be focused).

Code

Simply by setting ItemIndex property.

TECTriangle

A balance of three values. This is not a color picker!

tectriangle.png

TECTriangle cannot have focus and cannot be reached by Tab key. Can be controlled by mouse only.

Mouse
  • Left-click on triangle area.
  • Left-click and hold the pointer can drag.
  • Left-click on a mark sets more exact value, for example [0,333..., 0.333..., 0.333...].
  • Mouse wheel can roll the pointer up and down.
Code

By calling overloaded SetValues method. Parameters can be 1) X and Y coordinates or 2) "Top" and "Bottom" values (the thirds value "Side" is calculated so the sum of the values is always equal to 1).

TECGrid

See: TECGrid

TECLightView

See: TECLightView

TECConfCurve

Component for Configuration.

tecconfcurve.png

User can configure polyline or Bezier curve with multiple points.

Can be aligned with vertical and/or horizontal ruler (TECRuler).

See ECConfCurve-Demo.

TECScheme

An advanced component for configuration of general scheme.

tecscheme.png

User can add multiple blocks and connect them.

This component is highly configurable. See SchemeDesigner and ECSchemeDesc bundled with EC-Controls.

Non-visual components

TECSpinController

Designed for controlling properties of multiple TECSpinBtns and TECSpinEdit.

tecspincontrollericon.png

TECSpinBtns and TECSpinEdit have properties Controller. When some SpinController is assigned to this property then this Controller can change selected properties of all assigned TECSpinEdits and TECSpinBtns at a time. Adjustable properties are - for example - TimerDelay, TimerRepeat, widths of individual buttons, GlyphsStyle and others.

Project can have multiple SpinControllers.

TECTimer

An advanced timer.

tectimericon.png

Main feature is that the first interval (property Delay) can differ from all following intervals (property Repeat).

Other parts of EC-Controls

Class TECScale

A scale. It is not a component but can draw itself to any canvas.

This class is used in TECRuler, TECSlider, TECProgressBar, TECPositionBar and TECSpinPosition.

See demo ECScale-Demo.

Unit ECTypes

Base types and classes for Eye Candy Controls (EC-C).

If you use EC-Controls in your project you may need to add this unit to your uses section.

This unit contains many declarations, color-conversion routines and base classes, for example TBaseScrollControl.

TBaseScrollControl

is base class for scrolling components (TECScheme is its descendant).

You can derive your own scrolling component from TBaseScrollControl. TECScheme and TECGrid are based on this class.

Demos

EC-Controls come with several demos. If some of following demos is missing in archive, it may mean that there were no changes and the demo was not included. In that case use the demo from previous release.

ECC-Demo

This demo shows all EC-Controls in various configurations.

ECScale-Demo

This demo shows how you can use TECScale in our own visual component.

ECConfCurve-Demo

This demo shows capabilities of TECConfCurve.

ECSchemeDesc

This demo shows how you can create descendant component from TCustomECScheme.

SchemeDesigner

SchemeDesigner is more than a demo. It shows you how you can create TECScheme configurator in your own application but it can be also used to create your own configurations and store them in *.xml format.