NOTE: This has been superseded by a paged version of this, visible at https://github.com/dbvisel/canvasviewer

Demo done in React to demonstrate how a JSON data format could be used to present "walks" of embedded items/sections of items from the Internet Archive, interleaved, if desired, with comments. This is done in React because that was an easy way to get a demo off the ground; it could be made in anything.

This uses the JSON data stored in /src/assets/walkData.js to build a walk (or walks) based on what's in that data – that includes some basic documentation of the format. A demo deployment of this can be seen at https://collagewalk.netlify.app.

To run this locally, npm install, then npm start. Build with npm run build.

Still images are generated with a build step: npm run make-images, which screenshots all the images and puts them in /public/images.

• hide annotation until selected

• lines don't update if something is dragged in walk mode
• Throbbers aren't wonderful.
• Dragging isn't wonderful & I suspect there's something buggy in my implementation of it.
• Performance isn't wonderful because it's a bunch of iframes!
• if you maximize/go to present mode, header select doesn't notice.

• This is fake content and not actually compelling!
• add additional embed types:
  • image carousel? Is that essential?
• phone presentation mode
  • force presentation mode on vw < 767px?
• next/prev stops probably need names (for mutliple previous/next stops)
  • need to deal with this in graph mode!

• link to a particular stop
• when a stop is selected, auto-center the canvas?
  • this is kind of being done, but not very effectively
• arrow keys for moving through present mode
  • what happens if more than one next/prev?
• comments could be richtext/markdown?
• could add rotation/colors/CSS styles to stops
• smarter default placement on canvas – avoid overlap
• Internet Archive URL scheme: right now this is just taking the embed link and not processing that in any way. We could turn, for example, "1up" or "2up" in the book reader into a separate parameter.
• maybe different visualizations?
  • CSS grid

• Embedding on Internet Archive: https://archive.org/help/video.php
  • note that contains instructions on playlists