Dance editing support #3

New Issue

perelman · 2024-07-01T18:52:21-04:00

perelman commented

2024-07-01 18:52:21 -04:00

As interpreting dances is proving difficult, an easier minimal-viable-product may be to support specification of custom moves that do not require interpretation (at the cost of significantly more user effort to specify them). #2 is about just adding support for inputting dances specified fully explicitly. In order to not require the user to learn or author the JSON format, there should be a GUI (including hopefully WYSIWYG) way to author dances in this format. Some ideas:

Editing artifacts implies some sort of way to manage and share them. Want to keep this as simple as possible, including staying serverless, but without being so limited it's easy to accidentally lose data.
1. This can be separate from the rest of the feature: for initial development maybe just store a single dance JSON in localStorage and let it get clobbered.
2. Store dances as .json files in OPFS or local filesystem (if not on Firefox). See my blog posts on the file system access API and the implementation in schedule-grid for more on how this should work/look.
3. Allow sharing dances as fragment URLs where after the # is (some prefix followed by) base64 (or similar) encoded gzip of the dance; shouldn't be too big, so should work in a URL.
Non-WYSIWYG editor first.
1. Replacing current dance display (so probably there's a toggle between edit and view modes), a column for each of the four dance roles (although if being explicit, there's no actual reason to limit to 4, could support four-face-four... but leave that for later) with drop-downs/inputs for the LowLevelMove options. Probably also recreate the ContraDB editor? libfigure should provide most of what is needed for that.
2. Display should update as changes are made. Maybe a button for displaying the current animation? Or even a way to loop the current move and/or the current low-level move? Configurable pause time at the end of each loop?
3. Split button?: convert one LowLevelMove into two such that the first has the startPosition and the second has the endPosition of the original?
4. Other usability like copy/paste / rearranging moves/low-level moves (by drag-and-drop?)? There's always the fallback of editing the JSON, but that's not really user-friendly.
WYSIWYG support
1. Probably can't specify everything this way... but probably something like selecting a particular place on the timeline (start/end position of a specific low-level move) and then interacting with the dancer positions:
  1. Click on body and drag to change position. Should show outlines of valid positions to drag to and indications of what grouping they correspond to. e.g. if dragging to a CirclePosition show the circle. If dragging to long lines, show the lines... this does highlight that many positions are similar and may be difficult to express by dragging, so maybe dragging is the wrong interface for this: maybe click on a dancer to select them and then options appear for moving them somehow.
  2. When a dancer is selected, front (and short line from front?) becomes a handle for controlling rotation. Similarly, may need to somehow handle rotations with the same/similar directions and different semantic names.
  3. Also, shoulders should be control points to drag to where arms should be.
2. Unclear how to specify animations this way. Most usable way would probably be to guess and offer some options? Really fancy would be to display previews of all of the options. But realistically, probably just the drop-downs from (2).

As interpreting dances is proving difficult, an easier minimal-viable-product may be to support specification of custom moves that do not require interpretation (at the cost of significantly more user effort to specify them). #2 is about just adding support for inputting dances specified fully explicitly. In order to not require the user to learn or author the JSON format, there should be a GUI (including hopefully [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG)) way to author dances in this format. Some ideas: 1. Editing artifacts implies some sort of way to manage and share them. Want to keep this as simple as possible, including staying serverless, but without being so limited it's easy to accidentally lose data. 1. This can be separate from the rest of the feature: for initial development maybe just store a single dance JSON in `localStorage` and let it get clobbered. 2. Store dances as `.json` files in [OPFS](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) or local filesystem (if not on Firefox). See [my blog posts on the file system access API](https://aweirdimagination.net/tag/file-system-access-api/) and the implementation in [`schedule-grid`](https://git.aweirdimagination.net/perelman/schedule-grid-js) for more on how this should work/look. 3. Allow sharing dances as fragment URLs where after the `#` is (some prefix followed by) base64 (or similar) encoded gzip of the dance; shouldn't be too big, so should work in a URL. 2. Non-WYSIWYG editor first. 1. Replacing current dance display (so probably there's a toggle between edit and view modes), a column for each of the four dance roles (although if being explicit, there's no actual reason to limit to 4, could support four-face-four... but leave that for later) with drop-downs/inputs for the `LowLevelMove` options. Probably also recreate the ContraDB editor? `libfigure` should provide most of what is needed for that. 2. Display should update as changes are made. Maybe a button for displaying the current animation? Or even a way to loop the current move and/or the current low-level move? Configurable pause time at the end of each loop? 3. Split button?: convert one `LowLevelMove` into two such that the first has the `startPosition` and the second has the `endPosition` of the original? 4. Other usability like copy/paste / rearranging moves/low-level moves (by drag-and-drop?)? There's always the fallback of editing the JSON, but that's not really user-friendly. 3. WYSIWYG support 1. Probably can't specify everything this way... but probably something like selecting a particular place on the timeline (start/end position of a specific low-level move) and then interacting with the dancer positions: 1. Click on body and drag to change position. Should show outlines of valid positions to drag to and indications of what grouping they correspond to. e.g. if dragging to a `CirclePosition` show the circle. If dragging to long lines, show the lines... this does highlight that many positions are similar and may be difficult to express by dragging, so maybe dragging is the wrong interface for this: maybe click on a dancer to select them and then options appear for moving them somehow. 2. When a dancer is selected, front (and short line from front?) becomes a handle for controlling rotation. Similarly, may need to somehow handle rotations with the same/similar directions and different semantic names. 3. Also, shoulders should be control points to drag to where arms should be. 2. Unclear how to specify animations this way. Most usable way would probably be to guess and offer some options? Really fancy would be to display previews of all of the options. But realistically, probably just the drop-downs from (2).

perelman referenced this issue

2024-07-01 19:04:00 -04:00

Move DSL #5

Sign in to join this conversation.

No Label

No Milestone

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: perelman/contra-renderer#3