Add "Open in Processing" link to code examples

[SableRaf]

Problem statement

Currently, to open a Processing example in the Processing Development Environment (PDE), users have to manually copy and paste each tab from the Processing website to the PDE editor. Additionally, they may struggle with missing files if any images, fonts, or other assets are required by the sketch.

Context

With the latest version of Processing (4.2), it is now possible to link to .pdex and .pdez files to run sketches and install libraries immediately in the PDE. However, the examples and reference examples on the Processing website do not yet have this feature.

In a separate issue, we have proposed updating the build process for the Processing website to automatically generate .pdez files for each example. This is the first step towards adding an "Open in Processing Editor" link to all examples on the website.

Proposed solution

To enable users to open Processing examples directly in the PDE editor, we propose adding an "Open in Processing" button next to each example on the Processing website. Clicking the button will automatically launch the example in the PDE.

The button link should use the newly introduced pde:// protocol and be in the format: pde://processing.org/examples/.../myexample.pdez.

We could include a tooltip to indicate that this button will launch the Processing Editor.

Benefits

The "Open in Processing" button will make it easier for users to get started with Processing by removing the manual copying and pasting process. This will save time and reduce the risk of errors when setting up and running examples.

References

• Related issue: Generate .pdez files for each code example #445

[nikhilhvr]

hey, I want to contribute. I would love to try my hands please guide me on how to get started!!

[SableRaf]

Hello @nikhilhvr and thank you so much for offering to contribute! We appreciate your interest in helping out. The first step in getting started would be to ensure that you can build the website locally. You can find instructions on how to do this here.

If you have any specific questions about the issue or the proposed solution, please don't hesitate to ask. I'm here to help.

[nikhilhvr]

hello, @SableRaf I am done with the setup website locally. I tried to find the optimal solution to this issue but I didn't see much. Please guide me on how to get started.

[SableRaf]

@nikhilhvr: Great! The idea is to add an Open in Processing button next to the Copy button for each example. Please let me know what specific questions you have an I'll try to assist you.

[kaustubh-Joshi1020]

is this issue is solved?

[SableRaf]

Hi @kaustubh-Joshi1020! I can confirm that this issue is still open. If you have any further questions, please feel free to let us know.

[kaustubh-Joshi1020]

ok thanks👍

[EshaanAgg]

@SableRaf I would like to work on this issue. Can you please assign it to me if any other contributors aren't working on it?

[SableRaf]

Hi @EshaanAgg and sorry for the late reply. I have assigned the issue to you. Thanks for looking into this!

[EshaanAgg]

Thanks @SableRaf. I have started first creating the .pdez files for the examples as a part of #445.

[SableRaf]

Quick update to share my reference technical implementation for the Open in Processing button:

https://sableraf.github.io/testURIscheme/

Notice the tooltip that serves as a fallback in case Processing is not installed.

The UX/UI could certainly be improved (cc @runemadsen). For example, we could also consider having a separate button for downloading the sketch. Consider this a first draft.

Note: support for pde:// on Linux is still pending but this Pull Request should solve the issue: processing/processing4#696

[AaryaZ]

@SableRaf I see that the issue is still open. Would like to work on it. I request you to assign me this issue.