Embedded Files
In this project, you are going to use App Inventor to create a bitmap file size calculator.
Step 1: Identify the Input. Process, and Output of the app
Before actually making the app, we have to know what the input, process and output (IPO) of the app will be. We can make a simpe IPO chart for the app.
Step 2: Design the interface and components
After you have identify the IPO of your app, you can start planning the user interface and the components in the app.
For the input, you need three labels, three textboxes and a button for users to input the colour depth, width in pixels and height in pixels.
For the process, you need to work on the code.
For the output, you need three labels to show the resolution, file size in KB and file size in MB.
1. Set up the background image:
(1) Upload an image to Media
(2) In Screen1 Properties, set the image you just uploaded as the background image.
2. Set up the components for user input:
(1) In Layout, drag a TableArrangement to the screen, then set the TableArrangment properties to 2 columns and 3 rows:
(2) In User Interface, drag a Label into the table;
In Components, rename the Label1 as "Colour_depth";
In Properties, set the text as "Colour depth:". Change other properties as you like, e.g. BackgroundColor, FontBold, FontItalic, FontSize, TextColor, etc.
(3) In User Interface, drag a Textbox next to the label "Colour depth:";
In Components, rename the Textbox1 as "Colour_depth_input";
In Properties, set the Hints as "input number only" and set the Text as blank. Then change the properties as you like, e.g. BackgroundColor, FontBold, FontItalic, FontSize, TextColor, etc.
(4) Repeat the above step (2) and (3) to finish the table as follows with 6 components in the table:
(5) In User Interface, drag a button and put it below the table;
In Properties, change the text as "Calculate the file size". Change other properties as you like.
3. Set up the components for showing the results:
Referring to the above steps, make another table and put the components inside to show the calculating results.
4. Set up the app's title
Drag a label to the top of the table;
Rename the label as "Title" in Components;
Change the text as "Bitmap File Size Calculator" in Properties. You can then change other properties as you like.
5. Change the alignment setting
In Properties of Screen1, you can change the alignment setting in AlignHorizontal and AlignVertical.
Step 3: Design the logical flow
We need to process the input with command blocks. Think about the work flow. In this app, after the user types and submits the data of colour depth, height in pixels and width in pixels, the app reads from the textbox. Then, it will change the text in "resolution_result", "KB_result" and "MB_result" to the calculated outcomes as output. So the logical flow for the app will be:
1. When "button" is clicked
Go to "Blocks", click "Button1". Drag the block "When Button1.Click" into the right space. When Button1 is clicked, it runs the actions of the embedded blocks added in later steps.
2. Set text in "Resolution_result" as calculated outcome + "pixels"
(1) In Blocks, click "Resolution_result".
Drag the block "set Resolution_result.Background to" and place it inside the previous block.
Change "Background" into "Text".
(2) In Blocks, under "Text", drag the block "join" and put it at the end.
The block "join" can join two components together, one is the calculated outcomes, another one is the word "pixels".
In "Text", drag a blank text block (" ") and append it to the lower end of "join" block. Input " pixels" (with a space at the beginning) in the text block.
(3) Now apply the formula of calculating the resolution: resolution = height in pixels x width in pixels
In "Math", drag the block (" " x " ") and append it to the upper end of "join" block to form a multiplication formula.
In "Height_input", drag the block "Height_input.Background" to the first empty space of the multiplication formula. Then change "Background" to "Text".
Duplicate the block "Height_input.Text" and put it to the second empty space of the multiplication formula. Then change "Height_input" to "Width_input".
(4) Challenge yourself:
Now, can you apply the above skills and finish setting the text of "KB_result" and "MB_result"?
Step 4: Bonus
Below are some refinements you can do to your app. Try by yourself.
(1) How can you set the textbox to allow users input numbers only?
(2) How can you round off the calculated results to integers?
(2) If we change the textbox of "Colour_depth_input" as a checkbox for users to choose one instead of typing by themselves, how can you do it (you can ignore the programming part first if it is too difficult)?
Page updated
Report abuse