-
Notifications
You must be signed in to change notification settings - Fork 2
/
examples.html
107 lines (106 loc) · 4.51 KB
/
examples.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Examples | Involt - Arduino to html prototyping framework for designers.</title>
<meta content="List of prepared tutorials and examples. Sometimes it's good to start practicing on real situations." 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="examples/blink.html">Blink tutorial</a>
</div>
<div>
<a href="examples/2knobs.html">2 Knobs 1 App</a>
</div>
<div>
<a href="examples/barrelroll.html">"Do a barrel roll"</a>
</div>
<div>
<a href="examples/involtjq.html">Involt as JQuery plugin</a>
</div>
</div>
<main class="examples">
<h3>Examples</h3>
<p style="font-weight:700;">Other examples can be found on <a href="http://www.instructables.com/member/ErnestW">Instructables</a>.</p>
<img src="img/exled.svg" alt="led blink example">
<a href="examples/blink.html"><h4>Blink tutorial</h4></a>
<p>Involt basic tutorial. Send data from button inside app and toggle LED on your Arduino device.</p>
<img src="img/exknob.svg" alt="potentiometer ">
<a href="examples/2knobs.html"><h4>2 Knobs 1 App</h4></a>
<p>Involt basic tutorial. Receive data from potentiometers connected to analog pins on Arduino.</p>
<img src="img/exsquare.svg" alt="jquery and javascript tutorial">
<a href="examples/barrelroll.html"><h4>"Do a barrel roll"</h4></a>
<p>JQuery basic tutorial. Connect two potentiometers and use them to rotate html element.</p>
<img src="img/ico1.svg" alt="JQuery plugin">
<a href="examples/involtjq.html"><h4>Involt as JQuery plugin</h4></a>
<p>JQuery advanced tutorial. Create custom elements with JQuery methods.</p>
</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>