nfriend / inspiral-web

The web version of the Inspiral app.

inspiral-web

The web version of the Inspiral app. Written in TypeScript, using D3.js. nathanfriend.io/inspiral-web/

Building

1. install Node.js
   • note: this project only seems to build correctly with version 5 and lower, due to this issue:cgross/grunt-dom-munger#42. Removing the isPath parameter makes the build produce incorrect results. a. I got around this issue by hacking in this PR in InspiralWeb/node_modules/grunt-dom-munger/tasks/dom_munger.js
2. install Grunt and Bower
3. run npm install and bower install inside InspiralWeb/ directory
4. run bower install inside the InspiralWeb/gallery directory
5. change the value @fa-font-path in /bower_components/fontawesome/less/variables.less from ../fonts to ./
   • do the same for the bower_components directory in /gallery
6. install WebEssentials VS plugin
7. run npm run build-scripts
8. Install http-server globally and run http-server inside the /InspiralWeb directory
9. create a distribution build, run grunt inside the InspiralWeb/ directory

Here be dragons

There are some seriously terrible things about this codebase:

1. A number of the original *.ts files are missing, but the compiled *.js files still exist. I'm not sure how this happened 🤷
2. I haven't invested time into figuring out how to compile the LESS (it used to be done automatically by the VS extension), so currently there's no way to make style changes to the app. I gave this a shot with the build-styles npm scripts, but they're not yet working. For now - just don't touch app.min.css.

Publishing

1. after building (see above), run npm publish from the ./dist/ directory a. don't run this command from the InspiralWeb/ directory!

inspiral-web's Issues

Make color and gear selections small-screen friendly

Add

Add rotater for standard gears

The user should be able to rotate around a regular gear just as they would around a ring or a beam.

JS error when d3 is minified (using UglifyJS)

Show preview of color in color picker

Adding color to background doesn't force scrollbar to readjust

Switching gears while gears are hidden shows gear

Feature Request: Touch Screen Interaction

I just tried this on my touch screen ultrabook and found it only responds to keyboard/mouse. being able to touch and drag would be awesome!

Make gallery display thumbnails instead of full images

Add zoom capability

Mousewheel should zoom in/out on canvas.

Rotating gear in place not rotating around proper spot in Firefox

Probably related to issue #30

Make very transparent dark colors (i.e. #00000000) not trigger dark mode

Initial gear selection are not reflected in the gear selector UI

Shortcuts should use Cmd on macs.

Keyboard navigation

Allow the gears to be rotated using the and arrow keys.

Rotation point not centered when using Safari.

Make gear draggable from anywhere on the canvas

I shouldn't have to initiate a drag on the gear itself.

Zooming while scrolling

The keyboard shortcuts page is (at least for me) longer than my screen height. When I scroll down, it also zooms in on the spirograph in the background. Extremely minor, but thought you might want to know.

Changing gears and then rotating gear in place makes gear jump initially.

Feature Request: Moving objects around/ camera panning

It would be a nice addition to be able to move objects around and subsequently, pan the camera around.

I know this is a rather big change and it might be in a different direction than where you want to go with this.

Sometimes keyboard shortcuts don't work

Add drag support

User should be able to drag all gears around the canvas.

Make "download" and "add to gallery" separate buttons

Add adaptive mouse tracking

When I begin to drag a gear, the gear should not jump unexpectedly.

Save to PNG

User should be able to save result as PNG in any browser.

Conflicting behavior between mouse and keyboard shortcuts

Left and right arrow keys cause scroll in Firefox

Cursor tracker doesn't line up with mouse in Firefox

Add toolbar

Items that should be included in the toolbar: Download Image, Clear Image, Hide Gears, Help/About

Make UI not interact-able when dragging gear

Cursor tracker

Add a cursor tracker that draws a line from the rotation point to the cursor, so that I don't lose track of where my cursor is while drawing.

Implement Undo/Redo

Undo causes extra snapshot to be inserted

To reproduce:

Draw some stuff
Undo everything
Draw one more thing
Hit Ctrl-Z twice
Hit Redo - nothing will show up. Hitting Redo again will then work.

Wrong gear color when switching gears in dark mode

10:50 shows up at 10:5 in gallery timestamp

Implement gear selector

Undo/Redo not working in Firefox

Color scrollbar pushes foreground colors to the right when adding colors on small screens

Make download script respect tranparency

Add "help" modal

Zebra stripe help modal

Icons and images missing from gallery lightbox

Add ability to use outside of ring gears

"Download" button should turn into a spinner while waiting for download to start

Feature Request: Gradients in addition to static colors

Hi Nathan! I'm having a blast with inspirograph!

When I was a kid, I had a spirograph set with multi-colored pencils.

When you used such a pencil with the spirograph, the drawn line would fade between several colors over a gradient. It would be awesome to have this in ispirograph.

Thats my feature request, thanks for your hard work on inspirograph!

Add ability to move/rotate gear without drawing

Offload gear rotation and radius calculations to separate rotater class.

To allow for custom gear implementations.

Ability to use custom colors

Remove "fudge factor" calculations from gear hole generator

Color picker should remember the last selected color