Skip to content

Instantly share code, notes, and snippets.

@hsjunnesson
Last active August 29, 2015 14:01
Show Gist options
  • Select an option

  • Save hsjunnesson/0b3c20d7d9d2de45959e to your computer and use it in GitHub Desktop.

Select an option

Save hsjunnesson/0b3c20d7d9d2de45959e to your computer and use it in GitHub Desktop.

Marble diagrams

A notation for diagramming signals.

A line signifies time.

-------------------------->

"Marbles" on the line corresponds to "next" events from the signal.

---O-------O-------O------>

A line at the end of the line corresponds to the "completed" event.

-----------O-|

An X at the end of the line corresponds to the "error" event.

-------------X

Signal composition

We illustrate signal composition by the following notation.

A UISlider sends its own instance whenever the user moves the slider.

     slider  slider  slider
 ---O-------O-------O------>

We compose a new signal which derives from the original signal and maps each next event to the value of the slider at that point.

     slider  slider  slider
 ---O-------O-------O------>
    |       |       |
    V       V       V
  +----------------------+
  | map: slider -> value |
  +----------------------+
    | 0.3   | 0.4   | 0.88
 ---O-------O-------O------>

The new signal, when subscribed to, will send the slider's value as floats.

We can further compose the signal - to make it round to the nearest integer, plus one.

     slider  slider  slider
 ---O-------O-------O------>
    |       |       |
    V       V       V
  +----------------------+
  | map: slider -> value |
  +----------------------+
    | 0.3   | 0.4   | 0.88
 ---O-------O-------O------>
    |       |       |
    V       V       V
  +-----------------------+
  | map: round(value) + 1 |
  +-----------------------+
    | 1     | 1     | 2
 ---O-------O-------O------>

The next step is to make sure the slider only sends whenever there's a change in value.

     slider  slider  slider
 ---O-------O-------O------>
    |       |       |
    V       V       V
  +----------------------+
  | map: slider -> value |
  +----------------------+
    | 0.3   | 0.4   | 0.88
 ---O-------O-------O------>
    |       |       |
    V       V       V
  +-----------------------+
  | map: round(value) + 1 |
  +-----------------------+
    | 1     | 1     | 2
 ---O-------O-------O------>
    |       |       |
    V       V       V
  +----------------------+
  | distinctUntilChanged |
  +----------------------+
    | 1             | 2
 ---O---------------O------>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment