HTML5 Canvas Grid Space + Drawing Sample

Create a paneled interface using [login to view URL] that is similar to: [login to view URL] (clickable bottom entities) The slide deck has three panels Form, Draw Canvas, Spotlight Canvas. The contents of which are described below: <b>Form</b> The form should have the following field groups and should be styled after: [login to view URL] The form will have inputs that control the sizes of the two canvases below. Details of the form fields and their behavior are in details (rand out of space). <b>Draw Canvas</b> The Purpose of the Draw Canvas is to display a 2D grid of cells and to allow the user to draw cells of different colors. Consider two types of cells - open and block. Open cells should be color: openColor and block cells should be color blockColor. The user draws by holding down either the left or right mouse button and moving the mouse over the draw canvas. (openColor should be the color the gray in the foursquare link above and blockColor is the color of the light blue, please see that page for details). </b>Spotlight Canvas</b> The purpose of the spotlight canvas is two fold. 1) To see a scale view of the whole map and 2) To allow the user to quickly short cut and change the location of the cells visible in the draw canvas. The spotlight canvas displays ALL cells in scale. As the user draws, the spotlight canvas should update as well (in scale) with the same color scheme described above. When mousing over the spotlight view we should see a translucent yellow rectangle that represents the scale view of the draw canvas. This lets users know where they are positioning their draw view. Mousing down over the spotlight view causes the view location of the draw canvas to change. The location of the draw canvas should always be illustrated on the spotlight canvas with a transulcent green rectangle. When the location changes, the green rectangles position should move and the draw canvas view should update. *Additional functional details in "details" ## Deliverables Create a paneled interface using [login to view URL] that is similar to: [login to view URL] (clickable bottom entities) The slide deck has three panels Form, Draw Canvas, Spotlight Canvas. The contents of which are described below: Form: The form should have the following field groups and should be styled after: [login to view URL] Draw Canvas Size Width Height Default values: 1000 and 1000 Spotlight Canvas Size Width Height Default values: 100 and 100 World Size World Width World Height Defaults: 500x500 Cell Size: Cell Width Cell Height default 30x30 Draw Type (radio button): Carve (Desc: Default cell is no-move and you are drawing/carving out movable regions) Raise (DescL Default cell is movable and you are drawing/raising up non-movable regions) Default: carve Explanation of Form Values: 0) Canvas Size - Indicates the actualy W/H of the draw canvas 1) World Size - Indicates the number of cells (w/h) the world will consist of 2) Cell Size - Indicates the draw size of an individual cell 3) Draw Type - Indicates that when we draw (see below) the type of cells we draw and also the type of cells that make up the rest of the world 4) Draw Canvas - This is the main canvas the user will draw on The form should not require a "submit" function. Editing the form should trigger validation (names should turn red if invalid) and should update the world (see below) when a valud entry is entered. The other panels are: Draw Canvas, Spotlight Canvas. These are both Canvas the sizes specified above. They are described here: --Draw Canvas-- The Purpose of the Draw Canvas is to display a 2D grid of cells and to allow the user to draw cells of different colors. Consider two types of cells - open and block. Open cells should be color: openColor and block cells should be color blockColor. The user draws by holding down either the left or right mouse button and moving the mouse over the draw canvas. (openColor should be the color the gray in the foursquare link above and blockColor is the color of the light blue, please see that page for details). The number of cells that should be visible in the grid is based on the size of the cells and the size of the draw canvas (max). The draw canvas displays a snippet view of the world where the cell in the center of the canvas is the "cell origin" (referenced below). When the grid starts out all cells are either openColor or blockColor. If the DrawType is Carve, all cells start at blockColor and the user draws in openColor. If the DrawType is Raise, all cells start at openColor and the user draws in blockColor. If the user is holding down the left mouse button you should draw the opposite type (as described above) color of the world (block vs open). IF the user holds down the right mouse button this is an "erase" and it should draw the same color of the world cells (block vs open). For example if the draw type is carve, the left mouse button draws in openColor and the right mouse button draws in blockColor, but if the draw type is Raise then the left mouse button draws in blockColor and the right mouse button draws in openColor. (bonus requirement) If a user draws a fully enclosed shape, like a rectangle and then double clicks inside the rectangle the rectangle should be filled. If the user left clicks, it should be filled with the opposite color of the world cells. If the user right clicks it should be filled with same color as the world cells. If you cannot locate a fully formed shape, alert box stating this. As you draw an array grid Array[xposition][yposition] should be updated with 1 or 0 for the cell type (open or block). I'll need to json serialize this later. --Spotlight Canvas-- The purpose of the spotlight canvas is two fold. 1) To see a scale view of the whole map and 2) To allow the user to quickly short cut and change the location of the cells visible in the draw canvas. The spotlight canvas displays ALL cells in scale. As the user draws, the spotlight canvas should update as well (in scale) with the same color scheme described above. When mousing over the spotlight view we should see a translucent yellow rectangle that represents the scale view of the draw canvas. This lets users know where they are positioning their draw view. Mousing down over the spotlight view causes the view location of the draw canvas to change. The location of the draw canvas should always be illustrated on the spotlight canvas with a transulcent green rectangle. When the location changes, the green rectangles position should move and the draw canvas view should update. Use Cases: Form: Draw Canvas Size - text input Validated as Numeric Change the size of the draw canvas Spotlight Canvas Size - text input Validated as Numeric Change the size of the spot canvas World Size - text input Validated as Numeric Create a grid of cells [x]by[y] All cells should be undefined Do not destroy what the user has draw Increase or decrease the number of cells in the world based on the users input Update the Spotlight canvas accordingly Cell Size - text input Validate as numeric Save the values for use later update the spotlight canvas accordingly update the draw canvas accordingly Draw Type - Set a bool flag for draw type Invert the cell colors (see block cells vs open cells below) in the draw + spotlight canvas This will essentially tell us that undefined = 1 (open) or 2 (block) Draw Canvas: Displays the current view of the world Where the current view of the world is the number of cells that can fit in the current canvas view When a user left mouse downs and drags the mouse Draw cells of a given type and color following the users mouse When a user right mouse downs and drags the mouse Draw cells of the inverted type and color followin the user mouse When the user reaches and edge of the canvas move the current origin cell position by 1/2 the number of cells to the direction the mouse is moving If the user is at the edge of the "world" show this by drawing the cells as having a red X in them As the user draws, update the World array to 1 or 0 depending on what is being drawn. Spotlight Canvas: Displays the entire world in scale to the draw canvas. Ie, all cells in the world draw to scale Mousing over the spotlight canvas shows a yellow translucent rectangle that represents the scale view of teh draw canvas. It is the size of the draw canvas to scale Mousing down sets the Draw canvas to the position of the yellow rectangle The draw canvas updates