Integrate drawing w/ demo

examples/iterated-drawing/experiment.py

@@ -4,6 +4,9 @@
 from wallace.nodes import Source
 from wallace.experiments import Experiment
 import random
+import json
+import os
+import base64
 
 
 class Bartlett1932(Experiment):
@@ -63,16 +66,21 @@ def _contents(self):
 
         transmit() -> _what() -> create_information() -> _contents().
         """
-        stories = [
-            "ghosts.md",
-            "cricket.md",
-            "moochi.md",
-            "outwit.md",
-            "raid.md",
-            "species.md",
-            "tennis.md",
-            "vagabond.md"
-        ]
-        story = random.choice(stories)
-        with open("static/stimuli/{}".format(story), "r") as f:
-            return f.read()
+        img_root = "static/images/characters"
+        filenames = os.listdir(img_root)
+        random.shuffle(filenames)
+        data = []
+        for fn in filenames:
+            if ".png" in fn:
+                # Encode the image in base64.
+                encoded = base64.b64encode(
+                    open(os.path.join(img_root, fn), "rb").read())
+
+                data.append({
+                    "name": fn,
+                    "image": "data:image/png;base64," + encoded,
+                    "drawing": "",
+                    # "strokes": ,
+                })
+
+        return json.dumps(data)

examples/iterated-drawing/css/canvas.css → examples/iterated-drawing/static/css/canvas.css

@@ -1,6 +1,6 @@
 div.table {
   float: left;
-  border: 1px solid black;
+  // border: 0px solid black;
 }
 
 #canvascontrols #clear {
@@ -10,7 +10,7 @@ div.table {
   font-size: 16px;
   padding: 0 5px 1px 20px;
   margin-left: 0px;
-  background: url(../images/delete.png) no-repeat 2px 1px;
+  background: url(static/images/delete.png) no-repeat 2px 1px;
   border: 1px solid gray;
   -webkit-border-bottom-right-radius: 10px;
   -moz-border-radius-bottomright: 10px;
@@ -27,7 +27,7 @@ div.table {
   font-size: 16px;
   padding: 0 5px 1px 20px;
   margin-left: 0px;
-  background: url(../images/undo-gray.png) no-repeat 2px 1px;
+  background: url(static/images/undo-gray.png) no-repeat 2px 1px;
   border: 1px solid gray;
   -webkit-border-bottom-right-radius: 10px;
   -moz-border-radius-bottomright: 10px;
@@ -59,7 +59,7 @@ canvas {
 }
 
 .image_border {
-  border: 1px solid black;	
+  border: 1px solid black;
 }
 
 .image_highlight {
@@ -90,4 +90,4 @@ td.bordered_cell {
 
 .frozen_image {
   border : 1px solid black;
-}
+}