Assignment 16

Making an Interface with Xcode and Swift

This weeks goal was to implement a simple interface. I choose to use Xcode since it provides simple tools to create interfaces for apple devices. I will show how to make an simple iOs app with some buttons, labels and a simple sample function.

To get started just create a Single view project for Ios using the Dialog that will be shown when you start up Xcode. Now select the Main.storyboard file on the left. Your window should look now like this.
In the middle you can the representation of an iPhone X. The app will look exactly like this on a real phone. To add interface elements click on the circled button on the top right. I will add a switch and labels for now.

When you click on the button this dialog will be shown. Just search for the element you need and drag it onto the phone screen.

I added an label and two switches. To edit the properties of an element for example the text of the label, select the label by clicking on it and then click on the little downward arrow on the top right (here blue). Then simple edit the text via the field with the blue circle.

Using the methods explained above you can create this simple interface.

To add functionality click on the two circles right of the icon we used to add interface elements. Now you can right-click and drag an item into the code. A menu will open were you can chose if the element should be an action or and outlet, furthermore you can choose a name. Outlets are self explanatory. You can use them to send messages from your code. Actions are functions that will be executed when the element is clicked, dragged etc.
I added an outlet for the text-field at the bottom and a click-action for the lights on button.
The "@IBAction func Onoff" will be executed when the slider is clicked it will show none in the text-field when it is turned off and blue when turned on.

By pressing the "PLAY"-Button at the top-left corner you can emulate an iphone and test your app.

Let the interface talk to the Fakeduino

Well I did not get the bluetooth library of Xcode to work. I did a little bit of research and found some solution but but theses need like 2000 additional lines of code and then the program wont work on every mac reliably so I decided to use the Processing IDE and an HM-05-Bluetooth module. The board and program are the same used in the other Communication Assignment but the HM 10 is switched to an HM-5. Keep in mind the HM-5 usually needs no voltage divider.

So the program basically sends the strings "[0:0:11]" or "[0:0:00]" depending of the current state.
First we need some global variables one for the state (toggle) one for the width and height of the pictures. One for each picture etc.
In the setup function we need to load and resize the pictures (loadImage and resize). The we need to establish a Serial connection to the bluetooth module: println(Serial.list()) dumps the list of all serial connection into the console find your module there and exchange the "/dev/cu.HC-05-Dev8" String accordingly.Edit the for loop accordingly to the length of the new string

You need to connect the module via your device manager beforehand so it shows up the password is usually 1234 or 0000

The mousePressed() function is executed whenever the mouse is pressed. You can send the data via myPort.write(). Depending on the state of the toggle variable the picture is changed via using the image()function. The two numbers are the place in the coordinate-system where the image will be displayed.
When you start up the program by clicking the little arrow in the top left the popup window should look like the ones on the left.