Fun holiday project! How to make a sensor enabled mobile app together with your kids

Mikael KindborgBlogs, Tutorials

Gartenzwerg
Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Holiday Garden Gnomes
[Image credits]

Holidays make for a great time being together tinkering and crafting. What about creating a mobile app together with your children as a holiday or weekend project? In en evening you can be up and running with your very own app – created with HTML and JavaScript by you and your family!

Making mobile apps is easy using HTML and JavaScript

Evothings Studio is a development tool that makes it easy to create mobile apps for the Internet of Things (IoT) in JavaScript and HTML. In this tutorial you will learn how to get started and modify one of the example apps with a custom design. Fun activity to do with your kids!

There is a massive growth in IoT devices such as programmable beacons, sensors and microcontrollers. Evothings Studio is specifically designed with IoT apps in mind, making it easy to create mobile applications that connect to various IoT devices and sensors.

A mobile phone or tablet is in itself an IoT device, with many sensors built in. In this tutorial we will program the accelerometer, a sensor that tells us how the phone or tablet is tilted.

What Evothings Studio does is that it connects your mobile phone to your computer, making it easy to program and run apps directly on the phone. You can even connect multiple phones at once!

Evothings Studio has two components. The application running on your computer is called Evothings Workbench, and the app running on the mobile phone is the Evothings Viewer.

What you need

  • Computer with Internet connection
  • iPhone/iPad or Android mobile phone or tablet with Internet connection
  • A curious mindset
  • One or more kids (actually, you don’t need any kids to enjoy this tutorial!)

Get Evothings Workbench installed on your computer

Go to the Evothings download page and click the download for your operating system (Windows, OS X or Linux):

evothings.com/download/

When the download is complete, you have a zip-file that contains Evothings Workbench. On most computers it works to unpack it just by by double clicking the zip-file. Place the unzipped folder for example on the desktop or in your user home folder.

The unzipped folder contains the Evothings Workbench application. Double click it to launch it. If you have a Mac computer, right click and select Open first time.

To uninstall Evothings Workbench, just delete the unzipped folder.

If the computer asks for permission to let Evothings Workbench access the Internet, click Yes/OK/Allow depending on your operating system.

Congratulations, you are already halfway to having your first mobile app up and running!

Get the Evothings Viewer mobile app

Next step is to install Evothings Viewer on your mobile phone or tablet. Get it from Apple App Store or Google Play for Android.

Connect from Evothings Viewer to the Workbench

Now it is time to connect from the mobile app to Evothings Workbench and run your first app!

Launch the Workbench on your computer if you have not done so already.

Select the CONNECT tab and click the GET KEY button. This will give you a key code that you enter in the Viewer.

WorkbenchConnectButton

In the Viewer app, enter the key code you got in the Workbench and tap the CONNECT button.

ViewerKeyCode

If you see the connected screen you are ready to run your first app!

ViewerConnected

Running your first app

In the Workbench window, select the EXAMPLES tab, and click RUN on the “Hello World” example app.

WorkbenchExamplesRunHelloWorld

If everything goes well, the app should load on your mobile phone.

Making your own sensor-enabled app

Evothings Studio comes with several example apps, and one of them is “Cordova Accelerometer”. With this app, you can control a graphic sprite on the screen by tilting the mobile phone in different ways. (If you have not heard of “Cordova”, have no fear. It is a programming system for mobile apps, but you don’t have to know anything about Cordova to successfully complete this tutorial.)

We will use the “Cordova Accelerometer” example as a starting point for our own app. What we will do is replacing the screen contents with our own text and graphics.

Start out by clicking COPY on the “Cordova Accelerometer” example app.

WorkbenchExamplesCopyCordovaAccelerometer

Click the CREATE button in the dialog. This will give you a copy of the app under the MY APPS tab.

WorkbenchCopyAppDialogCreate

Now click RUN on the “Cordova Accelerometer” app under the MY APPS tab.

WorkbenchMyAppsRunMyApp

Tilt the phone to move the Evothings logo around the screen.

Editing the code

To find the source code for the app, click the CODE button in the Workbench.

WorkbenchMyAppsCodeMyApp

The file we will be editing is index.html.

