Open Arduino

Enter Your Project for a chance to win a grand prize for the most innovative use of Arduino or a $200 shopping cart! The Birthday Special: Arduino Projects for Arduino Day!

Back to The Project14 homepage

Project14 Home
Monthly Themes
Monthly Theme Poll

 

Star Wars MSE-6 (Mouse Droid) INDEX:

 

Arduino Powered MSE-6 (Mouse Droid)

Arduino Powered MSE-6 (Mouse Droid) - Arduino Yun UI

Arduino Powered MSE-6 (Mouse Droid) - Arduino Uno and FreeRTOS

Arduino Powered MSE-6 (Mouse Droid) - Droid in Action

Arduino Powered MSE-6 (Mouse Droid) – Arduino Code

 

Hardware:

 

Software:

 

Reference:

Arduino Yun TFT Touch Shield example:

https://makezine.com/projects/s-m-a-r-t-alarm-clock/

Arduino Yun Seeed TFT Shield library:

https://github.com/tdicola/TFT_Touch_Shield_V1/releases/download/1.1/TFT_Touch_Shield_V1.zip.

 

Seeed TFT Touch Shield library

https://github.com/tdicola/TFT_Touch_Shield_V1/releases/download/1.1/Touch_Screen_Library.zip.

 

Hardware examples:

Arduino Yun

 

 

Seeed TFT Touch Screen v1.0

 

Plugable USB Audio adapter

 

 

Previous MSE-6 posts:

 

Arduino Powered MSE-6 (Mouse Droid)

Arduino Powered MSE-6 (Mouse Droid) - Arduino Uno and FreeRTOS

 

Arduino Yun Flask config:

 

For the MSE-6 Mouse Droid project I'm working I decided to use an Arduino Yun to act as a web-server to host the user interface. My initial idea was to use Node.js or Johnny-Five, however the TFT screen I am using uses pretty much all of the Digital I/O ports on the Yun as well as the Bridge UART Serial1 (Pins 0 and 1 on the Arduino Headers) communication thus I had to seek out another solution. I've used Flask in other projects using a Raspberry Pi so I was concerned that it would not work on the Yun with OpenWRT. But, after getting all of the appropriate libraries in place and tools installed, it works rather nicely. The Yun has been around for something now, thus I will not go in depth as far as the details of the Yun.

 

The following is a good place to get started with the Yun:

https://www.arduino.cc/en/Guide/ArduinoYun

 

To get started with Flask, the following has good info regarding Flask .

Quickstart — Flask 0.12.4 documentation

 

For a good overview of OpenWRT

OpenWRT https://www.arduino.cc/en/Main/ArduinoBoardYun?from=Main.ArduinoYUN

 

 

The one thing that I did do was to expand the Yun filesystem to a 32Gb Micro-SD card since the default is only about 16Mb of which 9MB is taken for the filesystem.

A good source for this is located at the following.

 

https://www.arduino.cc/en/Tutorial/ExpandingYunDiskSpace

 

From the link, download the zipped filesystem expanding Sketch, YunDiskSpaceExpander.zip, and load it on the Yun. From Arduino ID Serial terminal, there will be a series of steps to follow that will result in the root filesystem being expanded to /mnt/sda1. This will take a very long time to complete.

 

NOTE: Loading the YunSerialTerminal from the Arduino IDE to the Yun after the filesystem expansion will allow access to the board to view the boot messages as well as to interact with the OS from command line without using a network connection. This can be found in the Arduino IDE under File->Examples->Bridge->YunSerialTerminal. Ensure the Yun is selected as the Board Type.

 

Another item that is good to perform is to add a swapfile to the OpenWRT configuration. If this is not performed, loading packages on the OS could take a very long time or just fail. The following are good resources for adding a swapfile on the system.

https://www.cyberciti.biz/faq/linux-add-a-swap-file-howto/

http://mohanp.com/arduino-yun-extending-the-ram-with-swap-file/

 

I tried to add the swapfile info into the /etc/fstab, however this gets wiped out at each reboot, so I ended up placing an entry into the /etc/rc.local file.

# cat /etc/rc.local
# Put your custom commands here that should be executed once
# the system init finished. By default this file does nothing.


wifi-live-or-reset
boot-complete-notify
swapon /mnt/sda1/swap/swapfile1

 

 

For basic Flask install with the yun, the following link is a good place to start

https://learn.adafruit.com/smart-measuring-cup/arduino-yun-setup

 

In my config, I have the following folder structure.

 

Flask folder structure.

MouseDroid2018/:
 app/
 config.py
 hello.py
 run.py
 set_flask.sh
 views_raspi.py
 yun_bridge.py


MouseDroid2018/app:
 __init__.py
 __init__.pyc
 application.py
 mse6_playsound.py
 static/
 templates/
 views.py
 yun_bridge.py




