OpenWetWare talk:Software/Image Editor

Austin Che 22:55, 10 November 2006 (EST): Some of the comments on the limits aren't really true. For example, you can embed SVG already using wikitex. For example:

 

Other things like graphs and chemical diagrams (see Amino acids) are already doable. What's missing may be a WYSIWYG editor also.

SVG image support
--Vincent 14:51, 11 November 2006 (EST): That's right, SVG is already handled within MediaWiki (see documentation). However, it is quite a limited use of SVG as SVG files are PNG rasterized. It prevents to benefit from the all world of SVG interactivity (animations, links). But at the end I agree that for some static vector graphics, it could be better to rely on SVG rasterization instead of having to use an applet as a viewer (which might be slow to launch).

As you mentionned, the editing of SVG still lacks some sort of ergonomy. It should be handled by a graphical interface(e.g.applet). It would be too constraining to ask users to update raw SVG files.

About images on OWW, here is a list of the different types of images that could be useful:
 * array of pixels (PNG, JPEG, GIF) --> natively handled by MediaWiki
 * vector graphics without interactivity (SVG) --> handled by MediaWiki as rasterized images (PNG)
 * vector graphics with interactivity (SVG) --> not handled
 * array of pixels with vector graphics overlays (PNG, JPEG, GIF embedded into SVG) --> need to try if PNG raster works

Interesting tests on overlays
It looks really powerful as the bitmap is in fact a xlink reference (examples are from w3.org) Only the contour is described in the SVG code.

We are now just missing a simple editor to start having gels and random images annotated.

       bla bla bla bla bla bla 

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="1052.3622" height="744.09448" id="svg2"> <defs id="defs4"> <marker refX="0" refY="0" orient="auto" style="overflow:visible" id="Arrow2Mstart"> <path d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.97309,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " transform="scale(0.6,0.6)" style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round" id="path3064" /> <marker refX="0" refY="0" orient="auto" style="overflow:visible" id="Arrow1Lstart"> <path d="M 0,0 L 5,-5 L -12.5,0 L 5,5 L 0,0 z " transform="matrix(0.8,0,0,0.8,10,0)" style="fill-rule:evenodd;stroke:black;stroke-width:1pt;marker-start:none" id="path3088" />  <image xlink:href="http://openwetware.org/images/6/62/T9002coloniesforPCR2.png" x="-97.714294" y="-110.76266" width="1344" height="1024" id="image6904" /> </g>  <path d="M 579.99998,294.09448 A 138.57143,92.85714 0 1 1 579.95959,291.85244" transform="matrix(0.588349,0.808607,-0.808607,0.588349,419.5214,-235.878)" style="opacity:1;fill:#fff200;fill-opacity:0.23684214;stroke:#f11500;stroke-width:5.00000048;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:15.0000013, 5.00000043;stroke-dashoffset:10.00000127;stroke-opacity:1" id="path2022" /> <path d="M 434.28572,531.23737 A 91.428574,67.14286 0 1 1 434.25907,529.6162" transform="translate(14,24)" style="opacity:1;fill:none;fill-opacity:1;stroke:#f11500;stroke-width:12.53600025;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:12.53600025, 25.0720005;stroke-dashoffset:25.0719995;stroke-opacity:1" id="path2024" /> <rect width="251.42853" height="74.285698" x="433.94482" y="-246.98447" transform="matrix(0.860894,0.508784,-0.508784,0.860894,0,0)" style="opacity:1;fill:none;fill-opacity:1;stroke:#32f500;stroke-width:2.00000048;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:4.00000064;stroke-opacity:1" id="rect2026" /> <path d="M 620,424.09448 C 628.49535,431.10809 636.68674,437.87237 644.58503,444.3962 C 865.13184,626.56333 857.14286,621.23734 857.14286,621.23734" style="fill:#f90000;fill-opacity:1;fill-rule:evenodd;stroke:#ef0000;stroke-width:6.4000001;stroke-linecap:butt;stroke-linejoin:miter;marker-start:url(#Arrow2Mstart);stroke-miterlimit:4;stroke-dasharray:12.8, 6.4;stroke-dashoffset:0;stroke-opacity:1" id="path2028" /> <path d="M 725.71429,189.80877 L 617.14286,264.09448 L 657.14286,395.52305 L 768.57143,455.52305 L 840,404.09448 L 714.28571,378.3802 L 708.57143,278.3802 L 754.28571,326.95163 L 811.42857,301.23734 L 797.14286,218.3802 L 725.71429,189.80877 z " style="fill:none;fill-rule:evenodd;stroke:#f700f9;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path5752" /> <text x="452.85751" y="-162.20145" transform="matrix(0.838229,0.545319,-0.545319,0.838229,0,0)" style="font-size:45.00001526px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#00ef00;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Arial" id="text5754" xml:space="preserve"><tspan x="452.85751" y="-162.20145" id="tspan5756">bla bla bla <text x="296.83838" y="354.22247" style="font-size:45px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:black;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Arial" id="text5758" xml:space="preserve"><tspan x="296.83838" y="354.22247" id="tspan5760">bla bla bla <text x="767.98785" y="661.74335" transform="matrix(0.999972,7.418635e-3,-7.418635e-3,0.999972,0,0)" style="font-size:44.99958038px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#00ef00;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Arial" id="text6647" xml:space="preserve"><tspan x="767.98785" y="661.74335" id="tspan6649">bla bla bla </g>