Final Outcome

Now that it is the last day before the deadline I decided to re-run the functions to make sure they are all working to the extent that I have coded them to. I am not implementing anymore code or designs as I do not want the project to encounter problems that might not be solvable before my assessment tomorrow. I am disappointed that the functionality of the project is basic although it is only a prototype. I would have like for the entire project to be on one application but due to pre-occurring errors this was not possible therefore I plan on joining the sections at a later stage. The design is plain and dull unfortunately the issues of errors did affect the design process especially the use of colours leading to a bland looking interface. The conflicts within the code resulted in separate applications in order to display the various multimodal functions  that worked due to this the project as a whole did not interlink together. The time frame to learn a whole new code language was short and therefore I struggled to code various areas thankfully Adam was a great help in explain various functions and terms that were important within my project. 

Overall the outcome has been a success as I have taken on board a new form of code that I had never come across before and attempted to create a prototype application. Although the initial plan was not fully successful I must acknowledge the constraints I encountered and other commitments to projects. Learning a new code language was challenging but opened up my skills to another area of design and functionality that I had not undertaken before.  The aim of the project was to create a multimodal prototype which I did by implementing a camera and canvas for users to interact with. The project development will not end here throughout my rare free time whilst I complete my major project I will attempt to enhance the project in order for it to be at a higher standard. Purpose of this is not only to further enhance the skills I have learnt but also make it presentable in order to display it within my portfolio website and in our end of year show. 

Colour Picker on the Canvas

Once I managed to achieve some functionality on the canvas I decided to attempt the colour picker tool in order for users to be able to choose a colour to draw with. In order to do so I followed various tutorials on action script and Flash but just like the canvas implementation I came across many errors and conflicts. 

Within the image below the functions had a conflict where they did not have a body, this was resolved by using curly brackets for each of them. As you can see something as simple as a missing curly brace can affect the code and overall functionality. 

Within the code I created an actionscript file where I have created a Bindable selecting specific colours that I have mentioned. I chose specific colours as I was testing out the code there wasn't a specific reason why I wanted just a small set. 

Within the mxml document I imported the action script file, in order for the bindable to run within the application. 

Final Canvas Output

Below I have displayed the final output of my canvas as you can see the overall function works, users are able to draw doodles. 

The image below displays the colour picker once the user has selected it, as you can see I have provided a large range of colours. Unfortunately the code implemented does not apply the colour change that the user has selected therefore the colour picker is not fully functional at this stage. 

After trial and errors I have been unsuccessful in completing the draw canvas to my original expectations as only one colour is functional at this time. I was able to change the line colours within the back end code therefore not being useful to the user as they cannot change the colour themselves. I feel that the functionality is there I am just missing a minor section that links the canvas and colours picker in order for them to work together. 

Sources

Adobe.com. n.d. Adobe Edge: February 2010 - Getting started with Adobe Flash Builder 4. [online] Available at: http://www.adobe.com/inspire-archive/february2010/articles/article2/index.html [Accessed: 11 Feb 2014].

Blogs.adobe.com. 2010. Spark DateField and ColorPicker. [online] Available at: http://blogs.adobe.com/aharui/2010/01/spark_datefield_and_colorpicke.html [Accessed: 9 Feb 2014].

Codebabble.com. 2014. Customizing a Flash Builder component. [online] Available at: http://codebabble.com/flash-builder/customizing-a-flash-builder-component [Accessed: 9 Feb 2014].

Extension Time

Due to unforeseen circumstances within the university I was entitled to an extension which I did not consider taking until I came across a large amount of errors. During the extra week I decided to attempt to enhance the canvas I had created previously by adding a functional colour picker. This was to allow users using the system to choose their own colours of preference to draw on therefore another way of making the interface user friendly and in a way customisable. This process has been explained within the follow blog post. 

PowerPoint Presentation

My assessment consists of the process undertaken in order to produce the functional prototype, here I decided to develop a presentation in Power Point in order to show the development process and conflicts encountered within the application. Although the blog contains the in depth information and research it is a large amount of information to project altogether therefore a presentation structure will keep it simple and to the point. 

Within the Presentation I will discuss the following:

• The Project: remind my peers what the project is
• Development Process: discuss the methods undertaken for each section of the project  and problems found along the way
• Future Work: The initial plan of the project has not been successful due to time constraints therefore I will discuss what I aim to enhance for the end of year show

