cnc painting user interface wireframe

A project log for If ( ) Then {Paint}

a machine to create canvas paintings of your favorite digital images

John OpsahlJohn Opsahl 07/30/2019 at 02:190 Comments

A few months back I tried to imagine what the cnc painting software user interface might look like. I arrived at the wireframe shown above. The "Feature Tree" box  (left center) includes all high level components that need to be defined to both determine paint strokes from the bitmap image and create the cnc machine gcode painting instructions from the paint strokes. The user works from top to bottom in the feature tree. When the user clicks on and highlights an item in the feature tree, user input parameters unique to the tree item type are listed in the "Details" box (left bottom). In addition, feature tree item actions are accessed by right clicking on the feature tree item. The "Canvas" window (center, depicted as a white square) is where images are displayed. This includes images like the original bitmap image that is being converted to paint strokes, strokes of a specific brush displayed over the original image, strokes generated during a specific iteration of the algorithm, all paint strokes required to create the image, etc. It would be possible to zoom in/zoom out and pan in the canvas window. The "File", "View", and "Help"menu bar headers would contain the standard application features. The "Simulate" menu bar header would run a simulation of the cnc painting operation by showing a moving brush in the canvas window (similar to the simulation feature of a cnc milling CAM software). The simulation feature is somewhat advanced to implement and actually does not add that much value. It's unlikely it will be released in the first version of the software. 

After completing the wireframe, I began scoping out the UI input fields and actions in a Google doc spreadsheet. The screenshot below is the list of input options that would appear in the details box when a feature tree item is highlighted.