-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathinvoltjq.html
216 lines (188 loc) · 7.84 KB
/
involtjq.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
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Tutorial | Involt - Arduino to html prototyping framework for designers.</title>
<meta content="Detailed tutorial on how to use JQuery methods to create custom interactions or communicate between HTML objects." 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>Examples:</h2>
<div>
<a href="blink.html">Blink tutorial</a>
</div>
<div>
<a href="2knobs.html">2 Knobs 1 App</a>
</div>
<div>
<a href="barrelroll.html">"Do a barrel roll"</a>
</div>
<div>
<a href="involtjq.html">Involt as JQuery plugin</a>
</div>
</div>
<main>
<h3>Involt as JQuery plugin</h3>
<p><b>This tutorial is continuation of JQuery section of getting started page. You should start from reading the <a href="../getting-started/jquery.html">JS & JQuery methods</a>.</b></p>
<p>Below are practical examples of working with multiple elements:</p>
<h4>Sending the value</h4>
<p>The pin and element value can be defined once. This is something similar to Involt button element. The <span>updateValue</span> makes sure that <span>test1</span> sends same value all the time. Only after clicking the <span>test2</span> it will send different value. </p>
<p><span>test3</span> will force the <span>test1</span> to send its value.</p>
<div class="code javascript">
<div class="code-m">
$(".test1").pinDefine("P11"); <br>
$(".test1").data("value", 123); <br><br>
$(".test1").click(function() {
<p>$(this).updateValue().sendValue();</p>
}); <br><br>
$(".test2").click(function() {
<p>$(".test1").data("value", 255);</p>
}); <br><br>
$(".test3").click(function() {
<p>$(".test1").sendValue();</p>
});
</div>
</div>
<p>Without <span>updateValue</span> it will use current pin value. In this example only <span>test2</span> and <span>test3</span> manipulates the pin. In this case <span>test1</span> has no value and pin assigned so it's completly dependent on other elements.</p>
<div class="code javascript">
<div class="code-m">
involt.pin.P[11] = 255;<br><br>
$(".test1").click(function() {
<p>$(this).sendValue();</p>
}); <br><br>
$(".test2").click(function() {
<p>$(".test1").pinDefine("P11");</p>
<p>involt.pin.P[11] = 100;</p>
});<br><br>
$(".test3").click(function() {
<p>$(".test1").pinDefine("P12");</p>
<p>involt.pin.P[12] = 0;</p>
});
</div>
</div>
<h4>Changing the attributes of Involt elements</h4>
<p>For this example use Involt button (classes are: <span>ard button P5 255 demo</span>). Change the value of that button (other parameters can be changed this way). <span>updateValue</span> is not necessary because we want to change pin value when the button is pressed.</p>
<div class="code javascript">
<div class="code-m">
$(".changeValue").click(function() {
<p>$(".demo").data("value", 100);</p>
}); <br><br>
</div>
</div>
<p>Change pin of that button. After clicking <span>changeValue</span> and <span>changePin</span>, previously defined button will send to P6 value 100.</p>
<div class="code javascript">
<div class="code-m">
$(".changePin").click(function() {
<p>$(".demo").pinSwap("P6");</p>
});
</div>
</div>
<p>Shorthand for switching pin of all Involt elements that shares same pin at once:</p>
<div class="code javascript">
<div class="code-m">
$(".changePins").click(function() {
<p>$(".P5").pinSwap("P6");</p>
});
</div>
</div>
<h4>Send multiple values to multiple pins at once</h4>
<p>These examples do the same thing. To avoid long chains you should use plain javascript for better performance.</p>
<div class="code javascript">
<div class="code-m">
$(".test1").click(function() {
<p>$(this).pinDefine("P9").updateValue(100).sendValue();</p>
<p>$(this).pinSwap("P10").updateValue(50).sendValue();</p>
}); <br><br>
$(".test2").click(function() {
<p>involt.pin.P[9] = 100;</p>
<p>involt.pin.P[10] = 50;</p>
<p>involt.send("P9", involt.pin.P[9]);</p>
<p>involt.send("P10", involt.pin.P[10]);</p>
});<br><br>
</div>
</div>
<p>...or with multiple selectors:</p>
<div class="code javascript">
<div class="code-m">
$(".test3").click(function() {
<p>$(".test4, .test5, .test6").sendValue();</p>
});
</div>
</div>
<h4>How to use received data?</h4>
<p>These values are updated automatically. This simple example will change font size of your app. To respond when values are changed check <a href="../getting-started/functions.html">triggering functions</a> section.</p>
<div class="code javascript">
<div class="code-m">
$(".yourbutton").click(function() {
<p>$("*").css('font-size', involt.pin.A[0]);</p>
});
</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:[email protected]">[email protected]</a>
</div>
</div>
</footer>
<script src="../js/jq-ui.js"></script>
</body>
</html>