The aim of this project it to create a simple GUI (GraphicalUser Interface) for Amazon’s voice assistant Alexa .
Why Alexa GUI? In my opinion, GUI remains an essential part of any interaction between humans and machines, especially for systems with voice input, and this can be observed for example when people look at Echo device while talking to Alexa. So headless voice assistants are just like talking in the dark, uncomfortable without feedback of what the system is doing.
I did two choices:To do it in python: Since I’m usingthe python client AlexaPi done for Raspberry Pi. To do it withexternal LCD display, instead of internal python libraries (e.g. PyQt, …)
BOM:Raspberry Pi 3 128×64 OLED LCD LED SSD1306 Breadboard + wires (male/female) Step 1 : Set up Raspberry Pi &Display
Hardware part: It uses I2C bus of Raspberry Pi, meaning two wires (SDA, SCL)+power supply:VCC (3V3) -> GPIO 1 GND (0V) -> GPIO 6 SDA -> GPIO 3 SCL -> GPIO 5
Software part: I’m using Adafruit library , it works like a charm.
I’m also following their instructions here : SSD1306 OLED Displays with Raspberry Pi .
Install needed tools and libraries:
sudo apt-get update sudo apt-get install build-essential python-dev python-pip sudo apt-get install python-imaging python-smbus sudo apt-get install i2c-tools sudo pip install Adafruit_BBIO
Install SSD1306 library:
git clone https://github.com/adafruit/Adafruit_Python_SSD1306.git cd Adafruit_Python_SSD1306 sudo python setup.py install
Check if I2C is enabled:sudo i2cdetect -y 1
If not, enable it in Raspi-config.
Also turn on I2C in boot configuration:sudo nano /boot/config.txt
And add (or uncomment):
Run image example:python image.py
You should see image on the OLED display.Step 2: Define Alexa states + images
I define the main states of Alexa as follow:Alexa Not Started (Raspberry Pi logo) Alexa Started (Alexa logo) Alexa Listening (Microphone) Alexa Talking (Speaker) Alexa Busy (Sand watch) Alexa Not Connected (Cloud NOK)
For each state, I create a 128×64 black and white .png image.
I make in white (or grey) the parts that I want to be in blue (Good coincidence since it is Alexa color)
Here is an example of the displayed state.
Step 3: Include display states in original AlexaPi code
Duplicate original main.pycp main.py gui.py
Make it executable:chmod +x gui.py
After import part, we add AlexaGUI setup:sudo nano gui.py
I add these lines:
from PIL import Image
RST = 24
disp = Adafruit_SSD1306.SSD1306_128_64(rst=RST)
At the end (before the main), I define new function:
def AlexaGUI (img):
image = Image.open(img).convert( ‘1’ )
So, anytime I want to show something, I add just the line:
AlexaGUI( image.png )
image.png to be changed with the real names.
In the setup() , I initiate the display:
And just after I display Alexa logo:
You can download the gui.py file here:gui.txt
Here is a demo of the codeshowing 3 states of Alexa (Listening, processing and answering)Step 4: Try to replace static images by dynamicanimations
This is a difficult part for me, since I’m not a designer, and I’m using only MS Paint to edit the pictures.
So I do the animation ofthe speaker, by justplaying withthe bar levels and making 4 different .png that I show successively with a small delay (10ms):
Here is the demo:
Compared to the first demo, the improvement is noticeable, but still mechanical.
The best to do for the speaker is to mimic Alexa voice (like Hi-Fi displays), but it is an advanced feature…
For the moment I’m not doing the animation for all states. I want now to customize Alexa depending on the intent, for example when she’s saying a joke.
To be continued.Misc
The prompt hello.mp3 contains a silence part at the end, I cut it to make speaker animation correct.
Download it here: http://youness.net/wp-content/uploads/2016/10/hello.mp3
本文系统（linux）相关术语:linux系统 鸟哥的linux私房菜 linux命令大全 linux操作系统