I have decided to created an application where users can add or 'pin' stuff onto a board, and organize stuff on a board - a Dreamboard.
I started with a basic layout, with a header, two columns and a footer. As I wanted to allow as much customization and personalization as possible, I have incorporated a prompt box in which the user can key in their name, and the header will reflect their name. Further, in line with the theme of "dreaming", I have also included inspirational quotes at the footer. These inspirational quotes change randomly every time you refresh the page, and this was simply done using an array to store the various strings of quotes, and the use of the Math.random and Math.floor functions. Background music (free-to-use, from Soundcloud) was added and looped using Javascript.
With regards to what the user can actually pin onto the board, the objects come in three forms.
Each of these come in the form of clickable buttons on the toolbar on the right of the webpage. I have used mouseover events to change the opacity of the buttons to let the user know that these are clickable.
When clicked, the script will run and add the object to the board, where the user can drag and move the objects around as they wish. This is done using the mousedown, mousemove and mouseup event listeners. When the objects are moved, the opacity is reduced to let the user know that they are moving that particular object.
Post-it Notes with Text
For the post-it notes, users can customize (1) the text to be written on the post-it, (2) the color of the post-it, and (3) the size of the post-it.
The trickiest part to deal with was text. The text was a separate raphael object from the post-it note object, thus several issues came up. First, the raphael.js library did not have any methods that I could use to wrap the text in order to fit within the size of the post-it. After some research, I across a raphael-paragraph library developed by jbreckmckye that would allow me to ensure that the text would fit within the post-it. Second, the movement of the text had to be in sync with the post-it. To do that, I used the raphael .set function to group the two objects together so that when the user drags the post-it, both the text and post-it moves smoothly. I had wanted to create each set of text and post-it note as one object in an array so that we can track each set, but was unable to do so. If I was able to do this, it could be possible to incorporate an "undo" button, where the user can undo previous actions. This may be something to consider for future developments.
For the color, I have used the HSL format to set the color. The color of the click-to-add post-it button will change to show the user what color the post-it would be, since we assume that an ordinary user will not understand how the hue, saturation and lightness values will affect the color.
The size of the post-it can also be manipulated by the user using the size slider. The size value in pixels is shown beside the slider so that user has a rough gauge of what the size will be. The maximum size has been set to 300*300px.
In the movement of the post-it notes, event listeners were added to the post-it and text set instead of the background to allow the users to move the set over other objects on the board. However, I concede that they are weaknesses to this as sometimes the mouse is moved too quickly (and hence moved off the set). Another alternative I considered was creating a new transparent background rectangle everytime a new object was added, but this backfired because this meant that objects that were previously added to the board can no longer be moved.
Stickers
There are 3 stickers that the user can choose to pin to the board - a red heart, the like button and a yellow star. For these stickers, I did not make the size and color manipulable.
Images
Users can also add images to the board by copying the image URL and pasting it into the text-box provided, before clicking on the add image button. The size of the image is manipulable by the user through the use of the slider, in which the user can select between a scale of 5% to 100% of the original image size. I did not provide for scales of more than 100% as this could result in a reduction of the image quality.
Dealing with the size was challenging, as there could be times where the source image's size is bigger than the canvas. I used if functions to rescale the image size to ensure that they will be able to fit onto the canvas.
I wanted to include an option where the user can also upload their own images from their computers and add them to the board, but was unable to figure out how to do so.
Finally, there is also a clear button at the bottom of the tools column, where the user can clear the entire canvas.
For future further development of the application, I could include a button which allows the user to share their completed board or save it as an image to their desktop.