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.

 

Capture1.PNG

 

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.

 

Capture2.PNG

 

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.

 

Capture3.PNG

 

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

 

Capture3a.PNG

 

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

Start button

 

Capture4a.PNG


Stop button

Capture4b.PNG


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

 

Capture4c.PNG

 

Capture4d.PNG

 

Finally, click on the Timer1 control again, select Autostart and add the function

 

Capture4e.PNG

 

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

 

Capture5.PNG

 

Capture5a.PNG

 

Select the MercuryCheckbox control and set the formula for OnCheck

 

Capture6a.PNG

 

Here's the formula for the UnCheck

 

Capture6b.PNG

 

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.

 

Capture6c.PNG

 

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.
 

Attachment
Attachment
Meet Our Blog Authors