web workflow with code.cp.org | adafruit | Page 1

flat grotto Aug 16, 2022, 6:36 PM

#

1 may be less code to host though

#

though the js could be hosted from cp.org too

#

web workflow with code.cp.org

turbid geyser Aug 16, 2022, 6:39 PM

#

How is the host page option different than the way it works now?

#

Are you thinking more of a non-hidden iframe?

flat grotto Aug 16, 2022, 6:40 PM

#

right

#

non-hidden

turbid geyser Aug 16, 2022, 6:40 PM

#

Oh, gotcha. Yeah we should load js from cp.org

#

It makes it way easier to update.

flat grotto Aug 16, 2022, 6:40 PM

#

one option requires proxying calls over postmessage

#

the other doesn't

turbid geyser Aug 16, 2022, 6:41 PM

#

Yeah, the proxying option is what I was thinking you meant.

flat grotto Aug 16, 2022, 6:42 PM

#

are you thinking an iframe is better?

#

or we could have js that structures an html skeleton to fit what we have now (in html)

turbid geyser Aug 16, 2022, 6:43 PM

#

I'm kind of thinking with having multiple workflows the iframe is the option that makes the most sense.

flat grotto Aug 16, 2022, 6:43 PM

#

ya, can cp.org open a hidden iframe to the .local domain?

turbid geyser Aug 16, 2022, 6:43 PM

#

I believe so

flat grotto Aug 16, 2022, 6:43 PM

#

and that page would do the postmessage stuff

turbid geyser Aug 16, 2022, 6:44 PM

#

That's what I was going to try first.

#

Getting the serial messages back and forth is the tricky bit.

flat grotto Aug 16, 2022, 6:45 PM

#

kk, want me to make an html stub that loads some js for the device side?

turbid geyser Aug 16, 2022, 6:46 PM

#

Let me try some stuff for a few hours first. I want to experiment with what's possible before we start making changes.

flat grotto Aug 16, 2022, 6:46 PM

#

I'm on a clock so please let me know when you know what you need from me.

turbid geyser Aug 16, 2022, 6:47 PM

#

Yeah, the main issue is I don't know what I need from you at this point.

flat grotto Aug 16, 2022, 6:47 PM

#

👍

#

I've gotta finish move so I'll try and focus on that

turbid geyser Aug 16, 2022, 6:48 PM

#

Sounds good

turbid geyser Aug 16, 2022, 8:01 PM

#

Ok, figured something out that isn't working. it's still blocking loading http into the iframe when the page is https because of mixed content.

flat grotto Aug 16, 2022, 8:01 PM

#

kk, so only the reverse works

turbid geyser Aug 16, 2022, 8:01 PM

#

Right

flat grotto Aug 16, 2022, 8:53 PM

#

anything I can add for you to test with?

#

I'm thinking we could do circuitpython.local/code/

turbid geyser Aug 16, 2022, 9:58 PM

#

Yeah, that will work. Something that responds to messages, but it should load a js file from code.circuitpython.org.

#

I figured out how to fix the https auto forwarding. I went to chrome://net-internals/#hsts and entered code.circuitpython.org into the Delete domain security policies section.

#

Ok, maybe just a very minimal static page like and then I can get it to dynamically load stuff in with JavaScript:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Code Editor Message Handler</title>
    </head>

    <body>
        <script type="module" src="https://code.circuitpython.org/assets/js/device.js"></script>
    </body>
</html>

#

I just created an empty device.js file.

#

@flat grotto ^^

flat grotto Aug 16, 2022, 10:18 PM

#

kk, what device do you need a build for? want one that loads the device.js locally?

turbid geyser Aug 16, 2022, 10:19 PM

#

Yeah. The thought is that device.js bootstraps it, loads in any content and js that it needs to "run" on the device and it makes use of the existing web workflow framework to get the data.

flat grotto Aug 16, 2022, 10:19 PM

#

👍

#

should it trigger auth?

turbid geyser Aug 16, 2022, 10:22 PM

#

No, I think that will automatically be triggered when it tries to access fs

flat grotto Aug 16, 2022, 10:22 PM

#

kk

turbid geyser Aug 16, 2022, 10:24 PM

#

I might change my mind in the future, but it's static and it doesn't have anything sensitive in the file.

flat grotto Aug 16, 2022, 10:24 PM

#

👍

#

making a test build now

turbid geyser Aug 16, 2022, 10:24 PM

#

thanks

flat grotto Aug 16, 2022, 10:24 PM

#

what board do you need it for?

turbid geyser Aug 16, 2022, 10:25 PM

#

Adafruit ESP32-S3 TFT

flat grotto Aug 16, 2022, 10:28 PM

#

is it supposed to load device.js ok?

turbid geyser Aug 16, 2022, 10:29 PM

#

Currently device.js is empty, but yes.

flat grotto Aug 16, 2022, 10:29 PM

#

cors again:

#

📎 firmware.uf2

turbid geyser Aug 16, 2022, 10:30 PM

#

Oof. Can we pass a header that tells CORS that it's ok?

#

Let me try putting some javascript in it and see if it stops coming back as text/html

flat grotto Aug 16, 2022, 10:31 PM

#

it gives a 404 now

#

https://code.circuitpython.org/assets/js/device.js

turbid geyser Aug 16, 2022, 10:32 PM

#

Oh, hmm. Ok, let me fix that first.

#

I mean it's there: https://github.com/circuitpython/web-editor/blob/main/assets/js/device.js

GitHub

web-editor/device.js at main · circuitpython/web-editor

Online web editor for CircuitPython. Contribute to circuitpython/web-editor development by creating an account on GitHub.

#

It's jsut not available as a page

