Server-Side Graphics

Size: px

Start display at page:

Download "Server-Side Graphics"

Virgil Singleton
6 years ago
Views:

1 Server-Side Graphics SET09103 Advanced Web Technologies School of Computing Napier University, Edinburgh, UK Module Leader: Uta Priss 2008 Copyright Napier University Graphics Slide 1/16

2 Outline Graphics Copyright Napier University Graphics Slide 2/16

3 Graphics Extensive use of interactive graphics needed use Java Applets or Java Servlets. Static graphics or vector graphics scripting languages with graphics extensions are suitable. Copyright Napier University Graphics Slide 3/16

4 Graphics on the WWW Raster graphics (gif, jpg, png). HTML Image maps (<MAP>, raster graphics + coordinates). Binary vector graphics: Flash. XML-based: SVG (Scalable Vector Graphics). Copyright Napier University Graphics Slide 4/16

5 HTML image maps <body> <map name="somemap"> <area shape="rect" coords="400,250,500,300" href="file.html#part1"> <area shape="rect" coords="300,180,400,230" href="file.html#part2"> </map> <img src="picture.jpg" usemap="#somemap"> </body> Copyright Napier University Graphics Slide 5/16

6 Raster graphics Pixel based: points of colours. Examples: photographs, paintings,... Formats: jpg, gif, png,... Cannot be indefinitely scaled; has a maximum resolution Copyright Napier University Graphics Slide 6/16

7 Vector graphics Constructed from basic shapes: point, line, curve, polygon. Examples: maps, UML diagrams, line drawings,... Formats: svg, flash, XML graph formats,... Can be indefinitely scaled (depends on the rendering device). Can be manipulated by programs. Smaller file size than raster graphics. Copyright Napier University Graphics Slide 7/16

8 SVG example for drawing a rectangle <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg width="100%" height="100%" version="1.1" xmlns=" <rect width="300" height="100" style="fill:rgb(0,0,255)"/> </svg> Copyright Napier University Graphics Slide 8/16

9 How to use SVG files All modern web browsers (except MS IE) render SVGs directly. Microsoft IE supports VML instead; requires plugin for SVG. There are compatibility issues for more advanced features. Many vector graphics tools support SVG. APIs for programming languages: PHP: XML SVG, Perl: SVG, Java: Batik SVG Toolkit Copyright Napier University Graphics Slide 9/16

10 are special kinds of vector graphics They contain nodes and edges. Moving or removing a node affects its edges. Graph editors provide graph layout algorithms. Examples: tree structures (XML), flow charts, UML diagrams. John Susan knows knows knows Paul friend Robert friend Mary friend knows Paul knows John friend Robert knows Mary Susan Copyright Napier University Graphics Slide 10/16

11 Graph layout software/editors TouchGraph, spring embedder algorithms Java toolkits: Prefuse,... Graphviz: open source graph visualisation software Copyright Napier University Graphics Slide 11/16

12 Graphviz Directed and undirected graphs. Graph layouts: hierarchies, spring, radial, circular. Simple text-based format (called dot format ). APIs for different programming languages exist. Many output formats: gif, jpg, svg, pdf,... Copyright Napier University Graphics Slide 12/16

13 The dot format digraph names { node0 [label="john"] node1 [label="mary"] node2 [label="paul"] node0 -> node1 node0 -> node2 node2 -> node1 } John Paul Mary Copyright Napier University Graphics Slide 13/16

14 Mary John Paul Sue Bob Dora Bart Lisa Jim Rita Hierarchical, radial, circular layouts: Rita Sue Lisa Mary Jim Bart Bob John Paul John Sue Bob Dora Paul Dora Bart Lisa Mary Jim Rita Spring layouts: Bob Sue Bob Sue Rita Paul Mary Lisa Mary Paul John Dora Bart John Dora Bart Lisa Rita Jim Jim Copyright Napier University Graphics Slide 14/16

15 Sample Graphviz Applications For visualisation of... Database schemata XML DTDs and class hierarchies Web site paths traversed by users Apache log files and firewall rules UML diagrams from program code Copyright Napier University Graphics Slide 15/16

16 Graphviz doesn t use XML The dot format only needs to be written, not parsed. Data can still be stored as XML. Recommended workflow: program: Graphviz: read data from web form or XML convert data into "dot format" send "dot format" to Graphviz produce svg or png Copyright Napier University Graphics Slide 16/16

Graphs Eulerian and Hamiltonian Applications Graph layout software. Graphs. SET07106 Mathematics for Software Engineering

Graphs Eulerian and Hamiltonian Applications Graph layout software. Graphs. SET07106 Mathematics for Software Engineering Graphs SET76 Mathematics for Software Engineering School of Computing Edinburgh Napier University Module Leader: Uta Priss 2 Copyright Edinburgh Napier University Graphs Slide /3 Outline Graphs Eulerian