osmwp.github.com/prototype_progressbar.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
<!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_progressbar";
beginPage();
//-->
</script>


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

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


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

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

<p>
Progress bar that display proportionnaly to the value of the step field.<br/>
The progress bar can also display in an "unknown step" mode where the progress bar
just bounces from left to right each time the step field is updated.
</p>
<br/>

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

<textarea rows="7" cols="50" readonly="readonly" wrap="off">
PROTO ProgressBar [
  exposedField SFFloat step 0
  # Style
  field MFString style ["ProgressBar"]
  field MFString images ["progressBg.png"]
  field SFVec2f size 160 10
]
</textarea>
<br/>

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

<h2>Style fields</h2>

<ul>
<li>MFString images - Background image</li>
<li>SFVec2f size - Size of the area where the ProgressBar proto is displayed</li>
<li>MFString style - Path to the CSS node associated to ProgressBar proto</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>SFFloat step - Progress from 0 (0%) to 1 (100%), other values will force the unkown mode.</li>
</ul>
<br/>

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

<textarea rows="4" cols="50" readonly="readonly" wrap="off">
ProgressBar {
  color: orange;
  background-color: rgb(229,229,229);
}
</textarea>
<br/>

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

<p>
<a href="prototype_progressbarmenu.html">ProgressBarMenu</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 ProgressBar [] "ProgressBar.wrl"

Group {
  children [

    DEF SIZE_NOTIFIER SizeNotifier {}

    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 0.8 0.8 0.8 }
      }
      geometry DEF BACKGROUND Rectangle {
        size 0 0
      }
    }

    DEF TIMER TimeSensor {
      loop TRUE
      cycleInterval 5
      isActive TRUE
    }

    DEF PROGRESSBAR ProgressBar {
      step 0
  	}

    ROUTE TIMER.fraction_changed TO PROGRESSBAR.step
  ]
}
</textarea>
<br/>


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


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

</body>

</html>