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.
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.
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. 😁
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.
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.
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:
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:
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.
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:
Setting up a DS18B20 temperature sensor
Writing a Python script to read the sensor
Setup of LAMP. Linux, Apache, MySQL & PHP for the webserver
Writing the values from the temp sensor to the MySQL database
Writing PHP scripts to access the MySQL database from a web browser
Outputting the results as JSON for a mobile app to read.
An simple iOS app to read our temp sensor values and display them
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 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:
and depending if you are using wifi or Ethernet you will see something like
Which really does depend on the network you are using.
On your computer you can then SSH using:
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:
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.
Reading the Temperature Sensor
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:
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.
Now you should see something listed like
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!!
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:
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.
Writing a Python script
Go back to your home directory:
and make a new directory called tempLog:
Go into the new directory:
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.
from time import strftime
temp_sensor = ‘/sys/bus/w1/devices/28-00000622fd44/w1_slave’
t = open(temp_sensor, ‘r’)
lines = t.readlines()
temp_output = lines.find(’t=‘)
if temp_output != -1:
temp_string = lines.strip()[temp_output+2:]
temp_c = float(temp_string)/1000.0
temp = tempRead()
datetimeWrite = (time.strftime(“%Y-%m-%d “) + time.strftime(”%H:%M:%S”))
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 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:
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.
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)
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.