Intro
Let’s be honest… It’s been a weird workshop. We took two weeks to get through the first project that was supposed to take a week. I had to cancel the third week because I was sick. And now we’re trying to get you through the workshop with something useful.
So we’re going to do three things:
- Fix our sound app so it works on multiple platforms.
- Give it a custom icon.
- Do a basic hook-up of the accelerometer.
A convention you need to know
In week 2 we had a lot of people get into trouble by cutting and pasting demo code with brackets in it. If your name is Farnalab, you should not enter: my name is [Your Name] on the command line. You should enter my name is Farnalab.
Setting Up Our App: With Cordova Plugins
First thing we’re going to do is throw Ionic out the window. It had some neat bells and whistles, but in the end it complicated figuring out some of the other things we needed to do. So we’re doing straight, old-school Cordova.
Our sound app didn’t work on Android Kit-Kat machines because Cordova had an issue with the HTML5 audio element we were using, so we’ll need to use Cordova’s Media plugin. To get access to the accelerometer, we’ll need the device motion plugin.
Set up Our Workspace
One thing we’ll do the exact same way is start the project by setting up our workspace. Follow the steps from Lesson 1 to start the Cloud 9 workspace and get into the editor, AND THEN STOP. We’ll start diverging this early by just installing Cordova (no ionic).
npm install -g cordova
Then we’ll have Cordova scaffold our project for us.
cordova create dsound com.example.dsound "Sound n' More"
You could literally compile what you’ve got into an app at this point. But it wold be very boring.
Adding Android Support & Plugins
We’re going to navigate into our project directory (dsound), add Android Platform support, and add the media and device motion plugins:
cd dsound
cordova platform add android
cordova plugin add org.apache.cordova.media
cordova plugin add org.apache.cordova.device-motion
To enable the plugins, you’ll need to go down to your config.xml file down near the bottom of the screen.
You’ll see a line near the top that looks like this…
<widget id="com.example.dsound" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
You want it to look like this…
<widget id="com.example.dsound" version="0.0.8"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
xmlns:gap = "http://phonegap.com/ns/1.0"
>
You’re essentially adding xmlns:gap = "http://phonegap.com/ns/1.0" to set up the “gap” namespace in the Widget element so it knows how to handle the next two lines you’ll be adding.
<gap:plugin name="org.apache.cordova.media" version="0.2.13" /gt; <gap:plugin name="org.apache.cordova.device-motion" version="0.2.10" /> <icon src="img/robohead.png" />
See where I snuck in that last line, setting the icon for your app? Well, we need a robot head. We could get fancy about sizes of heads for different DPI depths of screens, but we’ll just go with a universal head.
Right click on the img directory in the main www directory and open a terminal there. To load in the robot head, just use:
wget http://www.seattlecoderdojo.com/wp-content/uploads/2015/05/robohead.png
You’ve told the app you want to set an icon, where to find the icon, and you’ve put it there.
Close that terminal. It’s no longer needed.
Now it gets complicated… sort of
When you install the Android support, a new main directory is created for your Android App, so you’re going to leave the familiar index.html alone. You’re going to go to the Android app directory and find your www folder.
Here we will edit three files and create one. Let’s create the one.
On the www folder, right click and opt to create a new folder. Call it sounds. Right click on it and open a terminal there so you can import your sound (another lesson you learned in Week 1). But in case you forget, here’s how we import a Santa laugh.
In the new terminal, type: wget http://seattlecoderdojo.com/wp-content/collateral/sounds/santa.mp3. Your sound can be found.
Now we’re going open the index.css file in the css folder. Got it open? Did you just say yes out loud… to a computer?
Okay, now that it’s open, erase everything in it and replace that with:
.btnholder {
text-align: center;
margin-top:20px;
margin-bottom:20px;
}
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 15px 20px 15px 20px;
text-decoration: none;
}
That’s our button and paragraph styles.
Let’s do the same to the index.html (not the main one, but the one in android/assets/www, but replace it with this…
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link href="css/index.css" rel="stylesheet" type="text/css">
<title>This Is My Hello</title>
</head>
<body>
<p class="btnholder">My First Sound App</p>
<p class="btnholder">
<span class="btn" id="button1">Play Sound</span>
</p>
<p class="btnholder"> </p>
<p class="btnholder"><b>Accelerometer</b><br>
<b>X:</b><span id="showx"><br>
<b>Y:</b><span id="showy"><br>
<b>Z:</b><span id="showz"><br>
<b>Time:</b><span id="showt"><br>
</p>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/dsound.js"></script>
</body>
</html>
You’ll recognize the button from lesson one, and you’ll see this small grid that’s going to show us accelerometer data. There’s also a script sourcing a file in the js folder that doesn’t exist, so we’ll go fix that next.
Rigging it all up with JavaScript
Now we’ll create a file in the js folder. Best to name it dsound.js. Let’s look at what goes in it and why.
document.querySelector("#button1").addEventListener("touchend", playMP3, false);
function playMP3() {
var mp3URL = "/android_asset/www/sounds/santa.mp3";
try{
var media = new Media(mp3URL, null, mediaError);
} catch(e) {
alert(e.message);
}
media.play();
}
function mediaError(e) {
alert('Media Error');
alert(JSON.stringify(e));
}
// accelerometer functions
var showx = document.querySelector("#showx");
var showy = document.querySelector("#showy");
var showz = document.querySelector("#showz");
var showt = document.querySelector("#showt");
function onSuccess(acceleration) {
showx.innerText = acceleration.x.toString();
showy.innerText = acceleration.y.toString();
showz.innerText = acceleration.z.toString();
showt.innerText = acceleration.timestamp.toString();
};
function onError() {
alert('onError!');
};
It’s running late. I’ll try to add descriptions, but otherwise we’ll talk about this in workshop.