Using Forkphorus to run a local project #501

sfederici · 2022-06-11T21:43:23Z

sfederici
Jun 11, 2022

Can I use Forkphorus to run a project that I uploaded to a personal website? I mean, after installing Forkphorus on the website. Thanks in advance

GarboMuffin · 2022-06-11T22:55:36Z

GarboMuffin
Jun 11, 2022
Maintainer

It might be easiest to use the forkphorus packager to generate an HTML file and use an <iframe> to embed that project in your page

If that won't work, you can manually use the forkphorus player API (which is very poorly designed):

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/path/to/forkphorus/phosphorus.css">
    <style>
      #player {
        width: 480px;
        height: 392px;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>

    <script src="/path/to/forkphorus/lib/scratch-sb1-converter.js"></script> <!-- Needed for Scratch 1 projects -->
    <script src="/path/to/forkphorus/lib/jszip.min.js"></script>
    <script src="/path/to/forkphorus/lib/fontfaceobserver.standalone.js"></script>
    <script src="/path/to/forkphorus/lib/canvg.min.js"></script> <!-- Needed for Scratch 2 projects-->
    <script src="/path/to/forkphorus/lib/purify.min.js"></script>
    <script src="/path/to/forkphorus/phosphorus.dist.js"></script>

    <script>
      P.io.config.localPath = '/path/to/forkphorus/'; // needs a / at the end

      var playerElement = document.getElementById('player');
      var player = new P.player.Player();
      playerElement.appendChild(player.root);

      player.addControls();

      new P.player.ProgressBar(player);

      var projectURL = "https://packager.turbowarp.org/example.sb3"; // URL to FULL sb, sb2, sb3
      var projectType = "sb3"; // the file extension of the project
      fetch(projectURL)
        .then((r) => r.arrayBuffer())
        .then((buffer) => player.loadProjectFromBuffer(buffer, projectType));
    </script>
  </body>
</html>

3 replies

sfederici Jun 25, 2022
Author

It might be easiest to use the forkphorus packager to generate an HTML file and use an <iframe> to embed that project in your page

If that won't work, you can manually use the forkphorus player API (which is very poorly designed):

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/path/to/forkphorus/phosphorus.css">
    <style>
      #player {
        width: 480px;
        height: 392px;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>

    <script src="/path/to/forkphorus/lib/scratch-sb1-converter.js"></script> <!-- Needed for Scratch 1 projects -->
    <script src="/path/to/forkphorus/lib/jszip.min.js"></script>
    <script src="/path/to/forkphorus/lib/fontfaceobserver.standalone.js"></script>
    <script src="/path/to/forkphorus/lib/canvg.min.js"></script> <!-- Needed for Scratch 2 projects-->
    <script src="/path/to/forkphorus/lib/purify.min.js"></script>
    <script src="/path/to/forkphorus/phosphorus.dist.js"></script>

    <script>
      P.io.config.localPath = '/path/to/forkphorus/'; // needs a / at the end

      var playerElement = document.getElementById('player');
      var player = new P.player.Player();
      playerElement.appendChild(player.root);

      player.addControls();

      new P.player.ProgressBar(player);

      var projectURL = "https://packager.turbowarp.org/example.sb3"; // URL to FULL sb, sb2, sb3
      var projectType = "sb3"; // the file extension of the project
      fetch(projectURL)
        .then((r) => r.arrayBuffer())
        .then((buffer) => player.loadProjectFromBuffer(buffer, projectType));
    </script>
  </body>
</html>

I could create a Moodle filter based off this code. It worked quite well without particular problems, as the sb3 files are on the same server were I created the filter. Thanks a lot

sfederici Jun 28, 2022
Author

It might be easiest to use the forkphorus packager to generate an HTML file and use an <iframe> to embed that project in your page

If that won't work, you can manually use the forkphorus player API (which is very poorly designed):
<!DOCTYPE html>
<html>
  <head>
 ...
