Practicum 3 TMS Batik Suzanna Cha en Mieke Haesen.

Presentatie over: "Practicum 3 TMS Batik Suzanna Cha en Mieke Haesen."— Transcript van de presentatie:

1 Practicum 3 TMS Batik Suzanna Cha en Mieke Haesen

2 Overzicht Wat is Batik –Voorbeeldapplicaties –Software architectuur Voorbeelden –Wat gaat wel? –Wat gaat niet? Conclusie

3 Wat is Batik? Een toolkit om SVG afbeeldingen weer te geven. –Voorbeeld applicaties –Open Source

4 Voorbeeldapplicaties Squiggle SVG Browser SVG Rasterizer SVG Font Converter SVG Pretty Printer

5 Software architectuur Bron: http://xml.apache.org/batik/architecture.html

6 Software architectuur 3 lagen: –Low-level modules Niet rechtstreeks voor software ontwikkelaars –Kern modules Link Ter beschikking van software ontwikkelaars –Applicatie modules Toepassingen van onderliggende lagen

7 Voorbeelden Gebruikte Batik tools: SVGBrowser –Testen van SVG code SVGRasterizer –Omzetten van SVG afbeelding naar.png formaat (voor gebruik in deze presentatie)

8 Voorbeelden – wel mogelijk Afbeelding: Niet mogelijk in: Mozilla SVG CSIRO Amaya

9 Voorbeelden – wel mogelijk <text filter="url(#TekstFilter)“ font-family="Times New Roman" font-size="50“ font-style="italic" x="50" y="70"> Test

10 Voorbeelden – wel mogelijk

11 Voorbeelden – niet mogelijk Scripting Pointer events –Rechthoek + cirkel: kleur cirkel hangt af van positie muis t.o.v. de rechthoek Begin: witte cirkel Muis op rechthoek  groene cirkel Muis buiten rechthoek  rode cirkel Getest in Adobe

12 Voorbeelden – niet mogelijk Begin = resultaat in Batik Muis op rechthoek Muis buiten rechthoek

13 Voorbeelden – niet mogelijk <![CDATA[ function Cursor(evt, idname, color) { // verwijzen naar object var doc = evt.target.ownerDocument; //getElementById(idname) : geeft het 1e object terug met //hetzelfde ID attribuut als de gespecifierde waarde //(idname=’circle’). var circle = doc.getElementById(idname); //setAttribute kan de waarde van een attribuut veranderen, //hier krijgt het attribuut ’fill’ (van circle) de nieuwe waarde //’color’ circle.setAttribute(’fill’, color); } ]]>

14 Voorbeelden – niet mogelijk <rect fill="yellow" height="30“ onmouseout="Cursor(evt, ’circle’, ’red’)" onmouseover="Cursor(evt, ’circle’, ’green’)“ stroke="none" width="50"/>

15 Conclusie Batik ondersteunt volgens W3C alle statische SVG elementen. Animaties worden voorzien in versie 2.0 (nog niet beschikbaar). http://xml.apache.org/batik/