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:

<svg> <rect fill="red" stroke="black" x="15" y="15" width="100" height="50"/> <circle fill="yellow" stroke="black" cx="62" cy="135" r="20"/> </svg>

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.

<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="744.09448"
  height="1052.3622"
  id="svg9129">
 <defs
    id="defs9131" />
 <g
    id="layer1">
   <image
      xlink:href="http://openwetware.org/images/9/97/8-31_gel_PT.jpg"
      x="42.85714"
      y="3.43362"
      width="640"
      height="475"
      id="image9177" />
   <rect
      width="54.285713"
      height="251.42857"
      x="37.142857"
      y="63.790752"
      style="opacity:1;fill:none;fill-opacity:1;stroke:#00f100;stroke-width:5.0999999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      id="rect9180" />
   <rect
      width="173.00719"
      height="258.72147"
      x="95.78212"
      y="47.287163"
      style="opacity:1;fill:none;fill-opacity:1;stroke:#00f100;stroke-width:12.53600025;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:37.60800076, 12.53600025;stroke-dashoffset:25.0720005;stroke-opacity:1"
      id="rect10067" />
   <rect
      width="228.57143"
      height="348.57144"
      x="397.14285"
      y="15.219325"
      style="opacity:1;fill:none;fill-opacity:1;stroke:#f11500;stroke-width:5.0999999;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:15.29999971, 5.0999999;stroke-dashoffset:0;stroke-opacity:1"
      id="rect10071" />
   <text
      x="334.22855"
      y="-58.163361"
      transform="matrix(0,1,-1,0,0,0)"
      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="text11843"
      xml:space="preserve"><tspan
        x="334.22855"
        y="-58.163361"
        style="fill:#fff200;fill-opacity:1"
        id="tspan11845">bla bla</tspan></text>
   <text
      x="350.18225"
      y="173.0761"
      transform="matrix(0.707107,0.707107,-0.707107,0.707107,0,0)"
      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="text14502"
      xml:space="preserve"><tspan
        x="350.18225"
        y="173.0761"
        style="fill:#fff200;fill-opacity:1"
        id="tspan14504">bla bla</tspan></text>
   <text
      x="-583.71997"
      y="-381.37704"
      transform="scale(-1,-1)"
      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="text14506"
      xml:space="preserve"><tspan
        x="-583.71997"
        y="-381.37704"
        style="fill:#fff200;fill-opacity:1"
        id="tspan14508">bla bla</tspan></text>
 </g>

</svg>

<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>
   <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" />
   </marker>
 </defs>
 <g
    id="layer2">
   <image
      xlink:href="http://openwetware.org/images/6/62/T9002coloniesforPCR2.png"
      x="-97.714294"
      y="-110.76266"
      width="1344"
      height="1024"
      id="image6904" />
 </g>
 <g
    style="opacity:1"
    id="layer1">
   <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</tspan></text>
   <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</tspan></text>
   <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</tspan></text>
 </g>

</svg>