MouseDroid2018/app/static:
 empire_folder/
 mse-mix.mp3
 styles


MouseDroid2018/app/static/empire_folder:
 EmpireBack.jpg
 EmpireBack2.jpg
 EmpireLogo2.jpg
 EmpireLogo3.jpg


MouseDroid2018/app/static/styles:
 mse6Style.css


MouseDroid2018/app/templates:
 index.html

 

 

I use a script to set-up the Flask environment:

# cat set_flask.sh

#!/bin/ash


echo "Set Exports!"


export APP_CONFIG="config.py"
export FLASK_APP="run.py"
export FLASK_DEBUG=1

 

 

The 'config.py' script is used to set-up the Development and Production options as well as set the HOST and PORT values.

# config.py


class Config(object):
 """
 Common configurations
 """


 # Put any configurations here that are common across all environments


class DevelopmentConfig(Config):
 """
 Development configurations
 """


 DEBUG = True
 HOST = '0.0.0.0'
 PORT=5000

class ProductionConfig(Config):
 """
 Production configurations
 """


 DEBUG = False
 HOST = '0.0.0.0'
 PORT=5000


app_config = {
 'development' : DevelopmentConfig,
 'production' : ProductionConfig
 }

 

A 'run.py' script is used to run the flask instance for the MSE-6 UI

 

#!/bin/ash


echo "Set Exports!"


export APP_CONFIG="config.py"
export FLASK_APP="run.py"
export FLASK_DEBUG=1
root@jomoyun:/mnt/sda1/MouseDroid2018# cat run.py
#!/usr/bin/env python


import sys
import os
from app import app


if __name__ == '__main__':
 try:
 app.run(host='0.0.0.0', port=5000, debug = True)
 except KeyboardInterrupt:
 print 'Interrupted'
 try:
 sys.exit(0)
 except SytemExit:
 os.exit(0)

 

 

A 'views.py' script is used to GET and POST messages from the MSE-6 webpage and process them via the python bridge and Yun BridgeClient interfaces.

 

import os
import sys
# Import system libraries.
import datetime
import time
from app import app
import yun_bridge

sys.path.append('/mnt/sda1/python-packages')

from flask import Flask, render_template, redirect, request, url_for

#Port the YunServer instance is listening on for connections.
YUN_SERVER_PORT = 5678


EMPIRE_FOLDER = os.path.join('static', 'empire_folder')
APP_FOLDER='/mnt/sda1/MouseDroid2018/app/'

 # Create flask application.

app.config['UPLOAD_FOLDER'] = EMPIRE_FOLDER

