osmwp.github.com/prototype_scrollabletext.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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!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_scrollabletext";
beginPage();
//-->
</script>


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

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


<img class="right" alt="ScrollableList" src="images/prototypes/proto_scrollabletext_01.jpg" />

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

<p>
Scrollable text is composed of 3 parts: a title, an image and the text.<br/>
It is based on the Scrollable prototype to support scrolling.
</p>
<br/>

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

<textarea rows="15" cols="50" readonly="readonly" wrap="off">
PROTO ScrollableText [
  # Data
  field	MFString title []
  field	MFString images []
  field	MFString content []

  # Style
  field	MFString style ["ScrollableText"]
  field MFString contentStyle ["ScrollableText-content"]
  field MFString titleStyle ["ScrollableText-title"]
  field	SFVec2f	size -1 -1
  field	SFVec2f	textScale 1 1
  field SFInt32 titleMaxLines 5
  field SFInt32 contentMaxLines 30
  field SFBool enable TRUE
]
</textarea>
<br/>

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

<h2>Data fields</h2>

<ul>
<li>MFString title - Title, can have multiple lines</li>
<li>MFString images - Url of the image associated to the text content (to be scrolled)</li>
<li>MFString content - Text content (to be scrolled)</li>
</ul>
<br/>

<h2>Style fields</h2>

<ul>
<li>MFString style - Path to the CSS node associated to ScrollableText proto</li>
<li>MFString contentStyle - Path to the CSS specific node associated to the content of ScrollableText proto</li>
<li>MFString titleStyle - Path to the CSS specific node associated to the title of ScrollableText proto</li>
<li>SFVec2f size - Size of the area where the ScrollableText proto is displayed</li>
<li>SFVec2f textScale - Use for scaling text if necessary (phone with small fonts)</li>
<li>SFInt32 titleMaxLines - Title max lines</li>
<li>SFInt32 contentMaxLines - Content max lines</li>
<li>SFBool enable - If FALSE, key and touch events will be ignored. Default: TRUE.</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/>

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

<textarea rows="15" cols="80" readonly="readonly" wrap="off">
ScrollableText {
  size: 87% 75%;
  margin-left: 3.3%;// space between label and screen border relative to screen width
  background-color: white; //color of the rectangle if no icon is found
}

ScrollableText-content {
  font-filter: true;
  vertical-align: top;
  font-size: 10;
  font-style: plain;
  color: black;
}

ScrollableText-title {
  font-filter: true;
  vertical-align: top;
  font-size: 10;
  font-style: bold;
  color: black;
}
</textarea>
<br/>

<script type="text/javascript">addTitle("Extern proto(s)", 1);</script>

<p>
<a href="prototype_scrollable.html">Scrollable</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 ScrollableText [] "ScrollableText.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 SCROLLTEXT ScrollableText {
      title   [ "Sed viverra dapibus porttitor" ]
      images  [ "img_32x32.png" ]
      content [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem nibh, sed bibendum mauris."
        "Quisque hendrerit interdum accumsan. Suspendisse varius vulputate ante, ac varius justo mollis eget."
        "Vivamus ornare condimentum eros quis vulputate."
        "Aenean nec tortor nisl, nec pellentesque ipsum."
        "Vivamus mollis placerat volutpat. Aliquam magna tortor, pellentesque quis vulputate eget, varius in arcu."
        "Nam in magna dui."
        "Etiam pharetra sagittis mauris a congue. In hac habitasse platea dictumst. Mauris vitae elit lorem, vitae eleifend quam."
        "In tristique dictum diam, a aliquet tellus iaculis sit amet. Sed a varius justo. Ut elit magna, vestibulum at mattis id, porta ut velit. Suspendisse vitae sagittis nunc. Praesent molestie porttitor luctus."
        ""
        "Aliquam erat volutpat."
        "Fusce gravida, enim at sodales mollis, tellus tellus egestas ante, id aliquam lorem est eu nibh."
        "Sed pellentesque laoreet sapien, eget congue nunc imperdiet id."
        "Pellentesque consequat mollis dictum."
        "Duis posuere, arcu commodo interdum pellentesque, sapien mi sagittis purus, sit amet euismod lectus urna at sem."
        "Vestibulum mauris neque, ornare nec pulvinar id, viverra pellentesque risus."
        "Sed viverra dapibus porttitor."
        "Nunc venenatis sollicitudin urna, non cursus nisl euismod ac."
        "Quisque a libero sapien."
        "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
        "Fusce sit amet nunc ligula, in luctus metus."
        "In mattis est id nibh dictum non dictum neque molestie."
        "Etiam eget sem magna."
        "Mauris lacinia, diam in scelerisque tristique, sapien odio pharetra augue, sed lobortis arcu urna eu tellus. Morbi est lectus, imperdiet non eleifend nec, mollis et quam."
        "Curabitur ac neque augue."
        "Suspendisse potenti."
      ]
    }

    ROUTE SIZE_NOTIFIER.screenSize TO BACKGROUND.size

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


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


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

</body>

</html>