Editor.p5js.org present mode disappeared?

p5.js
1

Hi there, I’m working with a student who is using the web bluetooth api in https://editor.p5js.org. Previously we got around iframe cross-origin security errors by running the sketch in full-screen present mode. Now it appears that the present link redirects to the “fullscreen” link and places the sketch within an iframe using a blob source making the present mode inaccessible. Is there a work around for this that would allow us to continue using the online editor or are we required to self host?

Thanks!

1 Like
2

I just noted that present mode was just removed for good reason.

Any workaround suggestions are still appreciated.

@kjhollen answered my question here. Sorry for the noise :slight_smile:

2 Likes
3

Wow, that’s sad and does not seem like a good solution to me. I do not understand the rationale of the decision makers in this case (UPDATE: I hindsight and with more sober consideration I can see why something needed to be done quickly since some users were losing access to p5js.org because of alleged real world abuse, and at least temporarily taking down preview.p5js.org may have been necessary). This is pretty much the last nail in the editor.p5js.org coffin for me. I suggest you use OpenProcessing.org:

2 Likes
4

Protest lodged

2 Likes
5

thanks for your kind understanding, @bakercp.

1 Like
6

Just checked some random example and its “present” link is indeed redirected to its corresponding “full” link:

And on that “full” link there’s an outer <iframe> tag:
<iframe title="sketch preview" src="https://preview.p5js.org" sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads" allow="accelerometer; ambient-light-sensor; autoplay; camera; encrypted-media; geolocation; gyroscope; hid; microphone; magnetometer; midi; payment; usb; serial; vr; xr-spatial-tracking" scrolling="auto" allowfullscreen="" frameborder="0" class="PreviewFrame__Frame-sc-1a6lcg6-0 hnmshZ"></iframe>

Followed by an inner <iframe> which indeed loads a “blob” sketch link:
<iframe aria-label="Sketch Preview" role="main" frameborder="0" class="EmbedFrame__Frame-sc-1ubw1m0-0 jkcGdZ" src="blob:https://preview.p5js.org/53e1840f-43d9-4527-88a0-8243ca59026b"></iframe>

No workaround AFAIK, but you can switch to something else.

@KumuPaul has already vouched for OpenProcessing.org.

Another p5js sketch hosting site is p5js.SketchPad.cc.

This is some online sketch I’ve got there:
http://p5js.SketchPad.cc/sp/pad/view/ro.CYuAGs4xyhzhKu/latest

And if we have a peek on its <iframe> tag:
<iframe id="ifr" width="100%" height="100%" scrolling="no" style="border:1px solid #000000; background: url(/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="http://p5js.processingtogether.com/sp/pad/iframe/ro.CYuAGs4xyhzhKu/rev.13?so=1&amp;autostart=0"></iframe>

We can know the actual link which runs the sketch w/o any <iframe>:
p5js.ProcessingTogether.com/sp/pad/iframe/ro.CYuAGs4xyhzhKu/latest

For a more generic JS hosting site you can try out Glitch.com:

Another online example I’ve got there:

And likewise, peeking on its <iframe>:
<iframe allow="geolocation; microphone; camera; midi; vr; encrypted-media" sandbox="allow-scripts allow-modals allow-forms allow-same-origin" data-testid="app-preview-iframe" src="https://blob-growth-p5js.glitch.me/" title="Preview of blob-growth-p5js"></iframe>

We discover its “iframe-less” link:
Blob-Growth-p5js.Glitch.me

Obviously the most complete option is putting a sketch on a GitHub.com repo:
GitHub - GoToLoop/ML-Matrix-P5JS-Template: Sorta template to have types for browser-loaded libs.

And then activate the “GitHub Pages” option, which allows us to run repo sketches by going to their corresponding GitHub.io link:
GoToLoop.GitHub.io/ML-Matrix-P5JS-Template

Besides full-fledged repos, GitHub also got much simpler “gists”:
Gist.GitHub.com/GoToLoop

Gists don’t have “GitHub Pages”, but we can use Bl.ocks.org to run any sketch hosted there:
GoSubRoutine’s gists · GitHub

Here’s some Gist Bl.ocks example sketch I’ve got there:

It’s also wrapped up by an <iframe> obvisouly:
<iframe sandbox="allow-popups allow-scripts allow-forms allow-same-origin" src="/GoSubRoutine/raw/a117ecb16a8b0f939a190f87d3a13267/de8f4ab2948159292114dfb1e1f282f1176d99cd/" marginwidth="0" marginheight="0" style="height:400px;" scrolling="no"></iframe>

But a raw “iframe-less” option is available by clicking the “Open” button:
Bl.ocks.org/GoSubRoutine/raw/a117ecb16a8b0f939a190f87d3a13267

Actually you can use any other generic JS hosting site to run p5js sketches online; and there are myriads of them!

2 Likes
7

The language you have used in this post is not alignment with our code of conduct. Please be respectful of other members of our community.

1 Like
8

I would like to apologize for my negative insinuations directed a specific people in this matter. I still think the sequence of events and current state of affairs is not ideal. However I genuinely believe that everybody working on the site is doing their best and a good job. My remark was uncalled for. I am sorry.

4 Likes