A month ago I attended Scottish Summit 2024 in Aberdeen, because was a new place for me I decided to visit the city and I used the public transportation.
I downloaded the "Stagecoach" app and I bought a ticket, it appeared like this screenshot:
When I launched the app I was surprised, in addition to the QR Code in the top there is also a centered colored bar, switching between the time and a random word.
The colored bar also tilts based on the accelerometer of the mobile phone.
Why they implemented this colored bar? The reason (in my opinion) is to facilitate the driver to check the ticket validity without scanning the QR Code.
- Color and word change every day, today can be green with the word "house", tomorrow can be red with the word "crisp", probably at the beginning of the shift the driver knows the color and the word of the day.
- The switch between the time and the word and the tilt is to show you are inside an app and is not a screenshot
After I used the app I asked myself: "Can I build a Canvas App with similar concepts?"
I usually don't do Canvas apps but this was interesting to me for two reasons:
- it's not the usual gallery/edit data app
- I am implementing a real business scenario
Let's start with the QR Code, there are some PCF controls but I wanted to keep it as simple as possible, so I used a service from this site: https://goqr.me/api/
It returns a QR Code as image with the text I want, for example this one shows my LinkedIn profile:
The challenging part is of course the colored bar.
First of all I needed to display the current time, so I added a Timer (with AutoStart equals true and Duration 1000 - 1 second) where I wrote the following formula:
Set(CurrentTime, Now())
In this way I have a variable updating every second with the current time (Now function).
After I added a label to display the time, I just want to show hours and minutes, so the formula for the Text property is:
Text(CurrentTime, "HH:mm")
After I needed to switch between the time and the word, I decided to create a second label with some dummy text and I needed some logic to make visible the first label and hide the second (and vice versa) every X seconds.
Another timer then, this time running every 3 seconds and with AutoStart true. Power Fx has the Mod function, if I do a formula Current Seconds MOD 2, I get 0 or 1. Because the timer runs every 3 seconds, I am sure he seconds will be one time odd and one time even. Let's wrap everything in this formula: the variable is named CurrentMode, it fetches the seconds of the current time, converting it to a number (Value function)
Set(CurrentMode,Mod(Value(Text(Now(), "ss")),2))
Now I can use the variable CurrentMode for the Visible property of these two labels, one is set to CurrentMode and the other to !CurrentMode. In Power Fx 0 and 1 are equivalent to false and true statements.
Next step is the tilt, I didn't find a way to rotate a shape inside a canvas app so I decided to change the vertical position of the labels based on a device property. I used the Compass.Heading but there are others functions you can use.
The formula I applied for the Y property is the following:
350+(Compass.Heading)
So every time I move the mobile phone, the label position gets updated.
Now we need to take care of the color, for simplicity I assume each day has a different color, so the Fill property of the label is a Switch statement based on the Weekday of Today (Weekday returns a value from 1 to 7). Formula:
Switch(Weekday(Today()),
1, Color.LightBlue, 2, Color.Orange, 3, Color.LightGreen,
4, Color.Yellow, 5, Color.Violet, 6, Color.PaleVioletRed, 7, Color.LightGray)
Last part is to have a different word every day, we need 366 words, so I created a Named formula called Words, storing a Table with a property named Word:
Words = Table({Word:"apple"},{Word:"bread"},{Word:"crane"}, ...)
This is a bit tricky, inside a Canvas app we don't have a function as DayOfYear so I needed to use DateDiff function with a combination of Year and Today functions:
Index(Words,DateDiff("1/1/"& Text(Year(Today())),Today())+1).Word
The Year is used to get the first day of the year, DateDiff calculates the difference and we add 1 because Index to access the table starts from 1.
Now the app is ready, here a video in action (I left the timers and the value of the Mod variable visible):
