587 lines
41 KiB
HTML
587 lines
41 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
||
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
||
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||
<head>
|
||
<title>Tutorials - Control-Freak</title>
|
||
<meta name="description" content="IDE for Automation & IoT" />
|
||
<meta name="author" content="Justin Walsh">
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="../themes/mytheme/img/favicon-blue.png" type="image/x-icon">
|
||
<!-- Mobile -->
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<script src="..//ext/easyXDM.js"></script>
|
||
|
||
|
||
<script type="text/javascript">
|
||
|
||
var pixlrEditor = null;
|
||
var xdmSocket = null;
|
||
var editorImage=null;
|
||
var imageUrl=null;
|
||
var editorArgs=null;
|
||
var saveUrl=null;
|
||
var title='';
|
||
var format = 'jpg';
|
||
|
||
function urlDecode (string, overwrite) {
|
||
if (!string || !string.length) {
|
||
return{}
|
||
}
|
||
var obj = {};
|
||
var pairs = string.split("&");
|
||
var pair, name, value;
|
||
for (var i = 0, len = pairs.length; i < len; i++) {
|
||
pair = pairs[i].split("=");
|
||
name = decodeURIComponent(pair[0]);
|
||
value = decodeURIComponent(pair[1]);
|
||
if(value!=null && value==='true'){
|
||
value=true;
|
||
}else if(value==='false'){
|
||
value=false;
|
||
}
|
||
if (overwrite !== true) {
|
||
if (typeof obj[name] == "undefined") {
|
||
obj[name] = value
|
||
} else {
|
||
if (typeof obj[name] == "string") {
|
||
obj[name] = [obj[name]];
|
||
obj[name].push(value)
|
||
} else {
|
||
obj[name].push(value)
|
||
}
|
||
}
|
||
} else {
|
||
obj[name] = value
|
||
}
|
||
}
|
||
return obj;
|
||
}
|
||
|
||
|
||
function onMessage(message){
|
||
|
||
var result = JSON.parse(message);
|
||
|
||
console.log('message :',message);
|
||
if(result && result.command && result.command==='edit')
|
||
{
|
||
if(editorImage==null){
|
||
img_create(result.url,'','');
|
||
}
|
||
imageUrl = result.url;
|
||
saveUrl = result.saveUrl;
|
||
title = result.title;
|
||
format = result.format;
|
||
}
|
||
}
|
||
|
||
function sendMessage(message)
|
||
{
|
||
xdmSocket.postMessage(JSON.stringify(message));
|
||
}
|
||
|
||
function init (){
|
||
|
||
return;
|
||
var inUrl = '' + window.location.href;
|
||
|
||
console.log('init url ' + inUrl);
|
||
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
|
||
if(!inUrl){
|
||
console.error('invalid');
|
||
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
|
||
}
|
||
|
||
var parameterString = '' ;
|
||
|
||
function base64_decode (encodedData) {
|
||
|
||
if (typeof window !== 'undefined') {
|
||
if (typeof window.atob !== 'undefined') {
|
||
return decodeURIComponent(escape(window.atob(encodedData)))
|
||
}
|
||
} else {
|
||
return new Buffer(encodedData, 'base64').toString('utf-8')
|
||
}
|
||
|
||
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
|
||
var o1
|
||
var o2
|
||
var o3
|
||
var h1
|
||
var h2
|
||
var h3
|
||
var h4
|
||
var bits
|
||
var i = 0
|
||
var ac = 0
|
||
var dec = ''
|
||
var tmpArr = []
|
||
|
||
if (!encodedData) {
|
||
return encodedData
|
||
}
|
||
|
||
encodedData += ''
|
||
|
||
do {
|
||
// unpack four hexets into three octets using index points in b64
|
||
h1 = b64.indexOf(encodedData.charAt(i++))
|
||
h2 = b64.indexOf(encodedData.charAt(i++))
|
||
h3 = b64.indexOf(encodedData.charAt(i++))
|
||
h4 = b64.indexOf(encodedData.charAt(i++))
|
||
|
||
bits = h1 << 18 | h2 << 12 | h3 << 6 | h4
|
||
|
||
o1 = bits >> 16 & 0xff
|
||
o2 = bits >> 8 & 0xff
|
||
o3 = bits & 0xff
|
||
|
||
if (h3 === 64) {
|
||
tmpArr[ac++] = String.fromCharCode(o1)
|
||
} else if (h4 === 64) {
|
||
tmpArr[ac++] = String.fromCharCode(o1, o2)
|
||
} else {
|
||
tmpArr[ac++] = String.fromCharCode(o1, o2, o3)
|
||
}
|
||
} while (i < encodedData.length)
|
||
|
||
dec = tmpArr.join('')
|
||
|
||
return decodeURIComponent(escape(dec.replace(/\0+$/, '')))
|
||
}
|
||
|
||
function base64_encode(data) {
|
||
|
||
// From: http://phpjs.org/functions
|
||
// + original by: Tyler Akins (http://rumkin.com)
|
||
// + improved by: Bayron Guevara
|
||
// + improved by: Thunder.m
|
||
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
||
// + bugfixed by: Pellentesque Malesuada
|
||
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
||
// + improved by: Rafał Kukawski (http://kukawski.pl)
|
||
// * example 1: base64_encode('Kevin van Zonneveld');
|
||
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
|
||
// mozilla has this native
|
||
// - but breaks in 2.0.0.12!
|
||
//if (typeof this.window.btoa === 'function') {
|
||
// return btoa(data);
|
||
//}
|
||
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
||
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
|
||
ac = 0,
|
||
enc = '',
|
||
tmp_arr = [];
|
||
|
||
if (!data) {
|
||
return data;
|
||
}
|
||
|
||
do { // pack three octets into four hexets
|
||
o1 = data.charCodeAt(i++);
|
||
o2 = data.charCodeAt(i++);
|
||
o3 = data.charCodeAt(i++);
|
||
|
||
bits = o1 << 16 | o2 << 8 | o3;
|
||
|
||
h1 = bits >> 18 & 0x3f;
|
||
h2 = bits >> 12 & 0x3f;
|
||
h3 = bits >> 6 & 0x3f;
|
||
h4 = bits & 0x3f;
|
||
|
||
// use hexets to index into b64, and append result to encoded string
|
||
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
|
||
} while (i < data.length);
|
||
|
||
enc = tmp_arr.join('');
|
||
|
||
var r = data.length % 3;
|
||
|
||
return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
|
||
|
||
}
|
||
|
||
if(inUrl.lastIndexOf('?')){
|
||
|
||
parameterString = inUrl.substring(inUrl.lastIndexOf('?')+1,inUrl.length);
|
||
var urlParameters=urlDecode(parameterString);
|
||
|
||
var target =urlParameters.xdmTarget;
|
||
|
||
if(!target || target && target=='undefined'){
|
||
return;
|
||
}
|
||
|
||
if(target.indexOf('http:')==-1){
|
||
target = base64_decode(target);
|
||
}
|
||
|
||
target=decodeURIComponent(target);
|
||
//http://localhost/projects/x4mm/Control-Freak-Documentation/daux/Getting_Started?xdmTarget=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F%3Fdebug%3Dtrue%26run%3Drun-release-debug%26protocols%3Dtrue%26xideve%3Dtrue%26drivers%3Dtrue%26plugins%3Dfalse%26xblox%3Ddebug%26files%3Dtrue%26dijit%3Ddebug%26xdocker%3Ddebug%26xfile%3Ddebug%26davinci%3Ddebug%26dgrid%3Ddebug%26xgrid%3Ddebug%26xace%3Ddebug%26wcDocker%3Ddebug&xdm_e=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F&xdm_c=default9743&xdm_p=4
|
||
//console.error('creating socket to '+target);
|
||
xdmSocket = new easyXDM.Socket({
|
||
remote: "" + target,
|
||
onMessage:function (message, origin)
|
||
{
|
||
onMessage(message);
|
||
}
|
||
});
|
||
|
||
//console.error('xdmtarge = ' + target);
|
||
|
||
//var newUrl = + encodeURIComponent('' + window.location.href);
|
||
|
||
if(target && target!=='undefined' && target.length) {
|
||
$(function () {
|
||
$('a').each(function () {
|
||
var cUrl = $(this).attr('href');
|
||
var bindStr = '?';
|
||
if (cUrl && cUrl.indexOf('xdmTarget') == -1) {
|
||
if (cUrl.indexOf('?') != -1) {
|
||
bindStr = '&';
|
||
}
|
||
var newUrl = cUrl + bindStr + 'xdmTarget=' + base64_encode(target);
|
||
//console.log('new url ' + newUrl);
|
||
//$(this).attr('href', newUrl);
|
||
}
|
||
|
||
|
||
});
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
document.onreadystatechange = function () {
|
||
|
||
if(typeof easyXDM !=='undefined') {
|
||
|
||
var state = document.readyState;
|
||
if (state == 'interactive') {
|
||
} else if (state == 'complete') {
|
||
init();
|
||
}
|
||
}else{
|
||
console.error('easy xdm not defined');
|
||
}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Font -->
|
||
|
||
<!-- CSS -->
|
||
<link href='../themes/mytheme/css/theme-blue.min.css' rel='stylesheet' type='text/css'><link href='../admin-theme/bower_components/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'><link href='../admin-theme/html-white/dist/css/application.css' rel='stylesheet' type='text/css'><link href='../themes/mytheme/css/bootstrap-override-white.css' rel='stylesheet' type='text/css'>
|
||
<!-- Tipue Search -->
|
||
<link href="../tipuesearch/tipuesearch.css" rel="stylesheet">
|
||
|
||
<!--[if lt IE 9]>
|
||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
<body class=" xTheme xTheme-white">
|
||
<header class="Navbar hidden-print">
|
||
<a class="Navbar__brand" href="../index.html">Control-Freak</a>
|
||
|
||
<div class="Search">
|
||
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg>
|
||
<input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on" results=25 autosave=text_search>
|
||
</div>
|
||
</header>
|
||
<div class="Columns content">
|
||
<aside class="Columns__left Collapsible">
|
||
<div class="Collapsible__container">
|
||
<button type="button" class="Button Collapsible__trigger">
|
||
<span class="Collapsible__trigger--bar"></span>
|
||
<span class="Collapsible__trigger--bar"></span>
|
||
<span class="Collapsible__trigger--bar"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="Collapsible__content">
|
||
<!-- Navigation -->
|
||
<ul class='Nav'><li class='Nav__item '><a href="../Getting_Started.html">Getting Started</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Installation</a><ul class='Nav'><li class='Nav__item '><a href="../Installation/Windows.html">Windows</a></li><li class='Nav__item '><a href="../Installation/Linux.html">Linux</a></li><li class='Nav__item '><a href="../Installation/Raspberry-PI.html">Raspberry-PI</a></li><li class='Nav__item '><a href="../Installation/OSX.html">OSX</a></li><li class='Nav__item has-children'><a href="../Installation/WEB/index.html" class="folder"><i class="Nav__arrow"> </i>WEB</a><ul class='Nav'><li class='Nav__item '><a href="../Installation/WEB/Requirements.html">Requirements</a></li></ul></li></ul></li><li class='Nav__item has-children'><a href="../Interface_Designer/index.html" class="folder"><i class="Nav__arrow"> </i>Interface Designer</a><ul class='Nav'><li class='Nav__item '><a href="../Interface_Designer/Guide.html">Guide</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Examples</a><ul class='Nav'><li class='Nav__item '><a href="../Interface_Designer/Examples/Button_Group.html">Button Group</a></li><li class='Nav__item '><a href="../Interface_Designer/Examples/States.html">States</a></li></ul></li><li class='Nav__item '><a href="../Interface_Designer/States.html">States</a></li><li class='Nav__item '><a href="../Interface_Designer/VariableStates.html">VariableStates</a></li><li class='Nav__item has-children'><a href="../Interface_Designer/Widgets/index.html" class="folder"><i class="Nav__arrow"> </i>Widgets</a><ul class='Nav'><li class='Nav__item '><a href="../Interface_Designer/Widgets/Accordion.html">deliteful/Accordion</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Button.html">deliteful/Button</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/channelBreakpoints.html">deliteful/channelBreakpoints</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Checkbox.html">deliteful/Checkbox</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Combobox.html">deliteful/Combobox</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/features.html">deliteful/features</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/LinearLayout.html">deliteful/LinearLayout</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>list</a><ul class='Nav'><li class='Nav__item '><a href="../Interface_Designer/Widgets/list/List.html">deliteful/list/List</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/list/PageableList.html">deliteful/list/PageableList</a></li></ul></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Panel.html">deliteful/Panel</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/ProgressBar.html">deliteful/ProgressBar</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/ProgressIndicator.html">deliteful/ProgressIndicator</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/RadioButton.html">deliteful/RadioButton</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/ResponsiveColumns.html">deliteful/ResponsiveColumns</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/ScrollableContainer.html">deliteful/ScrollableContainer</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Select.html">deliteful/Select</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/SidePane.html">deliteful/SidePane</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Slider.html">deliteful/Slider</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/StarRating.html">deliteful/StarRating</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/styling.html">styling</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/SwapView.html">deliteful/SwapView</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Switch.html">deliteful/Switch</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/Toaster.html">deliteful/Toaster</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/ToggleButton.html">deliteful/ToggleButton</a></li><li class='Nav__item has-children'><a href="../Interface_Designer/Widgets/tutorial/index.html" class="folder"><i class="Nav__arrow"> </i>tutorial</a><ul class='Nav'><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part1GettingStarted.html">Deliteful Tutorial Part 1</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part2QuickLook.html">Deliteful Tutorial Part 2</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part3PhotoFeedApp.html">Deliteful Tutorial Part 3</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part4ListView.html">Deliteful Tutorial Part 4</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part5CustomRenderer.html">Deliteful Tutorial Part 5</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part6DetailsView.html">Deliteful Tutorial Part 6</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part7SettingsView.html">Deliteful Tutorial Part 7</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/tutorial/Part8Build.html">Deliteful Tutorial Part 8</a></li></ul></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/ViewIndicator.html">deliteful/ViewIndicator</a></li><li class='Nav__item '><a href="../Interface_Designer/Widgets/ViewStack.html">deliteful/ViewStack</a></li></ul></li></ul></li><li class='Nav__item has-children'><a href="../Driver/index.html" class="folder"><i class="Nav__arrow"> </i>Driver</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Code Examples</a><ul class='Nav'><li class='Nav__item '><a href="../Driver/Code_Examples/Expressions.html">Expressions</a></li><li class='Nav__item '><a href="../Driver/Code_Examples/Variable_Changes.html">Variable Changes</a></li></ul></li><li class='Nav__item has-children'><a href="../Driver/Built-In/index.html" class="folder"><i class="Nav__arrow"> </i>Built-In</a><ul class='Nav'><li class='Nav__item '><a href="../Driver/Built-In/VLC.html">VLC</a></li></ul></li><li class='Nav__item '><a href="../Driver/Guide.html">Guide</a></li><li class='Nav__item '><a href="../Driver/API.html">API</a></li><li class='Nav__item '><a href="../Driver/Editors.html">Editors</a></li><li class='Nav__item '><a href="../Driver/Debugging.html">Debugging</a></li><li class='Nav__item '><a href="../Driver/Intern.html">Intern</a></li><li class='Nav__item has-children'><a href="../Driver/Fiddle/index.html" class="folder"><i class="Nav__arrow"> </i>Fiddle</a><ul class='Nav'><li class='Nav__item '><a href="../Driver/Fiddle/Blocks_Example.html">Blocks Example</a></li><li class='Nav__item '><a href="../Driver/Fiddle/Blocks_Template.html">Blocks Template</a></li></ul></li></ul></li><li class='Nav__item '><a href="../Protocols/index.html" class="folder"><i class="Nav__arrow"> </i>Protocols</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="../Blocks/index.html" class="folder"><i class="Nav__arrow"> </i>Blocks</a><ul class='Nav'><li class='Nav__item '><a href="../Blocks/Command.html">Command</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Events</a><ul class='Nav'><li class='Nav__item '><a href="../Blocks/Events/OnEvent.html">OnEvent</a></li></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>File</a><ul class='Nav'><li class='Nav__item '><a href="../Blocks/File/ReadJSON.html">ReadJSON</a></li></ul></li></ul></li><li class='Nav__item '><a href="../Exporter/index.html" class="folder"><i class="Nav__arrow"> </i>Exporter</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../Device_Server/index.html" class="folder"><i class="Nav__arrow"> </i>Device Server</a><ul class='Nav'></ul></li><li class='Nav__item Nav__item--open'><a href="../Tutorials/index.html" class="folder"><i class="Nav__arrow"> </i>Tutorials</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../Raspberry_PI/index.html" class="folder"><i class="Nav__arrow"> </i>Raspberry PI</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Resources</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Software</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>MQTT</a><ul class='Nav'><li class='Nav__item '><a href="../Resources/Software/MQTT/Software.html">Software</a></li><li class='Nav__item '><a href="../Resources/Software/MQTT/Architecture.html">Architecture</a></li></ul></li><li class='Nav__item '><a href="../Resources/Software/Tools/index.html" class="folder"><i class="Nav__arrow"> </i>Tools</a><ul class='Nav'></ul></li></ul></li><li class='Nav__item '><a href="../Resources/Utils_API/index.html" class="folder"><i class="Nav__arrow"> </i>Utils API</a><ul class='Nav'></ul></li></ul></li></ul>
|
||
|
||
<div class="Links">
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div class="Columns__right ">
|
||
<div class="Columns__right__content">
|
||
<div class="doc_content">
|
||
<article class="Page">
|
||
|
||
<div class="Page__header">
|
||
<h1><a href="../Tutorials/index.html">Tutorials</a></h1>
|
||
<span style="float: right; font-size: 10px; color: gray;">
|
||
<a href="https://github.com/net-commander/net-commander-documentation/blob/master/docFiles/18_Tutorials/_index.md" target="_blank">Edit on GitHub</a>
|
||
</span>
|
||
</div>
|
||
|
||
|
||
<div class="s-content">
|
||
<div class="row">
|
||
<div class="col-md-6 col-md-offset-2">
|
||
<section class="widget widget-tabs">
|
||
<header>
|
||
<ul class="nav nav-tabs">
|
||
<li class="active">
|
||
<a href="#stats" data-toggle="tab">Red</a>
|
||
</li>
|
||
<li>
|
||
<a href="#report" data-toggle="tab">Orange</a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li ><a href="#dropdown1" data-toggle="tab">Green</a></li>
|
||
<li ><a href="#dropdown2" data-toggle="tab">Blue</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</header>
|
||
<div class="body tab-content">
|
||
<div id="stats" class="tab-pane active clearfix">
|
||
<h2>Tabs-enabled widget</h2>
|
||
<p>You will never know exactly how something will go until you try it.</p>
|
||
<p>You can think three hundred times and still have no precise result. If you see
|
||
attractive girl all you need to do is to go and ask her to give you her phone. You don’t
|
||
need to think about HOW it can turn out. All you have to do is to GO and DO IT. It
|
||
should be super-fast and easy. No hesitation. You ask me: “What to do with these
|
||
fearful thoughts preventing me from doing that?” The answer is to ignore them, because
|
||
they can’t disappear immediately.</p>
|
||
<p>The same thing is for startups and ideas. If you have an idea right away after it appears in your mind you should go and make a first step to implement it. </p>
|
||
<div class="pull-right">
|
||
<button class="btn btn-inverse">Cancel</button>
|
||
<button class="btn btn-primary">Some button</button>
|
||
</div>
|
||
</div>
|
||
<div id="report" class="tab-pane">
|
||
<div style="font-size: 200px; text-align: center; color: #56bc76; height: 280px;">
|
||
<i class="fa fa-picture-o"></i>
|
||
</div>
|
||
</div>
|
||
<div id="dropdown1" class="tab-pane">
|
||
<p>The same thing is for startups and ideas. If you have an idea right away after it appears
|
||
in your mind you should go and make a first step to implement it. If you will think too
|
||
much it will sink in the swamp of never implemented plans and ideas or will just go away
|
||
or will be implemented by someone else.</p>
|
||
<p><strong>5 months of doing everything to achieve nothing.</strong></p>
|
||
<p>I had an idea named Great Work. It was a service aimed to help people find their passion.
|
||
Yes I know it sound crazy and super naïve but I worked on that. I started to work on
|
||
planning, graphics, presentations, pictures, descriptions, articles, investments and so
|
||
on. I worked on everything but not the project itself</p>
|
||
<div>
|
||
<button class="btn btn-danger">Some button</button>
|
||
<button class="btn btn-default">Cancel</button>
|
||
</div>
|
||
</div>
|
||
<div id="dropdown2" class="tab-pane">
|
||
<p>I realized really simple thing recently. Try is million times better than think. The real world is much more representative than any models either they are built in mind or on the shit of paper.</p>
|
||
<div>
|
||
<button class="btn btn-warning btn-block">Some button</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-down"></i>
|
||
Tabs inside of the body
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<ul id="myTab" class="nav nav-tabs">
|
||
<li><a href="#home" data-toggle="tab">Home</a></li>
|
||
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#dropdown3" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#dropdown4" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<div id="myTabContent" class="tab-content" >
|
||
<div class="tab-pane fade" id="home">
|
||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="profile">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown3">
|
||
<p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown4">
|
||
<p>They sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-up"></i>
|
||
Tabs on the bottom
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<div class="tabbable tabs-below">
|
||
<div id="myTabContentbottom" class="tab-content">
|
||
<div class="tab-pane fade" id="home-bottom">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="profile-bottom">
|
||
<p>Food truck fixie locavore, single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="dropdown3-bottom">
|
||
<p>Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is
|
||
easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it!
|
||
But the goal of this text is different. So a bit of Lore Ipsum is always great practice</p>
|
||
</div>
|
||
</div>
|
||
<ul id="myTabbottom" class="nav nav-tabs ">
|
||
<li><a href="#home-bottom" data-toggle="tab">Home</a></li>
|
||
<li><a href="#profile-bottom" data-toggle="tab">Profile</a></li>
|
||
<li class="active"><a href="#dropdown3-bottom" data-toggle="tab">Search</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-right"></i>
|
||
Tabs on the left
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<div class="tabbable tabs-left">
|
||
<ul id="myTabLeft" class="nav nav-tabs">
|
||
<li><a href="#home-left" data-toggle="tab">Home</a></li>
|
||
<li class="active"><a href="#profile-left" data-toggle="tab">Profile</a></li>
|
||
<li><a href="#dropdown3-left" data-toggle="tab">Search</a></li>
|
||
</ul>
|
||
<div id="myTabContentLeft" class="tab-content" >
|
||
<div class="tab-pane fade" id="home-left">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="profile-left">
|
||
<p>Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is
|
||
easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it!
|
||
But the goal of this text is different. So a bit of Lore Ipsum is always great practice</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown3-left">
|
||
<p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-arrow-left"></i>
|
||
Tabs on the right
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<div class="tabbable tabs-right">
|
||
<ul id="myTabright" class="nav nav-tabs">
|
||
<li><a href="#home-right" data-toggle="tab">Home</a></li>
|
||
<li class="active"><a href="#profile-right" data-toggle="tab">Profile</a></li>
|
||
<li><a href="#dropdown3-right" data-toggle="tab">Search</a></li>
|
||
</ul>
|
||
<div id="myTabContentright" class="tab-content" >
|
||
<div class="tab-pane fade" id="home-right">
|
||
<p>Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually. Everyone knows what is lore ipsum - it is
|
||
easy to understand if text is lore ipsum. You'll automatically skip - because you know - it's just non-informative stub. But what if there some text like this one? You start to read it!
|
||
But the goal of this text is different. So a bit of Lore Ipsum is always great practice.</p>
|
||
</div>
|
||
<div class="tab-pane fade in active" id="profile-right">
|
||
<p>Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
|
||
We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
|
||
We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown3-right">
|
||
<p>Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav>
|
||
<ul class="Pager">
|
||
<li class=Pager--prev><a href="../Device_Server/index.html">Previous</a></li> <li class=Pager--next><a href="../Raspberry_PI/index.html">Next</a></li> </ul>
|
||
</nav>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- jQuery -->
|
||
<script src="../themes/daux/js/jquery-1.11.3.min.js"></script>
|
||
|
||
<!-- hightlight.js -->
|
||
<script src="../themes/daux/js/highlight.pack.js"></script>
|
||
<script>hljs.initHighlightingOnLoad();</script>
|
||
|
||
<!-- JS -->
|
||
<script src="../admin-theme/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
|
||
<script src="../themes/daux/js/daux.js"></script>
|
||
|
||
<!-- Tipue Search -->
|
||
<script type="text/javascript" src="../tipuesearch/tipuesearch.js"></script>
|
||
|
||
<script>
|
||
window.onunload = function(){}; // force $(document).ready to be called on back/forward navigation in firefox
|
||
$(function() {
|
||
tipuesearch({
|
||
'base_url': '../'
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|