simplifying the backend, updating views

app.py

@@ -8,53 +8,65 @@
 
 base_url = "/"
 
+#We assume a default filename of inlet.js to grab from the gist
+default_filename = "inlet.js"
+
 @app.route("/")
 def hello():
     #return render_template("index.html", base_url=base_url)
     return render_template("gallery.html", base_url=base_url)
 
-@app.route("/creator")
-def creator():
-    #return render_template("index.html", base_url=base_url)
-    return render_template("gallery_creator.html", base_url=base_url)
-
 
+#Live editing d3 for exploring parameter spaces
 @app.route("/tributary/")
-def tributary():
-    return render_template("tributary.html", base_url=base_url)
-
-@app.route("/reptile/")
-def reptile():
-    return render_template("reptile.html", base_url=base_url)
-
+@app.route("/tributary/<gist>/")
+def tributary_gist(gist=None):
+    return render_template("tributary.html", gist=gist, filename=default_filename, base_url=base_url) 
 
+#Live editing transitions
 @app.route("/delta/")
-def delta():
-    return render_template("delta.html", base_url=base_url)
+@app.route("/delta/<gist>/")
+def delta_gist(gist=None):
+    return render_template("delta.html", gist=gist, filename=default_filename, base_url=base_url) 
 
+#Live editing run loops
 @app.route("/hourglass/")
-def hourglass():
-    return render_template("hourglass.html", base_url=base_url)
-
+@app.route("/hourglass/<gist>/")
+def hourglass_gist(gist=None):
+    return render_template("hourglass.html", gist=gist, filename=default_filename, base_url=base_url) 
 
+#Live editing music visualization
 @app.route("/flow/")
-def flow():
-    return render_template("flow.html", base_url=base_url)
+@app.route("/flow/<gist>/")
+def flow_gist(gist=None):
+    return render_template("flow.html", gist=gist, filename=default_filename, base_url=base_url) 
 
-@app.route("/geyser/")
-def geyser():
-    return render_template("geyser.html", base_url=base_url)
+#Experimenting with tiling and patterns
+@app.route("/reptile/")
+@app.route("/reptile/<gist>/")
+def reptile_gist(gist=None):
+    return render_template("reptile.html", gist=gist, filename=default_filename, base_url=base_url) 
 
-@app.route("/fountain/")
-def fountain():
-    return render_template("fountain.html", base_url=base_url)
 
+#Embedded view for Tributary
+@app.route("/embed/<gist>/")
+def embed_gist(gist=None):
+    return render_template("embed.html", gist=gist, filename=default_filename, base_url=base_url) 
 
+#Embedded view for Delta
+@app.route("/shore/<gist>/")
+def shore_gist(gist=None):
+    return render_template("shore.html", gist=gist, filename=default_filename, base_url=base_url) 
 
-@app.route("/tributary/api/<gist>/<filename>")
-def internal_gist(gist, filename):
+
+#@app.route("/tributary/api/<gist>/<filename>")
+@app.route("/tributary/api/<gist>/")
+def internal_gist(gist, filename=None):
     code = ""
 
+    if filename is None:
+        filename = default_filename
+
     #print gist, filename
     url = "https://raw.github.com/gist/" #1569370/boid.js
     url += gist + "/" + filename
@@ -66,97 +78,46 @@ def internal_gist(gist, filename):
         code = obj.read()
     except URLError, e:
         print "ERROR", e.code
-
     return code
 
-@app.route("/tributary/<gist>/<filename>")
-def tributary_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("tributary.html", gist=gist, filename=filename, base_url=base_url) 
-
-@app.route("/reptile/<gist>/<filename>")
-def reptile_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("reptile.html", gist=gist, filename=filename, base_url=base_url) 
 
+#Save a tributary to a gist
+@app.route("/tributary/save", methods=["POST"])
+def save():
+    data = request.values.get("gist")
 
