Layout Surface Project
Overview of the Layout Editor
By Cara and Ashley and Simran!!!1111
What It Is The layout editor is intended to serve as a mock up device to those who are working on projects like magazines and books. However, it can double as an app that is used for general mock up as well (interior design, web design, etc.) Users are able to take photographs or texts, represented by tags in the physical world, and import them to their mock up by simply swiping them along the Microsoft Surface. In theory, a large database will house these tags but for demoing purposes they are hard coded in. When an image or text has been imported into the layout editor, the user can manipulate them as if they were real objects (slide them, rotate them, scale them etc.) all with their hands. The user can also delete said objects, or lock them into place once they are satisfied with their placement. In the final version of this app, multiple pages will be supported, as well as a text editor.
How It Works
Overall Functionality The main functionality of the layout editor is from the use of a ScatterView and ScatterViewItems. Each new text or picture placed onto a user's mock-up is a ScatterViewIem that is added to the ScatterView. ScatterViewItems are able to be moved and scaled, which allows the layout to be much more dynamic. The user can also lock items and delete them. Rather than using pure ScatterViewItems we have created our own subclass of ScatterViewItems called layout items. This is important because each layout item has its own unique menu and qualities (e.g. being locked).
Menus The items' menus are also built from a subclass. Since each menu must be linked and associated with whatever item it comes from, we created a subclass of listboxitem called layoutmenu. This class simply keeps track of which layoutitem is its parent.
Page Turning Pages of a layout that is more than one page are represented as different ScatterViews kept in a list. Each scatterview keeps track of which layout items it has. Essentially, the program works by saving lists of layout items within a list of ScatterViews.
Saving and Loading Saving and loading are also implemented by simply writing and reading from at text file. The files are represented as such:
Total Number of Pages For each page:
Number of Items on said page For each item on said page: description of said item (e.g. image/text,source,location,orientation etc.)
Grid The grid currently works by allowing users to specify with what precision they would like their items to snap. This is done using a slider. Currently there is no visual representation of the grid, however, we are currently trying to implement this using rectangles.
Currently images and text are hard coded in, we would like in the future for there to be some kind of image/text database that is accessed upon seeing a tag.
No grid is implemented on the Layout Editor Pro, and thus items do not snap or align easily, adding one would not be difficult. One only need create theoretical grid lines and calculate the item's distance from said lines, and see what is closest. It would be best if the user could control the size of the grid, as well.
An undo button would be extremely helpful and could work as simply a list of descriptions of previous moves. E.G. LayoutItem1: Unlock or LayoutItem2: Move TO: point(150,400) FROM: point(500, 750)
Currently you cannot hit "previous" directly after saving. This only occurs sometimes, cause is unknown.
Saving and loading is very buggy on the actual surface, but not in simulation.
What We've Learned
XAML We learned that using the XAML we could create objects, such as scatter views, that directly link to our c# code, and even connect to specific functions, such as clearing all items. However, we also learned that you cannot reference items in the XAML that are dynamically created (e.g. scatter view items). For these we had to use event handlers defined in the C#. In addition to learning about objects created in XAML code, we learned about general interface design using XAML. For example, we learned how to create buttons, backgrounds, grids, etc. and how to connect these static items to our C# code.
Event Handlers Event handlers connect a user's interactions with the interface to specific functions. For example, when you touch and hold a ScatterViewItem, the Eventhandler will call a specific function related to that event (e.g. in our code holding a gesture will call a function called holdGesture). Eventhandlers pass 2 parameters into these functions, a sender (the object touched), and event arguments (information about the thing touching that object). An example of this would be a scatter view item and a finger. The sender is always sent as an object of the C# object class. This can be cast as the more specific and likely desired object with in the function itself. We primarily work with the sender in our code, and do little with the arguments.
ScatterViewItem We learned a lot about the ScatterViewItem class throughout this project. We learned most of its properties and methods, that it must be saved in a scatter view, but most importantly, that they are most useful when dynamically created, and thus cannot be manipulated in the XAML code. We have experimented with position, orientation, size, color, content, and are planning to write our own subclasses of scatterviewitems that correspond to the main uses of our project (text, captions, and images). These subclasses will contain their own properties and methods specific to our program.