processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.38k stars 1.33k forks source link

add direct link editor <> fullscreen views? #208

Open lmccart opened 7 years ago

lmccart commented 7 years ago

The designs have a proposed toggle between full screen and "minimized" or editor view. This seems to be different than the direct link to the full screen version as we have it now. In this version, I think it's more like an overlay...the url stays the same, the canvas just pops bigger with a white overlay over the editor behind it.

10 web-editor-light-example-dropdown-nav-1024 1x

07 web-editor-full-view-small-canvas-1024 1x

08 web-editor-full-view-medium-canvas-1024 1x

09 web-editor-full-view-large-canvas1024 1x

The question is, does this seem useful, or is this redundant? I like the direct link to full screen view, but another option is to just have this open a new tab with the current full screen view with the /full/ url (no author info).

shiffman commented 7 years ago

I've been noticing as students present in class that it would be convenient to have some sort of maximize/minimize for p5.js rendered sketch area and the code editor itself. What I see students do a lot is drag the middle bar all the way to the left and all the way to the right depending on what they want to highlight.

I like the idea of having these features on the editor page itself in addition to the separate "full" view, but don't feel confident in this opinion so am open to any and all ideas.

catarak commented 7 years ago

We discussed this, and decided that both the preview and the code editor should be able to be maximized. This could either be with the arrow icon above, or both the editor and the preview could have dropdown arrows. These maximizing/minimizing actions could also have keyboard shortcuts.

catarak commented 7 years ago

Design

screen shot 2017-07-10 at 5 35 19 pm screen shot 2017-07-10 at 5 36 11 pm

The custom icons can be downloaded from Zeplin.

bengrosser commented 5 years ago

Is this ability to maximize a sketch directly from the code editor view still planned? It seems right now the only way to quickly view a sketch in full screen mode is to edit the URL in the location bar, changing sketches to full.

It would be great for students if they could easily switch back and forth from code view to full screen view. Going back to the code from the full screen view is possible from the <> button on the full screen view, but there's no easy way to go the other direction.