Would like to create a list app that helps me get to know the trees on my block based off of the NYC Street Tree Map. Hope to pull specific info from the bio & current ecological benefits to date.
Diagram of your Data Model
2-3 screen mockups of your app
Develop a scrollview prototype using a few sample items from your data – follow along video demo from class but use your own structs an data
Any technical questions/requirements
Be prepared to present your idea to the class for feedback
Post documentation and scrollview demo video to #sp2020-homework channel
If not using Apple’s Photoshop template, start with a 1024×1024 resolution image and use either App Icon Resizer or IconKit to create different icon sizes
Design Assignment 📐
Midterm: Master-Detail Application
A common app interface pattern displays a master list of items. Selecting the item navigates to a separate view showing more details about that item. e.g. Instagram, Facebook, Notes App, Spotify, etc. For the midterm you will design and develop your own master-detail application.
Requirements:
Data model for app needs to be 2 or more levels deep
App needs to show list (vertical or horizontal scrolling) and allow navigation to detail
Must be able to input/update a data element
Due next week (March 12)
Diagram of your Data Model
2-3 screen mockups of your app
Working ScrollView prototype of a few sample items from your data (follow along video demo from class but use your own structs and data)
Post documentation and scrollview demo video to #sp2020-homework channel
Any technical questions/requirements
Be prepared to present your idea to the class for feedback
Hey everyone, in case there is any confusion, your controller should have a single binding to the Signal and your visualizer should take a single input argument of Signal.
e.g. To use Bob’s controller and visualizer a example ContentView would look like:
import SwiftUIstruct Signal {
// Range: 0 - 10
var intValue: Int // Range: 0 - 1.0
var floatValue: Float // True or False
var toggleValue: Bool
}struct ContentView: View {
@State var signal = Signal(intValue: 0, floatValue: 0, toggleValue: false) var body: some View {
VStack {
BobsController(signal: $signal) Spacer() BobsVisualizer(signal: signal)
}
}
}
You should not reformat the signal struct. You should be updating the values. Please refer to the cheat sheet if you need to review how to use a struct. (edited)
Requirements and Tips:
Views should be no larger than 400×400
If your views require image/audio/video assets, please send those along as well.
Be creative with your design. Think about how standard buttons and sliders can be mapped in fun and novel ways.
Consider using a timer and/or randomizer to modulate the signal over time.
You may or may not require some internal @State for your component views based on their complexity.
import SwiftUIstruct Signal {
// Range: 0 - 10
var intValue: Int // Range: 0 - 1.0
var floatValue: Float // True or False
var toggleValue: Bool
}struct ContentView: View {
@State var signal = Signal(intValue: 0, floatValue: 0, toggleValue: false) var body: some View {
VStack {
NiensController(signal: $signal) Spacer() NiensVisualizer(signal: signal)
}
}
}
A controller file with your name. e.g. NiensController.swift
struct NiensController: View {
@Binding var signal: Signal var body: some View {
//
// Add your buttons, knobs, etc. here.
// Update signal appropriately.
// Text("Controller")
}
}
A visualizer file with your name. e.g. NiensVisualizer.swift
struct NiensVisualizer: View {
var signal: Signal var body: some View {
//
// Create visuals/animations here.
// Text("Visualizer")
}
}
Today I went to Coding Lab to troubleshoot the logic roadblocks I was having with last weeks homework. Vince helped walk me through how @State & @Bindings were working in the Mobile Lab Game Kit.
We specifically walked through how avatarPosition was working across views since its needed across all layers. He mentioned how part of the magic that SwiftUI allows us with this system is that when the code goes to $avatarPosition to update the state it won’t get stuck in an infinite / recursive loop.
We then took a look at my app concept of navigating over clouds to reveal cloud names. he suggested approaching it in 3 steps:
collisionObject
that you would need to change the let to a var to allow for flexibility in the target size / shape. With the change from the finite let to the versatile var, we can now target that the size variable would need to become 2 different variables: sizeHeight & sizeWidth since in the example the trigger is a square and only needed one dimension repeated twice.
contentView
Vince then walked me through the simple logic to toggle the background (shifting the color), and that the logic would be the same for switching out images. He created a helper function that is an if/else statement and then called it in the view. He also reiterated how you cannot declare a function inside a view, that view only wants to deal with things that make instant changes to the canvas. So where calling a function in view would shift the canvas, the process of declaring it doesn’t return anything, therefore would return an error if in view.
Thinking about restrictions in position ( >&< ) logic to create rollovers
that in the example we did in coding lab, we only restricted in 1 direction, in order to achieve a rollover would need to restrict in all directions
This week we were to review the Cheat Sheet made by Nien & Sebastian. As well as create 1 controller that outputs a signal and 1 visualizer that processes the signal. “You can think of the controller as something with buttons, knobs, etc. and the visualizer will be like a processing sketch which updates based on the signal.”
Inspired by things like this:
Code Examples:
The signal will have 3 components contained in a struct. Note the allowed ranges:
struct Signal {
// Range: 0 - 10
var intValue: Int // Range: 0 - 1.0
var floatValue: Float // True or False
var toggleValue: Bool
}
The Main Tester code will look somethings like this:
import SwiftUIstruct Signal {
// Range: 0 - 10
var intValue: Int // Range: 0 - 1.0
var floatValue: Float // True or False
var toggleValue: Bool
}struct ContentView: View {
@State var signal = Signal(intValue: 0, floatValue: 0, toggleValue: false) var body: some View {
VStack {
NiensController(signal: $signal) Spacer() NiensVisualizer(signal: signal)
}
.frame(height: 700)
}
}
Deliverables:
Before the start of next class, please Slack Sebastian and I directly with your 2 files and any required assets. We will take everyone’s controller and visualizer and wire it up to a master app allowing us to mix and match everyone’s components.
A controller file with your name. e.g. NiensController.swift
struct NiensController: View {
@Binding var signal: Signal var body: some View {
//
// Add your buttons, knobs, etc. here.
// Update signal appropriately.
// Text("Controller")
}
}
A visualizer file with your name. e.g. NiensVisualizer.swift
struct NiensVisualizer: View {
var signal: Signal var body: some View {
//
// Create visuals/animations here.
// Text("Visualizer")
}
}
Some requirements and tips:
Views should be no larger than 400×400
If your views require image/audio/video assets, please send those along as well.
Be creative with your design. Think about how standard buttons and sliders can be mapped in fun and novel ways.
Consider using a timer and/or randomizer to modulate the signal over time.
You may or may not require some internal @State for your component views based on their complexity.
Cheat Sheet Concepts
Data Flow
– think of your Views as a function of State
– how your views express the relationship between your application’s data / info and how your user interface looks and behaves.
– Understanding how data flows through a view hierarchy is fundamental to understanding app development with swiftui
This example can be downloaded and opened into Xcode to export to a ios device. Requires Xcode 10.0, iOS 12.0 and an iOS device with A9 or later processor.
This weekend will be exploring a range of SDK examples. Began a spreadsheet to keep track of process. Will bullet out the info here from ARKits Apple Developer Page:
Helpful links:
ARWorldMap / importance of saving & loading world data
For homework this week we were to play with the Mobile Lab Game Kit and to build out a visual metaphor with a possible win state. The organization of the codekit is to encourage us to structure our code with the root/main code with branches / separate swift files. An emphasis on:
App architecture (data flow) review
@State, @Binding, “Source of truth”
Metaphor
View Composition, Refactoring
I was inspired by a book on our bookshelf The Cloud Collector’s handbook by the Cloud Appreciation Society. Hoping to build a iteration of the codekit where a spaceship or some avatar navigates through different tropospheric clouds: