For this week we were to work through / review Swift progamming pt 1 and pt 2 lab and create an egg timer app based off of the mobile lab code kit. Was very inspired by a kids visual timer app called Tico Timer. It uses simple shapes and animations to visualize a countdown. Was also very thankful for the example “Array of Circles” sent to us. I combined a little bit of the code kit with the array of circles code. You can add minutes up to an hour and counts down visually in both seconds in blue rectangles and minutes in orange.
Would like to redesign building logic off of 1 timer. My app is a little out of sync due to using two different time / counter functions – 1 for seconds and one for minutes. Would also like to explore adding in more visual,physical or audible feedback. Maybe add vibration when it hits zero ❤ My first version I tested out with text (below) and then for second version (shown above) removed text for colors to help signify the start, reset and add minute functions
Helpful Links/ Tutorials
Code
// ContentView.swift
// ArrayOfCircles
// Created by Nien Lam on 2/18/20.
// Copyright © 2020 Mobile Lab. All rights reserved.
import SwiftUI
struct ContentView: View {
// @State var count = 0
@State var secRemaining = 60
@State var minRemaining = 0
// Flag for timer state.
@State var timerIsRunning = false
// Timer gets called every second.
let timerSec = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
let timerMin = Timer.publish(every: 60, on: .main, in: .common).autoconnect()
var body: some View {
VStack {
// timer 1
VStack {
ForEach((0..<6).indices) { rowIndex in
HStack {
ForEach((0..<10).indices) { columnIndex in
Rectangle()
.fill(self.secRemaining <= rowIndex * 10 + columnIndex
? Color.white
: Color.blue)
.frame(width: 20, height: 20)
}
}
}
ForEach((0..<6).indices) { rowIndex in
HStack {
ForEach((0..<10).indices) { columnIndex in
Rectangle()
.fill(self.minRemaining <= rowIndex * 10 + columnIndex
? Color.white
: Color.orange)
.frame(width: 20, height: 20)
}
}
}
}
// .padding()
// .background(Color.black)
//
// start / stop button
Button(action:
{
self.timerIsRunning.toggle()
print(“Start”)
print(“Min Remaining:”, self.minRemaining)
print(“Sec Remaining:”, self.secRemaining)
}) {
Text(” “)
.frame(width: 100)
.padding()
.foregroundColor(Color.green)
.background(Color.green)
.padding()
}
// update countdown function
.onReceive(timerSec) { _ in
// Block gets called when timer updates.
// If timeRemaining and timer is running, count down.
if self.secRemaining > 0 && self.timerIsRunning {
self.secRemaining -= 1
print(“Time Remaining:”, self.secRemaining)
}
}
.onReceive(timerMin) { _ in
// Block gets called when timer updates.
// If timeRemaining and timer is running, count down.
if self.minRemaining > 0 && self.timerIsRunning {
self.secRemaining = 61
self.minRemaining -= 1
print(“Time Remaining:”, self.minRemaining)
}
}
// reset button
Button(action: {
self.timerIsRunning.toggle()
self.secRemaining = 0
self.minRemaining = 0
}) {
Text(” “)
.frame(width: 100)
.padding()
.foregroundColor(Color.red)
.background(Color.red)
.padding()
}
// add time minutes – timer 2
Button(action:
{
self.minRemaining += 1
print(“Add minute”)
}) {
Text(“ “)
.frame(width: 100)
.padding()
.foregroundColor(Color.orange)
.background(Color.orange)
.padding()
}
// add time minutes – timer 1
// Button(action:
// {
// self.secRemaining += 1
// print(“Add second”)
//
// }) {
// Text(“ “)
// .frame(width: 100)
// .padding()
// .foregroundColor(Color.blue)
// .background(Color.blue)
// .padding()
// }
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Criteria:
- Design and UI can NOT use any numbers or text
- Review native iOS timer functionality
- Must be able to set any interval up to 1 hour
- Must have functionality for Start, Cancel and Pause
- Design system must accurately communicate minutes and seconds
- Must have visual and/or audio and/or haptic feedback when timer finishes
- Consider Affordances, Signifiers, Mappings and Feedback in the app design
- Post documentation to #sp2020-homework channel on Slack. Include the following:
- 1-2 sentence description
- 2-3 screenshots
- short video
- GitHub link to code
Original Codekit Example
30 KM/s 