Login System 

Its almost 3AM and I’m dead tired! Today I had a chance to work on our processing.js project. 

One feature we wanted to implement is the login system. Each user will have his/her own unique login to manage their files and preferences. Lets break down how this will work. 

The user will be presented with two options, Either to login with an existing ID or sign up for a new account. For a user to successfully create an account he/she must submit the following information: 

*username 
*password
*email address

Since we all forget our passwords , we will implement password recovery. A user can recover his/her password by having it mailed to their email address. So make sure you do enter a valid email address!

Well it is not the final design but a First look:)

Login
 

Sign up

Story Board & Skype Collaboration 

Anthony Derek Steven and I worked on our project wiki page and updated it with tons of information regarding the features we would like to implement along with screenshots which guide the user on how to use them.

More to come soon!  

My second prototype draft for the file system for our PJS IDE. This includes the basic functionalities such as creating a new file, opening an existing file, deleting files/folders and moving them.Any feedback or suggestions are welcome. I will get  my team’s input and suggestions and from there we will start making our revisions.

My incomplete proposed prototype for the file system for PJS IDE. This is a quick sketch of opening and deleting files.

There are 5 weeks left till the semester comes to an end and alot of work is still pending. Let’s briefly go over what has still yet to be implemented for our PJS IDE.

File System

* Browse Files
* Open Files
* Save Files
* Delete Files
* Create New Files
* Copy Files
* Move Files

A file management system that will allow users to have their own “disk space” to manage their files and access them anytime. The features above cover the basic functionality of a file system.

Syntax Highlighting

* Identify HTML/CSS Syntax
* Identify Processing.js Syntax

One of the most important visual piece belonging to an editor, and that is syntax highlighting. For our PJS IDE we want it to support basic syntax higlighting. There are several plugins to achieve this but we have not discussed how we will take this approach. Procesing.js has its own syntax higlighting code that is downloadable on the Processing.js site.

Split Panels

* Code Mode
* Live Mode
* Toggle Panels
* Resize Panels

The idea behind of having two split panels, One to show your coding and the other to view the results from the executed code . Either panel can be toggled on or off and be resized.

As for now I’m currently experiementing with PHP coding and the jQuery library. I have also started to understand the current code for the prototype done by Robert O’ Rourke. In the next few days I will post the results of my experiements with the features mentioned above.

This is the new prototype by Robert O’Rourk for our PJS IDE. The tab feature looks awesome with the play button. Clicking on the Reference link brings down a drop down menu with a list of functions and a search box. As for now I will be looking forward to syntax highlighting and implementing the file system.

This is my proposed prototype of processing.js IDE designed in Adobe Photoshop. The name “I Draw” I choose this since its self explanatory and defines what the purpose of this IDE is. The buttons on the top right  ”Examples” “My Files” “Reference” “Help” are grouped together because it distinguishes them from the actual editor and its function. This will not confuse the user by having too many items grouped together, making it look cluttered. The colored buttons makes the design appear more cleaner and less repetitive.

The search functionality will be used as a universal search to locate any piece of information related to the IDE(examples, references. help, etc).

Each new file will have its own tab and each tab will consist of its own “Play, Pause, Refresh” button. The tab will contain two panels “Code Mode” and “Live Mode”. The user can toggle either mode on or off by clicking on the arrow keys, allowing either mode to be in full screen. The “+” symbol allows the user to create a new file(new tab).

I find “about us” on the bottom more appropriate since it can be grouped with other informative links that might not relate directly to the IDE itself.

My team members, Derek Ambrose, Anthony Alves, and Steven Ganeshram have also come up with their own prototypes and we are working with Robert O ‘Rourke who is assisting us in this project…In the next few days we will work with each others designs and finalize something!

p.s I still have not decided where to put the “save” button.