Creating a Digital Clock in Roku

We’ll explore how to create a simple digital clock app using BrightScript. By the end of this guide, you’ll have a functional Roku app that displays the current time in a digital format on the screen.

Let’s get started!

DigitalClock.xml

<?xml version="1.0" encoding="utf-8" ?>
<component name="DigitalClock" extends="Group">
    <script type="text/brightscript" uri="DigitalClock.brs" />
    <children>
        <label id="label"
        width="1280" 
        height="720" 
        horizAlign="center"
        vertAlign="center"/>
        <Timer id="timer" repeat="true"/>
    </children>
</component>

DigitalClock.brs

'*************************************************************
'** init()
'*************************************************************
function init() as void

    m.label = m.top.findNode("label")
    m.timer = m.top.findNode("timer")

    ' Setup Observers
    m.top.observeField("visible", "onVisibleChanged")
    m.timer.observeField("fire", "onTimerFired")

    ' Trigger the first visible check
    onVisibleChanged()
end function

'*************************************************************
'** onVisibleChanged()
'** Update the time, start the timer when the component is visible.
'** Stop the timer when the component is hidden
'*************************************************************
function onVisibleChanged() as void
    if (m.top.visible)
        updateLabelValue()

        'Update clock once the next minute boundary is reached
        m.timer.duration = 1 
        m.timer.control = "start"
    else
        m.timer.control = "stop"
    end if
end function

'*************************************************************
'** onTimerFired()
'** Update the value of label based on the current system time
'*************************************************************
function onTimerFired() as void
    updateLabelValue()
end function

'*************************************************************
'** updateLabelValue()
'*************************************************************
function updateLabelValue() as void
    dt = getSystemLocalDateTime()
    m.label.text = dateTimeToShortString(dt)
end function

'*************************************************************
'** getSystemLocalDateTime()
'*************************************************************
function getSystemLocalDateTime() as object
    if (m.systemLocalDateTime = invalid)
        m.systemLocalDateTime = CreateObject("roDateTime")
        m.systemLocalDateTime.ToLocalTime()
    else
        ' Update to current time
        m.systemLocalDateTime.Mark()
        ' Mark() will reset time back to UTC, so we need to call ToLocalTime() again
        m.systemLocalDateTime.ToLocalTime()
    end if

    return m.systemLocalDateTime
end function

' return 00:00:00 AM format string 
function dateTimeToShortString(dateTime as Object, is24HourFormat = false as boolean, format = "{0}:{1}:{2} {3}" as string) as String
    result = ""
    if(type(dateTime) = "roDateTime")
        hour = dateTime.GetHours()
        suffix = tr("AM")
        if (hour >= 12) suffix = tr("PM")

        divisor = 12
        hourString = ""
        if (is24HourFormat) 'no need to show AM/PM
            hourString = hour.ToStr()
            if (hour < 10) hourString = "0" + hourString

            format = format.replace("{3}", "").trim()
        else
            modHour = hour MOD divisor
            'Show 12:00:00 AM/PM instead of 00:00:00 AM/PM
            if (modHour = 0) modHour = 12
            
            hourString = modHour.ToStr()
            if (modHour < 10) hourString = "0" + hourString
            
        end if

        minute = dateTime.GetMinutes()
        minuteString = minute.ToStr()
        if (minute < 10) minuteString = "0" + minuteString
        
        second = dateTime.GetSeconds()
        secondString = second.ToStr()
        if (second < 10) secondString = "0" + secondString

        result = Substitute(format, hourString, minuteString,secondString, suffix)
    end if
    return result
end function

Feel free to customize and enhance it further based on your preferences. Happy coding!

Related blogs:

Roku app development for beginners

Crafting MetaData with Brighscript