A Scratch Activity for Sugarizer, integrated from https://github.com/LLK/scratch-gui
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
activity
blocks-media
css
extension-assets/scratch3_music
extensions
js
lib
static
.DS_Store
01b02d5625a95285eab109cd377391e7.svg
064782e43b1704fbf981455cfb0c8c5b.svg
10811a978de201353d564df7ba1ddb58.svg
14bbb6b32b6bfe51aa58a30644df1d8d.svg
21988681fa28c8ce37982ca26463a6f5.svg
26255153f92ea41df149a58d3c3fe2cf.svg
2a70b21aaaed0619bdfcdec91db1ebe8.svg
2e0c4790f8f9cf28e3c346b9cef0fcb6.svg
33daf6402e1b0069b3256ef8ba6d83d0.svg
36fcc7dbca20720abcab01e49d4955f9.svg
3ba19d721f49f1969948c50262ca3b78.svg
3eb63579853c3f4c5323a51dcf4104ac.svg
4bb8206f40a1e6cdf983df16412b0557.svg
4d2c702c819335822c772019b1e6a468.svg
5687813aa6ebb9f781e5fd2e632f07ec.svg
62e5e589711d4f268861aa1d127bc5c5.svg
644bb0056dafcc5684a41632c764ccb7.svg
68d9ddbb2aa63310b88c7697e5b0c6c9.svg
7679e8aa3b5a6b745823e00a7b950065.png
7eea42371f5ccb84b4fc7d0ba7331ea3.png
836ebbd706c75ff8ac985cacf68f72fc.svg
8beb63c39a6eca703022395b996e64b0.svg
8f348a8e98fa500f13477ec64d239ec0.svg
924291299e61dbdb703832c6c9996994.svg
932d2d0704ec68ab533576fab4162a2a.svg
971dddfc51dec41f393580a3dfb903c7.svg
993a0700d8a0972d309307b0a4688ed7.svg
README.md
a167fb2916d6bc77bc213059900290e9.svg
a98539ffc08660ab3e50bd7691da949e.svg
acc6c29b5eee67bc6b2aa85854d9bb3a.svg
b100d3911727abaa6784ede755541cd4.svg
blocks-only.html
blocksonly.js
blocksonly.js.map
c07381cca05b39b2cfb9eeb0a0aa7647.svg
cb666b99d3528f91b52f985dfb102afa.svg
compatibility-testing.html
compatibilitytesting.js
compatibilitytesting.js.map
e291bffc965fa1ca8f828ccb2000829a.svg
e2caa77932e7f773df1adfaa73a472a2.svg
ea253c0bd320e213fecdd7714078aba0.svg
extension-worker.js
extension-worker.js.map
f2457825850317e66ef2128504613c30.svg
ffab9ca530e3a5f128258d580eaf19f4.svg
gui.js
gui.js.map
index.html
lib.min.js
lib.min.js.map
player.html
player.js
player.js.map

README.md

Scratch.activity

Scratch