Further Implementation of the Drawing Canvas

Since the previous tutorial was not as detailed regarding the user interactivity I decided to look further to see if I could develop some user implementation. I came across another video tutorial that focuses on Flash and not Flash builder although this should not be a issue as they are using ActionScript. 

Within the tutorial the video explains ways to change colour, line thickness and forms of deleting the drawing. This form of guide is more appropriate for my project although due to slight difference within the program functionality I have come across numerous errors that need to be dealt with. An on occurring presence of errors related to conflicts within the code that is already integrated within Flash Builder. I came to the decision to look at a previous action-script canvas documents completed during a class tutorial on Flash. This method was much more helpful as I was familiar with the structure implemented.

Problem Solving
The code I used as an outline of what was need was useful in helping me develop the canvas although I found many conflicting errors within Flash Builder. In order to get a functional canvas I had to replace various sections with a different order of code. The image below displays both the original and replacement code, I decided to keep both in order to show my progress and failed attempts at creating the function.  

I found that a large amount of the conflicting code was a result of elements being placed twice, by this I mean that Flash Builder has various components already integrated within the program that do not need to be coded again. As you can identify within the code various sections are display under a private function, this merely states that the function is only for internal use and users have no need to access it. 

Sources
Qamar, Z. 2011. DRAW ON CANVAS IN AS3. [video online] Available at: http://www.youtube.com/watch?v=ZmYlaFtIH0Q [Accessed: 11 Feb 2014].

Nocircleno.com. n.d. Graffiti - ActionScript 3 Bitmap Drawing Library. [online] Available at: http://www.nocircleno.com/graffiti/ [Accessed: 11 Feb 2014].

Make A Sketch Pad In Flash. 2011. [video online] Available at: http://www.youtube.com/watch?v=pDlJwCHifzo [Accessed: 11 Feb 2014].

Issues with Previewing XML Documents

During the process of tackling the ongoing presence of such lovely errors I came accross another issue. It seemed that the program struggled open the documents to preview even though the errors had been tackled. This is a major problem for the presentation day as I need to make sure that this is not the case.

I  changed the configuration to display on the web instead of as a desktop application. This method was a success as I was able to test and view the functions I had created. Although this preview was a problem it was a minor issue compared to the rest. 

Encountering Problems

After the endless presence of errors within the code I felt that I was not getting anywhere regarding the functionality of the project therefore I decided to separate the files. I created separate flex projects for each of my multimodal functions in order to test and run the code separately. This method proved to be successful as I managed to get the camera working without any major issues. Before the presentation of the project I informed Adam of my decisions to separate the code as I wanted to make sure that the change of methods was acceptable luckily it was. 

Camera
Implementing the camera code in a separate application provided the ability for the code to work and not clash. The application was functional although at this point in time it runs quite slow. 

Canvas
The implementation of the canvas code within a new application document was beneficial in detecting errors within that own section. Although this method has been useful I encountered a long-winded and frustrating process of detecting the most annoying errors EVER!!!!!!!

This is how I felt...

I decided to leave the comment out code within my project as it shows my various attempts at developing the functionality. Now that I have managed to fix the major problems I decided to begin developing the Power Point Presentation where I will explain the process of how I created the project. 

Camera Input

Due to the time constraints I decided to implement a simple camera to capture still shots in order to have a varied amount of multimodal features within my project. I used text tutorials to develop the function but I still came across many errors, I used the Android UI website as a guideline. Unfortunately when it came to implementing the code i found that websites such as Stack Overflow are very useful but do not cover the initial basics which is what I need. Within researching camera input tutorials for action script I came across a familiar website tutsplus.com. I have used t website to learn photoshop and illustrator methods of design but I have never used it for coding implementation. The website explains how to create a camera function from beginning to end, I found this tutorial much more effective as explanations of what was occurring were present; its good to be able to code but understanding the process makes it easier to tackle errors. 

Code

Within the code of the camera I have allocated various functions in order to perform various tasks for the user. Before implementing any camera functions it was important to link the code to a camera in this case I was going to use the web cam on my laptop. 

The get cam function is followed by the code of the capture button that takes the image and displays it within the camera view area as a preview section, useful for the users to see the image that they have taken. I then implemented a save and cancel option allowing users to save or cancel the image. The save button is currently not fully functional as it requires a server and connection to a server to store the images. Ideally when the app is complete the image will either save within the app or within the users technological device. 

