Newer
Older
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sanjivani Fab Lab</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free HTML Templates" name="keywords">
<meta content="Free HTML Templates" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<style>
/* Use flexbox to create a row layout */
.image-container {
display: flex;
}
/* Optional: Add some spacing between images */
.image-container img {
margin-right: 10px;
}
h2 {
margin-right: 150px;
margin-left: 150px;
}
h3 {
margin-right: 150px;
margin-left: 150px;
}
h4 {
margin-right: 150px;
margin-left: 150px;
}
p {
margin: 30px;
}
div {
text-align: justify;
text-justify: inter-word;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
margin-right: 150px;
margin-left: 150px;
}
p {
font-size: 24px;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- Topbar Start -->
<div class="container-fluid bg-dark py-3 px-lg-5 d-none d-lg-block">
<div class="row">
<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center">
<a class="text-body pr-3" href=""><i class="fa fa-phone-alt mr-2"></i></a>
<span class="text-body">|</span>
<a class="text-body px-3" href=""><i class="fa fa-envelope mr-2"></i></a>
</div>
</div>
<div class="col-md-6 text-center text-lg-right">
<div class="d-inline-flex align-items-center">
<a class="text-body px-3" href="">
<i class="fab fa-facebook-f"></i>
</a>
<a class="text-body px-3" href="">
<i class="fab fa-twitter"></i>
</a>
<a class="text-body px-3" href="">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="text-body px-3" href="">
<i class="fab fa-instagram"></i>
</a>
<a class="text-body pl-3" href="">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<br>
<!-- Page Header Start -->
<div class="container-fluid page-header">
<h1 class="display-3 text-uppercase text-white mb-3"> Week-14</h1>
<div class="d-inline-flex text-white">
<h6 class="text-uppercase m-0"><a class="text-white" href="">Group Assignments</a></h6>
<h6 class="text-body m-0 px-3">/</h6>
<h6 class="text-uppercase text-body m-0">Interface and Application Programming</h6>
</div>
</div>
<!-- Page Header Start -->
<!--Documentation Start-->
<p><FONT COLOR="black">
<b>Group Assignment of Week-11</b><br>
This assignment is about documenting what we learned about Input Devices<br>
<b>Objectives of Group Assignment:</b><br>
1. Compare as many tool options as possible.<br>
<b>Different tools available in the market:-</b><br>
1. MIT App Inventor<br>
2. Flutter<br>
3. Processing<br>
4> Scratch<br>
5. CoffeeScript<br>
6. Blynk<br>
7. typeScript<br>
From the above we have used MIT App Inventor, scratch and Blynk for our interfacing.
<br>
<b>MIT App Inventor</b><br>
</FONT></p>
<div>
<img width="700" height="450"src="img/groupass/Week-14/01.png">
</div><br>
<p><FONT COLOR="black">
MIT App Inventor is a user-friendly, web-based platform developed by MIT for creating Android applications. It employs a visual programming language, allowing users to design apps using a drag-and-drop interface without needing extensive coding knowledge. Users can assemble program components like building blocks to create functional mobile applications. This approach simplifies the app development process, making it accessible to beginners and those with minimal programming experience. MIT App Inventor stands out from other interfacing tools due to its intuitive interface, strong educational resources, and the ability to quickly prototype and test apps on real devices. This ease of use, combined with its educational focus, makes it an ideal tool for teaching programming concepts and app development.<br>
<b>Scratch</b><br>
</FONT></p>
<div>
<img width="700" height="450"src="img/groupass/Week-14/02.png">
</div><br>
<p><FONT COLOR="black">
Scratch is a visual programming language and online community developed by the MIT Media Lab, designed to make programming accessible to children and beginners. It allows users to create interactive stories, games, and animations by snapping together code blocks like puzzle pieces. Each block represents a different command or function, and users can combine these blocks to create complex sequences of actions and reactions. Scratch is highly intuitive, promoting learning through experimentation and play. It differs from other programming tools by emphasizing creativity and collaboration, with a large online community where users can share projects and learn from each other. Its simplicity and engaging interface make it an excellent tool for introducing young learners to the fundamentals of programming and computational thinking.<br>
<b>Blynk</b><br>
</FONT>
<div>
<img width="700" height="450"src="img/groupass/Week-14/03.png">
</div><br>
<p><FONT COLOR="black">
Blynk is an IoT (Internet of Things) platform designed for building and controlling smart devices through a user-friendly mobile app. It provides a seamless way to create custom interfaces for controlling hardware projects, such as Arduino, Raspberry Pi, and ESP8266, using a drag-and-drop interface to add buttons, sliders, graphs, and other widgets. Blynk works by connecting your hardware to the Blynk Cloud via Wi-Fi, Bluetooth, Ethernet, or other communication methods, allowing real-time interaction and monitoring from anywhere in the world. Compared to other interfacing tools, Blynk stands out due to its ease of use, flexibility, and extensive library support for various hardware. It simplifies the development of IoT projects, making it accessible for both beginners and experienced developers to prototype and deploy smart applications quickly.<br>
</FONT></p>
<!--Documentation End-->
<!-- Footer Start -->
<div>
<p><center><u><h3><FONT COLOR="2b2e4a">Sanjivani Fab Lab😁</FONT></h3></u></center></p><br><br>
</div>
<!-- Footer End -->
<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="fa fa-angle-double-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/tempusdominus/js/moment.min.js"></script>
<script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
<script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>