-@app.route("/delta/<gist>/<filename>")
-def delta_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("delta.html", gist=gist, filename=filename, base_url=base_url) 
+    #TODO: use github auth for logged in users
+    url = 'https://api.github.com/gists'
+    req = urllib2.Request(url, data)
+    ret = urllib2.urlopen(req).read()
+    #print "ret", ret
+    resp = make_response(ret, 200)
+    resp.headers['Content-Type'] = 'application/json'
 
-@app.route("/hourglass/<gist>/<filename>")
-def hourglass_gist(gist=None, filename=None):
-    #print gist, filename
-    return render_template("hourglass.html", gist=gist, filename=filename, base_url=base_url) 
+    return resp
 
 
-@app.route("/flow/<gist>/<filename>")
-def flow_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("flow.html", gist=gist, filename=filename, base_url=base_url) 
+#An experimental view that allowed creating screenshots from the gallery
+@app.route("/creator")
+def creator():
+    return render_template("gallery_creator.html", base_url=base_url)
 
+#EXPIREMENTAL: these don't work with the rewrite, will need to be resurrected
+"""
 @app.route("/geyser/<gist>/<filename>")
 def geyser_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("geyser.html", gist=gist, filename=filename, base_url=base_url) 
+    return render_template("geyser.html", gist=gist, filename=default_filename, base_url=base_url) 
 
 @app.route("/fountain/<gist>/<filename>")
 def fountain_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("fountain.html", gist=gist, filename=filename, base_url=base_url) 
-
-
-
-@app.route("/shore/<gist>/<filename>")
-def shore_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("shore.html", gist=gist, filename=filename, base_url=base_url) 
+    return render_template("fountain.html", gist=gist, filename=default_filename, base_url=base_url) 
 
 @app.route("/carbonite/<gist>/<filename>")
 def carbonite_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("carbonite.html", gist=gist, filename=filename, base_url=base_url) 
-
-
-@app.route("/embed/<gist>/<filename>")
-def embed_gist(gist=None, filename=None):
-    #print gist, filename
-    #return render_template("water.html", code=code, base_url=base_url) 
-    return render_template("embed.html", gist=gist, filename=filename, base_url=base_url) 
+    return render_template("carbonite.html", gist=gist, filename=default_filename, base_url=base_url) 
+"""
 
 
 
-
-import urllib
-@app.route("/tributary/save", methods=["POST"])
-@app.route("/delta/save", methods=["POST"])
-@app.route("/hourglass/save", methods=["POST"])
-@app.route("/flow/save", methods=["POST"])
-def save():
-    #gistobj = json.loads(request.values.get("gist"))
-    data = request.values.get("gist")
-    #data = urllib.urlencode(gistobj)
-    #print "gistobj", data
-
-    url = 'https://api.github.com/gists'
-    req = urllib2.Request(url, data)
-    ret = urllib2.urlopen(req).read()
-    #print "ret", ret
-    resp = make_response(ret, 200)
-    #TODO: get this working behind apache
-    #resp.headers['Conent-Type'] = 'application/json'
-
-    return resp
-
-
 if __name__ == "__main__":
     app.run(host="localhost", port=8888)

static/tributary.js

