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
		49	#macro (helpVideoCard $data)
		50	<div class="videoCard">
		51	<iframe src="$data.url" allowfullscreen title="$escapetool.xml($data.title)" role="presentation" ></iframe>
		52	<div class="videoCard-body">
		53	<div class="videoCard-title">
		54	$escapetool.xml($data.title)
		55	</div>
		56	<ul>
		57	#foreach ($topic in $data.topics)
		58	<li>$topic</li>
		59	#end
		60	</ul>
		61	</div>
		62	<div class="videoCard-footer">
		63	$services.icon.renderHTML('play')
		64	<a href="$data.url">$services.localization.render('help.videos.watch')</a>
		65	<span class="videoCard-duration">
		66	$escapetool.xml($data.duration)
		67	</span>
		68	</div>
		69	</div>
		70	#end
		71	{{/velocity}}
		72
		73	{{velocity}}
		74	{{html clean="false"}}
		75	#set ($discard = $xwiki.ssx.use('Help.Videos.WebHome'))
		76	<div class="row">
		77	#foreach ($card in $videoCards)
		78	## See http://getbootstrap.com/css/#grid-responsive-resets .
		79	#if ($foreach.index > 0 && $foreach.index % 2 == 0)
		80	<div class="clearfix visible-sm-block "></div>
		81	#end
		82	#if ($foreach.index > 0 && $foreach.index % 3 == 0)
		83	<div class="clearfix visible-md-block visible-lg-block"></div>
		84	#end
		85	<div class="col-xs-12 col-sm-6 col-md-4">
		86	#helpVideoCard($card)
		87	</div>
		88	#end
		89	</div>
		90	{{/html}}
		91
		92	[[$services.localization.render('help.videos.more')>>https://www.youtube.com/playlist?list=PLhe7KI1rstRQeLSHxcTozZ0HJSk-mIYzt]]
		93	{{/velocity}}