Interface and Application Programming


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

What should be done

  • Described your process using words/images/screenshots
  • Explained the the GUI that you made and how you did it
  • Outlined problems and how you fixed them
  • Included original code

In Output devices week , I started working on a focus mechanism for the final project. The purpose was to actuate a unipolar stepper motor to lift the objective lens near and far from the eye-piece.

I made the board and programmed it to accept a signed integer serially which makes the motor rotates according to the value and the sign.

The MCU receives an ASCII character which is converted fro a signed integer number where the sign represents the direction of movement and integer number is the stepping value. After receiving the command, the MCU returns "1" as the stepper starts moving and "0" as it stops.

In this week, I'm exploring various methods of creating an interface for it.

Sketching the interface

I started by sketching an interface, This interface should be accessible from PC or mobile over Internet for local and remote control.

The steps should be calculated from the slider and the direction from which button is pressd (Up or Down) and then a signed integer will be sent to the board.

Prototyping using mods

I started experimenting the functionality of the interface with mods.

Base HTML file

using the code from the mods, I was able to create the interface and logic of a base version of a HTML file that I can use.

At a closer look I noticed that the negative value sent on clicking "down" wasn't accurate So I figured that there is a problem in converting the decimal value to ASCII characters.

After some digging I found that the JavaScript code isn't converting the integer value of the slider to ASCII characters correctly.

	var steps = -1 * document.getElementById("steps").value;

But after some serious digging, I found out that it's wrong to convert the signed integer value to string as the decimal equivelant to the ASCII characters are always unsigned.

So I changed the code for the "Up" button to:

	var steps = parseInt(document.getElementById("steps").value);

And for the "Down" button

	var steps = -1 * document.getElementById("steps").value;

Then created a new function to send int messages to the websocket server:

function serial_send_int(int) {
   if (socket == null) {
      socketStatusEl.innerHTML = "socket not open"
   else {
      var msg = {}
      msg.type = 'int' = int
      socketStatusEl.innerHTML = 'transmit'

Then in "serialserver.js" I added the following conditional at the block handling the message type

// send int
else if (msg.type == 'int') {
       if (err)

This code is from this Stack Overflow thread.