You can read my original proposal here.
*Read the updated post here*
“Processing is a programming language and an IDE for digital arts and visualization for the purpose of teaching non-programmers, the fundamentals of programming. Currently, there are no introductory features that help familiarize beginner/new users with the Processing Development Environment (PDE). This project aims to create a “welcome” feature for the PDE in order to facilitate a smoother and easier introduction to the different features of the PDE. It would further increase user retention, especially amongst beginners and new users.”
The original plan for the “welcome” feature included a pop-up screen for a short tutorial of the PDE as well as a built-in documentation feature. However, at the start of the summer, it was suggested by Processing that those be made into contributed Tools instead. I ended up making two Tools and I plan to try to integrate them into the PDE.
My mentor was Elie Zananiri and I can’t thank him enough for all the guidance and endless support!
Getting Started Tool
Github: https://git.io/fNFEM
This tool consists of several frames that give new users a short tour of the PDE. The current splash page doesn’t contain any information on how to use the PDE and only mentions the changes made from Processing 2 to Processing 3. The goal of this tool was to provide new users small enough of an introduction to get started without it being overwhelming.
The Getting Started Tool mostly summarizes the Getting Started and Environment pages. Users can flip through the frames as well as try out the tutorial codes themselves via the “Try It” button. The button will populate the same code in the frame in a new editor. On the last frame, there are links to the above pages, as well as the Processing Github repository and the Processing forum.
Initially, I had a lot of trouble improving the quality of the images inside the frame. I unsuccessfully tried various image resizing algorithms but found that setting HTML files greatly improved the quality of the images. Another hurdle that I had to overcome for Java GUI was that not all HTML tags and CSS attributes were supported. For example, I resorted to using a <table> tag hack for the layout of the frames.
Future Improvements
Although I’m happy with what I have accomplished, I wish the Getting Started tool could be more interactive and user-friendly. While building the tool, I wasn’t sure how to and I’m still not sure — but I think ideas could come when more users send feedback. In hindsight, maybe adding a table of contents at the beginning would’ve been useful just in case the user didn’t want to constantly flip through to get to a certain frame.
In the near future, I would like to see if the tool can be built using JavaFX instead of Java Swing. According to Oracle, “JavaFX is designed to provide applications with such sophisticated GUI features as smooth animation, web views, audio and video playback, and styles based on Cascading Style Sheets” and “some of today’s most popular GUI features cannot be easily implemented by using Swing.” Unfortunately, I only learned about JavaFX towards the end stages of the tool and did not have enough time to fully experiment with migrating the Swing components to JavaFX.
Reference Tool
Github: https://git.io/fNFEg
The current method of referencing from the main app opens up an HTML file in a browser window. The reference tool eliminates the need to switch to a different application every time a user looks up a reference and still contains all the necessary information.
The users can use the search bar to search for not only nodes that match the search text but also utilize the Search All function in order to find other references that may contain that text in their examples and descriptions. Additionally, they can also try out the examples of the references in an editor of the PDE by pressing on the matching numbered buttons on the bottom of the frame.
Some of the challenges that I faced while implementing this tool were understanding and learning (what I think) the more complex part of Java Swing, including JTree, various Listeners, HTMLEditorKit, event dispatching thread, and so on. I could not get the accordion style that I had initially wanted to implement in my proposal so I opted for a JSplitPane instead. Users are able to click on the references listed on the left and see the result on the right. Looking back, I think my original intention could have clustered the desktop with the pop-up windows for each reference.
I also used regex to parse the main app’s reference HTML files. With Elie’s help, I was able to get the necessary information to generate the tool’s own HTML documents instead of doing all of them manually. Using regex will be particularly useful for any future main app reference updates so that most of the tool can auto-generate.
Future Improvements
I wish the tool could fully auto-generate itself, but in order to do so, it would somehow be able to figure out the tree structure from an existing source. To my current knowledge, I don’t think such source exists offline yet. I had also wanted to implement syntax highlighting for the example codes but I believe it was too complicated of a task for the time that I had.
What I Learned
Before I started, I didn’t know much about building a GUI, let alone in Java. Trying to understand the Processing repository was very overwhelming and the impostor syndrome was too real.
I want to thank Salil, a friend who really pushed me to apply for Google Summer of Code, and Syam — a total stranger (now a friend!) all the way from India and a fellow GSoC ’18 participant with Processing — who reached out and encouraged me to believe in myself from the very beginning!
With a bit of confidence, I can now say that I know how to read through and understand a huge code base and work independently while sticking to a schedule. I may not know everything about Java GUI (probably only touched the tip of the iceberg) but I can still build something that works. There were times that I felt doubtful about my ability to move forward or fix a bug, but I now know that if there’s a will, there’s a way! Combination of SLEEP, BREAKS, and PERSISTENCE is key.
During the summer, I have not only improved in programming in Java but also learned many more invaluable lessons throughout the way. So, thank you GSoC and Processing for giving me the opportunity to build up my confidence as a developer!
