Skip to Content

Wiki source code of 03 Basic Chart & Table

Last modified by Wecon on 2025/09/03 21:03
Show last authors
1 {{velocity output="false"}}
2 #set ($docextras = [])
3
4 #set ($videoCards = [{
5 'title': $services.localization.render('1. Data Record'),
6 'topics': [
7 $services.localization.render('Data Record is used for users to logging the data.')
8 ],
9 'url': 'https://www.youtube.com/embed/gyF-JoiVuC0',
10 'duration': '8 min'
11 }, {
12 'title': $services.localization.render('2. Alarm Record'),
13 'topics': [
14 $services.localization.render('Alarm function main purpose is to tips users to take some measures when HMI is alarming.')
15 ],
16 'url': 'https://www.youtube.com/embed/6ZoUPzgjEN0',
17 'duration': '9 min'
18 }, {
19 'title': $services.localization.render('3. Recipe'),
20 'topics': [
21 $services.localization.render('Recipe is used for users to input the parameters in advance. Then when need them, you can write these parameters into PLC.')
22 ],
23 'url': 'https://www.youtube.com/embed/8XfEA-qyG0U',
24 'duration': '12 min'
25 }, {
26 'title': $services.localization.render('4. History Trend Chart'),
27 'topics': [
28 $services.localization.render('History Trend Chart is used for displaying a trend curve from the Data Record.')
29 ],
30 'url': 'https://www.youtube.com/embed/S8ZDQKF8qv0',
31 'duration': '5 min'
32 }, {
33 'title': $services.localization.render('5. Realtime Trend Chart'),
34 'topics': [
35 $services.localization.render('Realtime Trend Chart is used for drawing the curve of data also. But it unlike the History Trend, real time cannot save the data.')
36 ],
37 'url': 'https://www.youtube.com/embed/l4jOgMMQmn0',
38 'duration': '4 min'
39 }, {
40 'title': $services.localization.render('6. XY Plot'),
41 'topics': [
42 $services.localization.render('XY Plot is used for display the multiple points and connect them together.')
43 ],
44 'url': 'https://www.youtube.com/embed/mxIlsBUTXlY',
45 'duration': '5 min'
46 }, {
47 'title': $services.localization.render('7. Historical XY Plot'),
48 'topics': [
49 $services.localization.render('XY Plot is used for display the multiple points and connect them together.')
50 ],
51 'url': 'https://www.youtube.com/embed/bLoyR4jbX3U',
52 'duration': '5 min'
53 }, {
54 'title': $services.localization.render('8. Disc Record Chart'),
55 'topics': [
56 $services.localization.render('Disc record chart is mainly used for display the data as circular curve.')
57 ],
58 'url': 'https://www.youtube.com/embed/honvbJQO0mc',
59 'duration': '5 min'
60 }])
61
62 #macro (helpVideoCard $data)
63 <div class="videoCard">
64 <iframe src="$data.url" allowfullscreen title="$escapetool.xml($data.title)" role="presentation" ></iframe>
65 <div class="videoCard-body">
66 <div class="videoCard-title">
67 $escapetool.xml($data.title)
68 </div>
69 <ul>
70 #foreach ($topic in $data.topics)
71 <li>$topic</li>
72 #end
73 </ul>
74 </div>
75 <div class="videoCard-footer">
76 $services.icon.renderHTML('play')
77 <a href="$data.url">$services.localization.render('help.videos.watch')</a>
78 <span class="videoCard-duration">
79 $escapetool.xml($data.duration)
80 </span>
81 </div>
82 </div>
83 #end
84 {{/velocity}}
85
86 {{velocity}}
87 {{html clean="false"}}
88 #set ($discard = $xwiki.ssx.use('Help.Videos.WebHome'))
89 <div class="row">
90 #foreach ($card in $videoCards)
91 ## See http://getbootstrap.com/css/#grid-responsive-resets .
92 #if ($foreach.index > 0 && $foreach.index % 2 == 0)
93 <div class="clearfix visible-sm-block "></div>
94 #end
95 #if ($foreach.index > 0 && $foreach.index % 3 == 0)
96 <div class="clearfix visible-md-block visible-lg-block"></div>
97 #end
98 <div class="col-xs-12 col-sm-6 col-md-4">
99 #helpVideoCard($card)
100 </div>
101 #end
102 </div>
103 {{/html}}
104
105 [[$services.localization.render('help.videos.more')>>https://www.youtube.com/playlist?list=PLhe7KI1rstRQeLSHxcTozZ0HJSk-mIYzt]]
106 {{/velocity}}