Contents SVG basics SVG documentation Coordinate systems SVG

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 view. Box 1 of 50

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

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

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 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 • vector description converted to pixels • achieves maximum sharpness for all possible display resolutions 4 of 50

SVG standard • SVG is the international World Wide Web (W 3 C) Consortium standard for 2 D 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 • Corel. DRAW: exports to svg 5 of 50

SVG documentation Extensive online documentation, e. g • Jenkov tutorial • Google search, e. g. “svg colors” • W 3 C SVG info for the ultimate technical details CIF tooling documentation • SVG visualization in CIF • SVG in index 6 of 50

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

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

SVG dimensions • SVG base units are pixels • SVG units are converted to pixels via a fixed PPI (Pixels Per Inch) conversion factor: Application Inkscape 0. 91 Inkscape 0. 92 Firefox SVG unit conversion 1 inch = 90 pixels 1 inch = 96 pixels PDF 1 inch = 72 pixels 9 of 50

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) 10 of 50

SVG editor: Inkscape 11 of 50

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 12 of 50

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 13 of 50

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

Changing Inkscape document size • Default Inkscape document size is A 4. • A 4 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. 15 of 50

16 of 50

17 of 50

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 18 of 50

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 layer 1 Select transform attribute 19 of 50

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). 20 of 50

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 flow. Root 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. 21 of 50

SVG visualization in CIF: Documentation • SVG visualization documentation 22 of 50

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. 23 of 50

Pusher: • body = rect 4345 • shaft • head 24 of 50

25 of 50

26 of 50

Connecting CIF to SVG svgfile "pusher. svg"; svgout id "shaft" attr "width" value 40 + 40 * x; svgout id "head" attr "x" value 200 + 40 * x; const real V = 2; const real x_max = 4; alg bool a; cont x = 0; equation x' = if x_max <= x : if a: elif 0 < x : if a: else if a: end; a = if time < 2: false elif 0 else -V end V else 0 end equation time < 4: true else false end; 27 of 50

Demo 1_pusher_svg_head_x. tooldef 2 from "lib: cif 3" import *; cif 3 sim( "pusher_svg. cif", "-t 7", "-i auto", "--frame-rate=40", // "--speed=1", ); 28 of 50

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

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

New attribute 31 of 50

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

CIF fmt function 33 of 50

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

fmt function calculation x 0 1 2 fmt("translate(%s, 0)", 40 * x) "translate(0, 0)" "translate(40, 0)" "translate(80, 0)" • 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 35 of 50

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 • svgout id "shaft" attr "width" value 40 + 40 * x; • svgout id "head" attr "transform" value fmt("translate(%s, 0)", 40 * x); • SVG file is updated in memory • SVG drawing is redrawn based on updated SVG file in memory 36 of 50

SVG groups Group object(s) • Select object(s) in SVG drawing • Ctrl-G to group selected object(s) Ungroup objects • Select object group • Shift-Ctrl-G to ungroup Select multiple objects in SVG • Shift-select • Use rubber-banding (drag select) 37 of 50

Some SVG transforms Transform translate(x, y) rotate(alpha, x, y) rotate(alpha) scale(k) Meaning translate x, y units in respective directions. rotate alpha degrees around point (x, y). rotate(alpha, 0, 0). Scales the object with relation to the SVG origin with a factor k. This also scales the distance of the object to the origin. matrix(a, b, c, d, e, f) All transformations can be expressed as matrices, see Jenkins SVG tutorial. 38 of 50

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: 1. svgout id "parent" attr "transform" value "translate(x, y)"; svgout id "child" attr "transform" value "scale(2)"; 2. svgout id "parent" attr "transform" value "translate(x, y) scale(2)"; 3. svgout id "child" attr "transform" value "translate(x, y) scale(2)"; 39 of 50

Unintentional overriding of transforms Caution: • If a group in an svg file already has a transform, application of a transform in CIF on that group OVERRIDES the original transform • Example: • moving a group in Inkscape adds a translate transform to the group, because groups do not have x and y coordinates • applying a translate transform in CIF on such a group undoes the translate already present in the group 40 of 50

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 41 of 50

Inkscape keyboard shortcuts: viewing Key Command Meaning 1 Zoom 1: 1 Actual visualization size in CIF 4 Zoom drawing Shows all actual objects in drawing 5 Zoom page Shows complete drawing canvas including edges + Increase zoom - Decrease zoom Press and Hold Space Pan canvas by hovering (move mouse without clicking) Control-Shift-X Open XML inspector Inspect and edit SVG objects 42 of 50

Inkscape keyboard shortcuts: drawing Key Command Meaning F 1 Selection mode Leave currently selected drawing mode and return to selection mode Space Toggle mode Toggle between last drawing mode and selection mode Ctrl-Drag Constrained drawing/resizing First Ctrl, than drag or draw: constrain ratio while drawing or resizing Ctrl-G Group selection Creates a group containing all selected objects Shift-Ctrl-G Ungroup selection Removes the selected group, keeping its individual elements (and selects all individual elements) 43 of 50

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

Scaling using view. Box • To increase/decrase the size of the resulting displayed SVG: • increase/decrease the width and height of the top-level SVG object • keep view. Box unchanged • Resulting drawing in view. Box 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 view. Box 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-viewport-view-box. html 45 of 50

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

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

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

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). 49 of 50

50 of 50