ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / TimeLine control
  • Overview
  • Handling TimeLine controls programmatically
  • Adding a track
  • Adding an event
  • Populating a TimeLine control with the data from an HFSQL data file
  • Retrieving a list of events
  • Deleting an event
  • Deleting a track
  • Changing the time scale of the control
  • Using the context menu (AAF)
  • Advanced use of the events associated with the Timeline control
  • Advanced use of events with procedures
  • Properties specific to TimeLine controls
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
A TimeLine control can be:
In WINDEV, you can use TimeLine functions to handle TimeLine controls programmatically.
This help page explains how to handle TimeLine controls programmatically. The example below stores the events in an HFSQL database.
Handling TimeLine controls programmatically

Adding a track

To add a track to a TimeLine control, call TimelineAddTrack.
Example:
// Adds tracks in TL_TimeLine1
TimelineAddTrack(TL_Timeline1, "Sub Bass")
TimelineAddTrack(TL_Timeline1, "Scratchy Drums")
TimelineAddTrack(TL_Timeline1, "Guitar1")

Adding an event

To add an event to a TimeLine control, use TimelineAddEvent. This function accepts two syntaxes:
  • syntax used to specify the characteristics of the event: title, description, etc, ...
    // Adds a 5-second event into a TimeLine control configured to the second
    MyTrack is string
    MyTitle is string
    EvtStart is int
    EvtEnd is int
     
    MyTrack = "Strings"
    MyTitle = "Start"
    EvtStart = 4
    EvtEnd = 9
     
    TimelineAddEvent(TL_Music, MyTrack, MyTitle, EvtStart, EvtEnd)
  • syntax that handles a variable of type EventTimeline.
    TimelineDeleteAll(TL_Robots)
    Evt is EventTimeline
     
    TimelineAddTrack(TL_Robots, "Robot 1")
    Evt.Track = "Robot 1"
    Evt.Title = "Start"
    Evt.Start = 10
    Evt.End = 150
    Evt.BackgroundColor = LightGreen
    TimelineAddEvent(TL_Robots, Evt)
     
    Evt.Track = "Robot 1"
    Evt.Title = "Special process"
    Evt.Start = 150
    Evt.End = 450
    Evt.BackgroundColor = PastelBlue
    TimelineAddEvent(TL_Robots, Evt)
The BackgroundColor property of the EventTimeline variable is used to define the color used to display an event. If no background color is defined, the TimeLine control will automatically use the color associated with the category of the event.

Populating a TimeLine control with the data from an HFSQL data file

The records are stored in an HFSQL data file. To populate the TimeLine control for the first time, you can use a FOR EACH loop or add each event with TimelineAddEvent.
TimelineDeleteAll(TL_Robots)
// Declare the events
Evt is EventTimeline
 
// Browse the Robot data file
FOR EACH Robot
TimelineAddTrack(TL_Robots, Robot.RobotName)
// Browse the Evt_Robot data file
FOR EACH Evt_Robot WITH RobotID = Robot.RobotID
Evt.ToolTip = Evt_Robot.EvtTooltip
Evt.Title = Evt_Robot.EvtTitle
Evt.Start = Evt_Robot.EvtStart
Evt.End = Evt_Robot.EvtEnd
Evt.Content = Evt_Robot.EvtContent
Evt.Track = Robot.RobotName
Evt.BackgroundColor = Evt_Robot.EvtColor
TimelineAddEvent(TL_Robots, Evt)
END
END
Reminder: You can also use a TimeLine control linked to a data file. For more details, see TimeLine control linked to a data file.

Retrieving a list of events

TimelineListEvent is used to get:
  • the list of all events in the TimeLine control:
    // Array containing a list of events
    arrEvtList is array of EventTimeline
     
    // List of events
    arrEvtList = TimelineListEvent(TL_Timeline)
  • the list of events of a track between two specific times:
    // List of events for robot 1 found between 50s and 100s
    arrEvtList is array of EventTimeline
    arrEvtList = TimelineListEvent(TL_Robots, "Robot 1", 50, 100)
  • the currently selected or hovered event:
    // Selected event
    arrEvtList is array of EventTimeline
    arrEvtList = TimelineListEvent(TL_Robots, schAptSelected)

Deleting an event

TimelineDeleteEvent is used to delete:
  • the event selected in the control.
  • a specific event.
