Difference between revisions of "Eye-Candy Controls/es"

From Free Pascal wiki
Jump to navigationJump to search
Line 161: Line 161:
 
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 | center]]
  
 
[[TECSpeedBtn]] cannot have focus.
 
[[TECSpeedBtn]] cannot have focus.
  
Features and differences from [[TSpeedButton]]:
+
Características y diferencias de [[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).
+
* TSpeedButton tiene la propiedad Glyph: TBitmap. TECSpeedBtn tiene las propiedades ImageIndex: Integer e Images: [[TImageList]] instead.
 +
* TECSpeedBtn tiene la propiedad Delay ytimer embebido. 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.
Line 173: Line 174:
 
* TECSpeedBtn can be linked with [[TAction]] too.
 
* TECSpeedBtn can be linked with [[TAction]] too.
  
Precendence of drawing:
+
Precedencia de dibujado:
 +
 
 
# The highest precedence has the OnDrawGlyph event.
 
# 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.
 
# 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.

Revision as of 15:56, 2 August 2017

Eye Candy Controls (abreviadamente ECControls o EC-Controls) son un conjunto de controles visuales escritos para Lazarus. Su diseño está basado en Temas, por lo tanto su aspecto es muy nativo en todo momento, no hay problema en cuanto al widgetset que utilices.

Cada release se anuncia en el foro de Lazarus en la sección Third Party Announcements.

Siempre se anexan ficheros README.txt (listado de incidencias conocidas)y CHANGELOG.txt (listado de todos los cambios realizados desde la versión previa).

Licencia

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.

Autor

Todos los componentes han sido escritos por Blaazen. La notificación de Copyright y nombre real se mencionan en la cabecera de cada unidad. Puedes contactar con el autor en el foro de Lazarus (nickname: Blaazen) en cualquier hilo sobre EC-Controls (email author). Si te validas en el foro entonces puedes obtener la dirección de correo del autor y enviarle un mensaje privado.

Descarga

UltraShare es una alternativa debido a que SourceForge está bloqueada en algunos paises. Las nuevas releases siempre se anuncian en la sección Third Party del foro de Lazarus.

Instalación en Lazarus

Abrir Menú Paquete => Abri Fichero de Paquete (*.lpk) ... y seleccionar el fichero eccontrols.lpk. Click Compilar (esperar mientras) y a continuación Usar >> Instalar. Lazarus preguntará "¿Deseas reconstruir Lazarus ahora?". Hacer Click Yes para instalar el paquete.

Componentes

EC-Controls se instalan en la solapa EC-C dentro de la paleta de componentes de Lazarus.

ecpalette2.png

Los componentes que aparecen aquí se listan en el orden de aparición en la paleta de componentes. Todos los pantallazos se han tomado desde KDE4 o Plasma5 (Lazarus+Qt).

Visual

TECBevel

An alternative to TBevel.

tecbevel.png

TECBevel puede dibujar formas no rectangulares y lineas no directas.

TECLink

TECLink provee un weblink. Los mismos enlaces que son bien conocidos por los visores web (navegadores web).

teclink.png


Es una etiqueta que cambia su aspecto cuando se recorre por el cursor del ratón (por defecto permanece subrayado y azul).

Puede abrir una URL con el navegador/aplicación de correo por defecto, fichero asociado a una aplicación o simplemente lanzar el evento OnClick.

TECImageMenu

Un menú vertical con imágenes. Un componente similar a este se utiliza frecuentemente en aplicaciones KDE4 y Outlook97.

tecimagemenu.png

TECImageMenu Puede Obener el foco y activado mediante la tecla Tab (cuando TabStop = True, lo cual es por defecto). Se puede controlar mediante ratón, teclado o incluso por código.

Ratón
  • Simplemente haz click con el pulsador izquierdo en el elemento del menú.
  • El click del pulsador de enmedio del ratón selecciona un elemento pero no hace click.
  • La rueda del ratón mueve la selección y no hace click.
Teclado
  • 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

Una alternativa avanzada a TUpDown.

tecspinbtns.png

TECSpinBtns está basado en variables de precisión doble.

TECSpinBtns no puede obtener el foco. Se puede controlar mediante ratón o por código.

Mouse

TECSpinBtns consiste en 9 pequeños pulsadores.

  • 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, incrementa Value por Increment, incrementa Value por PageSize y establece Value a Max respectivamente.
  • 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.
Codigo

Simplemente mediante la asignación de cualqier valor de punto flotante al valor de la propiedad:

Value := 10.5;

Si el valor se encuentra fuera de rango (menor que Min o mayor que Max) entonces Value valdrá Min o Max respectivamente.

Precendencia de dibujado:

  1. La mas alta frecedencia la tiene el evento OnDrawGlyph.
  2. La segunda la tiene Caption. Debería ser corta (uno o dos caracteres).
  3. La tercera es image desde Images. Images deben ser asignadas e ImageIndex debe ser mayor o igual que cero y lesser que Images.Count.
  4. Cuando no se asigna OnDrawGlyph, Caption es una cadena vacía y ImageIndex vale -1 then built-in glyph is used. Tiene 5 conjuntos de estilos que pueden seleccionarse mediante la propiedad GlyphStyle..

TECSpinEdit

Una alternativa avanzada a TSpinEdit y TFloatSpinEdit. Es un TEdit unido junto con TECSpinBtns.

tecspinedit.png

TECSpinEdit puede tomar el foco y puede alcanzarse con la tecla Tab (cuando TabStop = True, lo cual es por defecto). Se puede controlar mediante ratón, teclado o por código.

Ratón

Ver TECSpinBtns.

Teclado

(line-edit must be focused)

Se puede teclear el valor de Text dentro de la linea de edición directamente. Si el valor entroducido es menor que TECSpinBtnsPlus.MinInEdit o mayor TECSpinBtnsPlus.MaxInEdit entonces el volor se cambiará para que encaje en esos límites. El cambio de Value se realiza en el evento OnEditingDone.

  • 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

Una alternativa a TCheckBox. Existe una alternativa similar en 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.

Ratón
  • 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.
Teclado
  • Espacio e Intro cambian su estado* (solamente cuando tiene el foco).
  • Acceleration key (Alt + Key) changes the State* (no necesita ser enfocado).
Código

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.

Características y diferencias de TSpeedButton:

  • TSpeedButton tiene la propiedad Glyph: TBitmap. TECSpeedBtn tiene las propiedades ImageIndex: Integer e Images: TImageList instead.
  • TECSpeedBtn tiene la propiedad Delay ytimer embebido. 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.

Precedencia de dibujado:

  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).

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.

Ratón
  • 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.

El incremento es:

  • Mouse wheel: Increment*Mouse.WheelScrollLines
  • Ctrl + mouse wheel: Incremento.
Teclado
  • Space: mueve knob a la mitad de groove or to the ProgressMiddlePos en caso de que ProgressFromMiddle = True
  • 0-9: mueve el knob a position que es the integer multiplier of the PageSize (i.e. 0, 10, ..., 90 for PageSize = 10).
  • PgUp: decrementa Position por PageSize
  • PgUp: incrementa Position por PageSize
  • Home: mueve el Knob a Min
  • End: mueve el Knob a 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.

Código

Simplemente mediante la asignación de un valor de punto flotante a la propiedad Position:

Position := 10.5; 

Si el valor se encuentra fuera de rango (menor que Min o mayor que Max) entonces Position valdrá Min o Max respectivamente.

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

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.

Credit: This class is based on TScrollingControl by Theo.

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.