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 

 

Mobile Lab: Hw2 – interactive poster

IMG_2586.PNGIMG_2587.PNGIMG_2588.PNG

 

For this week’s homework I tried out two ideas but went for the more minimalist shape based graphic style of musician Tycho’s record art, specifically Montana. It reminded me of some of the Swiss poster design references from class. In my  sketch I played with increasing duration of the animation by .25 with each consecutive triangle in sequence. also used scaleEffect to make the triangles larger.

 

 

9b79ff6e14162849db41637cf84efe40--graphic-illustration-album-cover

unnamed.jpg

 

 

Was really inspired by the tutorial below. Would like to restructure my code to have a similar repeat structure as the rectangle in the video. Instead of copy and pasting 7 individual triangles in a z stack and tweaking them, would be more efficient to have a function that draws the triangle initially. Then play with offset, color (or opacity) and animation time.

Although in a very ITP fashion I lost my sketch (and will rebuild) but at the very least had video of it when it was working. And hope to post to gitup soon

https://www.youtube.com/watch?v=Xvm8hrvCk58&feature=youtu.be

 

Tutorials:

 

Questions:

  • how to parse a crash log
  • how to fix team names
  • how to import fonts
  • how to work with sound files
  • easy eyedropper / color picker?

 

Week 2 lab/homework  covered a range of things including:

  • Anatomy of an iOS App, UI Design, Prototyping Tools
  • Swift Programming, Swift playgrounds
  • SwiftUI Basics
  • UI development, layout design

Design and develop an interactive poster starting with the poster code kit

  • Select an artist, movie, musician, etc. as inspiration
  • Poster needs to include type AND images (graphic or photography)
  • Make it interactive: On tap apply animation
  • Post documentation to #sp2020-homework channel on Slack. Include the following:
    • Source of inspiration
    • 1-2 sentence description
    • 2-3 screenshots
    • short video
    • GitHub link to code

 

Mobile Lab: W1 assignment – 1 button app

 

For week one we were to “Create a One Button app” using the one button code kit.  I  decided to make a “free museum access” app that lists all the museums we can get into free with our NYU student ID. It’s such a great benefit and am always forgetting! This helps me keep the list in one place but also as a visual suggestion of somewhere to go that day. The list is pulled from the post on the NYU site here.

After adding Images to the list I realized that the white text was hard to read so looked around and found a way to create a background box with opacity. However the background box is not responsive when you rotate the phone from portrait to landscape. Something to trouble shoot for in next steps.

I also tried it as a randomized list but enjoyed the more straightforward click through to help reiterate what the waived admissions options were better. Initially was thinking of a “What museum should I go to today?” randomized app and it reminded me just how often I forget about the free access we get with our student ids at certain ones.

Could see a next step iteration combining some of the things learned from the Swift UI lab with map location. Or having  the address/train stops in a Vstack below the museum name.

 

Questions:

  • how to outline text, like if using white text how to create a drop shadow or black outline to better separate from background image
  • how to have font color responsive if people select light or dark mode on their phones
  • best practices for crediting assets in app code
  • how to have the app restart from beginning when reopened, currently will start from last frame clicked

 

 

 

 

Mobile Lab: Week 1 Labs

For this week we had two labs to get us familiar with Xcode and Swift.

 

Xcode lab

  • learned about different sections of Main.storyboard view
    • scene graph
      • shows hierarchy of components in your views
    • canvas
      • specific views that make up the app
    • utility area
      • multiple tabs that show information about the state of the user interface and a set of tools to modify it.
      • UI widgets to drag and drop into the canvas / can size and position by value
  • Object library (cmd+shift+L) or click + sign in top menu
    • Labels
      • blue dashed lines appear when text is centered
      • playing with custom font, size, and alignment fields
  • Safe Areas / Auto Layout Constraints
    • a new concept introduced in iOS11
    • allows for responsive interaction
    • safe area is basically the guaranteed area of the screen where content will not be blocked by other elements
      • ex: designing for the iphone notch
  • Running an app simulator
  • Running an app on hardware

 

 

Swift UI tutorial: Creating and Combining Views 

Screen Shot 2020-02-04 at 3.11.45 PMScreen Shot 2020-02-04 at 3.20.47 PMScreen Shot 2020-02-04 at 3.36.27 PM