osmwp.github.com/prototype_loader.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!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 = "prototype_loader";
beginPage();
//-->
</script>


<h1 class="title">Loader prototype</h1>

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


<img class="right" alt="Background" src="images/prototypes/proto_loader_01.jpg" />

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

<p>
Gray the full screen and display a message and a loading animation.<br/>
</p>

<p class="note check">
<b>Note:</b><br/>
To generate a sprite from a GIF, use ImageMagik convert tool:<br/>
convert myAnim.gif +append icon.png
</p>
<br/>

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

<textarea rows="9" cols="50" readonly="readonly" wrap="off">
PROTO Loader [
  # Common fields
  exposedField SFInt32 display 0
  field MFString message [""]
  field MFString images ["loader.png"]
  field MFString style ["Loader"]
  field SFVec2f screenSize -1 -1
  field SFVec2f textScale 1 1
]
</textarea>
<br/>

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

<h2>Data fields</h2>

<ul>
<li>MFString message - Loader message (can be empty to prevent message display)</li>
</ul>
<br/>

<h2>Style fields</h2>

<ul>
<li>MFString style - Path to the CSS node associated to Loader proto</li>
<li>MFString images - Sprite image for the loading animation (can be empty to prevent icon display)</li>
<li>SFVec2f screenSize - Size of the screen where the application is displayed</li>
<li>SFVec2f textScale - Use for scaling text if necessary (phone with small fonts)</li>
</ul>
<p class="note warning">
<b>Warning:</b><br/>Define style is required (we can use the default style - see
<a href="development_node_Style.html">Style node</a>).
</p>
<br/>

<h2>Exposed Fields</h2>

<ul>
<li>SFInt32 exposedField display - Set to 0 to display the loader, -1 to hide it.</li>
</ul>
<br/>

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

<textarea rows="8" cols="80" readonly="readonly" wrap="off">
Loader {
  color: orange;
  size: 20% 20%;
  font-size: 16;
  horizontal-align: MIDDLE;
  vertical-align: MIDDLE;
  font-filter: true;
}
</textarea>
<br/>

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

<p>
<a href="prototype_loadermini.html">LoaderMini</a>
</p>
<br/>

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

<textarea rows="15" cols="80" readonly="readonly" wrap="off">
EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"
EXTERNPROTO Loader [] "Loader.wrl"

Group {
  children [
    Style {
      url ["default.css"]
    }

    DEF SIZE_NOTIFIER SizeNotifier {}

    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 1 1 1 }
      }
      geometry DEF BACKGROUND Rectangle {
        size 10 10
      }
    }

    DEF LOADER Loader {
      message ["Wait during loading"]
    }

    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size

    ROUTE SIZE_NOTIFIER.screenSize TO LOADER.screenSize
    ROUTE SIZE_NOTIFIER.textScale  TO LOADER.textScale
  ]
}
</textarea>
<br/>


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


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

</body>

</html>