THE FINISHED APP
An animated 3D Rubik’s Cube in Power Apps.
The fully working Power App app can be download from GitHub.

BACKGROUND
Following on from my previous post on creating a Rubik’s Cube emulator in Power Apps, the next logical step was to have the cube sides animate on rotate. There is a draggable 3D cube in this website – which renders in real-time, but I don’t think this is yet within the realms of Power Apps.

I had the idea of rendering each frame of a side rotating and then switching these frames within Power Apps resulting in the animation. The frame would also need to reflect the colours of the pieces, which would be possible using the same method as for the static cube, i.e., replacing the polygon colours in the SVG with the appropriate piece colour stored in the Collection.

Also, as the sides are rotated the notations are stored in a collection, and then an ‘Unscramble’ button will replay all the moves in reverse resulting in a completed Rubik’s Cube.
The standard notations for Rubik’s Cube movements are taken from this page.

CREATING THE FRAMES
After a bit of searching online – Blender seemed to offer an SVG export feature as an add-on. Downloading and using Blender was a bit alien to me as I’m accustomed to Autodesk Maya and 3D Studio Max. So instead, a trial of Autodesk Maya was installed, and on looking at the render engines available I found that there is one called Maya Vector renderer which is able to export to SVGs – this sounded perfect.

Next, I found a YouTube tutorial and created the Rubik’s Cube in Maya, even though it’s not a particularly complex shape to model. In terms of the colouring of the pieces they each have to be unique so that the colour code can be replaced in Power Apps. This was achieved by using a fixed colour for each side and then lowering the saturation on each piece, so that none of the colours would be repeated. This is the completed model rendered in Maya Vector, and Arnold (the built-in Maya ray tracing renderer)

I decided that 5 frames in the animation steps would be sufficient as this would result in 3 frames between the start and end. Any less wouldn’t look very realistic, and using more might slow down the animation as Power Apps would have to render all of the frames behind the scenes even if they’re not visible.
I won’t go into detail of the process of animating each side move in Autodesk Maya. As a summary the steps are:

1. Group the pieces of the side.
2. Move the rotation pivot point to the centre of the side.
3. Set a keyframe as a start point
4. Move the animation to Frame 5, set the rotation in the required axis to -90 or 90.
5. Set another keyframe.
6. For frames 2-4 render each using Maya Vector and save the SVG.

The SVGs created from Maya weren’t very well formatted, or easy to read. Importing them into Adobe Illustrator and re-exporting them resulting in them being half the file size, and also the SVG colour “styles” being created at the top of the file – which makes things a lot simpler.

The next step is to replace the appropriate piece colour in the SVG file with the Power Apps lookup code for the corresponding side and piece. Through a process of importing the SVG into Power Apps and then changing each style colour to black I was able to create the below spreadsheet with the piece colour and its matching Power Apps code:

The process of searching and replacing the colour codes with the Power Apps codes initially wasn’t straightforward. This page describes how to perform multiple text replacements in in Excel using VBA code.

The final steps for preparing the Maya SVGs for Power Apps are:

1. Open and export from Adobe Illustrator (adding IL to the file name).
2. Replace all double-quotes with single quotes, as this is how they need to be formatted for Power Apps.
3. Using Excel replace the piece colours with the Power Apps code (as above).

POWER APPS
There is not much in the App that is overly complex – I’ll cover anything that might require an explanation on how it works.
Several variables are used in the side animation and the cube unscramble routines. These variables values can be hidden or displayed using the Debug toggle control:

Two timers are used – the first to increment the variable controlling the animation frame displayed, and the second controlling the Unscramble routine.
On Version 1 of the app I’d forgotten to rotate the colours on the actual side of the cube which is being rotated. This has now been fixed.
Image controls including SVG for the Image properties were added for all of the frames of the side move animations. The images Visibility is set by the several variables indicating if an Animation is in progress, the move notation, and the frame of the animation.

FINAL THOUGHTS
It would be great to be able to render the Rubik’s cube in real time in 3D. This may be possible by creating an SVG on the fly to draw lines and polygons. I’m not sure if this could be done in Power Apps but I like a challenge 😊.

Photo by Fakurian Design on Unsplash

BACKGROUND
Is it possible to create a Rubiks Cuber emulator in Power Apps?

Recently a Twitter post from Mr Dang piqued my interest.  It was a retweet of a tweet which showed an Excel spreadsheet with a 3D Rubiks Cube which could be rotated by using buttons around the cube.  I had been looking for a new idea for a new Power Apps project and this looked ideal.

