#PowerApps: Using Components to create a Digital Clock - Part 1

Building a Digital Clock the traditional way

When I first set out to build a digital clock with night mode, I figured I was just going to start from what I know. Each digit of the clock is composed for 7 segments and each segment would behaves in a binary way based on the number that it needs to display.

To create each segment, I would use a Rectangle from the Icons gallery. Since I initially set out to add 3 digits to the clock - two to display seconds, and 1 to display minutes - this would require a whopping 21 rectangles, plus 2 for the blinking dots to bring the total rectangles to 23.

Controlling each digit required the use of 3 timers. Each timer would have to evaluate a value to determine which segments to display. For the right most digit, the following code is used for the timer, Timer1:

Timer1 OnTimerStart()
Select(Button1)

Timer1 OnTimerEnd()
UpdateContext({MyCounter: MyCounter + 1});
If (
    MyCounter > 9,
    UpdateContext({MyCounter: 0}),
    false
)

The code to determine which segment to display is encapsulated in a button, Button1, which allows for some isolation.

Button1 OnSelect()
// Segment 1
If(
    Or(
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 7,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS1: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS1: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS1: SegmentUnselected.Fill})
    )
);
// Segment 2
If(
    Or(
        MyCounter = 1,
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 4,
        MyCounter = 7,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS2: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS2: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS2: SegmentUnselected.Fill})
    )
);
// Segment 3
If(
    Or(
        MyCounter = 1,
        MyCounter = 3,
        MyCounter = 4,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 7,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS3: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS3: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS3: SegmentUnselected.Fill})
    )
);
// Segment 4
If(
    Or(
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS4: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS4: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS4: SegmentUnselected.Fill})
    )
);
// Segment 5
If(
    Or(
        MyCounter = 2,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 0
    ),
    UpdateContext({FillColorS5: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS5: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS5: SegmentUnselected.Fill})
    )
);
// Segment 6
If(
    Or(
        MyCounter = 4,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 9,
        MyCounter = 0
    ),
    UpdateContext({FillColorS6: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS6: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS6: SegmentUnselected.Fill})
    )
);
// Segment 7
If(
    Or(
        MyCounter = 2,
        MyCounter = 3,
        MyCounter = 4,
        MyCounter = 5,
        MyCounter = 6,
        MyCounter = 8,
        MyCounter = 9
    ),
    UpdateContext({FillColorS7: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorS7: NightmodeBackgr.Fill}),
        UpdateContext({FillColorS7: SegmentUnselected.Fill})
    )
)

But keep in mind that this is only for the first digit! For the second digit (from right to left), a second timer evaluates whether the MyCounter variable is also greater than 9 to advance yet a second counter for the second digit.

 Timer2 OnTimerStart()
Select(Button2)

In turn, we need to evaluate this second counter to ensure it does not exceed a value of 5.

Timer2 OnTimerEnd()
If(
    MyCounter = 0,
    UpdateContext({NyCounter: NyCounter + 1}),
    false
);
If(
    NyCounter > 5,
    UpdateContext({NyCounter: 0}),
    false
)

The Button2 code now looks awfully similar to the code we saw for Button1, but controls the display of segments for the second digit. Except for the name of certain variables, in fact, the code is the same!

Button2 OnSelect()
// Segment 1
If(
    Or(
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 7,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT1: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT1: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT1: SegmentUnselected.Fill})
    )
);
// Segment 2
If(
    Or(
        NyCounter = 1,
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 4,
        NyCounter = 7,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT2: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT2: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT2: SegmentUnselected.Fill})
    )
);
// Segment 3
If(
    Or(
        NyCounter = 1,
        NyCounter = 3,
        NyCounter = 4,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 7,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT3: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT3: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT3: SegmentUnselected.Fill})
    )
);
// Segment 4
If(
    Or(
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT4: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT4: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT4: SegmentUnselected.Fill})
    )
);
// Segment 5
If(
    Or(
        NyCounter = 2,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 0
    ),
    UpdateContext({FillColorT5: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT5: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT5: SegmentUnselected.Fill})
    )
);
// Segment 6
If(
    Or(
        NyCounter = 4,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 9,
        NyCounter = 0
    ),
    UpdateContext({FillColorT6: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT6: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT6: SegmentUnselected.Fill})
    )
);
// Segment 7
If(
    Or(
        NyCounter = 2,
        NyCounter = 3,
        NyCounter = 4,
        NyCounter = 5,
        NyCounter = 6,
        NyCounter = 8,
        NyCounter = 9
    ),
    UpdateContext({FillColorT7: SegmentDayMode.Fill}),
    If(
        ToggleNightMode.Value,
        UpdateContext({FillColorT7: NightmodeBackgr.Fill}),
        UpdateContext({FillColorT7: SegmentUnselected.Fill})
    )
)

Now, we need to repeat the above for the left most digit all over again. Once again, we introduce a new timer with events that will evaluate the counter status to advance a third variable, and a button to encapsulate the code that will evaluate the segments to be activated for the third digit.

 Timer3 OnTimerStart()
Select(Button3)

In turn, we need to evaluate the first and second counters for when they reset to zero, to advance the minute counter.

Timer3 OnTimerEnd()
If(
    NyCounter = 0 && MyCounter = 0,
    UpdateContext({OyCounter: OyCounter + 1}),
    false
);
If(
    OyCounter > 9,
    UpdateContext({OyCounter: 0}),
    false
)

The Button3 code is in effect an exact copy of the code in buttons Button1 and Button2, but controls the display of segments for the left most digit.

