16. INTERFACE & APPLICATION PROGRAMMING

Index

  • Assignment
  • Introduction
  • Hall Sensor UI
    • Doing the code
    • Output
  • Text Sender UI
    • Doing the code
    • Output
  • Problems and Solutions
  • Summary

A. Assignment

  • Write an application that interfaces with an input and/or output device that you made, comparing as many tool options as possible.

B. Introduction

In this week i am planning to try out different UI option to control and read data from a MC board. The following are the list of things i plan to do.

  1. Ui for my hall sensor
  2. LED screen displaying text from the computer with processing and wxpython

C. Hall sensor UI

First my plan is to make a ui for the hall sensor board which i made in the input week. The details and design files of the board is given below.
traces image


cutout image
Schematic design file Board design file

I am reusing the board from the output week. The design files are as follows.


Trace file of the MC board

Cut file of the MC board
Schematic design file Board design file

Sensor board clipped to the microcontroller board

c1. Doing the code

As a starting point i am studying Neils magnetic sensor code. This code gave me a very good starting point into thinker python ui building. I larned how the code works and made my own version for the purpose. The way in which Neils board communicate with the ui and my does are different. I make my own logic to how data is recieved and represented. here is the full code.
Source code
In the avr code, the hall sensor data is read and converted by ADC, this data is being send to the serial. I use the Usart library i made in the networking week to accomplish this.
AVR Source code

pop-uptext
  1. from Tkinter import *
  2. import serial
  4. window_width = 600 # window width
  5. number_of_samples = 100.0 # number of samples taken
  7. port = "/dev/ttyUSB0"
  8. #
  9. # open serial port with supplied port and baud rate. My serial is running in 4800 baud
  10. #
  11. serial = serial.Serial(port, 4800)
  12. serial.setDTR()
  14. def idle(parent,canvas):
  16.    # crears all the serial data at once
  17.    serial.flush()
  18.    #create a variable to hold the data from the serial
  19.    text = ""
  20.    #keep looping over the serial data
  21.    while 1:
  22.       #read serial char
  23.       data =  serial.read()
  24.       # if you find an enter, break the loop
  25.       if (data == '\n'):
  26.          break
  27.           #otherwise keep contacting the string
  28.       text += data
  29.        # convert the string to an integer
  30.    value = int(text)
  31.    print value
  32.    x = int(.2 * window_width + (.9 - .2) * window_width * value / 1024.0)
  33.    canvas.itemconfigure("text",text="%.1f"%value)
  34.    # change the size of the rectangle according to the value
  35.    canvas.coords('rect1', .2 * window_width, .05 * window_width, x, .2 * window_width)
  36.    canvas.coords('rect2', x, .05 * window_width, .9 * window_width, .2 * window_width)
  37.    canvas.update()
  38.    parent.after_idle(idle,parent,canvas)
  40. # set up ui
  42. UI = Tk()
  43. UI.title('hall sensor ui')
  44. UI.bind('q', 'exit')
  45. canvas = Canvas(UI, width=window_width, height=.25 * window_width, background='white')
  46. canvas.create_text(.1 * window_width, .125 * window_width, text=".33", font=("Helvetica", 24), tags="text", fill="#0000b0")
  47. canvas.create_rectangle(.2 * window_width, .05 * window_width, .3 * window_width, .2 * window_width, tags='rect1', fill='#ffff00')
  48. canvas.create_rectangle(.3 * window_width, .05 * window_width, .9 * window_width, .2 * window_width, tags='rect2', fill='#0000ff')
  49. canvas.pack()
  51. # start loop
  53. UI.after(100, idle, UI, canvas)
  54. UI.mainloop()

c2. Output

Here is the output. I am bringing a magnet closer to the sensor and you can see the change in the value in the ui. The value changes drastically when the poles are changed.


Result

d. Text Sender UI

I made another program in processing which sends the text entered by the user. You see the ui below. In the text feild enter some text and click the button below. Once you click the button the LCD displays that text.
Processing user interface for sending text
Now when i click the button that text is shown on the LCD.
You can see the below ui code it basically initializes a serial communication in the specified port and listens to it. It then creates a thinker ui, which is basically a window with two rectangles. Now when the ui gets data from the serial the width of the rectangles are adjusted with respect to the value creating a visual feel of a bar graph

