Add Expand Button to Replace Scroll Bars in Example Output Frames

[himanshuukholiya]

Increasing access

Unwanted scroll bars appear in p5.js example output frames (e.g., Issue #716), especially in Chrome at 60-70% zoom, reducing sketch visibility.

Problem:
Scroll bars block parts of the sketch, appear inconsistently, and make it tough to view everything, especially bigger examples.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

Proposed Solution:
Remove Scroll Bars: Eliminate unnecessary scroll bars from output frames.
Add Expand Button: Put in a button to expand the sketch into a fixed-size, centered view, with a minimize option.

Benefits:
Ensures full sketch visibility.
Gives users control over display size.
Creates a consistent, user-friendly experience.

Challenges:
Figuring out when the sketch is too big for the frame to show the expand button (eg, by checking the size of the iframe vs the size of the document in the iframe).
Limited use case if few examples require expansion.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[afthal-ahamad01]

I'm working on this issue right now. Please assign it to me.

[Its-sunny69]

Hey @himanshuukholiya , i think the issue is not resolved yet, so i was looking into this

I have a question regarding this, on expanding, should i make all the sketch to be visible in the large scale or let it be as it is i.e. if the bigger sketch come it can be visible in large scale or else it will be visible normal size - depend on the size of Canva generated for sketch

If its depend on Canva generated for sketch. it will look like

I think it better to leave dependent on Canva, what's your opinion?

[kumavatkomal]

@himanshuukholiya

I’d like to work on Issue #716 – Unwanted Scroll Bars in p5.js Example Output Frames. The problem affects sketch visibility, and I’d be happy to implement the proposed solution by:

Removing unnecessary scroll bars.

Adding an expand button for better viewing, with a minimize option.

Ensuring the solution is effective across different examples.

Please assign this issue to me if it's available. Let me know if there are any specific guidelines or considerations I should keep in mind.

Looking forward to contributing!

[himanshuukholiya]

@Its-sunny69
The feature request is still open. Regarding the expansion behavior, the sketch should appear based on the size defined in the code. Since most examples have relatively smaller canvas sizes, expanding the sketch to fill a large area might result in excessive empty space. So, it would be a good idea to make the expanded view slightly smaller to maintain a balanced layout.

@kumavatkomal
Yes, the features you mentioned are indeed required for this improvement. As mentioned earlier, the feature request is still open, and you're welcome to submit a PR for it.

One Important Note: since this feature is for the p5.js-website, please make sure to raise your PR in the p5.js-website repository.

[Its-sunny69]

@himanshuukholiya Thanks for details, working on it.

[ksen0]

Hi everyone, thanks for your enthusiasm, and happy you're excited to contribute! I'll be closing this thread for now because (1) the best place to discuss this is p5.js-website repo, and (2) this is a major UI proposal, and the contributor guidelines recommend not jumping into code/development before discussion and approval. A bit more info below, hope this is helpful for some context and for your next steps:

Indeed, this is an issue on p5.js-website so please check out the issue there: processing/p5.js-website#716 I will be closing this one.

Please check out the contributor guidelines, specifically: "You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation; that is because the proposed fix may not be accepted, need a different approach entirely, or the actual problem is somewhere else. Any pull requests filed before the issue has been approved for fixing will be closed until approval is given to the issue." Unless there is consensus on the problem and its solution, your PR may be closed.

The proposal to make an expand button is a relatively major UI change; this has to be discussed, so please feel free to make an issue on the p5.js-website repo about it, but it is not advised to jump to making PRs until consensus. For example, in the case of expanding the sketch: the aim of the embedded sketches is to have editable, interactive mini sketches. An alternative to the expand button would be a button that does "open in p5.js Editor" which then creates a sketch with the provided code in the Editor - with all its features and a larger canvas. This would be more in line with other similar features on, for example Processing.