Practicum 3 TMS Batik Suzanna Cha en Mieke Haesen
Overzicht Wat is Batik –Voorbeeldapplicaties –Software architectuur Voorbeelden –Wat gaat wel? –Wat gaat niet? Conclusie
Wat is Batik? Een toolkit om SVG afbeeldingen weer te geven. –Voorbeeld applicaties –Open Source
Voorbeeldapplicaties Squiggle SVG Browser SVG Rasterizer SVG Font Converter SVG Pretty Printer
Software architectuur Bron:
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
Voorbeelden Gebruikte Batik tools: SVGBrowser –Testen van SVG code SVGRasterizer –Omzetten van SVG afbeelding naar.png formaat (voor gebruik in deze presentatie)
Voorbeelden – wel mogelijk Afbeelding: Niet mogelijk in: Mozilla SVG CSIRO Amaya
Voorbeelden – wel mogelijk <text filter="url(#TekstFilter)“ font-family="Times New Roman" font-size="50“ font-style="italic" x="50" y="70"> Test
Voorbeelden – wel mogelijk
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
Voorbeelden – niet mogelijk Begin = resultaat in Batik Muis op rechthoek Muis buiten rechthoek
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); } ]]>
Voorbeelden – niet mogelijk <rect fill="yellow" height="30“ onmouseout="Cursor(evt, ’circle’, ’red’)" onmouseover="Cursor(evt, ’circle’, ’green’)“ stroke="none" width="50"/>
Conclusie Batik ondersteunt volgens W3C alle statische SVG elementen. Animaties worden voorzien in versie 2.0 (nog niet beschikbaar).