Build Your Own Solar System Using PowerApps

Daniel ChristianThu, 05/17/2018 - 16:17

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=358and Y=406 position.

Sun Image

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)

Venus 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.

Stop button

I made sure that the control names are also the same.

Control Names

Next, add the correct OnSelect formula for the Start and Stop button.

Start button

Start Button

Stop button

Stop Button

Now, click on the Timer1 control, then select AutoPause and add the function.


Autopause 2

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

Mercury Checkbox

Mercury Stop

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 
To download the images used in this post, click here.

About the Author

Daniel Christian Picture Daniel Christian | SharePoint MVP


Daniel Christian has over 11 years of SharePoint experience starting with SharePoint Portal 2003. His area of expertise includes SharePoint On-Premises architecture, maintenance, and administration, SharePoint Online administration. He is a big fan of building little to no-code solutions and reporting. Currently, he is focused on PowerApps and its integration using Gateway with SharePoint Server 2013 and 2016.

Daniel is now an official blog writer of the PowerApps forum. His primary focus is writing detailed blogs to build SharePoint solutions using PowerApps. In addition, he has written over 30 Microsoft TechNet Wiki articles which include SharePoint Server, Project Server, SQL BI, Access Apps and Visio.