Social Icons

Responsive Design: Drag a Canvas larger than screen size

Submitted by Karen on

This is a guest blog by MIT Master Trainer Emile Wong

One day, when I put the keywords “Responsive design in App Inventor” in a web search, Google returned a page from MIT, other App Inventor Features references. The page suggested some important rules and common approaches to responsive design. The article also included a hyperlink to a forum post with an example which demonstrated that a Canvas could be dragged. The post provides a project aia file for download. I tried the downloaded project, and would like to share the mechanism behind it with others here.

I created a simplified and modified application based on the downloaded project and explain it here.

Running the application

When the application runs, the screen is initialized, and a picture is displayed on the screen as in figure 1.



Figure 1 Initial screen


When the user touches the screen, a popup notification will be shown, and users have options by clicking the appropriate buttons as in figure 2.


Figure 2 When the screen is touched


When the user clicks on the “Zoom In” button, the picture will be enlarged 2 times its original size in both width and height. The picture will display only the center part of the picture as in figure 3.


Figure 3 Display the picture 2 times larger


The user can drag anywhere on the screen to view different parts of the picture as figure 4 and 5.


Figure 4 Dragged to the top left corner




Figure 5 Dragged to the bottom right corner


When the user clicks on the “Help” button in figure 2, a notification shows the instructions.


Figure 6 Show instructions

Design Overview



Figure 7 shows the outline of the Components used in the project


In the Designer, add the following components into the Viewer.

  • WorkArea: vertical arrangement as working area
  • Y_Controller: vertical arrangement inside the working area as height controller
  • HorizontallArrangement1: horizontal arrangement inside the working area as a container
  • X_Controller: horizontal arrangement inside the horizontal container as width controller
  • PictureCanvas: A Canvas displays the picture
  • Notifier1: a Notifier

On Screen1, change the default settings of the following properties.

  • AlignHorizontal set to “Center”
  • AlignVertical set to “Center”
  • Sizing set to “Responsive” as in figure 8.



Figure 8 Sizing properties of Screen Component


Upload a picture to Media as the application’s asset which will be packaged with the application as in figure 9.


Figure 9 Upload a picture to display

Blocks Overview



Figure 10 Define the global parameters and prepare the initialization of the screen when app first runs

Global Parameters

  • DisplayAreaHeight – store the Screen width
  • DisplayAreaHeight – store the Screen height

Procedures

  • Initialize: The procedure will be called when Screen1 is initialized. The procedure sets the width and height of the components WorkingArea, X_Controller, Y_Controller, PictureCanvas as in figure 10.
  • ZoomIn: The procedure will be called when the user chooses to enlarge the picture. The width and height of the PictureCanvas will be 2 times bigger then the screen size.



Figure 11 Procedure ZoomIn

  • Help: The procedure shows instructions in an alert when it is called as in figure 12.



Figure 12 Procedure Help

Events and Actions

  • When the PictureCanvas is touched, it will determine if the canvas size is the same as the screen width or 2 times the screen width. An alert shows two buttons for users to choose.



Figure 13 when PictureCanvas is touched, an event will occur

  • After the user picks an option, the related procedure will be called.
    • When Zoom In is picked, the procedure ZoomIn will be called and the picture will be 2 times bigger and only part of the picture will be displayed on the screen.
    • When Zoom Out is picked, the procedure Initialize will be called. The screen will return to its original settings as when the app starts.
    • When Help is picked, the procedure Help will be called to display an alert to shows the instructions.



Figure 14 After an option button is clicked by the user, it will call the related procedure

  • When the PictureCanvas is dragged, and if the screen size is 2 times larger than the screen width, users can drag the picture to display different areas.



Figure 15 Event for dragging the picture

How the application works?

When the application is initialized, the application creates a virtual working area that is 3 times larger than the actual device screen size. It uses a vertical arrangement as a Y_Controller, and a horizontal arrangement as an X_Controller. The canvas size will be the same as the screen size. It will be displayed at the center of the working area as in figure 16. The Canvas’ background is set to the picture name you want to display.



Figure 16 Initial screen layout


When the user chooses to zoom in the picture, the canvas width and height will be set to 2 times the screen size. The screen is not enough to display the whole picture. It can only display ¼ the center area of the enlarged picture. By adjusting the height of Y_Controller and the width of the X_Controller, the controllers can move the canvas around the working area. The application gets the start position and the current position when the user drags on the screen. The related dragged distance will be added or subtracted from Y_Controller and X_Controller as in figure 17.


Figure 17 The layout when zoomed in

Summary

The application demonstrates that Canvas and Arrangement components of App Inventor can be set to larger than the screen size. By controlling a virtual spacer on a virtual working area, the application can manipulate a canvas and the canvas can be dragged. By applying responsive design in the project, an application can be creative. Please also note that I can only run this application on a device and emulator with Android 8.0 Oreo, and I tested the app on a Android 7.0 emulator and an Android 4.4 device, but it does not work.

Reference

http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html
https://groups.google.com/forum/#!category-topic/app-inventor-developers-library/other/hkt7gyMO2nU