-
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/hack environment" called iframework where you can use modules to create your own apps/hacks just dragging them and plugging them together with coloured cords. Yes, like a modular synthesizer, guitar pedals or LEGO bricks!
Modules are just HTML/CSS/JS code. You can use or collection of existing modules or even create your own. Even existing HTML pages can be used as modules just adding meemoo.js in their headers and importing them inside Meemoo.
Here you'll find some information on how to hack on Meemoo.
First of all, clone Meemoo iframework method:
git clone https://github.com/meemoo/iframework.git
If you want to hack into the code and want that inside official Meemoo, please, fork this repos and do a pull request when done.
Maybe you want to do hardcore hacking in Meemoo, linting your code or writing some unit testing (please, do that, we really need tests!).
First of all, install node + grunt in your system as following...
- Install node.
- Install grunt's command line interface globally with
npm install -g grunt-cli. If you get permission error with this step, try fixing your permissions withsudo chown -R $USER /usr/local(why?). - In the iframework directory run
npm installto download the dependencies.
Here is a quick way to have Node + Grunt running in your Ubuntu system:
wget -c http://nodejs.org/dist/v0.10.5/node-v0.10.5.tar.gz
tar -xvzf node-v0.10.5.tar.gz
cd node-v0.10.5/
./configure
make -j 3
sudo make install
sudo npm install -g grunt-cli
In the iframework directory, download the dependencies and enjoy using grunt:
cd iframework/
npm install
grunt
-
grunt dev= run a web server at http://localhost:8000/?DEBUG and automatically lint files on change -
grunt watch= automatically lint files on change -
grunt test= lint files -
grunt(the default) = lint and build
Native modules are intern objects inside of Meemoo iframework. They are part of the Meemoo application, so image, video and audio processing and all operations done by those kind of modules are as fast as any other HTML5 app (different from IFrame Modules, the Native ones does not suffer from time delays of postMessage communication).
To create your own native modules, first create it inside src/nodes/. Take a look on the existing ones. Native modules can be separated in families (e.g. time, UI, util).
Just as an example, let's create a module that receives a number, adds one to it and passes them along to its output. We are going to call it src/nodes/util-inc.js:
// extends src/nodes/util.js which extends src/node-box-native-view.js
$(function(){
var template =
'<b>I add one, just it!</b>';
Iframework.NativeNodes["util-inc"] = Iframework.NativeNodes["util"].extend({
info: {
title: "inc",
description: "adds one to the input and sends the sum to the output"
},
initializeModule: function () {
// here comes the constructor
},
remove: function () {
// here comes the destructor
},
inputx: function (value) {
this.send("y", value + 1);
},
inputs: {
x: {
type: "float",
description: "number to increment"
}
},
outputs: {
y: {
type: "float"
}
}
});
});
Now you should list this new module into iframework's library to make it accessible into iframeowork Library menu. So edit src/examples/module-library.js:
util: [
...
{"src":"meemoo:util/inc","info":{"title":"inc","author":"django","description":"adds one to the input and sends the sum to the output"}},
...
]
To test, run a simple HTTP server into iframework root directory:
cd iframework/
python -m SimpleHTTPServer 8000
Point your browser to http://localhost:8000 and look for your new module inside the Library menu. Drag and drop your module and enjoy.
A good suggestion is to hack the other existing modules to get more the way to hack inside Meemoo!
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.