Lab 5 Slides

# CSE 340 Lab 5 (Spring 2020)
## Week 5: State Machine

.title-slide-logo[
  ![State Machine Logo](img/statemachine.png)
]

---
# Timeline
- Accessibility assignment due: Today, April 30 @ 10:00pm
  - Lock: Saturday, May 2 @ 10:00pm (if you are using late days)

---
# Section 5 Objectives

- Understanding State Machine
- Practice with PPS and State Machine
  - Worksheet: https://tinyurl.com/340section5
- Questions

---
# State Machine

- State Machines are used to respond to incoming events and allows for us to store state between events.
- Start state - indicated with incoming arrow
- End state - indicated with double-layered shape
- Transition States - indicated with single-layered shape
- Event Arrows - indicated with an arrow between states, represent different actions taken up states.

![:img State Machine Diagram Recap, 50%](img/smrecap.png)

---
# Propositional Production System (PPS)

- State machine is just the start, stop and interim states with arrows with nothing on them.
- State machine with:
  - ? (Boolean gates)
  - action calls 
  - extra conditions required to fire
  on the arrows is called PPS.

![:img State Machine Diagram Question, 50%](img/smq.png)

---
# State Machine Practice
Discussion: What is the behavior of this State Machine/PPS?

![:img State Machine Diagram Question, 60%](img/smq.png)

---
# Worksheet: State Machine Practice
- Link: https://tinyurl.com/340section5

---
# Worksheet Solutions

Problem 1:

1. updateThumbPosition()
2. updateVolume()
3. INSIDE
4. EssentialGeometry.BAR
5. updateThumbPosition()
6. updateVolume()
7. State.START
8. updateThumbAlpha()

Read more: [How to turn the PPS into code](https://courses.cs.washington.edu/courses/cse340/20sp/docs/pps)

---
# Worksheet Solutions
Problem 2:

<div class="mermaid" style="font-size: 14pt">
  graph TD
  S((.)) --> A((Start))
  A -- "DOWN:insideBar? updateButtonPosition(); 
  updateButtonAlpha(); invokeScrollAction();
  invalidate();" --> I((PRESSED))
  A -- "DOWN:insideButton? updateButtonAlpha(); 
  invokeScrollAction(); invalidate();" --> I((PRESSED))
  I -- "UP:updateButtonAlpha(); invalidate();" --> E[End]
  I -- "MOVE:updateButtonPosition(); invokeScrollAction(); invalidate();" --> I
  
  classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px;
  classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px;
  classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px;
  classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF
  
  class S invisible
  class A start
  class E finish
  class I normal
  
  </div>