Scratch dans un notebook

Links: notebook, html ., PDF, python, slides ., presentation ., GitHub

Il existe une version javascript de Scratch : snap. On peut récupérer les sources soit depuis le site, soit depuis github jmoenig/Snap–Build-Your-Own-Blocks (il y a un peu plus d’images, de personnages). J’ai recopié les sources dans le module code_beatrix. Voici un exemple qui montre comment faire apparaître une interface Snap depuis un notebook IPython. Tout d’abord, il faut recopier le code javascript dans un répertoire de IPython afin que le serveur local puisse les trouver.

import code_beatrix.jsscripts.snap
%load_ext code_beatrix
import IPython
import os, glob
js_path = os.path.dirname(code_beatrix.jsscripts.snap.__file__)
files = [ os.path.split(_)[-1] for _ in glob.glob(js_path + "/*.js") ]
print(",".join(files))
path = "/static/snap/"
js_libs = [path + _ for _ in files ]
blocks.js,byob.js,cloud.js,FileSaver.min.js,gui.js,lang-ar.js,lang-bg.js,lang-bn.js,lang-ca.js,lang-cs.js,lang-de.js,lang-dk.js,lang-el.js,lang-eo.js,lang-es.js,lang-et.js,lang-fi.js,lang-fr.js,lang-gl.js,lang-hr.js,lang-hu.js,lang-ia.js,lang-id.js,lang-it.js,lang-ja.js,lang-ja_HIRA.js,lang-kn.js,lang-ko.js,lang-ml.js,lang-nl.js,lang-no.js,lang-pl.js,lang-pt.js,lang-pt_BR.js,lang-ro.js,lang-ru.js,lang-si.js,lang-sv.js,lang-ta.js,lang-te.js,lang-tr.js,lang-zh_CN.js,lang-zh_TW.js,lists.js,locale.js,morphic.js,objects.js,paint.js,sha512.js,store.js,tables.js,threads.js,widgets.js,xml.js,ypr.js
print("fichier à récupérer dans ", js_path.replace(os.environ["USERNAME"], "<username>"))
print("fichier à copier à ", os.path.join(os.path.dirname(IPython.__file__),"html","static","snap"))
fichier à récupérer dans  C:<username>rdupre__home_GitHubcode_beatrixsrccode_beatrixjsscriptssnap
fichier à copier à  c:Python36_x64libsite-packagesIPythonhtmlstaticsnap
from code_beatrix.jsscripts import copy_jstool2notebook
copy_jstool2notebook("snap")
[]

Si le résultat est vide, cela signifie que les fichiers ont déjà été copiés. On veut obtenir ceci :

from pyquickhelper.helpgen import NbImage
NbImage("screenshot_scratch_nb.png", width="75%")

On exécute le code suivant pour faire apparaître la fenêtre. Dernière précision, sauver le notebook ne sauve pas l’animation Scratch, il faut le faire soi-même (le résultat ne passe pas très dans la documentation encore, problème de frame et de javascript).

html_src = """
    <h2>Simple Scratch</h2>
    <div id="scratch1-div">
    <iframe src="/static/snap/snap.html" width="1000" height="600" scrolling="auto">
    </iframe>
    </div>
    """
test_js = """ """

import IPython
from IPython.core.display import display_html, display_javascript, Javascript
display_html(IPython.core.display.HTML(data=html_src))
display_javascript( Javascript(data=test_js, lib= js_libs))

Simple Scratch

Le javascript ne passe pas toujours très bien dans la documentation et