Design

The design is basic, this is a result of clashing errors between design and functionality implementation. I decided to ignore the design as the most important aspect is the functionality. 

Output

I run the code on the web to see if there was some functionality working. Before being able to preview the application I came across a message notifying me that the code was trying to access the camera. I selected accepted from the options in order to view the results of my code.

 

Luckily after separating code from one another I had a working model as no other errors or conflicts were interrupting the functional ones. The image below is a print screen of the input camera working, at this time I wasn't looking my best so I decided to give my Alien a selfie:

Sources

Developer.android.com. n.d. Color | Android Developers. [online] Available at: https://developer.android.com/design/style/color.html [Accessed: 1 Feb 2014].

Ahmad, B. F. 2012. flex - Attach Camera with Flash Builder 4.6 - Stack Overflow. [online] Available at: http://stackoverflow.com/questions/10637718/attach-camera-with-flash-builder-4-6 [Accessed: 2 Feb 2014].

Scanferla, G. 2010. Create a Snappy Snapshot App with Flash Builder 4 - Tuts+ Code Tutorial. [online] Available at: http://code.tutsplus.com/tutorials/create-a-snappy-snapshot-app-with-flash-builder-4--active-3943 [Accessed: 3 Feb 2014].

Design Process

Now that I have experimented with the program Flash Builder I decided to recreate the homepage mockup. I used the existing apps I researched and analysed as a sample to be able to develop a layout that will also be appealing and user friendly. I also followed the website Android Developers where they advise design features.

Below is the homepage design I have come up with and some of the features it will include. I decided to stick with the neutral background of mainly consisting of light greys and whites because they are less distracting and overwhelming for the user especially if they have never used the interface before. 

Home Page

I decided to alter the original colours I implemented in the previous design process as I wanted to follow patterns found within existing applications. The Android UI website provided me with colour samples, within the website it recommends to keep to using one solid colour but in varied shades (light and dark). From the previous research undertaken I decided to use blue for the main application colour scheme. This is a result of the previous research undertaken on colour blindness where blue was the rarest form found within individuals.  

Sources
Developer.android.com. n.d. Color | Android Developers. [online] Available at: https://developer.android.com/design/style/color.html [Accessed: 31 Jan 2014].

Drawing Canvas

In order to create a canvas I used a YouTube tutorial as a guideline, the video explains how to create a canvas and draw elements. I found the code and process straightforward although a problem encountered was the lack of information the video provided. The tutorial only covers how to create it and produce a line on the canvas but this is not the purpose of the project. I need to produce a canvas that allows the users to select various colours and create their own images. 

Below is the canvas produced from the guidelines of the video as you can see the code has specified what the canvas should display. In order to make this section of the project multimodal I will need to alter the code already implemented to allow the user to draw. 

Sources
http://www.youtube.com/watch?v=mAUD8h6B_7g

Familiar Icons

Within the design process colour and placement of icons are not the only important aspect of the design process. The previous research highlighted the importance of using the same type of icon design as it is familiar to users therefore keeping to a user friendly and appealing interface. Within the Android UI website samples of button images and actions are provided for users, at this point in time I have decided to use the sample images within my project. I felt that it reduced the design section in order for a larger focus on the functionality although if there is enough time left I will develop my own icon images based on the sample ones used so far. 

Logo Design and Name

Looking at the previous research I came across various logo designs but the main similarity was that they were all basic. Some logos had a simple image although most seem to use text with a simple looking font (Roboto) then again keeping it lightweight for a mobile application. 

I experimented with various names, the aim was to keep it simple and to the point in order for the potential users to have an idea of what they can do with the app. At the beginning of the development process of the application I used the word "note" as a basis but I knew that it had to be changed. I went through various stages of logo names such as note doodle, capture note and sketch note these all described some of the features of that the application contained which was the main purpose although I did not choose any of these.

Sketch Note Logo
The sketch note logo consists of two font styles to separate both words. The word sketch uses a handwritten form of font (Chalkduster) where it gives the illusion that it has been written with a piece of chalk. I decided to use a simple and block font (Gill Sans MT) for the word note. I decided to separate the fonts to add some variety without the need to add any images or colours.  

Capture Note Logo

