WIP: Adding support for py5-web #318
+2,291
−1
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,6 +11,8 @@ | |
|
|
||
| <body class="min-h-screen font-sans antialiased overscroll-none overflow-hidden text-slate-50"> | ||
| <div id="root"></div> | ||
| <script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script> | ||
|
There was a problem hiding this comment. This is probably not needed because flok already has p5 installed as package dependency? There was a problem hiding this comment. With the installation of pyodide via the CDN, the p5 installed with npm was not found by pyodide, after the installation with the CDN it worked. I believe that by solving the pyodide problem this will be resolved. (I didn't test the p5 to see if there was an error due to yet another installation using the CDN, the idea is to remove the CDN, but I'll test it so I can already map it) There was a problem hiding this comment. I did a quick test and the p5 in the hydra sessions continues to work without any apparent conflicts |
||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React from "react"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { DisplaySettings } from "@/lib/display-settings"; | ||
|
|
||
| interface Py5CanvasProps { | ||
| fullscreen?: boolean; | ||
| displaySettings: DisplaySettings; | ||
| ref: React.RefObject<HTMLCanvasElement>; | ||
| } | ||
|
|
||
| const Py5Canvas = ({ | ||
| fullscreen, | ||
| displaySettings, | ||
| ref, | ||
| }: Py5CanvasProps) => ( | ||
| <canvas | ||
| ref={ref} | ||
| className={cn( | ||
| "absolute top-0 left-0", | ||
| fullscreen && "h-full w-full block overflow-hidden" | ||
| )} | ||
| style={{ | ||
| imageRendering: "pixelated", | ||
| display: displaySettings.showCanvas ? "" : "none", | ||
| }} | ||
| width={window.innerWidth / displaySettings.canvasPixelSize} | ||
| height={window.innerHeight / displaySettings.canvasPixelSize} | ||
| /> | ||
| ); | ||
|
|
||
| export default React.memo(Py5Canvas); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It'd be nice to have this installed as an npm package instead
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had installed pyodide with npm but I had the same error as this issue reports and the solution was to install via cdn.
Maybe updating the node or some other dependency will solve the problem, I'll test this later.
If it doesn't work, would installing pyodide via cdn block the merge?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahh I see!
No, I wouldn't go as far as that. It's just that I try to avoid depending on CDN for external code so that Flok also works offline, as an installable package (e.g. for LAN jams). But if we get stuck, we could go ahead and leave that for another future issue/PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested with the latest version of node.js currently (23.5.0) and the error persists. Maybe we could remove the cdn from index.html and set it to be loaded only when the session is py5, I believe that this way the other targets would continue to work.
I'm not familiar with react (front-end in general) but I'll see how to load via cdn within the py5 wrapper with react