d1. Doing the code

The code is documented within in the file. The files are given below. Basically i have made the processing ui which has a text feild as well as the a button. Now when i type something in the field and press the send button, the text in the feild is taken and is added with a preceeding '#' and a ';' in the end and is send over serial to my board. The board recognizes the sequence and extracts the text between the # and ; and displays it on the LCD. I am reusing code and board from output week, where i did LCD programming and from newtowrk week where i make the USART library.
AVR C File Processing file

pop-uptext
  1. import processing.serial.*;
  2. import controlP5.*;
  3.  
  4. ControlP5 cp5;
  6. // The serial port initialization
  7. Serial myPort; 
  8. String val;
  10. Textfield myTextfield;
  11. Button send; //Button to send the text
  13. void settings(){
  14.   size (540, 160);
  15. }
  16.   
  18. void setup()
  19. {
  20.   
  21.   myPort = new Serial(this, "/dev/ttyUSB0", 4800);
  22.   
  23.   PFont font = createFont("arial",20);
  24.   
  25.   cp5 = new ControlP5(this);
  26.   
  27.   myTextfield = cp5.addTextfield("myTextfield")
  28.      .setPosition(20,20)
  29.      .setSize(500,40)
  30.      .setFont(font)
  31.      .setFocus(true)
  32.      .setColor(color(255,0,0))
  33.      ;     
  34.   
  35.   send = new Button("Send text", 20, 80, 100, 50, 255, 255, 255); //Button descriptions
  36. }
  39. void draw()
  41. {
  42.   fill(255);
  43.   background(255);
  44.   send.Draw();
  45. }
  47. void mousePressed()
  48. {
  49.   if (send.MouseIsOver()) //if on button pressed the data is sent over serial
  50.   {
  51.       val = myTextfield.getText();
  52.       println(val); //print it out in the console
  53.       myPort.write('#' +val+';');
  54.   } 
  56. }
  57. // the Button class definition
  58. class Button {
  59.   String label; // button label
  60.   float x;      // top left corner x position
  61.   float y;      // top left corner y position
  62.   float w;      // width of button
  63.   float h;      // height of button
  64.   int r;
  65.   int g;
  66.   int b;
  68.   // constructor
  69.   Button(String labelB, float xpos, float ypos, float widthB, float heightB,  int rVal, int gVal, int bVal) {
  70.     label = labelB;
  71.     x = xpos;
  72.     y = ypos;
  73.     w = widthB;
  74.     h = heightB;
  75.     r = rVal;
  76.     g = gVal;
  77.     b = bVal;
  78.   }
  80.   void Draw() {
  81.     fill(r,g,b);
  82.     stroke(141);
  83.     rect(x, y, w, h, 10);
  84.     textAlign(CENTER, CENTER);
  85.     fill(0);
  86.     text(label, x + (w / 2), y + (h / 2));
  87.   }
  89.   boolean MouseIsOver() {
  90.     if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
  91.       return true;
  92.     }
  93.     return false;
  94.   }
  95. }

d2. Results


Result

e. Problems and solutions

  1. Initially baud rate was a problem, on inspection i found that i was trying to connect with 9800 rate from the processing ui when micro controller was talking at 4800. I changed the value in processing code and it fixed the error.
  2. I have found a bug in my LCD library. When you call the PutStringAtLocation() function the second time with a smaller string than the initial one, the last charectors will remain. I dont want to edit the library right now so instead a created a work around , that i will put space after the string. ie if i send 'sree' the program will append 59-4 space to the back making a full 60 charector string.
  3. In the tutorials for processing i refered, the size() function was inside setup() function. but while i was building, it gave me an error saying that "size() can be at this location". This error was fixed by moving the size() function call inside settings() function. This was actually due to an update in the processing 3.

f. Summary

  • Experimented with processing and thinker and processing for making UI.
  • Make a ui for showing hall sensor output with processing.
  • Make a ui for sending text to the microcontroller, which in turn shows it on the LCD display.

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.