Autodesk Spark | Gcode IDE
graphic illustration ui ux
3D printing is an exciting growing industry that is changing the world. Autodesk is operating an R&D center in Tel Aviv, as part of the innovation lab team, I took part in creating G-code IDE. This project followed up on a previous project called Chop, you can read about it here.
A 3D printer, much like any CNC machine, requires’ a file that will guide it on: where to move the printing head to, when, for how long, etc… in addition to these commands a 3D printer also needs to know at what temperature should he work and how much filament should he inject. different variations of these commands can form different compounds of the material, for example, using different patterns of movement while printing, can create a stronger object, or a more flexible object, etc… The code, in which these commands are written is called GCODE.
Autodesk R&D innovation lab experiment in different materials, patterns and other ways in order to manipulate the printer’s final outcome. these manipulations were done manually on the code and we needed to create an interface that will allow to:
– Easily view and edit the code.
– Apply modifiers to the printed objects and reflect these changes in the code.
– Display a live preview of the model.
– Share code modifiers with customers so they can try them in their projects.
Creating an interface that will allow the user to view and modify a model in real time using either:
– Gcode editor for manual editing.
– Apply pre-built modifiers to the object.
– Applying modifiers that are not part of the interface, by writing a command (in a terminal-like interface).
Edan Maor – Project manager
Eran Geva – Algorithm specialist (and front-end developer).
Since this project followed up Chop (a previous project which contained relevant research) this became a quick win project
We researched for 2 weeks.
Designed and wireframed in 2 weeks.
My task was to research and Design both the Ux and the UI.
Since I investigated 3D printing software, process, materials, etc.. In the discovery research of Chop, I chose to focus on:
– The manipulation of the modifiers: what modifiers do we plan to offer to the user and how will they affect the model and the code.
– What is an IDE (Integrated development environment) software concept and how it is implemented in different software?
– What is the workflow in the lab today when manipulating and modifying objects?
I reviewed all of the competitors from a list I made for an earlier project and decided to focus on a few references, the main one was Autodesk fusion 360, this software covers the entire process of creating CNC of 3D printed object, from requirements to delivery. I believe its always a good idea to select a single reference and use it and relay mostly on him in decision making, it helps projects and especially large projects to be consistent and allows me to deliver quicker. in the discovery phase, I noticed that its hard to anticipate how a modifier will affect the model, for example: what does scale do, if I click the modifier, it will take too long for it to run, and anyway, I probably won’t remember what it does on the next time I will need it (people are good at understanding things while computers are good at remembering things).
Fusion 360 created a visual representation of some of the menu items (today, photoshop does it as well), And I used this behavior for Gcode-IDE modifiers.
The PM and I made and refined a list of features for the application. I arranged them into logical groups and consulted with the team on the best way to group them.
After I finalized the information architecture, I started investigating in the best navigation methods. I divided the interface into a few sections and started solving them one by one, considering different options for each set of features and :
Gcode editor section
Contains color-coded code with editing capabilities, I used a pattern from code editors like Atom.io and brackets, since the code area was very long with a lot of code and the width was limited, I needed a way to organize them in a way that would be easy to navigate, after consulting with my teammates, we decided to make the layers collapsible and added a minimap that helps navigate between the layers while scrolling.
The player section
Allows the user to skip between layers and simulate the model printing to the user (at the application main stage), I decided to combine the Gcode editor section with the player but to keep some inner separation, I made two options, one with more integration where the skipping area is on top of the editor and detached from the player and another one with the skipping area integrated into the player.
Modifiers as part of the file menu
I chose to add a file menu to the app, inspired by MAC OS, I think its an easy, logical and conventional way to add a lot of features to a one-page app.
The Modify Tab in the file menu allows to alternate the code and create special printable effects such as smooth and twist, in order to simulate what these buttons do, I added a visual tooltip (as described in the competitors’ review above), which shows a before and after diagrams of a modified cube. Each time a modifier is selected the floating window on the right will change accordingly, unlike Photoshop, for example, there could only be one modifier window at a time (because the user needs to focus on one task at a time and also in order to keep the interface neat).
The command modifier
This super modifier is always open, it can be collapsed using the small arrow on the top right corner, this section allows the user to apply command modifiers without the need to add them to the interface, for example: if a user asks Autodesk innovation team for a special modifier, we can create it, send him an updated version of the software, where he will be able to type the modifiers’ name and it will apply. That way, the app becomes much more agile, and the developers’ team doesn’t have to add every new feature to the interface.
There are keyboard shortcuts for all major operations, and they can be revealed or hidden using the TIPS button.
Investing in research while working on Chop paid off when I worked on his big brother Gcode IDE, it was a really interesting puzzle, and I think that information architecture had a lot to do with scoring a quick and logical solution.
Thanks for reading!
graphic illustration mobile ui
graphic illustration ui ux
graphic ui ux
graphic ui website
mobile ui website
graphic mobile ui
graphic mobile ui website