OpenWetWare talk:Software/Image Editor

From OpenWetWare
Revision as of 09:10, 24 November 2006 by Vincent Rouilly (talk | contribs) (→‎Interesting tests on overlays)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=OpenWetWare_talk:Software/Image_Editor&oldid=88376"