xuv's notebook

Side notes, howtos and random bits of information related to Julien Deswaef's projects

User Tools

Site Tools


projects:design_with_git:medialab_prado_log

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
projects:design_with_git:medialab_prado_log [2013/04/18 13:39] – [Day 4 : 18 April] Julien Deswaefprojects:design_with_git:medialab_prado_log [2013/04/27 11:52] (current) – [Day 12 : 26 April (last day)] Julien Deswaef
Line 2: Line 2:
  
 From 15 April till 27 April, [[projects:design_with_git|Design with Git]] daily activity at Medialab Prado. From 15 April till 27 April, [[projects:design_with_git|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:
 +<code=javascript>
 +// replace these
 +ctx.webkitLineDash = lengths;
 +ctx.webkitLineDashOffset = 2;
 +
 +// by these
 +ctx.setLineDash(lengths);
 +ctx.lineDashOffset = 2;
 +</code>
 +
 +  * 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 [[https://github.com/xuv/svg-git-dummy/|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.
 +  * A small interview with [[http://snelting.domainepublic.net/|Femke]] about the project, transcribed by [[https://twitter.com/ossington/status/327120327161307136|Ginger]], for the end-of-the-workshop publication.
 +  * Mail discussion with [[https://github.com/wout|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
 +    * **<nowiki>git show <commit sha1> --abbrev=40 --raw <filename></nowiki>** returns the tree sha1 and blob sha1 for that commit
 +    * **git show <blob sha1>** returns the data
 +  * Dave's finding: [[http://libgit2.github.com/node-gitteh/|node-gitteh]], a node module wrapping git commands. 
 +  * Ed wrapped up a small [[https://gist.github.com/etewiah/5454122|client-side github repo svg blob fetcher]] using gh3.
 +  * [[http://roomandboard.github.io/vectron/|Vectron]] imports svg into [[http://raphaeljs.com/|Raphaeljs]] (Examples loaded from the repo don't work locally. Even the homepage of the project copied locally displays incorrectly. ???)
 +  * Trying [[http://d3js.org/|D3.js]].
 +  * [[http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/|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 [[https://madridrb.jottit.com/abril_2013|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 [[http://www.artediez.es/|Arte 10]] Madrid. Helped "debug" my project with svg from AI + other test cases.
 +  * Looking into [[http://svgjs.com/|svg.js]] to manipulate the SVG diff in the browser. 
 +
 +===== Day 8 : 22 April =====
 +  * [[http://www.w3.org/Graphics/SVG/WG/wiki/SVG_2_DOM/JSON_Constructors|The problems rising from turning SVG to JSON]] (still might be usefull for a Diff imho)
 +  * testing software version control visualization [[https://code.google.com/p/gource/|gource]] [[https://vimeo.com/64546048|demo video]] (by c4po)
 +  * [[https://github.com/stsvilik/Xml-to-JSON|XML to JSON]] to turn SVG to JSON
 +  * FIXME Static-SVG-Diff viewer only works in Firefox for now.
 +  * TODO:
 +    * Choose a license for publishing (Samer)
 +    * Design students on tuesday (3-5pm)
 +    * Screencast
 +    * Spanish wrap-up of the project 
 +  * Pippin ([[http://twitter.com/hodefoting|@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 ;)
 +  * [[http://demo.tutorialzine.com/2012/08/nodejs-drawing-game/|Multiplayer Nodejs Drawing game]] and tutorial. Maybe something to hook with SVG-edit.
 +  * Thx to a visit yesterday by [[http://happensesame.com|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 [[https://github.com/benjamine/JsonDiffPatch|some]] [[https://fedorahosted.org/json_diff/|JSON]] [[https://github.com/benjamine/JsonDiffPatch|diff]], [[http://tlrobinson.net/projects/javascript-fun/|compare]], [[https://github.com/andreyvit/json-diff|patch]] going around.
 +
 +===== Day 6 : 20 April =====
 +  * Interaction between Timeline and Diff viewer completed & beautified.
 +=== SVG to Canvas (dashed line) rendering ===
 +  * [[http://paperjs.org/|Paperjs]] can import SVG and draw dashed lines into the Canvas. See [[https://github.com/xuv/paper.js/blob/master/examples/SVG%20Import/Line%20Testing.html|Line testing example]]. But it seems Paperjs doesn't like the svg structure coming out of Inkscape ([[https://github.com/paperjs/paper.js/issues/203|Issue]]) So my test case is failing. Going for another lib.
 +  * [[http://fabricjs.com/|Fabricjs]] is yet another (seems to be nice) canvas library. But couldn't get that SVG import working. 
 +
 +===== Day 5 : 19 April =====
 +  * Visit of [[https://fr.wikipedia.org/wiki/Ana_Botella|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" @ [[http://basurama.org/|Basurama]].
 +
  
 ===== Day 4 : 18 April ===== ===== Day 4 : 18 April =====
   * Static timeline integration   * Static timeline integration
-  * Publishing a Processingjs bug:\\ <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>+  * Publishing a Processingjs bug: [[https://processing-js.lighthouseapp.com/projects/41284-processingjs/tickets/2014|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> 
 +  * [[http://vsr.informatik.tu-chemnitz.de/demo/GCI/svgedit.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 ===== ===== Day 3 : 17 April =====
Line 58: Line 141:
      * [[https://github.com/Phrogz/context-blender|HTML canvas Blend modes]]      * [[https://github.com/Phrogz/context-blender|HTML canvas Blend modes]]
      * [[https://github.com/blog/817-behold-image-view-modes|Github image view modes]] Thx [[https://twitter.com/raphaelbastide|@RaphaelBastide]] for the link.      * [[https://github.com/blog/817-behold-image-view-modes|Github image view modes]] Thx [[https://twitter.com/raphaelbastide|@RaphaelBastide]] for the link.
- 
projects/design_with_git/medialab_prado_log.1366285144.txt.gz · Last modified: by Julien Deswaef