week16 added

parent e793257e
Pipeline #99374 passed with stage
in 41 seconds
......@@ -358,7 +358,7 @@
<a href="#two" class="more">Learn More</a>
<!-- Sixteen -->
<section id="one" class="wrapper post bg-img" data-bg="banner2.jpg">
<section id="one" class="wrapper post bg-img" data-bg="week16/cover.jpg">
<div class="inner">
<article class="box">
......@@ -366,7 +366,10 @@
<p>week 16</p>
<div class="content">
<p>Scelerisque enim mi curae erat ultricies lobortis donec velit in per cum consectetur purus a enim platea vestibulum lacinia et elit ante scelerisque vestibulum. At urna condimentum sed vulputate a duis in senectus ullamcorper lacus cubilia consectetur odio proin sociosqu a parturient nam ac blandit praesent aptent. Eros dignissim mus mauris a natoque ad suspendisse nulla a urna in tincidunt tristique enim arcu litora scelerisque eros suspendisse.</p>
write an application that interfaces a user with an
input &/or output device that you made,
compare as many tool options as possible</p>
<a href="week16.html" class="button alt">Learn More</a>
......@@ -56,14 +56,101 @@
<div id="main" class="container">
<!-- Content -->
<h2>Week 15.Machine design</h2>
<h2>Week 16.Interface and Application Programming</h2>
<div class="major">
<p>Individual assignment:<br>
write an application that interfaces a user with an
input &/or output device that you made<br>
Group assignment:<br>
compare as many tool options as possible</p>
<div class="6u 12u$(small)">
<h3>Group work:</h3>
<p>For this week, we all started with the group task together. Some of us used <a href="https://processing.org/">Processing</a>, <a href="https://blynk.io/">Blynk</a>, <a href="https://pypi.org/project/PyQt5/">PyQt5</a> and others used the <a href="https://www.python.org/">Python</a> or <a href="https://www.mathworks.com/products/matlab.html">Matlab</a></p>
<div class="6u 12u$(small)">
<p>Blynk was designed for the Internet of Things. It can control hardware remotely, it can display sensor data, it can store data, vizualize it and do many other cool things. Blynk supports hardware platforms such as Arduino, Raspberry Pi, and similar microcontroller boards to build hardware for your projects. Blink can support the following <u>Ethernet</u>, <u>Wi-Fi</u>, <u>Bluetooth</u>, <u>Cellular</u> and <u>Serial</u> connection types:</p>
<img src="images/week16/pic1.jpg" style="width:60%" />
<center><figcaption>Blynk App Workflow</figcaption></center>
<p><ul>There are three major components in the platform:</u>
<li><b>Blynk App:</b> allows to you create amazing interfaces for your projects using various widgets we provide..</li>
<li><b>Blynk Server:</b> responsible for all the communications between the smartphone and hardware. You can use the Blynk Cloud or run your private Blynk server locally. It’s open-source, could easily handle thousands of devices and can even be launched on a Raspberry Pi.</li>
<li><b>Blynk Libraries:</b> for all the popular hardware platforms - enable communication with the server and process all the incoming and outcoming commands</li>
<br/><ul>Hello world with Blynk from the microcontroller to Phones Blynk app monitor looks like this:</ul>
<code>BLYNK_LOG1("Hello World"); // Print a string</code></p>
<div class="6u 12u$(small)">
<p>PyQt is a GUI widgets toolkit. It is a Python interface for Qt, one of the most powerful, and popular cross-platform GUI library. PyQt is a blend of Python programming language and the Qt library.Qt is set of cross-platform C++ libraries that implement high-level APIs for accessing many aspects of modern desktop and mobile systems. These include location and positioning services, multimedia, NFC and Bluetooth connectivity, a Chromium based web browser, as well as traditional UI development.</p>
<p>PyQt is used for developing desktop application using python. Latest version is PyQt5 in which we can design window, text box, label, etc using designer application. By default, if we click on the x button on the titlebar, the QWidget is closed. Sometimes we want to modify this default behaviour. For example, if we have a file opened in an editor to which we did some changes. We show a message box to confirm the action. We show a message box with two buttons: Yes and No. The first string appears on the titlebar. The second string is the message text displayed by the dialog. The third argument specifies the combination of buttons appearing in the dialog. The last parameter is the default button. It is the button, which has initially the keyboard focus. The return value is stored in the reply variable.</p>
<p>Below is the message code after running the python code.</p>
<img src="images/week16/pic3.jpg" style="width:20%" />
<center><figcaption>Message window after running the python code</figcaption></center>
<div class="6u 12u$(small)">
<p>Python is an object-oriented, high-level programming language with integrated dynamic semantics primarily for web and app development. It is extremely attractive in the field of Rapid Application Development because it offers dynamic typing and dynamic binding options. Python is also used for developing complex scientific and numeric applications and its design philosophy emphasises code readability with its notable use of significant whitespace</p>
<p>A simple program for addition and calculating savings in Python is presented below :</p>
<pre><code># Create a variable savings
savings = 100
# Create a variable factor
factor = 1.10
# Calculate result after 7 years
result = savings * (factor ** 7)
# Print out result
print (result)
<p>The Hello world printed by simply using this:</p>
<code>print(“Hello, World!”)</code> <br><br>
<p>We followed a <a href="http://archive.fabacademy.org/2018/labs/fablabirbid/students/shefa-jaber/Interface.HTML">this tutorial</a> to control the RGB LED with Python and Arduino.</p>
<img src="images/week16/pic4.jpg" style="width:50%" />
<center><figcaption>Python.py code and arduino</figcaption></center>
<center><video width="400" controls>
<source src="images/week16/pic5.mp4" type="video/mp4"> </video></center>
<div class="6u 12u$(small)">
<h3>Individual work:</h3>
<div class="6u 12u$(small)">
<p>Processing is a programming language designed for the visual arts community. It is open source and uses basic syntax for creating drawings, animations, and interactive programs. It also includes a basic IDE, which serves as the programming interface.Each program created in Processing is called a "sketch" and can be saved in a sketchbook. I decided to use processing for my Individual Task.</p>
<p>For this week assignment, I decided to read and plot the serial data from my light sensor board. When I check the previous year documentation I found out that <a href="http://archive.fabacademy.org/fabacademy2017/fablaboulu/students/77/index.html">Ivan</a> has used a similar application for getting serial data from the ultrasonic sensor. Therefore, I decided to use his code and edit it to get my results.</p>
<p>I first downloaded processing from the Processing <a href="https://processing.org/download/ ">download page</a>. According to their page, 'Processing' is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. I followed some <a href="https://processing.org/tutorials/ ">tutorials </a>to get to know about the Processing. </p>
<p>Then I got Ivan's code and tried to understand it specifically.
The Serial port had to be changed in the code initially. Then I tried to change the colors of the window and the texts according to my needs.</p>
<img src="images/week16/1.jpg" style="width:100%" />
<center><figcaption>Editing the code in Processing</figcaption></center>
<p>Then I changed to scaling factor to get clearly visible values in the graph. After running the code I was able to plot and display the serial data coming from my light sensor.</p>
<center><video width="400" controls>
<source src="images/week16/1.mp4" type="video/mp4"></video></center>
<center><figcaption>Realtime working of the program</figcaption></center>
<div class="6u 12u$(small)">
<h3>Models files</h3>
<a href="images/week16/graph/graph.pde" download>Processing file for the application </a> <br>
<a href="images/week16/graph - Copy.zip" download>data folder for the application </a> <br>
<!-- Footer -->
......@@ -79,7 +79,7 @@
<img src="images/week17/1.jpg" style="width:100%" />
<center><figcaption>Coordinates to move</figcaption></center>
<p>I defined three axes as x,y, and z. Then I created the coordinates which the axes should travel.</p>
<p>I defined three axes as x,y, and z. Then I created the coordinates which the axes should travel. Here x and y axis have the same coordinates as they should travel together. There are different coordiates for different shapes shown above.</p>
<img src="images/week17/2.jpg" style="width:100%" />
<center><figcaption>direction of the movement</figcaption></center>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment