CoordinateSystem

Version 2 (admin, 20/03/2012 15:15)

1 1 admin
h1. Coordinate Systems
2 1 admin
3 1 admin
{{>toc}}
4 1 admin
5 1 admin
To determine where to display nodes, libavg uses a hierarchy of coordinate systems. The placement of a node on the screen is specified relative to the div node above that element. Since div nodes can themselves be children of other div nodes, a hierarchy of relative coordinate systems results.
6 1 admin
7 1 admin
h1. The Global Coordinate System
8 1 admin
9 1 admin
Global coordinates have their origin in the upper left corner of the libavg window. Positive x values are to the right and positive y values down. This is typical of screen coordinate systems. Relative to the classic cartesian coordinate system, global coordinates in libavg have an inverted y axis.
10 1 admin
11 1 admin
Coordinates are specified in pixels.
12 1 admin
13 2 admin
!>/site/files/CoordinateSystems/Global_coords.png!
14 1 admin
15 1 admin
h1. Registration Points
16 1 admin
17 1 admin
With a few exceptions, the _Registration Point_ of an element on the screen is it's upper left corner. This is the point that the pos attribute refers to.
18 1 admin
19 1 admin
_globalcoords.py_
20 1 admin
21 1 admin
<pre><code class="python">
22 1 admin
avg.ImageNode(pos=(40,30), size=(80,60), 
23 1 admin
        href="rgb24-64x64.png", parent=rootNode)
24 1 admin
</code></pre>
25 1 admin
26 1 admin
The most notable exception is the words node. For words nodes with alignment="@left@", the registration point is close the upper left corner of the text rendered. Precisely, the vertical position corresponds to the height of the highest letter in the font used and the horizontal position may be off by a few pixels to make sure different letters _appear_ to be at the same position. For words nodes with center and right alignments, the registration point is at the center or right of the node, respectively. The image to the right shows some left, center and right alignments and the corresponding registration points. Note that the left-aligned 'j' in the second line actually extends to the left of the registration point and the letters are positioned lower than expected to allow for glyphs with diacritics such as the german 'Ä'.
27 1 admin
28 2 admin
!>/site/files/CoordinateSystems/Words_coords.png!
29 1 admin
_wordspos.py_
30 1 admin
31 1 admin
<pre><code class="python">
32 1 admin
avg.WordsNode(pos=(10,10), width=70, 
33 1 admin
        text="<i>Left-justified paragraph</i>",
34 1 admin
        parent=rootNode)
35 1 admin
avg.WordsNode(pos=(150,10), width=70, alignment="right", 
36 1 admin
        text="Right-justified paragraph",
37 1 admin
        parent=rootNode)
38 1 admin
avg.WordsNode(pos=(80,80), width=70, alignment="center",
39 1 admin
        text="Centered paragraph",
40 1 admin
        parent=rootNode)
41 1 admin
</code></pre>
42 1 admin
43 1 admin
h1. Rotation
44 1 admin
45 1 admin
If a node has an angle attribute different from @zero@, it is rotated. By default, it is rotated around it's center. Rotation is specified in radians and runs clockwise. A non-default @pivot@ attribute causes the node to be rotated around the point specified as pivot. Pivots are specified in coordinates relative to the registration point of the node.
46 1 admin
47 1 admin
_rotdefaultpivot.py_
48 1 admin
49 1 admin
<pre><code class="python">
50 1 admin
avg.ImageNode(pos=(40,30), size=(80,60), href="rgb24-64x64.png",
51 1 admin
        angle=1.570, parent=rootNode)
52 1 admin
</code></pre>
53 1 admin
54 1 admin
_rotcustompivot.py_
55 1 admin
56 1 admin
<pre><code class="python">
57 1 admin
avg.ImageNode(pos=(80,30), size=(40,30), href="rgb24-64x64.png",
58 1 admin
        angle=1.570, pivot=(0,0), parent=rootNode)
59 1 admin
</code></pre>
60 1 admin
61 2 admin
p=. !/site/files/CoordinateSystems/Rotate_coords.png!
62 1 admin
63 1 admin
h1. Local Coordinate Systems
64 1 admin
65 1 admin
All nodes inside a @DivNode@ are positioned relative to that node's registration point and rotated according to it's angle and pivot attributes:
66 1 admin
67 1 admin
_localcoords.py_
68 1 admin
69 1 admin
<pre><code class="python">
70 1 admin
divNode = avg.DivNode(pos=(40,30), parent=rootNode)
71 1 admin
avg.ImageNode(pos=(40,30), size=(80,60), href="rgb24-64x64.png", 
72 1 admin
        parent=divNode)
73 1 admin
</code></pre>
74 1 admin
75 1 admin
_localcoordsrot.py_
76 1 admin
77 1 admin
<pre><code class="python">
78 1 admin
divNode = avg.DivNode(pos=(120,30), pivot=(0,0), angle=1.570, 
79 1 admin
        parent=rootNode)
80 1 admin
avg.ImageNode(pos=(40,30), size=(40,30), href="rgb24-64x64.png",
81 1 admin
        parent=divNode)
82 1 admin
</code></pre>
83 1 admin
84 2 admin
p=. !/site/files/CoordinateSystems/Local_coords.png!
85 1 admin
86 1 admin
h1. Vector Nodes
87 1 admin
88 1 admin
Currently, most vector nodes don't have an angle attribute. Coordinates are specified directly. The exception is RectNode, which has an angle, but no pivot attribute. (This will be changed so angle and pivot handling is consistent.)