Build your own Solar System using PowerApps

by Super User on ‎08-15-2017 05:13 PM

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.

Meet Our Blog Authors