Mobile Lab: HW3 Egg Timer

 

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 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s