Build an Android display PPI calculator app with David Briddock
Over the last few issues we’ve used App Inventor 2 (AI2) to build a useful timer, a motion-activated dice shaker and a fully functional web browser.
This time we’re going to build a display pixel density calculator based on a pixels-per-inch (PPI) formula.
Remember, all you’ll need to play along is a Windows/Mac/Linux PC, a web browser and a Google account. Ideally, you’ll also have an Android smartphone or tablet, but even this isn’t essential.
What We’ll Learn
This time our screen design involves a number of label and text box pairs. To arrange these pairs correctly we’ll introduce the TableArrangement component, which makes the whole process pretty straightforward.
As you probably guessed, there’s some maths involved here, which gives us an opportunity to explore some of the code blocks in the Math group.
In addition we’ll use a local variable (as opposed to a global one), where the scope is limited to its inner blocks.
Starting AI2
In your browser, navigate to the AI2 home page (ai2.appinventor.mit.edu) and sign in with your Google account.
We need a new project, so in the Projects menu select the ‘Start new project’ option and give it a meaningful name, such as ‘MMPPICalc’.
Screen Properties
We’re automatically taken to the Designer View, where there’s already a component called ‘Screen1’.
In the right-hand Properties panel, ensure the AppName is set to ‘MMPPICalc, then set the Title to ‘MM PPI Calculator’.
Now we’ll add some screen components.
Table Component
First we’ll add the table. In the left-hand component Palette panel, open the Layout group, grab a TableArrangement component and drop it into the Screen1 area in the Viewer panel. With this table selected in the Properties panel, set the Width to the ‘Fill Parent...’ option.
We’re going to have four rows in total, and each row has two items (a label and a text box), so we’ll leave the Columns property set to two but change the Rows property to four.
The left column contains our field labels. In the right column there’ll be three numeric-only input fields plus a read-only calculation output field.
Adding Table Rows
Now we’ll add our label and text box pairs as table rows. From the component Palette open the User Interface group and grab a Label. Drop this label into the top-left corner of the table. A blue bar appears to indicate its drop position. In the Properties panel, set the FontSize to 18.0, remove the Hint text and set the Text to ‘Width Resolution (pixels):’.
Now grab a TextBox and drop it to the right-hand of this label. Rename it to ‘WidthRes’, then set the FontSize to 18.0, click on the NumberOnly checkbox and set the Text to 1080. This completes the first row.
To create a second row, repeat this process, dropping the Label and TextBox directly underneath the previous ones. This time, the label’s Text is ‘Height Resolution (pixels):’, the text box name is ‘HeightRes’, and its Text value is 1920.
Repeat this process again for row three, dropping the Label and TextBox directly underneath the previous ones. This time the label’s Text is ‘Diagonal Size (inches):’, the text box name is ‘DiagRes’, and its Text value is five.
Repeat this process one last time for row four. Set the label’s Text to ‘Pixels Per Inch (PPI):’. For the text box, rename it to ‘PPI’ and ensure the Text is empty. Unselect the Enabled checkbox so it becomes a read-only field. To highlight this calculated value, select FontBold and set the TextColour to Blue.
By the way, the default numbers we’ve used relate to a Google Nexus 5 smartphone’s display.
Calc Button
To perform the calculation we’ll need a Button component. Grab one from the User Interface group and drop it directly below TableArrangement1, using the blue bar as a guide.
Rename it to ‘CalcButton’, then select FontBold, set the FontSize to 24.0, set the Width to the ‘Fill Parent...’ option and the Text to ‘Calculate PPI’.
App Code
Now it’s time to start coding, so click on the ‘Blocks’ view button.
The only event we’re concerned about is a button click. From the CalcButton component, grab a brown ‘when CalcButton.Click’ block, and drop it into the coding area.
First we’ll create a local variable. From the Variables group, grab an orange ‘initialise local name to’ block and snap it inside the brown block. This is the diagonal resolution value, so change the ‘name’ to ‘DiagRes’. Finally, add a simple blue Math value block, a zero value is fine.
Note that only blocks inside this local variable block can access the ‘DiagRes’ value.
Pythagoras
The diagonal resolution is obtained from the Pythagoras’ theorem we all learnt at school (goo.gl/8Fg3xE). Hover over the local variable to get an orange ‘set DiagRes’ block. Now grab a blue square root block from the Math group and snap it onto the end.
Next grab a Math addition block and snap it next to the last one. There are two empty holes to fill.
For the first, grab a power of (‘^’) Math block and snap it into the first hole. This also has two holes. The first is filled with a light green WidthRes.Text block and the second with a simple value block set to two.
Repeat this process to fill in the second addition block hole, but this time use a light green HeightRes.Text block.
Now we have the diagonal resolution, the PPI is obtained by dividing it with the display’s diagonal size. Grab a green ‘set PPI.Text block’ and snap it underneath the orange ‘set DiagRes’ block.
We want a whole number to be displayed, so first snap into place a Math floor block. Finally, we just need a division Math block, which contains the ‘get DiagRes’ and ‘DiagSize.Text’ blocks respectively.
All Done
We’ve finished coding, so ensure the warning and error counts in the bottom left are both zero, and carefully check your code against the Blocks View image.
Test with the Connect menu’s Emulator option or with the AI Companion App installed on an Android device.
Next time, we’ll build a sketching app with the flexible canvas component.