Medialab Prado Logs

From 15 April till 27 April, Design with Git daily activity at Medialab Prado.

Day 7 : 21 April

And on the seventh day God finished his work that he had done, and he rested on the seventh day from all his work that he had done.

Well, not really ;)

Multiplayer Nodejs Drawing game and tutorial. Maybe something to hook with SVG-edit.

Thx to a visit yesterday by Edward Tewiah and the discussion that followed it, the SVG-Diff algorythm in the browser could be solved by a JSON-Diff instead. There seems to be some JSON diff, compare, patch going around.

Day 6 : 20 April

Interaction between Timeline and Diff viewer completed & beautified.

SVG to Canvas (dashed line) rendering

Paperjs can import SVG and draw dashed lines into the Canvas. See Line testing example. But it seems Paperjs doesn't like the svg structure coming out of Inkscape (Issue) So my test case is failing. Going for another lib.

Fabricjs is yet another (seems to be nice) canvas library. But couldn't get that SVG import working.

Day 5 : 19 April

Visit of Ana Botella to Medialab Prado

Pippin promising to share Pixel Diff algorythm.

Presentation of the work in progress + pecha kucha of collaborators.

“Party at my house” @ Basurama.

Day 4 : 18 April

Static timeline integration

Publishing a Processingjs bug: Ticket 2014
<html> <iframe id='ifr' width='500' height='335' scrolling='no' style='background: url(http://studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;' src='http://studio.processingtogether.com/sp/pad/iframe/ro.9wCopm7$GprW0/rev.314?autostart=0'></iframe> </html>

Multiple users SVG-edit video demo

Need to try this dashed line svg to canvas (bug) in paperjs (and maybe others alike)

Day 3 : 17 April

http://code.google.com/p/canvg/ would be needed to convert SVG to Canvas drawing so the Blender-Context library could then be used to make a pixel diff between the two SVG (But unfortunatly, Cansvg doesn't seem to convert dashed lines)

http://code.google.com/p/canvg/issues/detail?id=52#c4 is a working peace of code that solves the previous dashed-line rendering problem.

TO READ: A Novel XML Document Structure Comparison Framework based-on Sub- tree Commonalities and Label Semantics

Disapointed that the tests of the gh3 library fail on the 3rd one and on in Firefox and on the 4th one in Chrome. This makes this library unusable or I misuse it.

TO READ: http://svgkit.sourceforge.net/web/SVGKit.html

Day 2 : 16 April

http://comunidad.medialab-prado.es/

Set up a github for the project https://github.com/xuv/visual-git

One to one discussion with Lila about Wikimedia Commons svg traces request and how to better hadle them. Would Git or Visual-Git be useful? Suggestion would be to have a policy rule for designers taking over the job to post back their changes as soon as possible (in a 24h time frame) even is the job is not finished. So other designers can take on afterwards.

Ricardo (advisor) encourages me to work on the svg-diff first. Git fetching can be done later.

Planning for the week

The plan is to have a browser-based visalisation of git commit history and be able to visually compare two blobs. considering that the only versioned files taken into account are SVG files. To achieve that, we need to review existing js libraries that will display timelines, compare files and interface with git (or with a git repository). Then choose the best ones for the job and make them work together.

Reviewed tools

Git js interfaces

git.js Seemed a nice choice at first, but project hasn't been updated in a year and seems to be buggy. Won't be developped anymore.

js-git Promissing project, just funded through Kickstarter (end of March 2013). Guess will have to wait from 3 to 6 months to have a working code.

Github js interfaces

https://github.com/michael/github High level library with what seems an easy set of functions to use. Can get branches and blobs. But doesn't seem to be able to retreive a commit history.

✔ https://github.com/k33g/gh3 Seems a more complicated Js library but with a lot more features.

Here's a github repo full of svg with commit history to test a script

Timeline js interfaces

This would be used to display a list of commits. This requires a “special” timeline application that can display concurrent timelines (necessary to display branching).

TimelineJs Beautiful project but doesn't have the concurrent timeline feature or to be more precise, the feature called “tags” could be used but it's limited to 3 or 6 tags maximum.

✔ Timeline has the concurrent feature. It could be done with two timelines or by using the "grouping" function, which is prefered.

Visual Diff Tools

Before/After slider

Day 1 : 15 April

Presentation of the project to all the participants

Git data object persentation by Pippin

Discussions with Dave (@davelab6), Pippin, Capo, Edu and advisors about possible outcome for the 2 weeks.

Going for a web based interface of visual git history and diff of SVG files

Looking for inspiration and possible tools:

Timeline.js

Timeline

Visual Version Control System research by LGRU

Non Linear Revision System & Data-driven History List for Image Editing

Beanstalk preview & compare tool

HTML canvas Blend modes

Github image view modes Thx @RaphaelBastide for the link.