-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathgetting-started.html
205 lines (199 loc) · 8.64 KB
/
getting-started.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Getting started | Involt - Arduino to html prototyping framework for designers.</title>
<meta content="Quick preview of Involt core features. With this 15 minutes tutorial, you will know how to send or receive data and how to use CSS interface." 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>Chapters:</h2>
<p>Introduction</p>
<div>
<a href="getting-started.html">Quick start</a>
</div>
<div>
<a href="getting-started/htmlsyntax.html">HTML/CSS interactions</a>
</div>
<div>
<a href="getting-started/arduino.html">Pins & Arduino sketch</a>
</div>
<p>Javascript</p>
<div>
<a href="getting-started/functions.html">Triggering functions</a>
</div>
<div>
<a href="getting-started/jquery.html">JS & JQuery</a>
</div>
<p>Additional features</p>
<div>
<a href="getting-started/bluetooth.html">Bluetooth</a>
</div>
<div>
<a href="getting-started/mobile.html">Mobile</a>
</div>
<p>FAQ</p>
<div>
<a href="getting-started/faq.html">FAQ & known issues</a>
</div>
</div>
<main>
<h3>Getting Started - Quick start</h3>
<p>The purpose of Involt is fast and easy prototyping. It's possible to quickly inject hardware interactions into HTML layout while framework take care of communication. Read more about this idea on <a href="about.html">about page.</a></p>
<p>If you are familiar with HTML/CSS and Arduino this quick introduction shouldn't take more than 15 minutes.</p>
<h4>How to install</h4>
<p>The project works on Windows, OS X (On Linux serial should work). For mobile installation on Android go to <a href="getting-started/mobile.html">Mobile page.</a></p>
<ol>
<b>
<li>Download <a href="https://github.com/Involt/Involt">Involt</a></li>
<li>Download <a href="http://nwjs.io/">Node-webkit</a>*</li>
<li>Unpack Involt to Node-webkit main folder</li>
<li>After opening the app you should see loader with available devices.</li>
<li>Use app.html as your homepage (you can add subpages) and involt-basic.ino for arduino code.</li>
</b>
</ol>
<p>*The SDK version of NW is recommended as it contains Chrome Dev Tools and HTML inspector. (Mac version is in NW download section)</p>
<h4>What communication methods are supported?</h4>
<ul>
<b>
<li>Serial - desktop</li>
<li>Bluetooth 2.0 - desktop and mobile (Android)</li>
</b>
</ul>
<p>Even if it's HTML based, currently Involt has no IoT online support.</p>
<h3>Basic usage</h3>
<p><b>It's as simple as adding HTML element where desired interactions and their parameters are set by CSS classes.</b> Involt will take care of communication with your device but you need to write single line of code inside Arduino sketch for each element.
<div class="code syntax"><p>ard [element] [pin] [parameters] </p></div>
<div class="code html"><div class="ard [element] [pin] [parameters]"></div></div>
<h4>Read value from Arduino</h4>
<p>Send any numeric value to your app with <span>involtSend(pinIndex, value)</span> in your sketch loop.</p>
<p>Always use involt-basic.ino sketch as starting point.</p>
<div class="code arduino">
<div class="code-m">
...
<br><br>
void loop(){
<p>involtReceive(); </p>
<br>
<p style="color:blue;">involtSend(0, analogRead(A0));</p>
<p>delay(2);</p>
}
<br><br>
...
</div>
</div>
<p>Now add this HTML element to app.html file. After connecting something to pin A0 (knob or anything else) you should see changes in its value. The <span>show</span> element has no other parameters.</p>
<div class="code html">
<div class="ard show A0"></div>
</div>
<img src="img/show.jpg" alt="show value from knob">
<h4>Send data to Arduino</h4>
<p>To blink LED we use <span>digitalWrite</span> or <span>analogWrite</span> to change brightness. Numeric values received from App are stored in <span>involtPin[pinIndex]</span>.</p>
<p>Sending and receiving can be related to any variable you want - not only pin states. You can use this array to store values for sketch functions.</p>
<div class="code arduino">
<div class="code-m">
...
<br><br>
void loop(){
<p>involtReceive(); </p>
<br>
<p style="color:blue;">analogWrite(5, involtPin[5]);</p>
}
<br><br>
...
</div>
</div>
<p>This button will send PWM value 123 to pin 5 and turn on connected LED.</p>
<div class="code html">
<button class="ard button P5 value-123">Click me</button>
</div>
<img src="img/button.jpg" alt="button that sends value">
<p>Similarly you can use HTML inputs (and forms) to work with hardware. The example below uses text strings. Note that pin letter has changed from P to S.</p>
<div class="code html">
<input type="text" class="ard involt-input S0" placeholder="test">
</div>
<p>Add the code below to void loop section. When you type "involt" the LED will turn on.</p>
<div class="code arduino">
<div class="code-m">
if (involtString[0] == "involt"){
<p>analogWrite(5, 255);</p>
}
</div>
</div>
<h3>Summary</h3>
<p>There is more you can do with Involt and it's widely explained in next chapters. Playing with <a href="examples.html">examples</a> is good idea to practice. More things Involt has to offer:</p>
<ul>
<li>Trigger functions in app or device.</li>
<li>Sending strings (with pin S instead of P)</li>
<li>Use inputs to create HTML form which passes the values to device.</li>
<li>Add Bluetooth communication for wireless project.</li>
<li>Pack everything into Phonegap and use same project on Android (with Bluetooth).</li>
</ul>
</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>