Build your own Solar System using PowerApps
PowerApps is so much more than just a web based form and this blog will demonstrate that first hand. Here we are building a powerful tablet app where users can watch the planets of our Solar System revolve around the Sun. The app gives the users the option to filter out any of the planets they don't wish to see while they are still revolving.
This blog focuses on the following key features:
1. Formula for the X and Y functions of each planet.
2. Formula for the two buttons which start and stop the revolution.
3. Formula for the checkbox controls that will display or hide the planets.
X and Y functions of each planet
Paul Culmsee and his daughter Ashlee built an awesome YouTube video which walks you through the math behind how Sine, Cosine and Timer Value can be used to create seamless rotations and revolutions using images. Here's a link to their video. In this blog we are taking some of the lessons learnt from that video and modifying the formulas to create slight variations for each planet. I've also created a video blog which will walk you through the process.
Initially add the Sun image to a suitable location such that at one point you should be able to see all the planets. In this scenario I created the app using the 16:10 Widescreen size and placed the Sun at X=358 and Y=406 position.
Once you've completed the Sun, start adding the planets using the X and Y formulas provided below. Remember, these formulas will only work if you name all the images and controls as I have in my app. Here is a screenshot of all the names I provided.
Sun's position
X = 358
Y = 406
Sun's size
62 x 78
Mercury's position
X = (Sun_image.X+(Sun_image.Width/2)-Mercury_Image.Width/2)+(Mercury_Image.Width*2)*Cos(Timer1.Value)
Y = (Sun_image.Y+(Sun_image.Width/2)-Mercury_Image.Width/2)+(Mercury_Image.Width*2)*Sin(Timer1.Value)
Mercury's size
27 x 45
Venus's position
X = (Sun_image.X+(Sun_image.Width/2)-Venus_Image.Width/2)+(Venus_Image.Width*2)*Cos(Timer1.Value/2)
Y = (Sun_image.Y+(Sun_image.Width/2)-Venus_Image.Width/2)+(Venus_Image.Width*2)*Sin(Timer1.Value/2)
Venu's size
41 x 40
Earth's position
X = (Sun_image.X+(Sun_image.Width/2)-Earth_Image.Width/2)+(Earth_Image.Width*3)*Cos(Timer1.Value*0.25)
Y = (Sun_image.Y+(Sun_image.Width/2)-Earth_Image.Width/2)+(Earth_Image.Width*3)*Sin(Timer1.Value*0.25)
Earth's size
48 x 41
Mars' position
X = (Sun_image.X+(Sun_image.Width/2)-Mars_Image.Width/2)+(Mars_Image.Width*3.5)*Cos(Timer1.Value*(0.25)-0.5)
Y = (Sun_image.Y+(Sun_image.Width/2)-Mars_Image.Width/2)+(Mars_Image.Width*3.5)*Sin((Timer1.Value*0.25)-0.5)
Mars' size
65 x 53
Jupiter's location
X = (Sun_image.X+(Sun_image.Width/2)-Jupiter_Image.Width/2)+(Jupiter_Image.Width*2)*Cos((Timer1.Value)*.25)
Y = (Sun_image.Y+(Sun_image.Width/2)-Jupiter_Image.Width/2)+(Jupiter_Image.Width*2)*Sin((Timer1.Value)*.25)
Jupiter's size
180 x 170
Saturn's location
X = (Sun_image.X+(Sun_image.Width/2)-Saturn_Image.Width/2)+(Saturn_Image.Width*2)*Cos(Timer1.Value*.25+.5)
Y = (Sun_image.Y+(Sun_image.Width/2)-Saturn_Image.Width/2)+(Saturn_Image.Width*2)*Sin(Timer1.Value*.25+.5)
Saturn's size
215 x 209
Uranus's location
X = (Sun_image.X+(Sun_image.Width/2)-Uranus_Image.Width/2)+(Uranus_Image.Width*9)*Cos(Timer1.Value*.25+.5)
Y = (Sun_image.Y+(Sun_image.Width/2)-Uranus_Image.Width/2)+(Uranus_Image.Width*9)*Sin(Timer1.Value*.25+.5)
Uranus's size
62 x 47
Neptune's location
X = (Sun_image.X+(Sun_image.Width/2)-NeptuneImage.Width/2)+(NeptuneImage.Width*11)*Cos(Timer1.Value*.25+.5)
Y = (Sun_image.Y+(Sun_image.Width/2)-NeptuneImage.Width/2)+(NeptuneImage.Width*11)*Sin(Timer1.Value*.25+.5)
Neptune's size
60 x 40
Buttons which start and stop the revolution
You can leave the Timer1 control as it is and using that to start and stop or you can add a Start and Stop button. We'll be using the Set function. First add two buttons and name them as Start and Stop.
I made sure that the control names are also the same.
Next, add the correct OnSelect formula for the Start and Stop button.
Start button
Stop button
Now, click on the Timer1 control, then select AutoPause and add the function.
Finally, click on the Timer1 control again, select Autostart and add the function
Checkbox controls that will display or hide the planets
In this section I'll describe how the checkbox control was added for the planet Mercury. The process is the exact same for the rest of the 7 planets.
Insert a checkbox control and give it a name. I've named mine as MercuryCheckbox
Select the MercuryCheckbox control and set the formula for OnCheck
Here's the formula for the UnCheck
The final step here is to select the image for Mercury and add the formula for Visible. Note: In this case setting the Visible itself is enough. We do not need to add any extra formulas to hide.
Video blog
This video walks you through how you can build this powerful app from ground up.
Helpful links
1. How to build a Fidget Spinner using PowerApps
2. Set function in PowerApps
3. Understand variables in PowerApps
4. Two zipped files which contains all the images used to build this PowerApp.
*This post is locked for comments