osmwp.github.com/development_node_Rectangle.html at master · osmwp/osmwp.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Mobile Widgets</title>
	<link rel="stylesheet" href="style/style.css" />
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
	<script type="text/javascript" src="js/StructureElts.js"></script>
	<script type="text/javascript" src="js/Structure.js"></script>
	<script type="text/javascript" src="js/DocElements.js"></script>
</head>

<body>

<script type="text/javascript">
<!--
idCurrentPage = "development_node_Rectangle";
beginPage();
//-->
</script>


<h1 class="title">Rectangle node</h1>

<script type="text/javascript">
<!--
addIndex();
//-->
</script>


<script type="text/javascript">addTitle("Interface", 1);</script>

<textarea wrap="off" readonly="readonly" rows="4" cols="80">
Rectangle {
  SFVec2f size 1 1
  SFVec2f cornerRadius 0 0
}
</textarea>
<br/>

<script type="text/javascript">addTitle("Description", 1);</script>

<p>
Display a rectangle centered with the axis and according to the related
material with the following specificity when appearance is:
</p>
<ul>
<li>a solid color material: scaling, rotation and transparency are fully supported.</li>
<li>an image texture: scaling and transparency are fully supported.<br/>
    Rotation is only supported by multiple of 90 degree.</li>
<li>a movie texture: scaling is supported but transparency is not.<br/>
    If rotation is not zero, video is displayed in landscape mode if supported by the device.</li>
</ul>
<p>
The field <b>cornerRadius</b> allows to display rounded corners for solid
rectangle but not with image or video textures.
</p>
<br/>

<script type="text/javascript">addTitle("Fields", 1);</script>

<p>
<b>SFVec2f size 1 1</b>:<br/>
The field <b>size</b> is in pixels and is modified by the above transformations.<br/>
If any size component is negative, it is replaced by the corresponding image
dimension (i.e. size -1 -1 uses actual image dimension).
</p>

<p>
<b>SFVec2f cornerRadius 0 0</b>:<br/>
When <b>cornerRadius</b> has non zero values, the rectangle is rendered with
rounded corners.<br/>
The above transformations also apply to these values.<br/>
Rounded corners are only supported with <a href="development_node_Material2D.html">Material2D</a>
(solid color, transparency and filled properties).
</p>
<br/>

<script type="text/javascript">addTitle("Example", 1);</script>

<textarea wrap="off" readonly="readonly" rows="15" cols="80">
#VRML V2.0 utf8
#VRML V2.0 utf8

# Shape to draw a simple red rectangle.
Shape {
  appearance Appearance {
    material Material2D { emissiveColor 1 0 0  filled TRUE }
  }
  geometry Rectangle { size 150 150 }
}
# Shape to draw an icon.
Shape {
  appearance  Appearance {
     texture ImageTexture { url ["icon.png"] }
  }
  geometry Rectangle { size 48 48 }
}
# Shape to draw a movie.
Shape {
  appearance Appearance {# Movie background
    material Material2D {
      emissiveColor 0 0 0
      filled TRUE
    }
    # Movie
    texture DEF MOVIE MovieTexture { url IS mediaUrl }
  }
  # Movie display screen
  geometry DEF MOVIE_REC Rectangle {
    size 240 240
  }
}
</textarea>
<br/>


<script type="text/javascript">
<!--
	addBackPageNavigator('widgets_development_nodes_ref', '');
//-->
</script>


<script type="text/javascript">
<!--
endPage();
//-->
</script>

</body>

</html>