01 Get Started

author	version	line-number	content
		1	{{velocity output="false"}}
		2	#set ($docextras = [])
		3
		4	#set ($videoCards = [ {
		5	'title': $services.localization.render('1.Software Download&Install'),
		6	'topics': [
		7	$services.localization.render('This video is showing you how to download and install the PIStudio.')
		8	],
		9	'url': 'https://www.youtube.com/embed/7FNI4uuVL4c',
		10	'duration': '3 min'
		11	}, {
		12	'title': $services.localization.render('2.Create New Project'),
		13	'topics': [
		14	$services.localization.render('This video is showing you how to create new project in the PIStudio.')
		15	],
		16	'url': 'https://www.youtube.com/embed/0FpmDZe_8U8',
		17	'duration': '2 min'
		18	}, {
		19	'title': $services.localization.render('3.Tool: Simulator'),
		20	'topics': [
		21	$services.localization.render('This video is showing you how to use the simulator in PIStudio.'),
		22	$services.localization.render('There are mainly two types for simulator: online and offline.')
		23	],
		24	'url': 'https://www.youtube.com/embed/CFABfWN_470',
		25	'duration': '4 min'
		26	}, {
		27	'title': $services.localization.render('4.Download Project'),
		28	'topics': [
		29	$services.localization.render('This video is showing you how to download project into PI HMI')
		30	],
		31	'url': 'https://www.youtube.com/embed/UXKeMGPsTag',
		32	'duration': '7 min'
		33	}, {
		34	'title': $services.localization.render('5.Tool: Decompile'),
		35	'topics': [
		36	$services.localization.render('Decompile tool is for users can upload the project file from PI HMI.')
		37	],
		38	'url': 'https://www.youtube.com/embed/slaVqLKpQno',
		39	'duration': '2 min'
		40	}, {
		41	'title': $services.localization.render('6.The ig V-NET Access'),
		42	'topics': [
		43	$services.localization.render('How to access the VNET platform for ig series HMI')
		44	],
		45	'url': 'https://www.youtube.com/embed/j6i6KsCmnTE?list=PL_Bpnb2RgaktphrxRaCpFA809H_0xs-cU',
		46	'duration': '4 min'
		47	}, {
		48	'title': $services.localization.render('7.LAN Monitoring'),
		49	'topics': [
		50	$services.localization.render('How to monitoring HMI screen on LAN network')
		51	],
		52	'url': 'https://www.youtube.com/embed/2yzIPcqIeJ4',
		53	'duration': '4 min'
		54	}])
		55
		56	#macro (helpVideoCard $data)
		57	<div class="videoCard">
		58	<iframe src="$data.url" allowfullscreen title="$escapetool.xml($data.title)" role="presentation" ></iframe>
		59	<div class="videoCard-body">
		60	<div class="videoCard-title">
		61	$escapetool.xml($data.title)
		62	</div>
		63	<ul>
		64	#foreach ($topic in $data.topics)
		65	<li>$topic</li>
		66	#end
		67	</ul>
		68	</div>
		69	<div class="videoCard-footer">
		70	$services.icon.renderHTML('play')
		71	<a href="$data.url">$services.localization.render('help.videos.watch')</a>
		72	<span class="videoCard-duration">
		73	$escapetool.xml($data.duration)
		74	</span>
		75	</div>
		76	</div>
		77	#end
		78	{{/velocity}}
		79
		80	{{velocity}}
		81	{{html clean="false"}}
		82	#set ($discard = $xwiki.ssx.use('Help.Videos.WebHome'))
		83	<div class="row">
		84	#foreach ($card in $videoCards)
		85	## See http://getbootstrap.com/css/#grid-responsive-resets .
		86	#if ($foreach.index > 0 && $foreach.index % 2 == 0)
		87	<div class="clearfix visible-sm-block "></div>
		88	#end
		89	#if ($foreach.index > 0 && $foreach.index % 3 == 0)
		90	<div class="clearfix visible-md-block visible-lg-block"></div>
		91	#end
		92	<div class="col-xs-12 col-sm-6 col-md-4">
		93	#helpVideoCard($card)
		94	</div>
		95	#end
		96	</div>
		97	{{/html}}
		98
		99	[[$services.localization.render('help.videos.more')>>https://www.youtube.com/playlist?list=PLhe7KI1rstRQeLSHxcTozZ0HJSk-mIYzt]]
		100	{{/velocity}}