APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the...
Transcript of APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the...
![Page 1: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/1.jpg)
1
APP Design (Day 4)
● Review● Drawing on Canvas● Taking Photos● Saving Results● Start on your Project!
![Page 2: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/2.jpg)
2
Review
Problem Solving Approach
1) Problem Selection
2) Understand the problem
3) Define the problem
4) Ideate (...think of a solution)
5) Prototype
6) Test!
![Page 3: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/3.jpg)
3
Review
● TinyWebDB– Stores values on the internet– Identify values using a “tag”– Anyone can retrieve values if they know
the tag– Can be used to share data across phones
Store values on the internet
Retrieve values using the tag
![Page 4: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/4.jpg)
4
Problem Selection
● Need some way to mark out which seeds are planted where
![Page 5: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/5.jpg)
5
Understand the Problem
● Gardeners plant many different types of seeds in a single plot
● Plants have different nutrients and water requirement
● Easy to forget where each seed is planted
![Page 6: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/6.jpg)
6
Define the Problem
● Need a way...– to take a photo of the plot– mark out the location of each seed type
![Page 7: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/7.jpg)
7
Ideate
● Create an app that...– Takes photos– Allows drawing on the photo– Support different colors– Support saving to file
![Page 8: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/8.jpg)
8
Prototype
● When prototyping, don’t try to do everything at once
● Add features in gradually
![Page 9: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/9.jpg)
9
Today’s Project
● Photo + Drawing App– Take photo, draw on photo, save to file
● Steps
1) Draw on canvas
2) Add drawing options
3) Take photo and add to canvas
4) Save to file
![Page 10: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/10.jpg)
10
1) Draw to CanvasAdd in...
● Canvas
● Set width and height to a reasonable value (up to you)
![Page 11: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/11.jpg)
11
1) Draw to Canvas
When the “dragged” event occurs... DraggedUser touch and drag finger across canvas
...draw a line from the previous x / y coordinates, to the current x / y coordinates
Test it out on your phone!
![Page 12: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/12.jpg)
12
2) Add Drawing OptionsColor options
● Add Spinner
● Set some options (Feel free to add in more)
![Page 13: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/13.jpg)
13
2) Add Drawing Options
The “AfterSelecting” event is triggered after you have made a selection on the spinner
Check which is the selected color...
...and set the canvas paint color accordingly
![Page 14: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/14.jpg)
14
2) Add Drawing OptionsLine width option
● Add Slider
● Set...● Width● MaxValue● MinValue● Optional: Starting
ThumbPosition
![Page 15: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/15.jpg)
15
2) Add Drawing Options
The “PositionChange” event is triggered when you change the slider
Set the canvas line width based on the slider position
![Page 16: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/16.jpg)
16
2) Add Drawing OptionsClear Screen Button
● Add Button● Change the text to
“Clear Screen”
● Optional:● I’m using a
HorizontalArrangement to make the layout neater
● The Spinner and Button are both placed inside the HorizontalArrangement
![Page 17: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/17.jpg)
17
2) Add Drawing Options
When the button is clicked...
...clear the canvas
That’s it for adding drawing options!
Test it out on your phone before moving on to the next step.
![Page 18: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/18.jpg)
18
3) Take Photo and Add to CanvasAdd...● Camera Component
● This is a non-visible component and will not appear on screen
● Button● Set the text to “Take
Photo”
![Page 19: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/19.jpg)
19
3) Take Photo and Add to Canvas
When the button is clicked...
...take a photo
When the photo taking is completed...
...set the canvas background image to the photo
![Page 20: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/20.jpg)
20
3) Take Photo and Add to Canvas
Caveats...● Images may be rotated
– Most phones take photos only in landscape mode, but adds a tag to the photo indicating the correct orientation.
– App Inventor does not read this tag, and will get the image orientation wrong
– Workaround this by always taking photo in landscape mode
● Image may be stretched– App Inventor will stretch the image to fit the canvas– Workaround this by changing your canvas size to suit the
image
![Page 21: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/21.jpg)
21
4) Save to FileAdd...● Button
● Set the text to “Save”
● Optional:● Add a notifier
component● You can use this to
display the saved filename
● Don’t need this if you don’t care about the filename
![Page 22: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/22.jpg)
22
4) Save to File
When the button is clicked...
...save the canvas image to a file
Save CanvasThis function will return the filename used. If you don’t need to know the filename, you can use “evaluate but ignore result” to run it.
Alternative:Use the notifier component to display the filename on screen
![Page 23: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/23.jpg)
23
Install App to Phone
● So far, we have been using AI Companion– Good for development (changes updates
immediately)...– ...but need to connect each time before
using the app
![Page 24: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/24.jpg)
24
Install App to Phone
● Installing on the phone...– Don’t require AI Companion– Can launch directly from phone without
connecting to computer– Can send apk to other users.
Choose either QR code or save to computer.
Save to computer if you want to send your app to others
![Page 25: APP Design (Day 4) - A Posteriori€¦ · – App Inventor does not read this tag, and will get the image orientation wrong – Workaround this by always taking photo in landscape](https://reader035.fdocuments.us/reader035/viewer/2022081405/5f09c3867e708231d428651c/html5/thumbnails/25.jpg)
25
Polishing Up
● The app works, but is really rough and simple. Can you add in…– A way to draw text on the image– Display saved images in the app– Rotate photos to the correct orientation
● Bonus Challenge– Small gaps appears when drawing thick
lines. Figure out why they happen and how to eliminate the gaps