</html> ```

I have a question, how do I add to this code parameters such as auto-start=true and light-content=false?

GarboMuffin Jun 28, 2022
Maintainer

autostart:

player.setOptions({ autoplayPolicy: 'always' });

light-content:

player.setOptions({ theme: 'dark' });

If you want these to require a URL parameter:

const params = new URLSearchParams(location.search);
if (params.get('auto-start') == 'true') {
  // ...
}

sfederici · 2022-06-12T04:54:18Z

sfederici
Jun 12, 2022
Author

It might be easiest to use the forkphorus packager to generate an HTML file and use an <iframe> to embed that project in your page

Yes, but the sb3 projects will be uploaded by people that don't know about technical stuff

If that won't work, you can manually use the forkphorus player API (which is very poorly designed):

I will certainly give it a try. Can I use a similar strategy for the TurboWarp player? (it could make sense, as I guess it is more compatible with Scratch 3 projects; NOTE: excellent speed is not a requirement)

5 replies

GarboMuffin Jun 12, 2022
Maintainer

A TurboWarp embed with https://turbowarp.org/embed?project_url=https://packager.turbowarp.org/example.sb3 as the src= is probably the easiest way, actually. At this time TurboWarp doesn't have a better alternative than an embed.

sfederici Jun 12, 2022
Author

A TurboWarp embed with https://turbowarp.org/embed?project_url=https://packager.turbowarp.org/example.sb3 as the src= is probably the easiest way, actually. At this time TurboWarp doesn't have a better alternative than an embed.

Thanks for the suggestion. So, if the project link is, e.g., http://examples.org/example.sb3, will I be able to embed it as https://turbowarp.org/embed?project_url=http://examples.org/example.sb3? Or must the packager be involved in some way?

GarboMuffin Jun 12, 2022
Maintainer

Yes, that's how it works. The packager would not be involved. You would have to make sure that the URL is secure (https://) and has CORS headers (Access-Control-Allow-Origin: *) set on the response

sfederici Jun 12, 2022
Author

You would have to make sure that the URL is secure (https://) and has CORS headers (Access-Control-Allow-Origin: *) set on the response

Thanks. I don't know anything about CORS headers (just that they are used to allow cross site reference, aren't they?). So, sorry if I ask you, but maybe you have a quick answer: setting up a CORS header on the response is something that is done at the level of the file (like a permission) or the web server? If you have no time for this don't worry, I'll start digging the web.

GarboMuffin Jun 12, 2022
Maintainer

It has to be configured on the server where the project is being downloaded from. That's going depend on the server you're using.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using Forkphorus to run a local project #501

{{title}}

Replies: 2 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Using Forkphorus to run a local project #501

sfederici Jun 11, 2022

Replies: 2 comments · 8 replies

GarboMuffin Jun 11, 2022 Maintainer

sfederici Jun 25, 2022 Author

sfederici Jun 28, 2022 Author

GarboMuffin Jun 28, 2022 Maintainer

sfederici Jun 12, 2022 Author

GarboMuffin Jun 12, 2022 Maintainer

sfederici Jun 12, 2022 Author

GarboMuffin Jun 12, 2022 Maintainer

sfederici Jun 12, 2022 Author

GarboMuffin Jun 12, 2022 Maintainer

sfederici
Jun 11, 2022

Replies: 2 comments 8 replies

GarboMuffin
Jun 11, 2022
Maintainer

sfederici Jun 25, 2022
Author

sfederici Jun 28, 2022
Author

GarboMuffin Jun 28, 2022
Maintainer

sfederici
Jun 12, 2022
Author

GarboMuffin Jun 12, 2022
Maintainer

sfederici Jun 12, 2022
Author

GarboMuffin Jun 12, 2022
Maintainer

sfederici Jun 12, 2022
Author

GarboMuffin Jun 12, 2022
Maintainer