Button3 OnSelect()
// Segment 1
If(
    Or(
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 7,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM1: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM1: NightmodeBackgr.Fill}), UpdateContext({FillColorM1: SegmentUnselected.Fill}))
);
// Segment 2
If(
    Or(
        OyCounter= 1,
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 4,
        OyCounter= 7,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM2: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM2: NightmodeBackgr.Fill}), UpdateContext({FillColorM2: SegmentUnselected.Fill}))
);
// Segment 3
If(
    Or(
        OyCounter= 1,
        OyCounter= 3,
        OyCounter= 4,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 7,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM3: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM3: NightmodeBackgr.Fill}), UpdateContext({FillColorM3: SegmentUnselected.Fill}))
);
// Segment 4
If(
    Or(
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM4: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM4: NightmodeBackgr.Fill}), UpdateContext({FillColorM4: SegmentUnselected.Fill}))
);
// Segment 5
If(
    Or(
        OyCounter= 2,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 0
    ),
    UpdateContext({FillColorM5: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM5: NightmodeBackgr.Fill}), UpdateContext({FillColorM5: SegmentUnselected.Fill}))
);
// Segment 6
If(
    Or(
        OyCounter= 4,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 9,
        OyCounter= 0
    ),
    UpdateContext({FillColorM6: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM6: NightmodeBackgr.Fill}), UpdateContext({FillColorM6: SegmentUnselected.Fill}))
);
// Segment 7
If(
    Or(
        OyCounter= 2,
        OyCounter= 3,
        OyCounter= 4,
        OyCounter= 5,
        OyCounter= 6,
        OyCounter= 8,
        OyCounter= 9
    ),
    UpdateContext({FillColorM7: SegmentDayMode.Fill}),
    If(ToggleNightMode.Value, UpdateContext({FillColorM7: NightmodeBackgr.Fill}), UpdateContext({FillColorM7: SegmentUnselected.Fill}))
)

As can be concluded from this exercise, the amount of (repeated) code, variable declarations, and controls increase progressively per 7-segment digit added. Another thing I noticed is, timers are not as responsive and the application is slow, overall - not the type of experience you would like and end-user to have.


NOTE: I am not sure if components is right for every application case, but one thing that I will insist on is to group objects and controls wherever possible to facilitate application readability and control navigation as an app builder.

Here's the final result:


On the positive side, building this application, using the pain staking process above thought me how I could leverage PowerApps components in order to promote code reusability, improve user experience, and increase application responsiveness. That will be the subject of my next article, Part 2 of this series.

This version of the app can be downloaded here (OneDrive).

Until next post,

MG.-
Mariano Gomez, MVP

Comments

Post a Comment

Popular posts from this blog

Power Apps - Application Monitoring with Azure Application Insights

Image
In this video, learn to enable Power Apps Application Monitoring with Azure Application Insights.  The following topics are covered in this video:  ( 0:00 ) - Intro  ( 0:36 ) - What is Azure Application Insights  ( 1:32 ) - The timesheet app  ( 2:12 ) - Creating an Application Insight for the timesheet application  ( 3:55 ) - Identify and copy the application instrumentation key  ( 4:09 ) - Enabling the timesheet application with the instrumentation key  ( 5:32 ) - Working with Application Insights  ( 8:06 ) - Outro For additional information on Azure Application Insights, please follow these resources: Microsoft Docs - What is Azure Application Insights? here Adam Marczak - Azure for Everyone: Azure Application Insights Tutorial, here To check out my YouTube channel visit: https://youtube.com/user/mgomezb1 LIKE AND SUBSCRIBE!!! Until next post! MG.- Mariano Gomez, MVP
Read more

DBMS: 12 Microsoft Dynamics GP: 0 error when updating to Microsoft Dynamics GP 2013 R2

Image
Hello all! It's been quite a while since I've actually written anything of remote interest to anyone who follows my blog, but at the same time, you will be pleased to know that I've been quite busy in the consulting front, with upgrades, server migrations, complex multi-instance postings involving 10's of thousands of transactions, wrapping up some Field Service Automation projects, and the list goes on and on. This time around I want to bring to the forefront, an issue I encountered updating  from Microsoft Dynamics GP 2013 SP2 to Microsoft Dynamics GP 2013 R2 plus the latest service pack. Background My client requested a server migration to a new environment where they wanted to deploy Dynamics GP 2013 R2 web client (plus the latest service pack) and upgrade their relational database management system to Microsoft SQL Server 2014. This is something I'm absolutely comfortable with (for the most part) given also that my client was sitting at Microsoft Dynamics
Read more

eConnect Integration Service for Microsoft Dynamics GP 2010

Image
One of the biggest improvements in eConnect 2010 is the addition of the new eConnect Integration Service . The eConnect installer now creates a new Windows Service application named eConnect for Microsoft Dynamics GP 2010 integration Service . The eConnect Integration Service is a Windows Communication Foundation (WCF) service that replaces the (very unstable) eConnect COM+ object available in previous versions of eConnect. The eConnect Integration Service supports the operations of the eConnect .NET assemblies, the BizTalk adapter, and MSMQ interfaces. In addition, you can use the service directly from an application that adds a service reference to the eConnect Integration Service. If you add a service reference, you do not need to add the Microsoft.Dynamics.GP.eConnect assembly and namespace to your development project. To add the eConnect Integration Service to an application, you must first add a service reference to the Visual Studio project for that application. To add a servi
Read more