Table of Contents
Medialab Prado Logs
From 15 April till 27 April, Design with Git daily activity at Medialab Prado.
Day 12 : 26 April (last day)
- Cooked a function to resize in-the-dom svg with CSS3 transforms
- Fetching github repo and navigating svg commit history was almost there. But had rendering problems and time too short before presentation.
- Static version of the project can be tested at: http://xuv.github.io/design-with-git/static-svg-diff/
Day 11 : 25 April
- Documentation: filling info, drawing illustrations and taking screenshots.
- Chrom[e/ium] debug:
- Fails on static local: because “Cross origin requests are only supported for HTTP” (ref: canvg)
- SVG Dashed line not rendered properly into Canvas.
Canvg patch for chrome dashed-line rendering:
// replace these ctx.webkitLineDash = lengths; ctx.webkitLineDashOffset = 2; // by these ctx.setLineDash(lengths); ctx.lineDashOffset = 2;
- Renamed the Github repo for uniform naming convention: https://github.com/xuv/design-with-git
- (With gh3 in Chrome) Managed to get a list of svg files and commits from a dummy github repo, but Github serves them as text, not svg mime-type. Which sucks bad at this state of my project.
- Pippin's solution to SVG scaling problem: CSS3 transforms.
Day 10 : 24 April
- Dave suggested XSL to manipulate SVG styles in the browser.
- svg.js uses ONLY plain svg files and doesn't read Inkscape and Ai svgs. It's clearly written in the Doc. Note for self: RTFM before using library for your projet.
- Mail discussion with Wout Fierens about solving the import of inkscape svg files with svg.js
- Pippin Git help:
- git log <filename> returns all the commits for this file
- git show <commit sha1> --abbrev=40 --raw <filename> returns the tree sha1 and blob sha1 for that commit
- git show <blob sha1> returns the data
- Dave's finding: node-gitteh, a node module wrapping git commands.
- Ed wrapped up a small client-side github repo svg blob fetcher using gh3.
- Trying D3.js.
- SVGPan has pan and zoom functionalities inside the browser.
Sum up of the day: Trying to render a scaled version of svg/xml data in the browser isn't an easy task. Svg.js is the best solution. But not stable enough with svg (coming from inkscape?). As for now, this feature will be put on hold. Tomorow, last full working day at the Medialab Prado. TODO: pul data from git.
Day 9 : 23 April
- Suggested by Ed: Meetup w/ Github engineer doing a talk in Madrid on 25th.
- Textual SVG Diff works. Loads SVG, turns it to JSON, compares 2 files, outputs a JSON diff.
- Master Class: Git + SVG + presentation of the project to web design students of Arte 10 Madrid. Helped “debug” my project with svg from AI + other test cases.
- Looking into svg.js to manipulate the SVG diff in the browser.
Day 8 : 22 April
- The problems rising from turning SVG to JSON (still might be usefull for a Diff imho)
- XML to JSON to turn SVG to JSON
- Static-SVG-Diff viewer only works in Firefox for now.
- Choose a license for publishing (Samer)
- Design students on tuesday (3-5pm)
- Spanish wrap-up of the project
- Pippin (@hodefoting) own reddish pixel diff implementation and master class about pythagorian pixel manipulation
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.
Day 6 : 20 April
- Interaction between Timeline and Diff viewer completed & beautified.
SVG to Canvas (dashed line) rendering
- Fabricjs is yet another (seems to be nice) canvas library. But couldn't get that SVG import working.
Day 5 : 19 April
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>
- 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.
- 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.
Day 2 : 16 April
- 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.
Git js interfaces
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.
Visual Diff Tools
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:
- Visual Version Control System research by LGRU