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


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

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


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

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

<p>
This prototype can be used to display ratings based on stars (by default 5 stars).<br/>
It displays an overlay image 'ratingOver.png' partially (depending on the rate) over another image 'rating.png'.<br/>
On the following screenshot, the rate is equal to 0.4 (= 2/5), so 2 yellow stars of the 'ratingOver.png' image are visible.
</p>
<br/>

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

<textarea rows="4" cols="50" readonly="readonly" wrap="off">
PROTO Rating [
  eventIn SFFloat rate
  field SFTime cycleInterval 1
]
</textarea>
<br/>

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

<h2>Event In</h2>

<ul>
<li>SFFloat rate - Set the rate (between 0 and 1). For 0, only the 'rating.png' image is visible.</li>
</ul>
<br/>

<h2>Field</h2>

<ul>
<li>SFTime cycleInterval - The animation duration triggered when rate is changed.</li>
</ul>
<br/>

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

<p>
No associated CSS
</p>
<br/>

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

<textarea rows="15" cols="50" readonly="readonly" wrap="off">
EXTERNPROTO SizeNotifier [] "SizeNotifier.wrl"
EXTERNPROTO Rating [] "Rating.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 2
      isActive TRUE
    }

    DEF RATING Rating {
      rate 0
  	}

    DEF SCRIPT Script {
      eventIn SFTime increaseRate
      field SFNode rating USE RATING
      url "
        function increaseRate() {
          if (rating.rate &gt;= 1) {
            rating.rate = 0;
          } else {
            rating.rate += 0.2;
          }
        }
      "
    }

    ROUTE TIMER.cycleTime TO SCRIPT.increaseRate

    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size

  ]
}
</textarea>
<br/>


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


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

</body>

</html>