Zooming

When zooming in and out of a workspace, many users expect the scale of elements outside of the workspace to remain consistent, as well as a way to control where the viewer is centered.

The existing mechanism for zooming with the blocks editor is a feature provided by the browser, which offers limited control for users and scales everything within the browser window. As you can see in the video to the right, there is no way to control where the blocks in the workspace will appear when zooming, besides manually dragging the blocks or workspace.

The current method offered for zooming can be especially disorienting and frustrating for users with substantial projects, where zooming out to see the entirety of a program can make the side bar obsolete in its small size, and trying to zoom in to a particular area of code can be almost impossible.

The demo above is with a test case created to ensure accurate centering with zoom, but here you can see that with an actual, complex program, being able to zoom in and out while controlling the center point of the viewer makes a substantial impact in App Inventor's user interface. Users can clearly see the larger picture of their program and how it works together, and can navigate to any particular block with ease.

Future work includes integrating this zooming feature with a search feature, so that users can zoom in to blocks that match key words or phrases. There is also much to be done to improve zooming in general and how it works with other aspects of App Inventor.

This summer, Jacqueline expanded upon a zooming feature started by a previous student, Shirley Lu. As you can see in the video to the left, the zooming functionality now allows users to select a particular block they would like to zoom to, and centers it in the viewer while the scale of the workspace is changed.

When a block is not selected, zooming defaults to the center of where the viewer is currently located in the workspace.