path: root/doc/tutorial/slides/tutorial.xml

<?xml version="1.0" ?>
<svgslides
    xmlns="http://www.svgslides.org/svgslides0.1"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    >

  <slides theme="cairo"
	  presentation="How to Recognize Ugly Graphics"
	  presentation-subtitle="How to recognize ugly graphics—and what you can do about it."
	  URL="http://cairographics.org"
	  bullet="bullet">

    <slide title="Tutorial Preparation" variant="blank" bullet="">
      <lc></lc>
      <lc align="center">http://cairographics.org/tutorial</lc>
      <lc></lc>
      <li>tar xzf tutorial.tar.gz</li>
      <li>cd tutorial</li>
      <li>make</li>
      <lc></lc>
      <lc align="center">IRC help: freenode.net #cairo</lc>
    </slide>

    <slide variant="title">
      <lc>Carl Worth</lc>
      <lc>Red Hat, Inc.</lc>
      <lc></lc>
      <lc>Ottawa Linux Symposium</lc>
      <lc>2005-07-22</lc>
      <lc>http://cairographics.org</lc>
    </slide>

    <slide title="Ugly Graphics" variant="separator">
      <lc align="left">Jaggies</lc>
      <lc align="center">Fuzzies</lc>
      <lc align="right">Fireworks</lc>
    </slide>

    <slide title="Jaggies">
      <img src="jaggies.svg"/>
    </slide>

    <slide title="Fuzzies">
      <img src="fuzzies.svg"/>
    </slide>

    <slide title="Fireworks">
    </slide>

    <slide title="Getting Started" variant="separator">
      <lc align="center">Various shell cairo program</lc>
    </slide>

    <slide title="Minimal cairo-xlib program" variant="code">
      <lc>#include &lt;cairo.h&gt;</lc>
      <lc>#include &lt;cairo-xlib.h&gt;</lc>
      <lc>int main (void) {</lc>
      <lc>    Display *dpy = XOpenDisplay (0);</lc>
      <lc>    Window  w = XCreateSimpleWindow (dpy,RootWindow (dpy, 0),</lc>
      <lc>                0, 0, WIDTH, HEIGHT, 0, 0, WhitePixel (dpy, 0));</lc>
      <lc>    cairo_surface_t *surface = cairo_xlib_surface_create (dpy, w,</lc>
      <lc>                        DefaultVisual (dpy, DefaultScreen (dpy)),</lc>
      <lc>                                                   WIDTH, HEIGHT);</lc>
      <lc>    XEvent  ev;</lc>
      <lc>    XSelectInput (dpy, w, ExposureMask);</lc>
      <lc>    XMapWindow (dpy, w);</lc>
      <lc>    while (XNextEvent (dpy, &amp;ev) == 0)</lc>
      <lc>        if (ev.type == Expose &amp;&amp; !ev.xexpose.count) {</lc>
      <lc>            cairo_t *cr = cairo_create (surface);</lc>
      <lc>            draw (cr);</lc>
      <lc>            cairo_destroy (cr);</lc>
      <lc>        }</lc>
      <lc>}</lc>
    </slide>

    <slide title="Minimal cairo-gtk program" variant="code">
      <lc>#include &lt;gtk/gtk.h&gt;</lc>
      <lc>static gboolean</lc>
      <lc>handle_expose (GtkWidget *widget, GdkEventExpose *event, gpointer data) {</lc>
      <lc>    cairo_t *cr = gdk_cairo_create (widget->window);</lc>
      <lc>    draw (cr);</lc>
      <lc>    cairo_destroy (cr);</lc>
      <lc>    return FALSE;</lc>
      <lc>}</lc>
      <lc>int main (int argc, char **argv) {</lc>
      <lc>    GtkWidget *window, *drawing_area;</lc>
      <lc>    gtk_init (&amp;argc, &amp;argv);</lc>
      <lc>    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);</lc>
      <lc>    gtk_window_set_default_size (GTK_WINDOW (window), WIDTH, HEIGHT);</lc>
      <lc>    drawing_area = gtk_drawing_area_new ();</lc>
      <lc>    gtk_container_add (GTK_CONTAINER (window), drawing_area);</lc>
      <lc>    g_signal_connect (drawing_area, "expose-event",</lc>
      <lc>                      G_CALLBACK (handle_expose), NULL);</lc>
      <lc>    gtk_widget_show_all (window);</lc>
      <lc>    gtk_main ();</lc>
      <lc>}</lc>
    </slide>

    <slide title="Minimal cairo-png program" variant="code">
      <lc>#include &lt;cairo.h&gt;</lc>
      <lc></lc>
      <lc>int main (void)</lc>
      <lc>{</lc>
      <lc>    cairo_surface_t *surface;</lc>
      <lc>    cairo_t *cr;</lc>
      <lc></lc>
      <lc>    surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32,</lc>
      <lc>                                          WIDTH, HEIGHT);</lc>
      <lc>    </lc>
      <lc>    cr = cairo_create (surface);</lc>
      <lc>    draw (cr);</lc>
      <lc>    cairo_surface_write_to_png (surface, "foo.png");</lc>
      <lc></lc>
      <lc>    cairo_surface_destroy (surface);</lc>
      <lc>    cairo_destroy (cr);</lc>
      <lc></lc>
      <lc>    return 0;</lc>
      <lc>}</lc>
    </slide>

    <slide title="Minimal cairo-pdf program" variant="code">
      <lc>#include &lt;cairo.h&gt;</lc>
      <lc>#include &lt;cairo-pdf.h&gt;</lc>
      <lc></lc>
      <lc>int main (void)</lc>
      <lc>{</lc>
      <lc>    cairo_surface_t *surface;</lc>
      <lc>    cairo_t *cr;</lc>
      <lc></lc>
      <lc>    surface = cairo_pdf_surface_create (foo.pdf, WIDTH, HEIGHT);</lc>
      <lc>    </lc>
      <lc>    cr = cairo_create (surface);</lc>
      <lc>    draw (cr);</lc>
      <lc>    cairo_show_page (cr);</lc>
      <lc></lc>
      <lc>    cairo_surface_destroy (surface);</lc>
      <lc>    cairo_destroy (cr);</lc>
      <lc></lc>
      <lc>    return 0;</lc>
      <lc>}</lc>
    </slide>

    <slide title="Minimal pycairo-gtk shell" variant="code">
      <lc>import gtk</lc>
      <lc>import cairo</lc>
      <lc>import cairo.gtk</lc>
      <lc></lc>
      <lc>def handle_expose (widget, event):</lc>
      <lc>    cr = cairo.gtk.gdk_cairo_create (widget.window)</lc>
      <lc>    draw (c)</lc>
      <lc></lc>
      <lc>win = gtk.Window ()</lc>
      <lc>win.connect ('destroy', lambda x: gtk.main_quit ())</lc>
      <lc>drawingarea = gtk.DrawingArea ()</lc>
      <lc>win.add (drawingarea)</lc>
      <lc>drawingarea.connect ('expose_event', handle_expose)</lc>
      <lc>drawingarea.set_size_request (WIDTH, HEIGHT)</lc>
      <lc>drawingarea.set_double_buffered (False)</lc>
      <lc>win.show_all ()</lc>
      <lc>gtk.main ()</lc>
    </slide>

    <slide title="Minimal pycairo-png shell" variant="code">
      <lc>import cairo</lc>
      <lc></lc>
      <lc>surface = cairo.ImageSurface (cairo.FORMAT_ARGB32, WIDTH, HEIGHT)</lc>
      <lc>cr = cairo.Context (surface)</lc>
      <lc></lc>
      <lc>draw (cr)</lc>
      <lc></lc>
      <lc>surface.write_to_png ('foo.png')</lc>
    </slide>

    <slide title="Minimal nickle program" variant="code">
      <lc>autoimport Cairo;</lc>
      <lc></lc>
      <lc>cairo_t cr = new (WIDTH, HEIGHT);</lc>
      <lc>draw (cr);</lc>
    </slide>

    <slide title="Drawing" variant="separator">
      <lc align="center">Here comes the fun part</lc>
    </slide>

    <slide title="Cairo API">
      <ul>
	<li>Paths</li>
	<ul>
	  <li>construction</li>
	  <li>filling, stroking</li>
	</ul>
	<li>Images</li>
	<ul>
	  <li>loading from disk</li>
	  <li>transforming</li>
	  <li>using as pattern</li>
	</ul>
	<li>Text</li>
	<ul>
	  <li>Simple API example</li>
	</ul>
      </ul>
      </slide>

      <slide title="Paths">
	<ul>
	  <li>Built from lines and splines.</li>
	  <ul>
	    <li>cairo_move_to()	set current point</li>
	    <li>cairo_line_to()	draw line</li>
	    <li>cairo_curve_to()	draw Bézier spline</li>
	    <li>cairo_close_path()	draw line to start</li>
	  </ul>
	  <li>Can also be built from glyphs</li>
	  <ul>
	    <li>cairo_text_path()	path from UTF-8</li>
	    <li>cairo_glyph_path()	path from glyphs</li>
	  </ul>
	  <li>Part of graphics state</li>
	  <ul>
	    <li>cairo_save()/cairo_restore() affect path</li>
	  </ul>
	</ul>
      </slide>

      <slide title="Using Paths">
	<ul>
	  <li>Stroke or Fill</li>
	  <ul>
	    <li>cairo_stroke walks path outline with pen</li>
	    <li>cairo_fill paints interior of path</li>
	    <li>both operations consume the path, resetting the current path to empty</li>
	  </ul>
	  <li>Clip</li>
	  <ul>
	    <li>cairo_clip intersects interior of path with current clip</li>
	  </ul>
	  <li>Convert path to stroked version</li>
	  <ul>
	    <li>not yet named</li>
	  </ul>
	</ul>
      </slide>

      <slide title="Path Example">
      </slide>

      <slide title="Stroking Paths">
	<ul>
	  <li>Elliptical pen (line width radius)</li>
	  <li>Join styles</li>
	  <ul>
	    <li>CAIRO_LINE_JOIN_MITER		with limit</li>
	    <LI>CAIRO_LINE_JOIN_BEVEL</LI>
	    <li>CAIRO_LINE_JOIN_ROUND	uses pen</li>
	  </ul>
	  <li>Cap styles</li>
	  <ul>
	    <LI>CAIRO_LINE_CAP_BUTT</LI>
	    <LI>CAIRO_LINE_CAP_ROUND</LI>
	    <LI>CAIRO_LINE_CAP_SQUARE</LI>
	  </ul>
	</ul>
      </slide>

      <slide title="Stroke Example">
      </slide>

      <slide title="Closing the Path">
	<li>cairo_close_path</li>
	<li>Draws a line (if necessary) to the start of the path</li>
	<li>Draws a join from that line to the first element of the path</li>
      </slide>

      <slide title="Close Path Example">
      </slide>

      <slide title="Caps and Joins">
	<ul>
	  <li>cairo_set_line_cap</li>
	  <ul>
	    <LI>CAIRO_LINE_CAP_BUTT</LI>
	    <LI>CAIRO_LINE_CAP_ROUND</LI>
	    <LI>CAIRO_LINE_CAP_SQUARE</LI>
	  </ul>
	  <li>cairo_set_line_join</li>
	  <ul>
	    <LI>CAIRO_LINE_JOIN_BEVEL</LI>
	    <LI>CAIRO_LINE_JOIN_ROUND</LI>
	    <LI>CAIRO_LINE_JOIN_MITER</LI>
	  </ul>
	</ul>
      </slide>

      <slide title="Caps and Joins Setup">
      </slide>

      <slide title="Caps and Joins Example">
      </slide>

      <slide title="Filling Paths">
	<ul>
	  <li>Closes path with line_to if necessary</li>
	  <ul>
	    <li>line drawn from current point to last move_to location</li>
	  </ul>
	  <li>Fills interior</li>
	  <li>Even/odd or winding fill rules</li>
	</ul>
      </slide>

      <slide title="Fill Example">
      </slide>

      <slide title="Source color">
	<li>cairo_set_source_rgb sets a solid color source</li>
	<li>Source color is used for any drawing operation (stroke, fill, or</li>
	<li>others)</li>
      </slide>

      <slide title="Fill and Stroke">
	<li>cairo_stroke/fill_preserve preserve the path</li>
	<li>Could just walk the figure twice</li>
      </slide>

      <slide title="Fill and Stroke Example">
      </slide>

      <slide title="Affine Transformations">
	<ul>
	  <li>Single matrix combines rotation, translation, scale and shear</li>
	  <li>Non-projective transformations</li>
	  <ul>
	    <li>Pen doesn't change shape along the stroke</li>
	  </ul>
	  <li>Transformations are cumulative</li>
	  <ul>
	    <li>translate, scale != scale, translate</li>
	  </ul>
	</ul>
      </slide>

      <slide title="Affine Transform Example">
      </slide>

      <slide title="Even/Odd vs Winding">
	<li>Even/Odd counts edges, fills when odd</li>
	<li>Winding counts up for clockwise edges, down for counterclockwise, fills when !zero</li>
      </slide>

      <slide title="Combining Images">
	<li>Cairo memory surfaces are images</li>
	<li>cairo_show_surface paints one surface into another</li>
	<li>Transformed through matrix</li>
	<li>No projective transforms yet</li>
      </slide>

      <slide title="Loading an Image File">
      </slide>

      <slide title="Image Example">
      </slide>

      <slide title="Image Transformation">
      </slide>

      <slide title="Resampling Modes">
	<li>Nearest Neighbor</li>
      </slide>

      <slide title="Patterns">
	<li>Apply one surface as pattern on another</li>
	<li>Pattern transformed through source surface matrix</li>
	<li>Patterns may repeat</li>
      </slide>

      <slide title="Pattern Example">
      </slide>

      <slide title="Pattern Transformations">
	<ul>
	  <li>Source surface holds matrix</li>
	  <li>Constructed with matrix operations</li>
	  <li>Some thought to changing this API</li>
	  <ul>
	    <li>Need to add projective transformations</li>
	    <li>May want procedural patterns</li>
	  </ul>
	</ul>
      </slide>

      <slide title="Pattern Transform">
      </slide>

      <slide title="Gradients">
	<ul>
	  <li>No primitive gradients in cairo</li>
	  <ul>
	    <li>Implemented as patterns</li>
	    <li>Bilinear interpolation smooths result</li>
	  </ul>
	  <li>Future API may include more</li>
	  <ul>
	    <li>Procedural patterns</li>
	    <li>Triangular patches</li>
	  </ul>
	</ul>
      </slide>

      <slide title="Gradient Setup">
      </slide>

      <slide title="Gradient Creation">
      </slide>

      <slide title="Gradient Example">
      </slide>

      <slide title="Text">
	<ul>
	  <li>API is getting replaced</li>
	  <li>“Toy” API will be similar to current code</li>
	  <li>“Full” API will have</li>
	  <ul>
	    <li>OS dependent font selection</li>
	    <li>Use Glyph Ids instead of Unicode chars</li>
	  </ul>
	  <li>New implementation will provide device-independent fonts</li>
	  <li>Old API worked only on X</li>
	</ul>
      </slide>

      <slide title="“Toy” Text API"/>
      <ul>
	<li>Simple font selection</li>
	<ul>
	  <li>family, weight, slant</li>
	  <li>OS independent</li>
	  <li>No font listing support</li>
	</ul>
	<li>UTF-8 text drawing and extents functions</li>
	<li>Still supports full font transformations</li>
      </ul>

      <slide title="“Toy” Text Example">
      </slide>

      <slide title="Error Handling in C">
	<li>C has no exceptions</li>
	<li>Checking each return is tedious</li>
	<li>C programmers rarely bother</li>
	<li>Lots of broken programs result</li>
      </slide>
      
      <slide title="Cairo Error Handling">
	<li>Cairo returns status</li>
	<li>Status is “persistant”</li>
	<li>cairo_status function returns error state</li>
	<li>API “shuts down” when an error occurs</li>
	<li>All cairo functions are benign (and well defined) after any error.</li>
      </slide>

      <slide title="Cairo Error Example">
      </slide>

  </slides>
</svgslides>