Material Motion Exploring solutions that will empower creators with the tools needed to describe and implement rich, interactive motion on any platform. Edit this page · History
MotionRuntime-visualizationElement · MotionObservable · dedupe · toString visualize
log
Status Interface level Implementation level Library
Proposed as of April 14, 2017 L2: Interaction creator L3: Stream creator material-motion
UpdatesCurrent StatusInitiation dateCompletion date
Initial proposal Draft April 14, 2017
platformsrctests
iOS (Swift) View
visualize
upstream (T)
(T) downstream

visualize specification

This is the engineering specification for the MotionObservable operator: visualize.

Overview

visualize writes any upstream value to a visible label and emits the value without modification.

Example usage:

stream.visualize(in: runtime.visualizationElement)

upstream  |  downstream  |  label.text
20        |  20          |  20
40        |  40          |  40
80        |  80          |  80
stream.visualize(prefix: "The value is: ", in: runtime.visualizationElement)

upstream  |  downstream  |  label.text
20        |  20          |  The value is: 20
40        |  40          |  The value is: 40
80        |  80          |  The value is: 80

MVP

Expose a visualize operator API

Use MotionObservable to implement the operator. Accept an optional prefix string and an element to which the visualization label will be added.

class MotionObservable {
  public func visualize(prefix: String? = nil, in: Element) -> MotionObservable<T>

Create a new label and add it to the visualization element

Create a new label on each connection and append it to the visualization element.

Subscribe to the stream and write values to the label

Create a new label and subscribe to the upstream, writing emitted values to the label as they’re received. Flash the label with a background color in order to draw attention to the fact that the value changed.

class MotionObservable {
  public func visualize(prefix: String? = nil, in: Element) -> MotionObservable<T>
    let visualizationSubscription = self.asStream().toString().dedupe().subscribeToValue { value in
      label.text = (prefix ?? "") + stringValue

      highlight.alpha = 1
      UIView.animate(withDuration: 0.3) {
        highlight.alpha = 0
      }
    }

    let subscription = self.asStream().subscribeAndForward(to: observer)

    return {
      visualizationSubscription.unsubscribe()
      subscription.unsubscribe()
    }
  }
}