I decided to use a simple font (Arial) style for the capture word I then used a handwriting style font (Lucida Handwriting) for the note to give it an essence of making a hand-written note. Ive also kept to just a black colour scheme and a shadow in order for the logo to appear bolder. 

Memo Doodle Logo I decided upon the name was Memo Doodle as the logo, it not only informs us that its purpose is to record memos and reminders but also a canvas section for creating doodles. The logo itself contains to separated fonts just like the previous ones mentioned. I choose to display memo with a regular font (Gill Sans MT) type whereas the word doodle used a thicker font (Gill Sans) style. The reason for this was that I wanted to separate both words without the need to use a number of colour schemes instead changing the font keeps the interface to a minimum of colours. At this moment that black background is optional although the overall look might consist of a different background colour. 

UI Components

Although I have began to design the overall user interface it was essential to research UI components found on applications. Following a guideline will help me develop and include both essential and effective forms of structure, design and functionality. 

Layout

Linear layout: Align elements either horizontally or vertically within the screen. My project I will be most likely using a vertical layout with some horizontal input on drop down menus.

Controls

Buttons: The application mainly consists of buttons in order for events and functions to be carried out by the user. Areas that I will implement button will be to direct users to various pages within the application, I will also use it for functions such as the camera in order to be able to take a picture. 

Text Input: The user willbe able to insert their own text and notes in sections such as the notepad, where information can be stored. 

Menu

Menus will be used to display various pages within the applications along with functions and tasks. Using sub menus and drop downs will allow further information and functions to be available according to the section that has been selected. 

Settings

Basic settings: These are needed in order for users to edit or remove unwanted information, it is a form of customising the application to their own preferences. Within my prototype it is doubtful that users will have tis option as the project is only a prototype therefore my focus is on the multi-modal sections. 

Notifications

Notifications: These are useful to inform, remind or update the user on an event that has occurred whilst they have not been using the application. It is an effective form of displaying new information without the user having to look manually to see if things have changed. The notifications will not be incorporated within my project as I will be focusing on areas that do no require the need for them. 

Feedback

Feedback is essential when certain tasks have been requested; notifying a user when a shared file has been sent successfully or been declined. Using descriptive labels will inform the user quicker allowing them to continue with another task. These will be incorporated within functions of my project in order to inform the user on what is or has occurred.

The majority of these pointers will be incorporated into my project depending on how far I reached within the development and design stage. It was important to acknowledge and make myself aware of the user interface components that are found on all types of applications in order to follow the same structure. 

Flash Builder

Due to time constraints a quicker method was needed to develop this application to meet the deadline. I was introduced to the program Flash Builder by Adobe, the program offers an easier method of developing a user interface design. 

Early Designs

Source
As you can see there are several errors within the code that need debugging but at this stage I am experimenting and learning how to use the program.

Design

My main concern is to develop functionality before I focus on the design as you can see I have used basic buttons and drop down sections were I would like operations to be displayed. I used a solid green, white and black as the colour scheme similar to the one found on EverNote, the colours are not official at this time as the process I am undertaking are forms of experimentation from the research gathered so far. At this point I have given the project a basic name of "Note" although this will be changed within the next few weeks. 

Output Results

The code I implemented to test the home button meant to result in text displaying "hello world". This was a successful attempt as during the test run of the application the function did display "hello world" within the screen. 

Within the test run I also test the drop down menu displaying the other pages within the application. Although the function displays the information the button needs to be enlarged in order to be able to view the text clearly as it has been cut midway. 

Design Mockups

Before begging to code the application I decided that it would be best to design some example  mockups of what I would like the interface to include. 

Below is the homepage, I decided to keep it plain and simple as the multimodal sections will contain all of the information and functions that will fill the screen. 

The image below is still the homepage with a hover menu allocating the various functionalities of the application. This hover menu keeps the overall appearance tidy and clatter free. An issue with this design is that there is no form of icon that allows the user to identify the hover menu, an arrow pointing downwards will identify the further features. 

The image below displays the camera function, I implemented a grid to represent the area that will be used to capture images. I also implemented a triangle at the top of the screen in order for the users to identify the hover menu.

Part of the multimodal section includes the use of a notepad to record notes and memos. Below is a small structure of the notepad. Within it I have incorporated a  hover menu with sub menu categories, an example of it is the "+" sign that signifies a new document.