@app.route('/')
def index():
 now = datetime.datetime.now()
 timeString = now.strftime("%Y-%m-%d %H:%M")
 print timeString
 full_filename = os.path.join(app.config['UPLOAD_FOLDER'], 'EmpireLogo3.jpg')
 empireBackGrnd = os.path.join(app.config['UPLOAD_FOLDER'], 'EmpireBack2.jpg'
 templateData = {
 'title' : 'Mouse Droid',
 'time' : timeString,
 'empire_image' : full_filename,
 'empire_back' :empireBackGrnd
 }
 return render_template("index.html", **templateData)
@app.route('/show_index')
def show_index():
 full_filename = os.path.join(app.config['UPLOAD_FOLDER'], 'EmpireLogo2.jpg')
 print(full_filename)
 return redirect('/')

@app.route('/mse6Msg', methods = ['POST'])
def show_mes6msg():
 newMSE6Msg = request.form['newMsg']
 print("Message received '" + newMSE6Msg + "'")
 yun_bridge.main(newMSE6Msg);
 return ('', 204)

@app.route('/mse6Sound', methods = ['POST'])
def play_mes6Sound():
 newMSE6Sound = request.form['mse6Snd']
 print("Message received '" + newMSE6Sound + "'")
 print("Button Pressed")
 return ('', 204)

@app.route('/mse6Btn', methods = ['POST'])
def get_mes6Btn():
 newMSE6Sound = request.form['mse6Play']
 if newMSE6Sound == 'Play':
 print ("Message Play")
 soundState = "Stop"
 elif newMSE6Sound == 'Stop':
 print ("Message Stop")
 soundState = "Play"
 SOUNDCMD = APP_FOLDER+ """mse6_playsound.py """ + soundState
 os.system(SOUNDCMD)
 print("Button Pressed")
 return ('', 204)

if __name__=='__main__':
 app.run(host='0.0.0.0', port=80, debug=True)

 

To handle the passingof the message from the MSE-6 webpage to TFT Screeen on the Yun, the 'BridgeClient' 'mailbox' was implemented.

# yun_bridge.py

#!/usr/bin/python

import sys
from time import sleep
sys.path.insert(0, '/usr/lib/python2.7/bridge')
from bridgeclient import BridgeClient as bridgeclient

value = bridgeclient()

def main(arg1):

 try:
 value.mailbox(arg1);
 sleep(2)

 except:
 print "Process failed to open!"
 else:
 print("Message sent %s\n" % arg1)

if __name__=='__main__':
 if len(sys.argv) < 2:
 print("ERROR: Enter a LED command!")
 sys.exit(1)
 main(sys.argv[1])

 

 

 

To play the MSE-6 sound file, the 'madplay' audio tool was used.

For more information on installing madplay, see the following Adafruit example.

https://learn.adafruit.com/wifi-yun-soundboard/installation

 

To play the sound file, the command string is passed to the OS via Python 'os.system'

Ex:

madplay -Qr --attenuate=-12 /mnt/sda1/MouseDroid2018/app/static/mse-mix.mp3 &

 

 

To end the audio, 'pidof' was used to kill off the process. On OpenWRT, 'pkill' was not available so I had to find another option to kill off a running process by name.

pidof madplay | xargs kill -9

 

 

The script looks like this.

import sys
import os
sys.path.insert(0, '/usr/lib/python2.7/bridge')
from bridgeclient import BridgeClient as bridgeclient

COMMAND = """madplay -Qr --attenuate=-12 /mnt/sda1/MouseDroid2018/app/static/mse-mix.mp3 &"""
KILLCMD = """pidof madplay | xargs kill -9"""

class PlaySound(object):
 def __init__(self):
 print "Play sounds"

 def playMSE6Sound(self):
 print "Play a sound"
 os.system(COMMAND)

 def stopMSE6Sound(self):
 print "Stop MSE6 Sound"
 os.system(KILLCMD)

def main(arg1):
 mse6Sound = PlaySound()
 soundState = arg1.upper()
 print ("Sound STATE %s" % soundState)

 if soundState == 'PLAY':
 mse6Sound.playMSE6Sound()
 elif soundState == 'STOP':
 mse6Sound.stopMSE6Sound()
 else:
 print "Option not recognized"


if __name__ == '__main__':
 if len(sys.argv) < 2:
 print("ERROR: Enter a Play command!")
 sys.exit(1)
 main(sys.argv[1])

 

 

To format the webpage a, CSS stylesheet was used. The format options were placed in a separate folder under 'app/static/styles' and referenced in the HTML file.

.on { background:lightsteelblue ; }
.off { background:red; }


header {
 ;
 text-align: center;
 z-index: 2001;
 left: 50%;
 transform: translateX(-50%);
}


body {
 background-color: black;
}


div {
 padding-bottom: 30px;
}


.h2Date {
 ;
 font-family: 'Open Sans', monospace;
 font-size: 12px;
 color: lightsteelblue;
 letter-spacing: .4rem ;
 text-align: center;
 opacity: .68 ;
 z-index: 2002;
 left: 50%;
 transform: translateX(-50%);
}


.footer {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 color: lightsteelblue;
 text-align: center;
}





mse6Play {

 font-size: 120%
 border: 0px solid;
 width: 80px;
 height: 30px;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

#mse6Sound {
 color: lightsteelblue;
 text-align: center;
 left: 50%;
 transform: translateX(-50%);
}

#mse6DS {
 display: block;
 color: lightsteelblue;
 font-size: 30px;
 padding-top: 30px;
 padding-bottom: 30px;
 text-align: center;
}

#mse6PlLbl {
 color: lightsteelblue;
 padding-bottom: 20px
}

#empireImg {
 width: 150px;
 height: 150px;
 display: block;
 opacity: .30 ;
 z-index: 2003;
 margin-left: auto;
 margin-right: auto;
}

.empireLbl {
 display: block;
 color: lightsteelblue;
 text-align: center;
}
#msgLbl {
 color: lightsteelblue;
 text-align: center;
}

 

 

The 'index.html' file for processing the MSE-6 page includes a bit of JavaScript to handle changing the Play button's color as well as set the value button element when the button is pressed. This is then passed back to the Python script for processing.

 










 // <br
 function toggleState(item) {
 if(item.className == "on") {
 item.className="off";
 item.value="Stop";
 } else {
 item.className="on";
 item.value="Play";
 }
 }

// ]]>











MSE-6 Messaging


(Mouse Droid)







Empire Image

















 









 





 






 


 





class="on" onclick="toggleState(this)" />


 


 


 




iv>

 

 

 

 

The end result is the MSE-6 UI page the looks like the following.

 

The following video shows the webpage and Yun TFT Screen interaction.

 

 

 

ToDo: I plan to add button controls on the MSE-6 webpage to control the MSE-6 remotely.