Contents

1. Contents • SVG basics • SVG documentation • Coordinate systems • SVG editor: Inkscape • Changing document size • Adding text • SVG visualization in CIF • SVG transformations • CIF format function fmt • SVG keyboard shortcuts • SVG scaling using viewBox

2. Graphics • Raster graphics: consisting of pixels • Vector graphics: mathematical description of objects

3. Raster graphics • Consisting of pixels • Each pixel is a dot of the graphic • Scales badly • Examples • Photos • Computer displays

4. Vector graphics • Mathematical description of drawing by means of coordinates, vectors, objects, transformations • Examples: • CAD/CAM drawings • SVG: Scalable Vector Graphics • For displaying on computer screen • vector description converted to pixels • achieves maximum sharpness for all possible display resolutions SVG object definition <circle style="fill:green;stroke:black;stroke-width:2" id=“my_green_circle" cx=“10" cy=“10" r=“100" /> SVG graphical representation

5. SVG standard • SVG is the international World Wide Web (W3C) Consortium standard for 2D vector graphics • Supported by all modern browsers • Supported by several graphical editors, such as • Inkscape: open source, free download, uses svg as native file format • Illustrator: exports to svg • CorelDRAW: exports to svg

6. SVG documentation

7. SVG file format • Subset of XML (Extensible Markup Language) • XML widely adopted format that is • Human readable • Machine readable • Open standard • Extensive tool support

8. SVG example <svg> <rect x="10“ y="10" height="50" width="50" rx="5" ry="5“ style="stroke:#006600;fill:#00cc00“ /> <rect x="70" y="10" height="50" width="50" rx="10" ry="10“ style="stroke:#006600; fill: #00cc00“ /> </svg> Resulting rectangles:

9. SVG dimensions • SVG base units are pixels • SVG units are converted to pixels via a fixed PPI (Pixels Per Inch) conversion factor:

10. SVG display scaling • Size of SVG drawing on computer monitor depends on display resolution • Display resolution in DPI (Dots Per Inch) • Each display dot consists of a red, green and blue display element • SVG pixel is mapped to a display dot • Most common computer resolution is 96 DPI, especially on old monitors • 1 inch SVG picture is displayed as • ≈ 1 inch on 96 DPI conventional computer monitor • ≈ 0.4 inch on high resolution monitor (220/227 PPI Macbook Pro retina)

11. SVG editor: Inkscape

12. Inkscape characteristics • SVG graphical editor • Saves and opens in SVG • Free • Open source • Powerful • To download, Google search “Inkscape download” (latest version 0.92) • Available for Windows, Mac, Linux

13. Coordinate systems • Inkscape coordinate system • origin bottom left • positive y values up • SVG coordinate system • origin top left • positive y values down • originating from text on computer displays

14. Inkscape XML inspector • Ctrl-Shift-X to open inspector • Hierarchical view of graphical objects in left pane • Attributes of selected object in right pane

15. Changing Inkscape document size • Default Inkscape document size is A4. • A4 is too big for SVG display in CIF (zoom to 1:1 using numeric 1 key). • Therefore, we need to resize to document to a smaller size. • What happens when changing the size? • Let’s change the size of a 600 x 900 pixel document from portrait to landscape.

18. Resizing document in Inkscape 1 • Resizing document in Inkscape, keeps Inkscape position of objects in drawing, relative to lower left origin, unchanged • Consequences for SVG coordinates, relative to upper left origin? • Height reduction of document in Inkscape shifts objects up in SVG space • Instead of changing all SVG coordinates:Inkscape adds SVG transformation in top layer

19. Resizing document in Inkscape 2 Undo transformation added by Inkscape, due to change of svg document height, by deleting transform attribute in the svg layer. Delete attribute Select transform attribute layer 1

20. Inkscape removing transform attribute in layer • After removing transform attribute in drawing layer, SVG coordinates are retained. • Reducing height of document, followed by removing Inkscape induced transformation from drawing layer, effectively results in: • bottom of document moving upwards, closer to top of document. • drawing appearing to move downwards (respective to bottom margin).

21. Adding text to Inkscape SVG drawing • Insert text: select Text Tool, then first click, then type • inserts an SVG text element • Do NOT insert text by dragging a text box instead of clicking • inserts an SVG flowRoot element • leads to CIF error in console when simulating: • ERROR: File "tank.cif": Semantic error at line 1, column 9: SVG image file "tank.svg" is not an SVG file, is an invalid SVG file, or contains unsupported SVG features. • ERROR: Failed to load CIF file "tank.cif": the file has errors.

22. SVG visualization in CIF: Documentation • SVG visualization documentation

23. Basic principles • Visualization of a CIF model is achieved by connecting parts of the state of the CIF model to attributes of an SVG drawing. • At specific time points during simulation of a CIF model, the SVG drawing is updated to reflect the state of the CIF model. • A visualization is thus a sequence of displayed SVG drawings.

24. Pusher: • body =rect4345 • shaft • head

