-
Notifications
You must be signed in to change notification settings - Fork 52
Home
Meemoo is a visual programming language inside your browser. With Meemoo you can hack the whole Web to create your own apps and experiments.
Currently Meemoo is composed by an "app creator" called iframework where you can create your own modules which are simple (or complex!) HTML pages with meemoo.js embedded. These three pieces, iframework, modules and meemoo.js does all the magic.
Here you'll find some information regarding those pieces.
Inside the iframework you can plug and hack away all kinds of Meemoo modules. Modules are the main concepts under Meemoo, so let's start with them.
- Creating a Module: here you'll learn how to create simple modules to use with Meemoo.
- Module library These modules are already available.
- Module ideas to keep track of ideas for potential modules.
You can learn more about modules forking this repository and hacking the currently modules examples: http://github.com/forresto/meemoo-modules.
All the magic inside modules are done by meemoo.js (Meemoo modules are nothing more than HTML pages with meemoo.js embedded). It is so recommended to take a look at meemoo.js repository to understand the magic: http://github.com/meemoo/meemoo (some knowledge of Backbone.js and Underscore.js is highly appreciated).
Modules send data from an output by calling this.send("outputName", value) (native modules) or Meemoo.send("outputName", value) (iframe modules). This is translated to an event send:outputName.
Behind the scenes, each "wire" in a Meemoo app represents an event listener. This works something like:
// Listen for output
source.addEventListener("send:outputName", function(value){
// Hit input
target.receive("inputName", value);
});
Native nodes can define functions like
inputinputName: function (value) {
// Do something
},
that get called automatically when inputName is hit with the value. If this function is not defined, then a variable _inputName is set to the new value.
Apps are stored in a JSON-based graph format. You can share an app by clicking "source" and copying the text. If you click "compress" it will compress your app source code to one line, like this:
{"info":{"title":"cam to gif","author":"forresto","description":"webcam to animated gif","url":"cam2gif"},"nodes":[{"src":"http://forresto.github.com/meemoo-camcanvas/onionskin.html","x":128,"y":45,"z":0,"w":343,"h":280,"state":{"quality":75,"width":320,"height":240},"id":1},{"src":"http://forresto.github.com/meemoo-canvas2gif/canvas2gif.html","x":622,"y":43,"z":0,"w":357,"h":285,"state":{"delay":200,"quality":75,"matte":"#FFFFFF"},"id":3},{"src":"http://forresto.github.com/meemoo-modules/imgur.html","x":625,"y":398,"z":0,"w":357,"h":297,"state":{"title":"meemoo/cam2gif image share","caption":"This image was created with a Meemoo composition. http://meemoo.org/iframework/#/example/cam2gif"},"id":5}],"edges":[{"source":[1,"image"],"target":[3,"image"]},{"source":[3,"gif"],"target":[5,"dataurl"]}]}
You can paste that source code most places online: image descriptions, forum posts, comments, etc.
If you save your app sourcecode to a Github gist like https://gist.github.com/2589683, you can link directly to the gist-hosted app like: http://meemoo.org/iframework/#/gist/2589683 (where 2589683 is your gist ID).
Share your apps here in the Meemoo wiki.
You can think on iframework as your blank canvas. You can use the iframework hosted by Meemoo at http://meemoo.org/iframework or you can run your own.