Processing Bespin
From Open Source@Seneca
Contents |
Project Description
Bespin is a coding environment that allows developers from different locations to collaborate and work on the same source code, test it, and discuss it from anywhere with an internet connection through their web browser. It requires no installation on the local machine, is free, and once complete, will be used worldwide by developers everywhere.
With Bespin in mind, we will be creating a similar IDE for the Processing.js language. This will allow users to log on to our web page, develop, build and test code all from within their web browsers without having to download a single file. It will contain many key elements of a regular IDE such as Reference (to Processing.js functions, etc) as well as a search bar to search for specific methods, syntax highlighting, a proposed auto-complete feature, and perhaps not for a few iterations, but eventually will include debugging. It will also allow the developer to press a 'play' button and have the Processing.js code work in a separate part of the screen. Depending on the code, it will either run by itself or need the user to start the process using an input device.
Project Leader(s)
Derek Ambrose
Anthony Alves
Steven Ganeshram
Harjinder Virdi
Project Blogs
Derek Ambrose
Anthony Alves
Steven Ganeshram
Harjinder Virdi
Project Contributor(s)
Robert is a web developer and designer at Versatilia Ltd. and is also the developer of HasCanvas, a web page showing the power of Processing.js. We are working closely with Robert to bring about a new innovation in Processing.js development...DASH.
David is a professor at Seneca College's School of Computer Studies and the Centre for the Development of Open Technology. His teachings are mainly focused on open source and the Mozilla Project. He is also one of the project leaders on the Processing.js project. You can learn more about him by visiting his wiki page. It is because of David that we were able to get into contact with Robert O'Rourke to begin the creation of this innovative new webtool.
Project Details
We will be working closely with Robert O'Rourke to design an online Integrated Development Environment(IDE) for Processing.js using the Bespin editor as a basis for our project. The user will be able to load, save, or create new Processing.js files in our interface. They will also be able to edit them in an environment that implements syntax highlighting and bracket matching. The user will also be able to play/pause and reload their created code in a sketchpad. We will also be implementing a reference guide of the Processing.js language.
Processing.js
Processing is an open source programming language and Integrated Development Environment(IDE) built for the electronic arts and visual design communities with the purpose of teaching the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. Processing has recently been ported to JavaScript using the Canvas element for rendering, allowing Processing to be used in modern web browsers without the need for a Java plugin.
Our project will be similar to the Examples link below. The main difference will be added functionality, membership and a file system for members to store files.
- Examples of the Power Within Processing.js
- The Processing.js project.
File System
Since the editor is online-based, the user will need to be able to browse, open, save, delete, create, copy and move files. Our team has come up with individual prototype sketches for the file system interface. We will be sending our ideas to Robert O'Rourke for feedback. We will then combine our ideas into a final design to be used for the IDE.
Our idea is that the file system should be similar to the Reference tab in Robert O'Rourke's prototype in that it is displayed by a mouse-over action by the user. It should show the files in a tree structure and have a searchbox that can filter results so users can find their files quickly.
Editor
We will be using the Bespin embedded editor as a basis for our IDE.
SketchPad
Processing.js files are also known as sketches, since they generate images. We will be providing a sketchpad area for users to view the sketch generated by their code.
SketchPad Controls
Users will be able to play/pause and reload their sketches.
Reference
One feature we will be adding is reference to Processing.js. In addition to being able to browse Processing.js' documentation the user will be able to search for specific functions that they would like to know more about.
Interactive Prototype
Click This To View Interactive Prototype
Project Storyboards
Sign-Up and Sign-In Process
A Login window will be presented to the user. The user can login using an existing account or create a new account.
Create New Account
The following fields are required to be filled in by the user before an account can be created.
- Username
- Password
- Confirm Password
Clicking on “Create Account” will create the account and log the user in and redirect them to the editors main page.
Logging In With An Existing
To Login in the user must enter their Username and Password. After successfully logging in the user will be redirected to the editors’ main page.
Recover Lost Password
The user must enter their username and the password will be sent to that email. Clicking “Send” will send the password and it will display a successfully message and the user will be redirected to the login page shortly.
Change Password
In order for the user to change the password the user will be presented with 3 fields.
- Current Password
- New Password
- Confirm New Password
Clicking on “Submit” will change the users password and log them in with the new password.
Run Through of Editor
Create/Save File
Open File
Play Sketch
View References
Logging Out
Clicking on "logout" will log the user out and redirect them back to the login page.
Project News
January 18. 2010
The team for this project has been assembled. It's members are listed above.
February 7, 2010
The proposal has been submitted. A detailed outline of the project deadlines is to be compiled next.
February 19, 2010
Robert sent an email, a text prototype, with ideas of what he'd like to see on the prototype and asked if we had any more ideas, to fire them off at him.
Details:
Top Bar:
Branding - Although it's just text at the moment, this is where the name of the application/website could go. It's purpose is to give the application/website an identity which people can associate their love/hate of it with.
Links - The main links here, 'My Files' and 'Reference' are ways into larger subsections of the IDE and so need to have something to distinguish them from any other links we may put in the top section such as a 'help page' or 'about' section. More ideas to come for this section.
Main Section:
Tabbed Interface - One of the core tenets of interface design is to not make people think. There are common interface solutions that are well-established and bucking those trends decreases the ease of learning and using the interface. Tabbed interfaces are very common these days and people know how to use them - the browser they'll be using will almost definitely have tabs. What Robert has done is extend the purpose of the tab by putting the version number (which may be a dropdown of versions) and the controls for the sketch inside the tab itself. This creates a context for the controls too - it will be clear that they affect the current sketch (the controls will be hidden on inactive tabs). The idea of extending existing interface solutions like this makes use of people's existing knowledge thereby reducing the amount of thought and learning involved.
Code Section - This should always contain some code to indicate it is where you type. Design-wise, we need it to be useful which means it should have as little scrolling as possible so we want it to have a large area which should only require vertical scrolling. Horizontal scrolling is typically less obvious and tricker to use than vertical scrolling.
Sketch Area - This shows the fruits of the user's labour so it should be treated as one of the most (if not the most) important element. One method I thought might work well with the tabbed interface is to have the coding window full width over the top of the sketch but slightly transparent and then when the user clicks the play button, bring the sketch to the front and send the code to the back and vice-versa when they click stop. This will maximize both the code area and the sketch area.
February 20. 2010
We have each used his and each others ideas to create our own prototypes of the project. See blogs for more details
Prototypes:
February 21. 2010
Robert has connected with us about his feelings regarding our prototypes.
Details:
DASH (Derek Anthony Steven Harjinder) - Consolidates ownership and sounds cool.
Icons - Play button that turns into a stop button which swaps in and out of 'edit' mode and 'live' mode, help button, about and examples. Save button as well.
Live Mode/Edit Mode - There should be an 'edit' mode in the editor which is the area where the developer will do his coding for the given 'sketch'. The background of the 'edit' mode will be transparent and if there is anything behind the 'edit' panel (such as an activated sketch playing having been drawn), it will appear as if it is behind the panel with a transparency effect. The 'live' mode is activated after the developer clicks the 'play' button, and is where the developer can test out his developer will do his coding/sketch.
Examples - Having an examples repository that the user can bring up to see Processing.js syntax and see it in action. Could have examples on the reference page to let you see an example of the function they are referencing in action.
Colour coding of different sections (Help, About, References, My Files)
Search Box - Could have search box look up both references and previously created files or a separate search box for each.
Same Search Box - all results in same output with a single interface element (search box) that is always visible
Separate Search Box - easier to code, clarifies the use of the search box
Is going to put some of these suggestions into a prototype and get back to us.
March 4th
Steven puts up new prototype with Bespin Editor embedded.
March 7th
New prototype from Robert O'Rourke.
Implemented tabs with much work. Only original idea at the moment but will soon include more of Harjinder's split-panel idea.
Now is our time to play with the prototype; tabbing system as well as writing/running/editing sketches and then share feedback.
Next step is the file system.
March 22nd
Sent Robert O'Rourke an email consisting of thoughts on the prototype.
ie. Tabbing system (could give a default name when tab is opened rather than waiting for the user to give it a name before allowing them to edit their processing.js sketch), and thinking that pressing the play button could be repetitive at times.
Thought we should all make a prototype of what the file system could look like.
March 25th
File System Prototypes have been made. Can be found on our blogs above. They have been submitted to Robert O'Rourke for review and feedback.
March 29th
Robert contacted us with his feelings regarding our prototypes. He felt that Derek's prototype was a good design and said that he would reflect it in a newer and updated prototype shortly. Would like to see a user workflow for creating, saving and loading files. Specifics need to be addressed such as, 'once I create a new sketch on the tab bar will it appear in the file system?.How will we inform the user it has been saved? Do we even want to automatically save it or have a button for that?'. Also, scenarios need to be addressed such as, 'things like logging in and viewing the reference or running a sketch, What are the most common patterns of use?'.
Sometimes there won't be much to improve upon but this method will highlight those instances where we cut things out or pre-empt the users next step. Say, when the user opens the references, chances are they will want to search through it so we can put the cursor in the search box instantly using some javascript. We can add a keyboard shortcut to open the references, making the process more easy and quick.
Interface design is a balancing act between simplicity and complexity, the real skill is in making something complex seem simple.
April 10th
Contacted Robert regarding the semester coming to a close and needing to finalize the design portion of the project. Asked to organize a meeting on Skype within the following week. We will work on the storyboards and final prototypes in this time and prepare everything for our future meeting with Robert and get his feelings on it.
April 13th
Received e-mail from Robert asking how a Skype chat Thursday morning would be. We feel that Thursday at 1 pm would fit our schedules the best, but have yet to confirm with Robert. Also updated wiki with prototype pictures in the project details.
PRJ666 Project Plan
1) Review Project Plan.
2) Configure The Server
2.1.) Install Bespin Server 2.2) Install Bespin Local
3) Coding
3.1) Code The Editor
3.1.1) Control Buttons
3.1.2.) Split Panels
3.1.3) Reference Panel
3.1.4) Coding Screen
3.1.4.1) Line Numbers
3.1.4.2) Tab Indentation
3.1.4.3) Syntax Highlighting
3.1.5) Play Screen
3.2) Code File System
3.2.1) Create Files 3.2.2) Delete Files 3.2.3) Open Files 3.2.4) Save Files
3.3) Code the Login Module
3.3.1) Login Process 3.3.2) Sign-Up Process 3.3.3) Password Recovery 3.3.4) Change Password 3.3.5) Delete Account
4) Initial Testing
4.1) Test Editor
4.1.1) Run Processing.js Code
4.2) Test Login Module
4.2.1) Create User
4.2.2) Login as User
4.2.3) Delete User
4.3) Test File System
4.3.1) Save Files
4.3.2) Open Saved Files
4.3.3) Delete Saved Files
5.) Deploy The Editor
6.) Develop Documentation
