ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / TimeLine control
  • Overview of TimeLine control
  • Creating a TimeLine control
  • Characteristics of TimeLine control
  • Control options
  • Context menu proposed automatically
  • Customize the event area
  • Modes for filling a TimeLine control
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview of TimeLine control
The TimeLine control can be used to represent chronologies of closely spaced events that may be parallel..
This field is used for example:
  • to perform a video editing.
  • to represent events on a robot.
  • to perform an animation.
Creating a TimeLine control
To create a TimeLine control:
  1. On the "Creation" tab, in the "Graphic controls" group, expand "Time" and select "TimeLine".
  2. Click at the desired location to create the control. The control appears in the editor.
Note: The dimensions of the field created are optimized to occupy the space available at the position indicated.. If the field size doesn't suit you, use the Ctrl + Z key combination: the field will return to its default size.
To view the characteristics of the control, select "Description" in the context menu.
Characteristics of TimeLine control

Control options

The TimeLine control can be configured in the editor via the description window ("Details" tab).
The parameters of the Timeline control are as follows:
  • Events unit: Defines the unit used for the TimeLine control: second, millisecond or microsecond.. This parameter is used to define:
    • the display unit used by the control at runtime.
    • the unit used for the different values in the description window.
  • Display mask: Defines the time format displayed in the time bar.
  • Visible range Number of seconds visible in the TimeLine.
  • Total range: Number of seconds displayed by the TimeLine.
  • Characteristics of events
    • Overlap: Event overlap management. The events can be displayed side by side or slightly offset.
    • Event granularity: TimeLine control display accuracy. You can define:
      • the granularity when moving an event (1 time unit by default).
      • the granularity regarding the duration of an event, which means the minimum duration of an event (1 time unit by default).
  • Ruler features The ruler displays the position in the TimeLine control field. The playhead options are as follows:
    • Show playhead: The ruler will be displayed in the field. In this case, it can be made modifiable (or not) by the user.
    • Movable playhead: If this option is selected, the user can move the ruler in the TimeLine control using the mouse..
  • Allow time range selection: Allows the user to select a period with the mouse.
  • Allow the direct input of an event: Allows the user to directly add an event. To do so, click the TimeLine control to create the event and enter its caption with the keyboard.
  • Position of the time bar: The time bar can be displayed at the top or bottom of the TimeLine control..
  • Horizontal scrollbar Horizontal scrollbar to dequeue the contents of the TimeLine control. It can be automatic, always displayed or never.
The edit options via the mouse are as follows:
  • Change duration. You can allow users to change the duration of an event.
  • Move. You can allow users to move an event.
  • Allow the user to change track. You can allow users to change the track of the event.
  • Allow users to overlap elements. If this option is checked, when moving events, the user will be able to make them overlap. In this case, the options defined for the overlap of events (offset of side by side) will be taken into account.
Zone size options are as follows:
  • Width of header for the tracks:
    • according to the track caption.
    • fixed.
  • Minimum height of a track.

Context menu proposed automatically

The TimeLine control can display a specific context menu proposing automatic features to the user. This menu is proposed by the AAF (Automatic Application Features).
As soon as at least one track is found in the TimeLine control, this menu allows the user to:
  • Zoom in and out in the control.
  • Add, delete or modify an event when selecting a time period.
    Notes: If the field is linked to a data source, any deletion made in the field is carried out at the same time in the linked data source.
  • Copy the content of an event.
For more details on the features of this context menu, see Automatic features of TimeLine control.

Customize the event area

In the TimeLine control, the event is displayed in a specific area. This area can be translated and customized: title color, event background color, etc.
To customize the display of events:
  1. Open the TimeLine control description window.
  2. On the "General" tab, select the internal window used for the events:
    • "None": the default display will be used.
    • "Predefined window": a predefined window is automatically added to the project.. By default, this window is named "IW_WinDevViewAPT.wdw".
    • "Simplified drawing": event displayed without title.
  3. If "Preset window" has been selected, the internal window will be available in the project explorer. It can be edited in the window editor.
    Attention: this internal window only allows you to customize the design of the event display.. Only the code of the "Global declarations" event is executed. No other WLanguage events are run. Therefore, you cannot add buttons with a specific click code.
Remarks:
  • You also have the ability to use any internal window of your project.
  • The appearance of the events proposed by default can be configured by selecting "Event" in the "Style" tab of the control description window.

Modes for filling a TimeLine control

A TimeLine control can be filled:
Related Examples:
The Timeline control Unit examples (WINDEV): The Timeline control
[ + ] Using a TimeLine control
Minimum version required
  • Version 18
Comments
Click [Add] to post a comment

Last update: 01/16/2025

Send a report | Local help