import zero_true as ztimport time# Initialize statezt_state = zt.state()zt_state.setdefault('timer_triggered', 0)# Create a Timer componenttimer = zt.Timer( id="sample_timer", interval=1000, # Interval in milliseconds (5000ms = 5s) triggerEvent='interval', # Trigger event based on the interval value=True # Start the timer)# Create a Text component to display the timer's current secondtimer_text = zt.Text( id="timer_text", text= f"Timer Interval is: {timer.interval}", color="primary")# Layout including the Timer componentlayout = zt.Layout(rows=[ zt.Row(components=[timer_text.id])])if timer.value: timer_text = "Interval Passed!"
The Timer component is designed to handle periodic execution of code at specified intervals, providing a robust mechanism for time-based operations without any visual output. This functionality is crucial for applications that require regular updates or checks, such as data polling, automatic refresh, or scheduled tasks. The component is configured via an interval set in milliseconds and can be triggered by specific events, offering precise control over timing operations within web applications.
{ "title": "Timer", "description": "Timer is a component that allows for execution of code at a set interval. This does not have any visual output", "type": "object", "properties": { "id": { "description": "Unique id for a component", "title": "Id", "type": "string" }, "variable_name": { "default": "", "description": "Optional variable name associated with a component", "title": "Variable Name", "type": "string" }, "component": { "default": "v-timer", "description": "Vue component name", "title": "Component", "type": "string" }, "interval": { "default": 100000, "description": "Interval in milliseconds", "title": "Interval", "type": "integer" }, "value": { "default": false, "description": "Flag for execution under interval", "title": "Value", "type": "boolean" }, "triggerEvent": { "default": "click", "description": "Trigger event for when to execute a run", "title": "Triggerevent", "type": "string" } }, "required": [ "id" ]}
Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.