reference.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Reference | Involt - Arduino to html prototyping framework for designers.</title>
	<meta content="Detailed reference of Involt HTML UI framework elements. Involt converts CSS classes and generates element with automatic communication." name="description"></meta>
	<meta content="hardware prototyping, software to hardware, arduino, html, arduino to html, framework, jquery, chrome app, physical computing, communication" name="keywords"></meta>
	<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
	<link rel="shortcut icon" type="image/png" href="favicon.png"/>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!--<script src="js/less.js"></script>-->
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-69535393-1', 'auto');
	  ga('send', 'pageview');
	</script>
</head>
<body>
	<header>
		<div class="container-head">
			<a href="index.html" class="logo"><img src="img/logo.svg" alt=""></a>
			<div class="ham-btn">
				<div>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>	
			<nav>
				<a href="index.html">Home</a>
				<a href="getting-started.html">Getting started</a>
				<a href="examples.html">Examples</a>
				<a href="reference.html">Reference</a>
				<a href="about.html">About</a>
				<a href="https://github.com/Involt/Involt">Github</a>
			</nav>
		</div>
	</header>
	<div class="bg-gray">
		<div class="container">
			<div class="sidebar reference">
				<h2>UI Elements:</h2>
				<div>
					<a href="#read-data">Read data</a>
					<p>				
						<a href="#show">Show</a>
						<a href="#bar">Bar</a>
						<a href="#knob">Knob</a>
						<a href="#value">Value</a>
					</p>
				</div>
				<div>
					<a href="#send-data">Send data</a>
					<p>
						<a href="#button">Button</a>
						<a href="#toggle">Toggle</a>
						<a href="#switch">Switch</a>
						<a href="#increase">Increase</a>
						<a href="#decrease">Decrease</a>
						<a href="#rangeslider">Rangeslider</a>
						<a href="#hover">Hover</a>
						<a href="#knob-send">Knob-send</a>
						<a href="#involt-cta">Involt-cta</a>
					</p>
				</div>
				<div>
					<a href="#html-inputs">HTML inputs and forms</a>
					<p>
						<a href="#involt-input">Involt-input</a>
						<a href="#involt-submit">Involt-submit</a>
					</p>
				</div>
			</div>
			<main>
				<h3>Reference</h3>
				<p><b>Before using the reference start from <a href="getting-started.html">Getting started tutorial</a>.</b> For JQuery methods and Javascript reference check <a href="getting-started/jquery.html">JQuery</a> page.</p>
				<h3 id="read-data">Read data</h3>
								<!-- -->
				<h4 id="show">Show</h4>
				<p>Display the analog pin value or received string.</p>
				<div class="code syntax"><p>ard show [pin]</p></div>
				<div class="code html">&lt;div class="ard show A0"&gt;&lt;/div&gt;</div>
								<!-- -->
				<h4 id="bar">Bar</h4>
				<p>Horizontal bar for value of analog pin. Width of bar value is automatically scaled to CSS width of element. For scaling the value use Arduino map function. Add the <span>label-constant</span> class to show the value in constant position.</p>
				<div class="code syntax"><p>ard bar [pin] [range]</p></div>
				<div class="code html">&lt;div class="ard bar A0 range-0-1024"&gt;&lt;/div&gt;</div>
								<!-- -->
				<h4 id="knob">Knob</h4>
				<p>Knob that shows analog value. Based on <a href="https://github.com/aterrien/jQuery-Knob">JQuery Knob plugin</a> by Anthony Terrien. You can add the <span>data-</span> attributes as described in plugin to change parameters of this element.
				<div class="code syntax"><p>ard knob [pin] [range]</p></div>
				<div class="code html">&lt;div class="ard knob A0 range-0-1024"&gt;&lt;/div&gt;</div>
								<!-- -->
				<h4 id="value">Value</h4>
				<p>Set html object value attribute to received data.</p>
				<div class="code syntax"><p>ard value [pin]</p></div>
				<div class="code html">&lt;input type="text" class="ard value A0"&gt;</div>
				<h3 id="send-data">Send data</h3>
								<!-- -->
				<h4 id="button">Button</h4>
				<p>The most basic UI element of Involt. Send the value (numeric or string) to target pin when button is pressed. It can be any HTML object (<span>div</span> etc.).</p>
				<div class="code syntax"><p>ard button [pin] [value]</p></div>
				<div class="code html">&lt;button class="ard button P5 value-100"&gt;&lt;/button&gt;</div>
								<!-- -->
				<h4 id="toggle">Toggle</h4>
				<p>Toggle pin between <span>[value1]</span> and <span>[value2]</span>. <span>[value1]</span> is also beginning state on startup (should be declared in <span>void setup( )</span> ). By not defining the values it will become 0/1 switch.</p>
				<div class="code syntax"><p>ard toggle [pin] [value1-value2]</p></div>
				<div class="code html">&lt;button class="ard toggle P5 value-50-100"&gt;&lt;/button&gt;</div>
								<!-- -->
				<h4 id="switch">Switch</h4>
				<p>Toggle between two values with mobile-like switch. To start with active state add <span>active</span> class.</p>
				<div class="code syntax"><p>ard switch [pin] [inactive-active]</p></div>
				<div class="code html">&lt;div class="ard switch P5 value-0-255"&gt;&lt;/div&gt;</div>
								<!-- -->
				<h4 id="increase">Increase</h4>
				<p>Increase pin value by <span>[step]</span>. <span>[range]</span> is limit of value. Works with decrease but both need to have same <span>[startvalue]</span>. You can add in void setup the <span>[startvalue]</span> (this is not required).</p>
				<div class="code syntax"><p>ard increase [pin] [startvalue] [range] [step]</p></div>
				<div class="code html">&lt;button class="ard increase P5 value-100 range-0-255 step-10"&gt;&lt;/button&gt;</div>
								<!-- -->
				<h4 id="decrease">Decrease</h4>
				<p>Decrease pin value by <span>[step]</span>. <span>[range]</span> is limits of value. Works with increase but both need to have same <span>[startvalue]</span>. You can add in void setup the <span>[startvalue]</span> (this is not required).</p>
				<div class="code syntax"><p>ard decrease [pin] [startvalue] [range] [step]</p></div>
				<div class="code html">&lt;button class="ard decrease P5 value-100 range-0-255 step-10"&gt;&lt;/button&gt;</div>
								<!-- -->
				<h4 id="rangeslider">Rangeslider</h4>
				<p>JQuery based slider with <a href="http://refreshless.com/nouislider/">noUiSlider</a> plugin. The value is displayed inside a tooltip over object.  Add the <span>label-constant</span> class to show the value in constant position. To access the JQuery object use <span>.rangeslider>.slider</span> selector, for more info read the plugin documentation. To send the values in real time, not only on release add the <span>fluid</span> class (may cause buffer overloads so <span>step-1</span> is not recommended in this case).</p>
				<p>For plain HTML rangeslider use involt-input element.</p>
				<div class="code syntax"><p>ard rangeslider [pin] [startvalue] [range] [step]</p></div>
				<div class="code html">&lt;div class="ard rangeslider P5 value-0 range-0-255 step-5"&gt;&lt;/div&gt;;</div>
								<!-- -->
				<h4 id="hover">Hover</h4>
				<p>Hover the element to send value. To combine hover with other Involt element you can simply use this as parent of target in html.</p>
				<div class="code syntax"><p>ard hover [pin] [onLeave-onHover]</p></div>
				<div class="code html">&lt;div class="ard hover P5 value-0-255"&gt;&lt;/div&gt;</div>
								<!-- -->
				<h4 id="knob-send">Knob-send</h4>
				<p>Simple knob that sends value. This knob is also based on <a href="https://github.com/aterrien/jQuery-Knob">JQuery Knob plugin</a> - you can add plugin <span>data-</span> attributes to this element and they will be transfred to generated object. To send the values in real time, not only on release add the <span>fluid</span> class (may cause buffer overloads so step 1 is not recommended).</p>
				<div class="code syntax"><p>ard knob-send [pin] [startvalue] [range] [step]</p></div>
				<div class="code html">&lt;div class="ard knob-send P5 value-100 range-0-255 step-1"&gt;&lt;/div&gt;</div>
								<!-- -->
				<h4 id="involt-cta">Button-cta</h4>
				<p>Simple call to action for triggering functions in device.</p>
				<div class="code syntax"><p>ard button-cta [functionName]</p></div>
				<div class="code html">&lt;button class="ard button-cta fn-functionName"&gt;&lt;/button&gt;</div>
				<h3 id="html-inputs">HTML inputs & forms</h3>
								<!-- -->
				<h4 id="involt-input">Involt-input</h4>
				<p>Handle the HTML inputs. The data is sent on input change. Remember that <span>parameters</span> can be defined as classes and HTML attributes.</p>
				<p>Supported inputs: <span>text, range, number, checkbox, radio, select</span></p>
				<div class="code syntax"><p>ard involt-input [parameters]</p></div>
				<div class="code html">
					&lt;input type="text" class="ard involt-input S0"&gt; <br><br>
					&lt;input type="number" class="ard involt-input P10"&gt; <br><br>
					&lt;input type="checkbox" class="ard involt-input" pin="P9" value="0-255"&gt; <br><br>
					&lt;input type="range" class="ard involt-input P10" min="0" max="100" step="10" value="50"&gt; <br><br>
					&lt;input type="radio" name="demo" class="ard involt-input P14" value="0"&gt; <br>
					&lt;input type="radio" name="demo" class="ard involt-input P14" value="1"&gt; <br><br>
					&lt;select class="ard involt-input" pin="P13"&gt; <br>
					&lt;option value="0"&gt;0&lt;/option&gt;<br>
					&lt;option value="100"&gt;100&lt;/option&gt;<br>
					&lt;option value="255"&gt;255&lt;/option&gt;<br>
					&lt;/select&gt;<br>
				</div>
								<!-- -->
				<h4 id="involt-submit">Involt-submit</h4>
				<p>Use involt-submit inside HTML form to send form inputs values only on submitting by this button. The <span>functionName</span> is not required, the function itself is triggered after all values are passed to device. The <span>type=""button"</span> is required.</p>
				<p>UI elements affected: <span>involt-input, knob-send, rangeslider.</span></p>
				<div class="code syntax"><p>ard involt-submit [functionName]</p></div>
				<div class="code html">&lt;button type="button" class="ard involt-submit fn-functionName"&gt;&lt;/button&gt;</div>
				<p>Quick example:</p>
				<div class="code html">
					<div class="code-m">
						&lt;input type="text" class="ard involt-input S0"&gt; //Send value when it's changed
						<br><br>
						&lt;form&gt;
							<p>&lt;input type="text" class="ard involt-input S0"&gt; //Changing will not send the value immediately.</p> 
							<p>&lt;button type="button" class="ard involt-submit"&gt;Submit&lt;/button&gt; //Click to send value</p>
						&lt;/form&gt;
					</div>
				</div>

			</main>
		</div>
	</div>
	<footer>
		<div class="container">
			<div class="column">
				<img src="img/ico1.svg" class="ico-small" alt="">
				<div class="footer-txt">
					Involt was made to quickly create interactive objects with software to hardware communication by using HTML and CSS. The goal is to help you to overcome the obstacles at prototyping stage.
				</div>
				<a href="about.html">Read more</a>
			</div>
			<div class="column">
				<img src="img/ico2.svg" class="ico-small" alt="">
				<div class="footer-txt">
					You can help develop framework on Github. There are new features added with each version. To see the progress of development check the changelog. Involt is under MIT license.
				</div>
				<a href="https://github.com/Involt/Involt/wiki/Changelog">See the Changelog</a>
			</div>
			<div class="column">
				<img src="img/ico3.svg" class="ico-small" alt="">
				<div class="footer-txt">
					Used Involt and enjoyed it? Do you have any questions or suggestions? Help by sending feedback directly via mail.
				</div>
				<a href="mailto:ernestwarzocha@gmail.com">ernestwarzocha@gmail.com</a>
			</div>
		</div>
	</footer>
	<script src="js/jq-ui.js"></script>
</body>
</html>