@@ -51,21 +51,22 @@ tributary.Tributary = Backbone.Model.extend({
     },
     newcode: function(code) {
         //save the code in the model
-        this.set({code:code})
-        this.execute()
+        this.set({code:code});
+        this.execute();
         //TODO: store code in local storage
 
-        return true
+        return true;
     },
     get_code: function(callback) {
+        var that = this;
         if(this.get("gist") && this.get("filename")) {
-            src_url = "/tributary/api/" + this.get("gist")  + "/" + this.get("filename");
+            src_url = "/tributary/api/" + this.get("gist");//  + "/" + this.get("filename");
             d3.text(src_url, function(data) { 
                 if(data) {
                     code = data;
-                    this.set({code: data});
+                    that.set({code: data});
                 } else {
-                    code = this.get("code");
+                    code = that.get("code");
                     if(!code) {
                         code = "";
                     }
@@ -171,17 +172,17 @@ tributary.TributaryView = Backbone.View.extend({
 
         this.inlet = Inlet(this.code_editor);
 
-        that.init_gui();
+        this.init_gui();
 
         var code = this.model.get("code");
         //check if we already have the code
-        if(code !== undefined) {
+        if(code !== undefined && code !== "") {
             this.code_editor.setValue(code);
             this.model.execute();
         } else {
             //fill in the editor with text we get back from the gist
             this.model.get_code(function(error, got_code) {
-                this.code_editor.setValue(got_code);
+                that.code_editor.setValue(got_code);
             });
         }
 
@@ -206,7 +207,7 @@ tributary.TributaryView = Backbone.View.extend({
         var that = this;
         //Setup the gui elements for this page
         //Setup tweet link
-        //var thisurl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
+        /*
         $('#tweet_this').append("tweet this");
         $('#tweetPanel').on("click", function(e) {
             that.save_gist(function(newurl, newgist) {
@@ -215,6 +216,7 @@ tributary.TributaryView = Backbone.View.extend({
                 //window.open(tweetlink, 'twitte')
             });
         });
+        */
 
         //Setup the save panel
         $('#savePanel').on('click', function(e) {
@@ -294,6 +296,9 @@ tributary.TributaryView = Backbone.View.extend({
         //console.log("ENDPOINT", @endpoint)
         //Save the current code to a public gist
         var oldgist = parseInt(this.model.get("gist"), 10);
+
+        //We now assume all tributaries will be saved as inlet.js
+        //so this code is a bit redundant, but it might be useful in the future
         filename = this.model.get("filename");
         if(filename === ""){
             filename = "inlet.js";
@@ -314,12 +319,11 @@ tributary.TributaryView = Backbone.View.extend({
 
         var that = this;
         $.post('/tributary/save', {"gist":JSON.stringify(gist)}, function(data) {
-            //TODO: fix the flask headers to send back application/json and not text/html
             if(typeof(data) === "string") {
                 data = JSON.parse(data);
             }
             var newgist = data.id;
-            var newurl = "/" + that.endpoint + "/" + newgist + "/" + filename;
+            var newurl = "/" + that.endpoint + "/" + newgist;// + "/" + filename;
             callback(newurl, newgist);
             //window.location = newurl;
         });

static/flow.js → static/views/flow.js

@@ -10,7 +10,32 @@ var audioBuffer;
 
 
 
-$(function() {
+(function() {
+
+tributary.Flow  = tributary.Tributary.extend({
+    //Music visualization exploration
+    execute: function() {
+        try {
+            eval(this.get("code"));
+            this.trigger("noerror");
+        } catch (e) {
+            this.trigger("error", e);
+        }
+
+        try {
+            $("#flow").empty();
+            //we exec the user defined append code
+            tributary.init(tributary.g);
+            //then we run the user defined run function
+            tributary.execute();
+            this.trigger("noerror");
+        } catch (er) {
+            this.trigger("error", er);
+        }
+
+        return true;
+    }
+});
 
 
 //time slider
@@ -168,7 +193,7 @@ d3.timer(function() {
 
 
 
-});
+}());
 
 
 

static/hourglass.js → static/views/hourglass.js

@@ -1,5 +1,43 @@
 (function() {
 
+    tributary.HourGlass  = tributary.Tributary.extend({
+        //For exploring animations, run loops 
+        initialize: function() {
+            this.binder();
+            this.set({
+                code: '\
+var txt;\n\
+tributary.init = function(g) {\n\
+    txt = g.append("text")\n\
+      .attr("transform", "translate(" + [100, 100] + ")");\n\
+};\n\
+tributary.run = function(g,t) {\n\
+    txt.text(t);\n\
+};'
+            });
+        },
+        execute: function() {
+            try {
+                eval(this.get("code"));
+                this.trigger("noerror");
+            } catch (e) {
+                this.trigger("error", e);
+            }
+
+            try {
+                $("#hourglass").empty();
+                //we exec the user defined append code
+                tributary.init(tributary.g);
+                //then we run the user defined run function
+                tributary.execute();
+                this.trigger("noerror");
+            } catch (er) {
+                this.trigger("error", er);
+            }
+
+            return true;
+        }
+    })
     //time slider
     //window.delta = {}
     //var delta = window.delta;