Coordinate Explorer (CoordXplore)

Credit: David Wolber, University of San Francisco Summary The App Inventor coordinate system is based on an X,Y grid where X is the horizontal axis and Y is the vertical axis. The upper left corner of the screen is location X=0 and Y=0, or (0,0). The x coordinates get larger as you move to the right and the y coordinates get larger as you move down. CoordXplore is a simple App Inventor demo that illustrates the drawing canvas coordinate system. It outputs the canvas width and height, and also continuously displays pixel location that was last touched or clicked. It also draws various lines and circles on the drawing canvas to demonstrate how you can use the canvas.width and canvas.height to place things in exact locations on the screen. Details To simplify the math, this app first defines several variables. Note that App Inventor allows you to find out the canvas properties canvas.width and canvas.height very easily: radius: the radius of the circles drawn minX, minY: the minimum possible (x, y) location on the canvas, which is (0, 0) midX, midY: the middle (x, y) location on the canvas, which is (max - min) / 2 maxX, maxY: the maximum possible (x, y) location on the canvas, which is (width - 1, height - 1) Drawing the lines and circles can be done based on the above variables. For example, to draw a circle at the very top-left corner of the canvas, we must shift out the minimum x and y point by the size of the circle's radius. Hence, we want to draw the circle at: x = minX + radius = 0 + radius = radius y = minY + radius = 0 + radius = radius If we want to draw a circle at the very bottom-right corner of the canvas, we must shift in the maximum x and y point by the size of the circle's radius. Hence we want to draw the circle at: x = maxX - radius = (width - 1) + radius y = maxY - radius = (height - 1) + radius This tutorial is designed to supplement the discussion during class. You are encouraged to play with this app on your own to discover how to draw the other components. See the animation book chapter for more on the coordinate system. Please note: The app provided below contains screen initialization using a timer, and uses blank images to provide padding around the screen. Before downloading the source code, you should attempt to recreate the basic functionality of this app on your own! Download You can download the App Inventor source code (coordxplore.zip). To view the blocks in Blocks Editor, click "My Projects" and under "Other Actions" select "Upload Source". Note: If your browser automatically unzips the file you'll need to re-zip it (try right clicking the folder and choosing "compress"). App Inventor only accepts .zip files as project source code. You can download the completed app (coordxplore.apk) and just run it on your phone or tablet. An .apk file is an android app file that is ready for the phone (i.e. "compiled").

---

Return to Module 2, Lesson 1.