When I was about 10, I became interested in the Rubiks Cube, and spent many hours learning how to solve it in under a minute, and amazed anyone who was willing to watch me do it.  

TERMINOLOGY
These are the terms used when referencing the parts of a Rubiks Cube:
Cube – the whole cube.
Face – a single face, or side of the cube.
Piece – a single piece on a face, which can be one of six colours.

APP/CODE
The “code” snippets in this post will be minimal as the full working App is in Github here. 

INITIAL THOUGHTS
Ideally, the goal was to create a fully 3D rendered cube which could be rotated, and the sides moved by dragging – as here. I believe this is beyond what Power Apps can do – for now..
I wanted to use as much Power Apps core functionality as I could in the App, to display, store, and move the faces.  To store the piece colours the plan was to use Collections but was unsure if the performance would be adequate – turns out it was no issue.

FIRST STEPS CREATING THE APP
Created a ‘Reset Cube’ button and code in the OnSelect to create a Collection to store the 6 faces and 9 piece colours. Also, a gallery to display the Collection data on screen.

// Create new collection and create Face 1
ClearCollect (
	CubeColours,
	{
		FaceNumber: 1,
		Piece1: 1,
		Piece2: 1,
		Piece3: 1,
		Piece4: 1,
		Piece5: 1,
		Piece6: 1,
		Piece7: 1,
		Piece8: 1,
		Piece9: 1
	}
);
// Append Face 2
Collect (
	CubeColours,
	{
		FaceNumber: 2,
		Piece1: 2,
		Piece2: 2,
etc.

Added 9 Text boxes for each of the 3 visible cube sides, and a Lookup in each Text box to show the text value from the Collection:

So far so good – we can see the values of all the pieces, and the 3 cube sides on screen (although not in a very user friendly format).

ADDING COLOUR
A Collection was created to store the colour numbers 1 to 6 with their corresponding HTML colour values. The below code was put into the ‘Reset Cube’ button for ease.

ClearCollect (
    TemplateColours,
    {
        ColourNumber: 1,
        ColourValue: "#00FF00"// Green
    },
    {
        ColourNumber: 2,
        ColourValue: "#FF0000"// Red
    },
    {
        ColourNumber: 3,
        ColourValue: "#FFFFFF"// White
    },
    {
        ColourNumber: 4,
        ColourValue: "#FF8040"// Orange
    },
    {
        ColourNumber: 5,
        ColourValue: "#FFFF00"// Yellow
    },
    {
        ColourNumber: 6,
        ColourValue: "#0000FF"// Blue
    }
);

The cube text boxes Text values were all set to “” (Blank) to clear them, and then the Fill property was changed as below to lookup the correct colour from the Collection:

ColorValue(
    LookUp(
        TemplateColours,
        ColourNumber = LookUp(
            CubeColours,
            FaceNumber = 1,
            Piece1
        ),
        ColourValue
   )

Resulting in coloured squares as below!

Adding the feature to turn the cube sides turned out to be one of the most difficult parts of this App. Once I’d drawn a sketch of the cube on paper it was a lot simpler:

This is the code to rotate the top side anti-clockwise. The code for the rest of the sides are slight variations on this.

// Store 1
Set(TempPiece1,LookUp( CubeColours, FaceNumber = 1, Piece1));
Set(TempPiece2,LookUp( CubeColours, FaceNumber = 1, Piece2));
Set(TempPiece3,LookUp( CubeColours, FaceNumber = 1, Piece3));

// Patch 1 from 4
ClearCollect(TempCubeColours, First(Filter(CubeColours,FaceNumber=4)));
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=1)),
    {Piece1:First(TempCubeColours).Piece1,
        Piece2:First(TempCubeColours).Piece2, 
        Piece3:First(TempCubeColours).Piece3});

// Patch 4 from 6
ClearCollect(TempCubeColours, First(Filter(CubeColours,FaceNumber=6)));
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=4)),
    {Piece1:First(TempCubeColours).Piece1,
        Piece2:First(TempCubeColours).Piece2, 
        Piece3:First(TempCubeColours).Piece3});

// Patch 6 from 2
ClearCollect(TempCubeColours, First(Filter(CubeColours,FaceNumber=2)));
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=6)),
    {Piece1:First(TempCubeColours).Piece1,
        Piece2:First(TempCubeColours).Piece2, 
        Piece3:First(TempCubeColours).Piece3});