Hello! I am Emily, a GCI`17 participant for Sugar Labs and this is one of the projects that I have worked on- Scratch 3.0 integration into Sugarizer.

Definitions

If you have noticed, Scratch 3.0 uses many .jsx and .ejs files.

What I did first was to translate the .jsx into .js code. This can easily be done using Babel, a first-generation Javascript compiler, which would be useful in porting .jsx into .js.

Following which, I adapted the .ejs into .html, and of course, including the Sugar toolbar and artwork.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="not screen and (device-width: 1200px) and (device-height: 900px)"
  href="static/lib/sugar-web/graphics/css/sugar-96dpi.css">
<link rel="stylesheet" media="screen and (device-width: 1200px) and (device-height: 900px)"
  href="static/lib/sugar-web/graphics/css/sugar-200dpi.css">
<link rel="stylesheet" href="static/css/activity.css">
<script data-main="static/js/loader" src="static/lib/require.js"></script>

...

<div id="main-toolbar" class="toolbar">
  <button class="toolbutton" id="activity-button" title="Scratch"></button>

  <!-- Add more buttons here -->

  <!-- Buttons with class="pull-right" will be right aligned -->
  <button class="toolbutton pull-right" id="stop-button" title="Stop"></button>
</div>

Sugarizing

In order to create a Sugar compatible activity, do also include the following files:

  1. src/setup.py
  2. activity/activity-icon.svg
  3. activity/activity.info
  4. static/activity.css
  5. static/js/activity.js
  6. static/js/loader.js
  7. static/lib

Download this file to extract activity-icon.svg, and sugariconfiy it using this script.

All these are available in the activity template.

You would now need to configure your package.json file- do make the following edits:

"author": "Massachusetts Institute of Technology",
  "license": "BSD-3-Clause",
  "homepage": "./", //this would allow the source to be built offline
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/LLK/scratch-gui.git"
   
"jest": {
    ...
  },
  "amd": {},
  "volo":{
    "baseUrl": "lib",
    "dependencies": {
        "sugar-web": "github:sugarlabs/sugar-web/master",
        "domReady": "github:requirejs/domReady/2.0.1"
    }
  }
}

Precautions

Afterwhich, it is important to look through all the files again and replace .jsx with .js because we do not want to require a file that no longer exists. It is also crucial to upate the webpackconfig.js and package.json files, and replace .jsx with .js and .ejs with .html.

This will ensure that the file paths are correct and the activity can be compiled on the localhost.

Project is running at http://0.0.0.0:8601/
webpack output is served from /
Content not from webpack is served from /Users/emilyong/scratch-gui/build
Hash: 14d37b50edea5264797e
Version: webpack 3.10.0
Time: 21251ms

Building

cd scratch-gui
npm run build

Configure the file path to that of this repository.

Note

You can take a look at my prebuild source code here.

Integrating Datastore

In order to integrate Sugarizer's datastore function, I inputed the json data collected from containters/save-button.js into a div value. The lines of codes are commented out so that the saved data would not be downloaded.


key: "handleClick",
      value: function handleClick() {
        var json = this.props.saveProjectSb3();
        document.getElementById("myBlocks").value = json;
        console.log(json);
        // Download project data into a file - create link element,
        // simulate click on it, and then remove it.
        // var saveLink = document.createElement("a");
        // document.body.appendChild(saveLink);
        //
        // var data = new Blob([json], { type: "text" });
        // var url = window.URL.createObjectURL(data);
        // saveLink.href = url;
        //
        // // File name: project-DATE-TIME
        // var date = new Date();
        // var timestamp =
        //   date.toLocaleDateString() + "-" + date.toLocaleTimeString();
        // saveLink.download = "project-" + timestamp + ".json";
        // saveLink.click();
        // window.URL.revokeObjectURL(url);
        // document.body.removeChild(saveLink);
      }
      

I removed the unnecessary FileReader() from containers/load-button.js and used the div value to load the blocks onto the canvas.


key: "handleChange",
      value: function handleChange(e) {
        console.log("load");
        return this.props.loadProject(document.getElementById("myBlocks").value);
      }

In components/load-button.js, instead of going with an input element for the load button, I changed it to a div element and changed the function to render the blocks (onChange) on click.

_react2.default.createElement("div", {
      className: _loadButton2.default.fileInput,
      ref: inputRef,
      // type: "file",
      onClick: onChange
    })
    

In js/activity.js, I simulated a save button click when the Sugar user clicks on the stop button, and did the same for the load button when the Sugar user reenters the activity, before passing the stored JSON data from the div into the same div (document.getElementById("myBlocks").value = data).

for (var i = 0; i < document.body.getElementsByTagName("span").length; i++){
      if (document.getElementsByTagName("span")[i].innerHTML == "Save"){
        document.getElementsByTagName("span")[i].click();
        console.log("Saved successfully");
      }
      else{
        console.log("Unable to save");
      }
}

This meant that with the datastore function, which aligns with Sugar Labs' pedagogy of not having a complicated save/load system, the blue menu bar is no longer necessary. However, we cannot remove it from the gui because it would mean that the click simualtions would be impossible to complete. Instead I set the display to none in container/menu-bar.css.

Acknowledgements

This was a challenging project for me, and would never have been possible without the guidance of the kind mentors!

  • Samson
  • Ignacio Rodriguez
  • Michael Ohayon
  • Lionel Laské
  • Abdulsamad Aliyu
  • Nnachi Isaac Onuwa
  • Hrishi Patel
  • Walter Bender