Design and build a UI

[jasonwebb]

In other projects I've tried using control panel interfaces like dat.gui, control-panel, and Tweakpane, but in my experience they all lack extensibility and are somewhat limiting in the components they provide. However, Jess Hewitt's new noisedeck app shows that it is not really all that difficult to build a great looking custom panel UI using vanilla JS and CSS. So I'm going to try that!

Rules

• Presets - select dropdown (key-value array of named rule strings).

Birth/survival counts

• Birth counts - checkboxes (one per possible neighbor count)
• Survival counts - checkboxes (one per possible neighbor count)

Neighborhood

• Neighborhood type - select dropdown (Moore, von Neumann)
• Range - slider
• Include middle cell - checkbox

History

• Enable history - checkbox
• Number of generations/states- slider
• Cyclic - checkbox

Colors

• Presets - dropdown
• Color pickers
  • When history is not enabled...
    • Two color pickers - one for each state
    • Button to swap the two colors
  • When history is enabled...
    • Horizontal linear gradient with markers at each color stop to visualize
    • List of color stops, each with:
      • Color picker
      • Threshold
      • Button to remove
    • Button to add another color stop

Starting patterns

• Pattern type - select dropdown, with sub-pane for pattern-specific parameters.
• Sub-panels for each pattern type
  • Circle - diameter
  • Rectangle - width, height, rotation
  • Text - string, font face, font weight, font size, rotation
  • Image - file (file input), translate X/Y, rotation, scale
  • Random - density (slider)
  • Empty - no options

Canvas

• Width - slider
• Height - slider
• Maximized - checkbox
• Wrap X - checkbox
• Wrap Y - checkbox
• Scale - slider

Controls

• Speed - slider
• Increment by n number of generations
• Paused - toggle button
• Restart - button

Analysis

• Histogram - real-time bar chart showing distribution of each state.
• Text display of current FPS.
• Text display of number of generations so far.

Modal Dialogs

• Dialog with general explanation and available key commands.
• Dialog on app load to warn about potential seizure triggers.
  • Checkbox for "don't show again".

[cocopon]

Thank you for mentioning to Tweakpane.

I don't know you know about that, from 2.0.0 you can add a custom input control by the plugin system.
https://cocopon.github.io/tweakpane/plugins.html

It's still under active development and a bit unstable, but it's going to be better every day.

[jasonwebb]

@cocopon Wow, that's an awesome update, and I will definitely check it out now! Tweakpane has been my favorite toolkit to use for web apps like this. This update must've been a lot of work, so thanks for taking it on and continuing to make improvements!