// Patch 2 from 1 (Stored)
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=2)),
    {Piece1:TempPiece1,
        Piece2:TempPiece2, 
        Piece3:TempPiece3});

So, finally there is a fully working Cube which can be used, although it needs a bit of work to make it 3D.

3D CUBE
Initially I thought this would take a lot of time. There are no polygons in standard controls in Power Apps so consideration was given to each piece being made of one or more SVGs. An SVG is a scalable vector image file. For further information see Wikipedia and Matthew Devaneys blog post.

After a bit of searching online I found the perfect answer – a ready made Rubiks Cube in SVG format where I could modify the piece colours using Power Apps code. This is how the original SVG looks:

From here it was quite straightforward to change the SVG string and replace any piece colours using Lookups on the collection. I’m no expert in SVG but was able to work out that each piece polygon is a separate section in the SVG file, and has a corresponding colour value in it – see below.

By changing a colour to yellow I could see where it was on the cube as Power Apps renders SVGs in real time. Then I would simply put the lookup for the piece in the SVG code section – as below in Power Apps:

FINAL STEPS
Once this was complete proper buttons to rotate the cube were created (using SVGs from Bootstrap Icons).
Also a view of the reverse of the cube was created. This was simply a copy of the SVG, using the same technique as above mapping each piece in the SVG to it’s corresponding piece on the reverse of the cube. It took a bit of thinking to view the cube in reverse, and I ended up using a Rubiks Cube box and writing the piece numbers on it.

THE FINISHED APP
Here is the completed app in action:

FUTURE ENHANCEMENTS
These are some possible enhancements I’ll likely work on in the next version:
1. Animating the faces as they move. Possibly using Blender to create a 3D cube (I have experience in 3D modelling and rendering – see my Stills and Videos). Exporting each frame to SVG, adding piece colours, and then displaying it in Power Apps. There is quite a lot of work involved with this, and I’m unsure how feasible it will be to do in real time in Power Apps.
2. Solving a cube from a scrambled state. It’s unclear how this would be done but will enjoy investigating it.
3. Using a physical cube connected to the app. There is a bluetooth cube available from here. (Thanks to Andrew Rimell for spotting this).

FINAL THOUGHTS
I’m very excited for the future of Power Apps – it really is limited only by your imagination. I hope you enjoyed reading this, and look forward to any comments.

Cover Photo by Jadson Thomas from Pexels

The ForAll command is very handy if you want to loop around a collection and perform some calculations.  One limiting feature is that you can’t use variables in the ForAll loop, using UpdateContext or Set.

There is a workaround, which is to create and use a single record collection to hold the values which can then be used as variables. The downside is that it does make the “code” not as straightforward to read.

This is the process I use:

Add a line to the Form OnVisible to reset the collection (unless you’re using the variable like a Global in which case put it in the App OnStart).

ClearCollect(colVariables, {colvarVariableOne:””});

To read the variable value use

First(colVariables).colvarVariableOne

To set the variable value use:

Patch(colVariables, First(colVariables), {colvarVariableOne:”NEW VALUE”});

One thing that can catch you out is that collection column types are set when the collection is initiated so set the default value to be of that type. For example to create a datetime column use:

ClearCollect(colVariables, {colvarHoliday:DateTimeValue(“01/01/2000 00:00”});

Photo by Tine Ivanič on Unsplash

For any mobile app these days it’s normally a requirement to be able to take photos for reference, and the new App I’m working on is no different.

Adding a photo facility to an App is very straightforward – put a Camera control onto a screen and add code in the OnSelect to take the Photo and add it a collection using Patch. Here’s my code to do this:

Patch(colPhotos, Defaults(colPhotos), {Value:Camera1_1.Photo, PhotoDateTime:Now()});

Of course most devices have multiple cameras these days – at minimum one front facing, and one rear facing.   PowerApps allows you to change the camera in use by setting the Camera property of the Camera control (!) with a number.  

These are the devices I have, and their associated Camera numbers

Samsung Galaxy S7 
0 = Rear Camera, 1 = Front Camera, 2 = Not Available

IPhone 7
0 = Rear Camera, 1 = Front Camera, 2 = Front Camera

Samsung Galaxy S9
0 = Front Camera, 1 = Front Camera (Zoomed in), 2 = Rear Camera

NOTE: All the devices I’ve tested only have two cameras, 1 front and 1 rear – though there are many newer devices which have several rear cameras.  I’m guessing that they would have Camera numbers from 2 onwards though I can’t verify this.

So it appears that the rear camera, which the user would most likely use, is not always 0.  To allow the user to change camera I use a variable and store this to local cache so the App will start on the same camera the user was last on.

Code wise – the Camera control’s Camera property is set to varCameraNumber.  There is a ‘Switch Camera’ button which loops around Cameras 0 to 2 using the code:

If(varCameraNumber=2,
UpdateContext({varCameraNumber:0});,
UpdateContext({varCameraNumber:varCameraNumber+1});
);

This is the code in the Screen OnVisible section.  It uses LoadData with the 3rd parameter IgnoreNonexistentFile set to True.  This is for when the App is first run and the file doesn’t exist.

LoadData(colCameraNumber, “colCameraNumber” ,true);
If(CountRows(colCameraNumber) = 0,
UpdateContext({varCameraNumber:0});,
UpdateContext({varCameraNumber:First(colCameraNumber).CameraNumber});
);

The last bit of code is at the end of the OnSelect of the ‘Switch Camera’ button.

ClearCollect(colCameraNumber,{CameraNumber:varCameraNumber});
SaveData(colCameraNumber,”colCameraNumber”);

That’s it, a fully functioning Camera control allowing switching of the viewing camera, which is saved per session too.  🙂

I’m quite new to the world of designing and developing Power Apps and came across an interesting puzzle during the creation of my first App. I can’t go into specifics about what the App is used for, suffice to say that there are parent records created on the server and the App is used to create multiple child records linked to the parent record. The App also has a requirement to be able to function when the device is offline (i.e. no mobile data available).

In the scenario where the users device is offline, the user will call the office and be told the ID of the parent record they are working with. The ID field is just an incremental counter on the backend and the user would enter this onto their device. To ensure that they are working with the correct parent record and also to bypass user typing errors, I thought it would be a good idea to add a check digit to this number.

I initially posted onto a PowerApps forum to see if someone had designed code for this method previously. There were no replies so I went about writing the code myself.

Firstly, there was the matter of choosing an algorithm that would generate the check digit. The Luhn Algorithm seemed to fit the requirements – it wasn’t overly complex and is used on credit card numbers so must be accurate. I used a variant of the algorithm using modulus 10.

These are the steps for the calculation (taken from this website).

Summary: Given an identifier, let’s say “139”, you travel right to left. Every other digit is doubled and the other digits are taken unchanged. All resulting digits are summed and the check digit is the amount necessary to take this sum up to a number divisible by ten.

Detail:
1. Work right-to-left, using “139” and doubling every other digit.
9 x 2 = 18
3 = 3
1 x 2 = 2
2. Now sum all of the digits (note ’18’ is two digits, ‘1’ and ‘8’). So the answer is ‘1 + 8 + 3 + 2 = 14′ and the check digit is the amount needed to reach a number divisible by ten. For a sum of ’14’, the check digit is ‘6’ since ’20’ is the next number divisible by ten.

Below is a recording of the App being run using the test value of 139

The code took a fair bit of time to develop as PowerApps is not really designed to work with loops and arrays, hence the need for several collections. Below is the full code:

ClearCollect(colStringChars, Split(txtInputValue.Text, ""));

UpdateContext({varOddEvenOffset:If(Mod(CountRows(colStringChars),2)=1,1,0)});

ClearCollect(colStringSeq, {RecNum:0});
Clear(colStringSeq);
ForAll(
       colStringChars,
       Collect(
               colStringSeq,
               {
                 ValueToSum:If(Mod(CountRows(colStringSeq) + 1 + varOddEvenOffset,2)=1,Result,Result * 2)
               }
       )
);

UpdateContext({varStage1Total: Concat(colStringSeq, ValueToSum)});

Clear(colStage2Numbers);
Collect(colStage2Numbers, Split(varStage1Total, "")); 

UpdateContext({varStage2Sum: Sum(colStage2Numbers, Result)});

UpdateContext({varFinalCheckDigit: If(Mod(varStage2Sum,10) = 0,0, 10 - Mod(varStage2Sum,10))});

UpdateContext({varFinalOutput: txtInputValue.Text & varFinalCheckDigit});

I’m sure the code could be optimised to have less lines but I wanted to keep it readable (for when I come back to it in 6 months times to see how it works 😄).

That’s it – I’d appreciate any comments about the method I used, or the actual code developed.

I’ll be blogging every few weeks in the future about any more trinkets of PowerApps information I come across. Thanks!

Header Photo by Markus Spiske on Unsplash