Investigating interface needs for the papyrus tool

[brettfiedler]

Currently, we have four required tabs to use the tool. The camera, the projector, the editor (opened from camera), and the new board.html. We would like to identify the necessary features for papyrus and investigate how to combine or modify the existing interface to make using the tool more efficient (and aesthetic if possible).

Creating this as a broad issue to propose, discuss, and commit against.

@jbphet already took a step by modifying index.html to contain links of the needed HTML pages (https://github.com/phetsims/papyrus/commit/83375190e42a98092a32bfb0f6166f59548ddc17)

[brettfiedler]

Made a small commit to remove the yellow banner on camera.html (from cameraMain.js) and added some attribution to our new index.html for Paper Programs and Dynamicland.

[brettfiedler]

Open questions:

• There is a lot of alignment and synchrony between the camera window, the board, and the projector. Is there a layout slash is it even reasonable (due to current code structure or performance concerns) to put all three of these in one window for simultaneous viewing?

  • e.g.,

• What information from either the camera view or the projector view (program IDs, names, whiskers, etc) feel useful and should that information move to one or the other?

Ideas to implement

• I think, given our desire to use the camera OR use the "preview" (and maybe sometimes both..?), we should give the option to disable the camera and replace it with a background to place the "previewed" programs on. Bonus if this for some reason improves performance when not using the camera. This is in line with another issue where I suggest we change the layout of camera.html to maximize the camera "space" to put programs into.

[brettfiedler]

Outline of Desired Tool Components (rough draft, incomplete)

• Camera / Program Detection Window
  • Detection Parameters
• Projector / Detected Program Display
• Board / Detected Web Display
• Editor / Script Modification and Script Database Interface
  • Available Program/Script Library (what features from #8 should be accessible here)
  • (Program/Script Preview?)
  • Program/Script Editor
  • Paper Printing
  • API Reference (existing + our additions) + links to PhET Libs?
  • (Code Snippet or Template Library?)
  • Database "Workspace" Location Dropdown

[brettfiedler]

Calling designers here to list/ideate needs of the interface. At the moment, I am creating a list above of what each "piece" would need, but don't feel like you need to approach it from that level of detail/hierarchy.

!!! Add any feature/interface need would help you use the tool for any exciting example use case for you.

[terracoda]

I need more details on the landing page, like what each link is for? Maybe a list of icons after each, or just some words.

I would like to know what I am supposed to do on (if anything) on each link. It seems there would be very different strategies depending on whether you are working remotely or on a table top with actual papers.

• Camera: Create or select your workspace. Activate/Load programs. Open program editor.
• Projector: Most useful with printed papers. Virtually verifies what programs are active.
• Design Board: Virtual manifestation of papers. Interact virtually with the programs.

[brettfiedler]

Sounds great, @terracoda. I actually want to flesh out that landing page quite a bit to be more informational in ways that will echo a lot of the information we'd provide in a webpage about the tool as well as in the README.md.

If this is a pressing need at this moment, then we can go ahead and create a rough version with that information tacked on. Otherwise, I'll factor that into the information for that page when I'm able to visit it.

Edit: made a really quick rough edit. Will clean up and prettify later. https://github.com/phetsims/papyrus/commit/50ab29389ff9339d501acdbf8026bf43c8ef6d18

[brettfiedler]

This issue is too general. Many other issues for interface exist. We did note that we are trying to keep the interface relatively condensed (~2 windows) to avoid requiring multiple monitors to comfortably use. This resulted in an editor div in camera.html