I have created a series of videos introducing app development using Swift Playgrounds on either iPadOS or macOS. Each video steps through the process of creating a very simple app and I envision this as a great starter to using SwiftUI. I hope you enjoy this basic starter series.
You can jump straight to a YouTube Playlist
Create Apps and Stacks
Adding Colour
Adding Gradients
Adding Images
Adding SF Symbols
Adding Views and Tabs
I have found a couple of issues while using Swift Playgrounds for app development, which is kinda frustrating.
There seems to be no way to run the and test on my iPhone without going down the test flight route. This is disappointing as my students live seeing their apps on their own iPhones. I’m wondering if we can get around this with Xcode somehow.
NavigationViews preview like an iPad/macOS app with a side bar etc, I cannot seem to force iPhone only, so its adding a level of difficulty I did not want to cover with my students. I’m getting around this by making sure in my guides I will focus on using the live preview rather than running the app.
If you have any suggestions to get around these two issues please let me know.
Remember this is the first experience my students are going to have with app development and they need simple answers.
This guide will show how to add Tabs to your app. It is quick and easy, thanks to SwiftUI and allows you start adding multiple views to your app.
This guide will show how to create a new View so that we can modularise our code, making it easier to modify and maintain.
SF Symbols are a great little bonus when developing apps. It is a whole suite of iconography that can be used throughout a design. This guide explains how to use them in SwiftUI.
In this guide, I will show you how to add images to a SwiftUI app. Look for a nice image before you start. 😊
SwifUI makes it super easy to add gradient colour effects to your app design. This guide will show you the basics to get started and provide some inspiration for your own designs.
In this guide, I will be explaining how to add colour to the SwiftUI app. It is very simple and I show a couple of tricks to make things easier.
In the follow up to my last post, this guide will show how to use the object library in Xcode to place Text and Stacks directly into the design preview of an app. Yes, this means knowing less code. It is a close to drag and drop coding you can get and it works rather well.
The guide also introduces the attributes inspector to modify objects in the design, say for instance what font style the Text has. Again less coding required. 😁
If you are interested in trying some simple SwiftUI, this video will show you how to use VStacks, HStacks and ZStacks to align Text.
Now the final part of my guides showing how to create you own Live AR Pictures app. This movie explains how to add fade transitions to the animations just to give the final product a nice clean look. This is much more complicated than the other guides and pushes the boundaries of my understanding so bare with my descriptions of what is happening. I will add further guides based around this app but it will focus on additional AR elements or how might you include this inside your main app. youtu.be/VTMxkQgdr…
In this part of the series I am going to explain how we can add to our app so that when an image is not visible on the device that the animated movie pauses. This is a nice effect that makes the overall app feel more natural. youtu.be/44DF4OLIl…
In this part of the series we will be looking at how you can access your data using Xcode and then ultimately see your temperature data on your iPhone.
To fully understand this section an understanding of concepts like closures, extensions and working with web data would be very helpful. For this I recommend looking at Apple’s Everyone Can Code materials and specifically the App Development with Swift course. The Apple Book can be accessed here:
books.apple.com/au/book/app-development-with-swift/id1219117996
The main focus would be Chapter 5, but I would recommend spending some time working through all of the book if you are interested in iOS development.
If you just want to jump to seeing the app running you can download my project here:
You will need to make one change to the code and that is to point the app to connect to your Pi. To do this open the project in Xcode and look for the TemperatureInfoDataController.swift file. On line 16 you will see the following:
let baseURL = URL(string: “192.168.66.11/temperaturejson.php”)!
Now change this line to match your Pi’s address.
Once you build and run the project you should see the latest temperature on the first screen and then using the tab bar you can see all records.
The app is very basic at this point but does give you some idea of what you can improve.
If you would like some further understanding of the project I will make another guide to help break it down a little to help out. In another guide I will also show how to graph the data.
In this part of the series we will be looking at creating a PHP web page that will show the data logged in the database in JSON format. This format is easily readable by not only computers but also humans, so it is an excellent way to share data. So lets get on with making the changes we need.
The original guide that this post is taken from can be located below.
First we need to create a file in our web server storage. This is a special area that provides access via a webpage. This is stored in /var/www/html so type:
cd /var/www/html/
Now create PHP file that will display the data in JSON format:
sudo nano temperaturejson.php
The code to pasted into the file is
<?php
$host = ‘127.0.0.1’;
$db = ‘temp_database’;
$user = ‘root’;
$pass = ‘CHANGE PASSWORD HERE’;
$charset = ‘utf8mb4’;
$dsn = “mysql:host=$host;dbname=$db;charset=$charset”;
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
$stmt = $pdo->query(‘SELECT * FROM tempLog ORDER BY datetime DESC’);
$tempValue = array();
$i=0;
while ($row = $stmt->fetch())
{
$dateAndTemps = array();
$datetime = $row[‘datetime’];
$temp = $row[‘temperature’];
$dateAndTemps[“Date”] = $datetime;
$dateAndTemps[“Temp”] = $temp;
$tempValue[$i]=$dateAndTemps;
$i++;
}
echo ‘{“records”:‘.json_encode($tempValue).‘}’;
?>
Now to view your data open a web browser and type the following address but also changing the numbers to match your Pi’s address.
192.168.0.10/temperatu…
Note I had to restart my Pi to get this working. You can use the following from SSH
sudo shutdown -r now
If all works you should see something similar to:
Now you are ready for Part 4, where we will make our iOS app to display the Temperature data.
Over the last few years I have been teaching a class called Mechatronics that combines together engineering and robotics with a goal for students to build real world technology to solve a problem. In building student learning for open ended tasks, I needed a project that could combine many skills together. I had previously used Arduino’s to enable a programmable device with I/O but I was happy bring in other technologies. I had also been coding more and more with Swift and making Apps with Xcode. As my students had also begun their journey with App Development in other classes, I thought it would be a great opportunity to leverage this knowledge and see how I could show live data from a temperature sensor in an App. So this lead me to the path of using a Raspberry Pi to become the hub of the project as I could basically build a database and web server that stored and shared data collected from a temperature sensor. This data could then be shown via an iOS app.
Essentially this series of guides will cover:
Now in my Googling, I came across an excellent website that covered all these requirements. Unfortunately as we followed through the guides we found that due to age we had to make changes along the way and was only solved by spending time on Google looking for answers. With permission, my guides will follow closely to what these guides had instructed. There are so many little changes that it will be easier to reproduce the work rather than identifying the changes needed to get everything working.
Once you have your Raspberry Pi you will need to install Raspbian and I also recommend using an app called Etcher to install onto the SD Card.
www.raspberrypi.org/downloads/raspbian/
Once installed the first time you boot your Pi you will be able to run a software update, which I highly recommend. Otherwise you will need to run the following commands from the Terminal:
sudo apt-get update sudo apt-get upgrade
Also you will need to go into the Raspberry Pi Configuration under Preferences to enable SSH and 1-Wire. Once you have enabled these settings you can remote setup your Pi via SSH (which makes for a much easier experience) rather than using a keyboard, mouse and monitor connected.
To SSH open Terminal and type:
ifconfig
and depending if you are using wifi or Ethernet you will see something like
inet 192.168.0.20
Which really does depend on the network you are using.
On your computer you can then SSH using:
ssh pi@192.168.0.20
To wire up the circuit you will need a bread board, a 10k Ohm resistor some prototyping wires and the temperature sensor. As I wanted to set this up for an aquarium I used a water proof one:
Waterproof DS18B20 Digital temperature sensor
core-electronics.com.au/waterproof-ds18b20-digital-temperature-sensor.html
The circuit uses 1-wire comms which is great feature because each temperature sensor can be wired to all connect to the same pin on the Raspberry Pi. Apparently you can have up to 75 temperature sensors reading at 1 sec intervals connected straight into the same pin. By default this pin is number 4.
We need to load the drivers for the 1-wire comms and the temp sensor into the Pi kernel. Modprobe is a Linux program to add a loadable kernel into the Linux kernel. In your terminal enter:
sudo modprobe w1-gpio sudo modprobe w1-therm
Now change your working directory using the following command:
cd /sys/bus/w1/devices/
This is where the devices running on the 1-wire will be. So to find our newly created device just list the contents of the directory with ls.
ls
Now you should see something listed like
28-00000622fd44 w1_bus_master1
This is the serial number for the device. To interrogate that device we need to go into its directory. Make sure you use the serial number of your own sensor!!
cd 28-00000622fd44
The sensor writes to a file called w1_slave so if we just read that file we can now finally know what temperature it is. Enter:
cat w1_slave
cat simply displays the contents of a file.
You will get the following output:
0b 01 4b 46 7f ff 05 10 a8 : crc=a8 YES 0b 01 4b 46 7f ff 05 10 a8 t=16687
The second line shows the temp “t = xxxxx” in degrees Celsius. This may seem high but that’s because you need to format the data, as the value for t is the temperature to 3dp. So read it as t = xx.xxx . For example 16.687.
Now this is great and all but it’s a bit on the laborious side so lets write a Python script to do all of the hard work for us.
Go back to your home directory:
cd ~
and make a new directory called tempLog:
mkdir tempLog
Go into the new directory:
cd tempLog
and create a new python file in nano (which is just a text editing app):
sudo nano getTemp.py
Copy the code below taking care to use your own value for the sensor. Explanation beneath the code.
import os
import time
import datetime
import glob
from time import strftime
os.system(‘modprobe w1-gpio’)
os.system(‘modprobe w1-therm’)
temp_sensor = ‘/sys/bus/w1/devices/28-00000622fd44/w1_slave’
def tempRead():
t = open(temp_sensor, ‘r’)
lines = t.readlines()
t.close()
temp_output = lines[1].find(’t=‘)
if temp_output != -1:
temp_string = lines[1].strip()[temp_output+2:]
temp_c = float(temp_string)/1000.0
return round(temp_c,1)
while True:
temp = tempRead()
print temp
datetimeWrite = (time.strftime(“%Y-%m-%d “) + time.strftime(”%H:%M:%S”))
print datetimeWrite
break
We first import all of the Python libraries we need. We then load the gpio and therm kernels again using modprobe. Rather than write it out again and again we also use a variable to store our path to the sensor’s w1_slave file, I called it temp_sensor.
A method called tempRead is defined. In this method we read in the w1_slave file using open ‘r’ The file is then converted in to an array of strings called ‘lines’ using readlines.
If you remember it is the second line of the w1_slave file that contains the temperature so we search lines[1] using find for “t=”. Which will give us an index value of where that string occurs. If the returned value from that find is not -1(which means it didn’t find it) we then strip out the temperature reading as a string from the index where “t=” was 2 to the end of the line. If you didn’t 2 you would get “t=xxxxx” as the temperature, we want “xxxxx”.
Then the string is converted to a float, divided by 1000 to put the temperature into proper format of xx.xxx and then returned to the while loop.
When the script is run the first thing it does is go to the while loop. Here it will call our previously defined method tempRead to get the value of the sensor. It will then print the value to the output. Then just to make things look a bit nicer it gets the current date and time and prints it out on the output one line below. Break then stops the while loop and ends the script. I used a while loop so that if you wish you can remove break and insert time.sleep(10) for example so that the temperature and current date and time is output every 10 seconds.
Hopefully that all makes sense. Close the nano file by pressing ctrl and x. It will prompt you to save, press y to confirm writing and the filename.
Now lets give it a go. While still in the tempLog directory enter:
sudo python getTemp.py
You will get something like this:
pi@raspberrypi ~/tempLog $ sudo python getTemp.py 16.4 2014-12-24 11:51:08
We now have the basic workings of our temperature sensor and logger setup. In part 2 we will set up the web server and MySQL table for our data.
Now for the second part in a series of movies explaining how to make your own AR app using Live Photo’s. By the end of this guide you will have an app that will detect the photo and start playing the animated movie over the top. Don’t forget to grab your resources from the first guide and also print your photos. youtu.be/kxeGrz579…
This is the first part in a series of movies explaining how to create your own AR app using Live Photo’s . Have fun following along and I’d love to hear how you go. youtu.be/ryeSGJuOh… The resources for the app are available via https://www.dropbox.com/s/cc3yap1lol0ew7x/AR%20Images.zip?dl=0
At the end of last year I spent some time learning how to create an iOS app using the Augmented Reality tools available in Xcode. Below is a tweet I posted at the time to refresh your memory (well, for those who follow me)
[tweet twitter.com/superdave…]
What I have learned from this experience is that AR development is really not too complicated in iOS, many of the intelligent work is done behind the scenes. So to just place an object into an AR scene you really just need to know where in the space around you want to add it and then drop it in. The default template for an iOS AR app already has a “Jet Plane” object and without changing a line of code you get a working app. Here is what it looks like:
From this point all you need to do is define points in 3D space and add text, images and movies.
The example from the Tweet I made follows a process where the app “looks” for objects that match the size of an A4 page with the same contents of one of the images. It then attaches a node of the same dimensions over the top and then plays a movie which matches the photo inside the node. I later added text that sits above the object and moves with it.
Once I made the basic app I saw the possibilities to me of how this could be used at school. I believe this a great template for a AR tour of a school. Meeting the requirements of being a real world problem and solving a problem that affects the community, students could easily come up with their own version of using the app.
Mathematically speaking I also appreciate the complexities in understanding how to place the objects inside the AR space. The technology understands distances and angles perfectly so it become a great activity in reinforcing these concepts.
So over the coming week or so I will be releasing 5 movies that explain the process of creating the App. The best part is that the app works well after covering 2 of them, so it is quick at getting some buy in. The final 3 movies go through the process of adding some polish.
I look forward to seeing other educators and students having a go and seeing what they come up with.
This is a movie covering the fourth part of App Development with Swift Chapter 3 Section 6 youtu.be/BXKnOmSvB…
This is a movie covering the third part of App Development with Swift Chapter 3 Section 6 youtu.be/swU52wbTd…
This is a movie covering the second part of App Development with Swift Chapter 3 Section 6 youtu.be/CxOxrHLUX…
This is a movie covering the first part of App Development with Swift Chapter 3 Section 6 www.youtube.com/watch