// Deletes the first event
TimelineDeleteEvent(TL_MyTimeLine, 1)

Deleting a track

TimelineDeleteTrack is used to delete a track from the TimeLine control.
// Deletes the SOUND track
ResDel is boolean
ResDel = TimelineDeleteTrack(TL_MyTimeLine, "Sound")
IF ResDel = True THEN
Info("Track successfully deleted")
END
TimelineDeleteAll is used to delete all the events from the TimeLine control as well as all its tracks.

Changing the time scale of the control

You can change the time scale of a TimeLine control with TimelineChangeMode. This function changes the control display mode: second, millisecond or microsecond.
Using the context menu (AAF)
The Timeline control is associated with a context menu (AAF). The context menu of the TimeLine control allows you to:
  • zoom or out in the control,
  • add, modify or delete an event.
To save the operations performed, you must use the WLanguage events associated with the TimeLine control.
In the corresponding WLanguage event, simply retrieve the event currently used and perform the corresponding process.
Example: To store in an "EVT" data file an event that the user adds via the context menu, simply enter the following code in the "Enter input mode in an event" event:
PROCÉDURE EnterInInput(evtEdited is EventTimeline)
 
// Store the data
EVT.Title = evtEdited.Title
EVT.EvtStart = evtEdited.Start
EVT.EvtEnd = evtEdited.End
...
HAdd(EVT)
The same type of code can be implemented for the different events associated with the TimeLine control. A procedure is automatically declared by the TimeLine control for each WLanguage event associated with the control that handles an event.
These procedures receive a variable of type EventTimeline as parameter.
Advanced use of the events associated with the Timeline control

Advanced use of events with procedures

You can also allow users to define more precisely the characteristics of the events when they are added or modified. To do so, create a window with the information to specify.
In the code, specify that the window must be opened in the "Enter input mode in an event" event. To lock the direct input, the process must return False.
This principle can be applied to all WLanguage events called via the context menu of the TimeLine control.
Example: Opening a window for entering the event.
PROCÉDURE EnterInInput(evtEdited is EventTimeline)

// Opens the window for entering an event
// with the selected event (in Creation or Modification mode)
Open(WIN_InputEvt_HFSQL, evtEdited)

// Returns False to lock the direct input in the TimeLine control
RESULT False
Properties specific to TimeLine controls
The following properties are used to handle TimeLine controls.
EndTotalRangeThe EndTotalRange property is used to:
  • get the last date or time that can be displayed in a Scheduler or TimeLine control.
  • change the last time that can be displayed in a TimeLine control.
EndVisibleRangeThe EndVisibleRange property is used to:
  • find out and modify the last visible date or time in a Scheduler control or in a TimeLine control.
  • modify the last visible time in a TimeLine control.
GranularityDurationThe GranularityDuration property is used to get and change the size of the grid to resize:
  • appointments in an Organizer control.
  • appointments in a Scheduler control.
  • events in a TimeLine control.
  • tasks in a Gantt Chart column.
GranularityMovementThe GranularityMovement property is used to get and change the size of the grid to move:
  • appointments in an Organizer control.
  • appointments in a Scheduler control.
  • events in a TimeLine control.
  • tasks in a Gantt Chart column.
RulerModifiableThe RulerModifiable property is used to:
  • Find out whether the user can move the playhead in a TimeLine control.
  • Allow or prevent the user from moving the playhead in a TimeLine control.
RulerValueThe RulerValue property is used to get or change the position of the playhead in a TimeLine control.
RulerVisibleThe RulerVisible property is used to:
  • Determine if a playhead is visible in a TimeLine control.
  • Show or hide a playhead in a TimeLine control.
StartTotalRangeThe StartTotalRange property is used to:
  • get the first date or time that will be displayed in a Scheduler or TimeLine control.
  • change the first time that can be displayed in a TimeLine control.
StartVisibleRangeThe StartVisibleRange property is used to:
  • get and change the first visible date or time in a Scheduler or TimeLine control.
  • change the first visible time in a TimeLine control.
For a complete list of WLanguage properties that can be used with TimeLine controls, see Properties associated with TimeLine controls.
Minimum version required
  • Version 18
Comments
Click [Add] to post a comment

Last update: 01/26/2023

Send a report | Local help