2. How we can use Python and download pyserial so we can communicate from any Python programs like Pycharm , with the tkinter library to make a User Interface UI, as well as, VPython library helps to create navigable 3D displays and animations easily.
3. How Firefly and this a addon for grasshopper in Rhino and we can use it in many different ways such as creating an interface with just the sound of the sea and much more.
3. The MIT app inventor is a visual programming environment that allows everyone to build fully functional apps for smartphones and tablets. It use blocks-based tool facilitates the creation of complex, high-impact apps in significantly less time than traditional programming environments. The MIT App Inventor project seeks to democratize software development by empowering all people, especially young people, to move from technology consumption to technology creation.
1- It has an easy interface, where you can add element by dragging them into the phone screen from the left side, first we see the designer UI, when we start the program.
2- There are many tools to add and customize, and we can use the electronics of the phone; like camera, microphone and Bluetooth, and utilize them to certain jobs.
3- When adding elements to the program, we have the option to change the properties like text, scale, font.
4- Also change the shapes and color of the added elements.
5- In the block UI, we can program the app just by adding blocks to each-other to preform an action.
Assignment: Write an application that interfaces a user with an input &/or output device that you made
In this assignment I want to make an interface which displays the level of magnet sensed by the hall effect sensor. As the hall effect sensor is used in different applications like:
. Position tracking,
. Speed tracking, ...
I think it could be better to track also the level of magnetic field sensed which can also help.I will be displaying the level of the magnetism on a web page.
Step1: Designing the PCB:
With Kicad, I started by designing the PCB I wanted to use in this assignment. My circuit was made of ESP8266 as the microcontroller of the system and a hall effect sensor which measures the level of magnetism.
From the circuit schematic I designed a PCB board.
Since I was using KiCAD in designing and it enables me to see a 3D render board which look nearly to the final board I will get.
After designing I export the board design as an image with an SVG format which is the one KiCAD provides, after that I had to convert to PNG which I can use with fabmodules to generate an RML file to use in Roland machine while milling.
I imported the SVG file in GIMP, increased its resolution.
This is how the trace SVG image looks after importing it in GIMP.
I filled the background of the image with a white color and saved it as a PNG.
I also imported the layout image and you can see it is only a single line which make the layout.
I filled the outer background of the image with a white color and the inner background with a black color and saved it as PNG.
I imported the images in fabmodules to convert them but first I had to invert the image so the milling will be done in the right place.
I did the same for the layout image which I imported and inverted the image color generated the RML file for.
I went on and milled the board with the Roland machine, and this is my board after milling it.
I soldered all component on the board.
Designing Interface
As discribed above I want to display the level of magnetism on the web page, I used ESP8266 to do that.
I have first tested the program of the web page I wanted to create in my computer. I wrote an html program and tested it.
I wrote this is the program using gedit text editor.
In this program I created two SVG squares the blue one obove the red one. The way I used to show the magnitude of the part I measuring, was to vary the size of the blue rectangle depending on the value read from the hall effect sensor.
Here is the result of the program above.
Programming the board
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char* ssid = "----------";
const char* password = "--------";
ESP8266WebServer server(80);
/********************
* Function to handle root/main page of the program
* which is [IP address]/
*********************/
void handleRoot(){
int magRead = analogRead(A0);
Serial.println(magRead);
String draw = ""; // This variable will hold the html code.
draw += "<DOCTYPE html><html><head><meta http-equiv='refresh' content='1'/>";
draw += "<title>Interface application and Programming</title></head>";
draw += "<body><h1>Magnet plotter</h1><div><svg width=\"100%\" heigth=\"100\">";
draw += "<rect x=\"100\" y=\"10\" width=\"1000\" height=\"70\" fill=\"red\"></rect>";
draw += "<rect x=\"100\" y=\"10\" width=\"" + String(magRead) + "\"";
draw += "height=\"70\" fill=\"blue\"></rect>";
draw += "</svg></div></body></html>";
server.send(200, "text/html", draw); // Send the html code when this statement is called
}
/***************************
* This function generate the 404 message
* when the user is looking for unknown page
***************************/
void handleNotFound(){
digitalWrite(led, 1);
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET)?"GET":"POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i=0; i<server.args(); i++){
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
digitalWrite(led, 0);
}
/**************************
* This function initialize some peripheral
* of the chip
**************************/
void setup(void){
pinMode(led, OUTPUT);
digitalWrite(led, 0);
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
if (MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}
server.on("/", handleRoot);
server.on("/inline", [](){
server.send(200, "text/plain", "this works as well");
});
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
/*************************
* This is the main function of the program
* it checks for the user/client request and
* generate the appropriate page deppending on the request made
*************************/
void loop(void){
server.handleClient();
}