27. Connecting CIF to SVG svgfile"pusher.svg"; svgoutid"shaft"attr"width"value40+40* x; svgoutid"head"attr"x"value200+40* x; constreal V =2; constrealx_max=4; algbool a; cont x =0; equation x'=ifx_max<= x :if a:0else-V end elif0< x :if a: V else-V end elseif a: V else0end end; equation a =iftime<2:falseeliftime<4:trueelsefalseend;

28. Demo 1_pusher_svg_head_x.tooldef2 from"lib:cif3"import*; cif3sim( "pusher_svg.cif", "-t7", "-iauto", "--frame-rate=40", //"--speed=1", );

29. SVG transformations How to make visualizations independent of absolute positions of objects? By using SVG transformations: svgoutid"head"attr"x"value200+40* x; svgoutid"head"attr"transform" value fmt("translate(%s,0)",40* x);

30. Add attribute simply by typing new attribute name: transform And typing value: translate(40) Then Ctrl-Enter

31. New attribute

32. Inkscape drawing after attr: transform value: translate(40,0)

33. CIF fmt function

34. Search “fmt” in CIF website • Text formatting tutorial • Text formatting details

35. fmt function calculation • Calculate value of second parameter expression: 40 * x • Replace %s in the first parameter by the resulting value (40 * x) represented as a string • Return the resulting string

36. Real-time visualization procedure • For frame-rate of 20: every 50 ms, new frame is calculated • Simulation proceeds in steps of 50 ms each (1/20 s) • After each 50 ms: • New value of all variables is calculated (x in model of pusher) • All SVG statements in model are (re)evaluated • svgoutid"shaft"attr"width"value40+40* x; • svgoutid"head"attr"transform"valuefmt("translate(%s,0)",40* x); • SVG file is updated in memory • SVG drawing is redrawn based on updated SVG file in memory

37. SVG groups

38. Some SVG transforms

39. Nested transforms • Transforms can be applied in sequence, the innermost transform is applied first • Suppose a group with id “child” is nested in a group with id “parent”, then the combination of the two CIF statements in 1. has a similar effect as either statement 2. or 3, assuming no other transforms are present: • svgoutid"parent"attr"transform"value"translate(x,y)";svgoutid"child"attr"transform"value"scale(2)"; • svgoutid"parent"attr"transform"value"translate(x,y) scale(2)"; • svgoutid"child" attr"transform"value"translate(x,y) scale(2)";

40. Unintentional overriding of transforms

41. Debugging visualizations In case of strangely behaving visualizations: • Right click > Save as (on a running simulation / visualization in Eclipse) • Open and inspect the saved SVG file in Inkscape

42. Inkscape keyboard shortcuts: viewing

43. Inkscape keyboard shortcuts: drawing

44. Scaling using viewBox (advanced concept) • If the CIF SVG visualization is too big or too small, it can be resized by means of the viewBox attribute of the top level SVG element • viewBox defines a rectangle: • viewBox(x0, y0, xmax, ymax) • (x0, y0) is origin of viewBox • (xmax, ymax) is lower right corner • Default width and height of viewBox are set equal to SVG drawing coordinates

45. Scaling using viewBox • To increase/decrase the size of the resulting displayed SVG: • increase/decrease the width and height of the top-level SVG object • keep viewBox unchanged • Resulting drawing in viewBox is resized so that it fits in larger/smaller top-level SVG object, keeping the ratio of the drawing unchanged • Changing the origin of the viewBox to a positive non-zero (x, y) point clips (cuts off) all points from the drawing to the left and up from the (x, y) point • More info: http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

46. Example 1 viewBox • Original attributes of top-level SVG object: • width = 800 • height = 600 • viewBox(0, 0, 800, 600) (equivalent to viewBox attribute not present) • New attributes of top-level SVG object: • width = 1200 • height = 900 • viewBox(0, 0, 800, 600) • Resulting SVG drawing is 1.5 times the size of the original

47. Example 2 viewBox • Original attributes of top-level SVG object: • width = 800 • height = 600 • viewBox(0, 0, 800, 600) (equivalent to viewBox attribute not present) • New attributes of top-level SVG object: • width = 1600 • height = 900 • viewBox(0, 0, 800, 600) • Resulting SVG drawing is shown at 1.5 times the size of the originalNew drawing contains additional empty space to the right due to increased width

48. Example 3 viewBox • Original attributes of top-level SVG object: • width = 800 • height = 600 • viewBox(0, 0, 800, 600) (equivalent to viewBox attribute not present) • New attributes of top-level SVG object: • width = 350 • height = 250 • viewBox(100, 100, 800, 600) • Resulting SVG drawing displays only to the right and below new viewBox origin (100, 100) and displays it at half the size

49. Scaling via Inkscape • Scaling can also be done by changing the required attributes via the Document Properties in Inkscape, see next slide. • The document properties panel in Inkscape also includes a Scale setting. • The Scale setting is not an SVG attribute; it reflects the width (height) of the viewbox divided by the width (height) of the top-level SVG object, a.k.a. the document width (height).