Open index.html in a text editor, such as Notepad on Windows or TextEdit on OS X. If you have programmed before, you can use your favourite text editor.

Don’t use a word processor, because they format the text, and program code must contain plain text only.

Make sure when you save your edits that you save the file as plain text (if you feel clueless to what this means, just save and see if it works, it usually works well with Notepad and TextEdit).

As a first test we will alter the heading of the app. Change these lines:

<title>Cordova Accelerometer</tite>
<h1>Cordova Accelerometer</h1>

To this:

<title>My First App</title>
<h1>My First App</h1>

The name in the title tag is shown under MY APPS, and the name in the h1 tag is shown on the mobile screen.

Press the SAVE button in the text editor (usually CTRL+S on Windows and CMD+S on OS X) and you should see the app reloading on your mobile phone, displaying your new heading!

EditorTitleTag

EditorH1Tag

Cleaning up the screen

What we will do now is to delete the text from the screen, leaving only the sprite and the “Vibrate” button.

Begin by deleting this line:

@import 'ui/css/evothings-app.css';

Then change this part of the code:

<header>
    <button class="back" onclick="history.back()">
        <img src="ui/images/arrow-left.svg" />
    </button>

    <img class="logotype" src="ui/images/logo.svg" 
alt="Evothings" />

    <!--<button class="menu" onclick=""><img src="ui/images/menu.svg" /></button>-->
</header>

<h1>My First App</h1>

<p>This app demonstrates the built-in accelerometer of the mobile device.</p>
<p>Tilt the mobile device you are holding to move the Evothings Logo.</p>
<p>When at the edge, the device vibrates if vibration is supported (iPad has no vibration for example).</p>

<img id="sprite" src="sprite.svg" />

<button class="blue" onclick="showVibrationDialog()">
    Vibration Setting
</button>

To this:

<h1>My First App</h1>

<img id="sprite" src="sprite.svg" />

<button onclick="showVibrationDialog()">
    Vibration Setting
</button>

Save and have a look at the result to check that your changes work.

Creating your own sprite

To create your own sprite, get an image in .png format to use in place of the Evothings logotype. You can draw your own image, or get an image form the Internet (just remember that if you want to distribute the app, you must have the rights to use the image).

Place your .png file in the same folder as index.html.

Assuming the image file is named myimage.png, edit index.html by changing this line:

<img id="sprite" src="sprite.svg" />

To this:

<img id="sprite" src="myimage.png" />

Now save and have a look at the result!

Do you want to change the size of the image? For example making it smaller?

Change this line:

width: 300px;

To this:

width: 150px;

EditorCSSWidth

Another fun thing to do is changing the background color.

Add this inside the “<style>” section of the code:

body
{
    background: rgb(255,100,100);
}

EditorCSSBody

This will produce a light-red colour. Change the RGB (red, green, blue) colour values to get a different colour. The colour values should be numbers between 0 and 255. Try rgb(0,255,0) What color do you get? Can you make the background blue?

Some more programming

The sprite is controlled by a sensor called an “accelerometer”. This sensor is built into the phone and tells you the direction of the gravity. When you hold the mobile phone, the gravity points to the center of the Earth, and the X and Y component of the gravity is what we use to move the sprite. When these are zero, the sprite does not move at all.

To change how sensitive the image is, edit this code:

function accelerometerHandler(accelerationX, accelerationY)
{
    var dx = accelerationX * -10
    var dy = accelerationY * -10
    moveSprite(dx, dy)
    vibrateOnEdgeCollision()
}

Change -10 to some other value, for example -5 to make the image move half as fast, or -20 to move twice as fast. You can also use different numbers, for X and Y, like -5 and -20. And what happens if you remove the minus sign?

You are the star!

Congratulations! You have completed the tutorial and made a mobile app!

Yes, this is a real mobile app that you would be able to publish on the App Store or Google Play (using the Cordova build tool). It is some work to do this however, but if you are curious read on in the Evothings documentation and tutorials (see links below).

Show your friends what you have done and help them to create their apps!

Learn more

Share this tutorial with your friends

Pass on the word! Share this tutorial with other parents, children, hackers and colleagues on your social media sites. Also simply talking to someone still works these days I have been told! ;-)