This week I finally had all the knowledge to piece all the parts together to get my 3 Axis accelerometer to work. With some nicely formatted data being sent to the serial port in my computer I was able to bridge the gap between that, a local web server and show it in a web page.
What I thought I knew before
Theory and use of things i learnt from this assignment:
Interpret and implement design and programming protocols to create a Graphic User Interface (GUI).
Apache server working!!
Compare as many tool options as possible.
What we did
As a group we were a little overwhelmed by the amount of languages and ‘tools’ there were that were capable of connecting with the serial port of the computer. Nadieh visualises her data professionally with D3. She offered to give a little impromptu presentation of this framework and how it connects to data sources and can be used as a application interface.
Using the metaphor of a sketch, p5.js has a full set of drawing functionality. Not limited to your drawing canvas (an area on your web page). The whole browser page is your sketch, including HTML5 objects for text, input, video, webcam, and sound.
So as part of a group task, Nadieh walked us through how to create our own web server on our computers that would mean we could run our own websites from our hard drives.
A web server is included in every Mac OS system. Its just a case of ‘waking it up’ to start using it. It can also need re-configuring after each major (or possible minor) OS upgrade which will follow the same basic procedure.
- Apache Server
MAc OS comes with the Apache HTTP Server. It provides a secure, efficient and extensible server that provides HTTP services in sync with the current HTTP standards. Launched in 1995 and it has been the most popular web server on the Internet since April 1996.
Not only does it contain a HTTP web server, it also includes a MySQL server (for databases) and PHP to talk between them.
In the Terminal type:
sudo apachectl start
Open a browser and type:
‘localhost’ or ‘127.0.0.1’ in the address bar.
If it works you should see a ‘It works’ message.
- Make ‘Sites’ folder
You need to create a ‘Sites’ folder under your [username/ login name] folder. This will be your document root for any web-related files.
If you need to check what your username is, type
whoami in the Terminal window.
Go to Mac HDD > Users > [your account folder]. Create a folder with the name ‘Sites’. When the folder is created, it will generate a folder with a ‘compass’ image in the centre.
- Modify configuration files
To be able to recognize the files put into the Sites folder several configuration files were created. To configure the server’s settings to do what you want it to do, you will need modify some of the code. This is nothing more difficult than commenting out sometimes lines of code and adding usernames where necessary.
You need to make a config file called ‘username.conf’ where you add your username if that doesn’t exist already. Going through the Terminal type:
Or in the Finder window menu [Go] > [Go to Folder], type in
Make a backup if there is already a file with your username. Otherwise make a new one and include the following:
<Directory "/Users/developer/Sites/"> AllowOverride All Options Indexes MultiViews FollowSymLinks Require all granted </Directory>
To configure the httpd.conf file you need to be in the ‘/etc/apache2’ folder to find the original. Modifying the file will include uncommenting and commenting out a number of modules.
Detailed instructions can be found here: Tech-cookbook.com.
To configure the httpd-userdir.conf file you need to be in the ‘/etc/apache2/extra’ folder to find the original. Modifying the file will include uncommenting a module.
Detailed instructions can be found here: Tech-cookbook.com.
- Restart and begin
In Terminal type:
sudo apachectl restart. (this step will restart the Apache server to take effect of the changes made in the config file).
Visiting the ‘localhost’ address in your browser should now show a list of the folders / web files in your ‘Sites’ folder if you have any there.
Write an application that interfaces a user with an input &/or output device that you made.
What I did
Choice of ‘Tool’
A long time ago, in a galaxy far away… well last century at least, i use MAX in my first undergraduate degree (Sonic Art). I remember enjoying this using this visual programming language to create interactive sound and multimedia applications. I remember that MIDI used to control virtual instruments and music run on values from 0 to 255, numbers i’m very familiar with now with embedded programming. One student I remember, triggered music samples when a dancer moved over different pressure pads. So it will be interesting to see how this programming language has developed with technology in the last 20+ years…. (it hurts to say that).
How best to integrate this into my final project? Well, at it’s simplest version (the proof of concept i’m trying to make) there doesn’t need an application or user interface. In future spiral developments, an interface for a platform would be needed to collect and manipulate data collected from the sensors.
However, taking that old example above and one of the example user case studies for my final project (the dancer), I could leverage the 3 axis accelerometer to control sound synthesis or something for this week.
Another option would be to use another of the user cases, as a therapeutic exercise would be to be able to control and see feedback from movements from the sensor. This could be used in rehabilitation situations.
(Unfortunately, with the extra problems i came across this week (see below) there wasn’t anytime to look in to MAX.)
But this all relies on me finally getting a 3 axis accelerometer working connected to a board and talking in I2C. See Week 10 to see the working sensor.
The sensor now sends some serial data to the computer. The next step it to make a link to another coding language environment where I can visualise this data e.g. a web browser.
To try an get Neil’s python example to work I needed to make sure I had it installed in some version.
This module encapsulates the access for the serial port. It provides backends for Python running on Windows, OSX, Linux, BSD (possibly any POSIX compliant system) and IronPython. The module named “serial” automatically selects the appropriate backend.
This application incorporates p5.serialserver in a GUI application for MacOS and Windows.
To install Node.js i needed to first install Node Version Manager - a POSIX-compliant bash script to manage multiple active node.js versions.
- install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
- install latest version of Node.js
nvm install node
Check that they’re installed:
# check for node node -v # check for nvm nvm -v # check for npm npm -v
npm is the Node package manager, which is installed automatically with Node.js.
Connecting serial to web browser
- Using p5
The most important functions being:
serial = new p5.SerialPort();
Creating a new instance of the p5.SerialPort object - creating the possibility of communication with the serial port.
Opening that connection with your serial port;
What to do when you receive data.
- Write a html file
Or direct from the web:
To keep it as simple as possible, and use the 3 points of data that the sensor send out, I decided to map the output to an RGB value of the background of a webpage. As the user would interact with the sensor it would change the colour of the page background.
- Mapping values
The sensor has a particular range of values it can send based on the resolution of forces that you want to measure, from +/- 2G to +/- 16G (you’d be dead accelerating at those forces, but its nice to measure anyhow!). Checking the values that came out of the sensor when i tested it, I worked out what were the likely minimum and maximum values i would be expecting and then mapping those to 8 bit (0-255).
- Reversing negative values
One problem with the values were that some were in the negative (e.g. -30). This wouldn’t work very well with the mapping and the range of colours i would get in the end. So any negative values that come out of the sensor I multiplied by -1 to make the values positive.
- Split serial output
String.split() function, adding the ‘,’ comma as the delimiting sign between data values. This function would split the string into pieces and add them to an array and turn them into integers. Very useful!!
- Use the separate data values
Then it was just a simple task of filling in RGB function with the contents of the array.
background(myDataArray, myDataArray, myDataArray);
Et Voila! a changing background on my web page.
What I should’ve done
I don’t think i could’ve done anything different to make it easier to get serial output from the port into a web page. It could’ve been more of a struggle I’m sure!
Mistakes & Issues
Python: import Serial error
When trying to run Neil’s python script for the accelerometer, i kept getting a “line 17, import Serial" error. After checking that i had the right version of Python (3) (pre-installed on Mac OSX) and Pyserial installed, it still wouldn’t work. Re-installing and updating these didn’t help. No results of significance showed relating to this when I searched the internet. ONly problems related to the ESP chip. Which I don’t think I could take any helpful information from.
I was thinking that maybe this is another “your computer processor and OSX is too new” problem again. So I tried on my older computer instead.
Following the instructions to download and install p5, Chrome thought the files were ‘dangerous’ and wouldn’t complete the download. A look at the ‘download’ section of Chrome gave to option to finish the download and disregard the warning.
Serial from the sensor stops working, then UPDI and FTDI problems, and then everything!!!
I was at the point of getting some serial response from the board and sensor, which i was trying to refine. Then suddenly, after updating the board with Arduino over the UPDI, i failed to get any serial response when i changed to the FTDI. :(. The only physical thing I had done was change the connection. The adjustment to the embedded programming consisted of commenting out extra ‘serial.print’ statements.
So began a few hours of trying to find the source of the error. Because, when i tried to upload any sketches i got a ‘failed to initialise UPDI’ error. So what was wrong? the UPDI, the FTDI, the cables, the programming…
I had just made a new UPDI a couple of days ago so i doubted it was that (i didn’t have a spare), and the FTDI had never gone wrong in the past (but i did have a spare). I swapped everything i could, cables, other boards, tried to upload the program to boards with the same chip…..
After many hours of testing and racking my brain, i localised the problem to the sensor board. Every time it was attached to the main board it wouldn’t allow uploading via a UPDI, or it would stop any serial output from an FTDI. A continuity test of the cables between the boards were good. So I tested the few tracks and components of the sensor board. All was fine apart from there was a beep when I placed the probes either side of the capacitor (which doesn’t usually happen I think?). Capacitors on other boards made no sound in tests, but this maybe due to it being such a small value capacitor this time?
I swapped capacitors on the board, and still the problem persisted. I removed it completely and there was still a connection between VCC and GND. There wasn’t many tracks to test, but a continuity test showed that the only possible problem component was the sensor itself. How this can spontaneously stop working I don’t know? But reflowing the soldered underneath it fix the problem!
It was pushing out expected serial values from which i could work with :).
Making an interface / application depends on firstly getting a some useful data from your circuit board into your computer. A bridge between that and something humans can interact is needed, with it depending on which particular ‘tool’ or language you intend to visualise it. For which there are 600+.
|Arduino sketch||The Arduino sketch.|