flat grotto Aug 16, 2022, 10:34 PM

#

is snowpack optimizing it away?

turbid geyser Aug 16, 2022, 10:34 PM

#

could be

flat grotto Aug 16, 2022, 10:36 PM

#

I'll try loading script.js

#

script.js loaded just fine

turbid geyser Aug 16, 2022, 10:38 PM

#

Cool. I'm seeing if adding something to the file fixes it.

flat grotto Aug 16, 2022, 10:38 PM

#

Can I change the title?

#

something like "Online Code Editor"

turbid geyser Aug 16, 2022, 10:38 PM

#

Sure, I was trying to keep it minimal to keep the size down

#

Ok, device.js no longer 404s

flat grotto Aug 16, 2022, 10:39 PM

#

you should be able to test with the above build

turbid geyser Aug 16, 2022, 10:39 PM

#

Yep. It even runs the javascript

flat grotto Aug 16, 2022, 10:40 PM

#

do you think we should have the existing /edit/ upgrade or just have a separate /code/ ?

turbid geyser Aug 16, 2022, 10:41 PM

#

This will likely take longer than we have before Friday to get fully functioning, but maybe I can get something very basic working as a proof of concept before then.

flat grotto Aug 16, 2022, 10:41 PM

#

ya, np

#

I can at least hook up the html and you can tweak it

#

the js name should probably have a version number too

turbid geyser Aug 16, 2022, 10:42 PM

#

For now, let's leave it separate and once it works, we can make it more automatic.

flat grotto Aug 16, 2022, 10:42 PM

#

👍

turbid geyser Aug 16, 2022, 10:42 PM

#

For the version number, how did we want to handle that since it's hard coded on the device?

flat grotto Aug 16, 2022, 10:42 PM

#

k, will make a PR

#

I think we just have device-8.js on code.cp.org

#

and ensure it works with all versions of 8

#

the css does this now too

turbid geyser Aug 16, 2022, 10:43 PM

#

Oh, for the CP version. Ok

flat grotto Aug 16, 2022, 10:43 PM

#

ya, have multiple versions on the online site in the future

turbid geyser Aug 16, 2022, 10:44 PM

#

I should be able to get it to query the device and handle it automatically, but as a fallback we can do that.

flat grotto Aug 16, 2022, 10:44 PM

#

ah, true. I just want us to have a way to keep older versions working

turbid geyser Aug 16, 2022, 10:45 PM

#

I understand. It could end up being a juggling act if we have multiple versions of the same file. We'll see what ends up working first before we get too far ahead of ourselves.

flat grotto Aug 16, 2022, 10:46 PM

#

https://github.com/adafruit/circuitpython/pull/6771

GitHub

Add /code/ for online editing by tannewt · Pull Request #6771 · ada...

turbid geyser Aug 17, 2022, 1:01 AM

#

Ok, I finally have a test message working when page is loaded via http. Tomorrow I'll up the security and see what needs to be done to get around that.

turbid geyser Aug 17, 2022, 4:00 PM

#

Ok, so the http->https autoforward issue keeps reasserting itself, so before I get too far, I'm going to try the microbit approach and bootstrap load the editor into the cpy-XXXXXX.local/code/ space.

flat grotto Aug 17, 2022, 4:00 PM

#

what were you trying with the iframe?

turbid geyser Aug 17, 2022, 4:01 PM

#

I was trying to have it proxy the websocket and http calls.

#

It fixes the private network issue, but the https autoforwarding issue is too big to ignore.

#

It will make it awkward when dealing with changing connection methods, but maybe not as much as I was thinking.

flat grotto Aug 17, 2022, 4:02 PM

#

it autoforwards the iframe contents?

turbid geyser Aug 17, 2022, 4:03 PM

#

No, the approach I was taking is the iframe would establish the websocket and local file system calls and then use postmessage to transfer the info back and forth to the main editor.

#

That approach would work fine for the private network issue, but because now I realize it would require people to fix the https autoforward issue every time they went to the website

#

At least if they use chrome

flat grotto Aug 17, 2022, 4:05 PM

#

right because code.cp.org would need to be http to load the hidden http device page

turbid geyser Aug 17, 2022, 4:06 PM

#

yes

#

I don't think switching approaches will require any changes on your part.

flat grotto Aug 17, 2022, 4:07 PM

#

👍

turbid geyser Aug 17, 2022, 6:53 PM

#

Ok, basic bootstrapping is working which was the tricky bit. If you go to /code/ on the device it should load the full code editor, though you can't do much with it yet since I need to rework the web workflow calls.

#

I gotta grab some lunch, head to the office, prep for S&T, and then I might have a bit more time to work on this before the meeting.

flat grotto Aug 17, 2022, 8:05 PM

#

great! I'll try it out

flat grotto Aug 17, 2022, 8:29 PM

#

looks good! It got me excited for it to work.

turbid geyser Aug 17, 2022, 8:40 PM

#

🙂

flat grotto Aug 17, 2022, 8:41 PM

#

I tried to add the # bits but it still didn't work

#

the original html page should probably have a "uh oh, it looks like you are offline"

turbid geyser Aug 17, 2022, 8:41 PM

#

Right, I'm going to just have it grab the host from the url and assume web workflow

#

Yeah, I thought of that. I was thinking we could display a link to the offline version. I also want to fix the favicon

flat grotto Aug 17, 2022, 8:42 PM

#

👍

turbid geyser Aug 17, 2022, 9:50 PM

#

Ok, I fixed it so it's now loading with the # bits. Basically, the window load event wasn't being triggered and I had to add that after all the scripts had loaded. I still need to rework it so those bits aren't even necessary. However, it appears to be 100% functional now.

#web workflow with code.cp.org