Tweet
Tweet

Slide 1

Slide 1 text

REACT/FLUX LIKE pattern for embedded UI

Slide 2

Slide 2 text

MCU KEYPAD ENCODERS CLOCK SCREEN LEDS SYNTH

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

currentWaveform currentNote

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

KEYPAD DISPATCHER VIEW STORE action action update handleAction handleStoreUpdate

Slide 11

Slide 11 text

class Keypad { void keyDown(); } class Dispatcher { Store store; void dispatchAction(action, args); Page getCurrentView(); } class View { void handleAction(action, page); void handleStoreUpdate(prop); } dispatchAction(ACTION_KEY_DOWN, {KEY_X}); getCurrentView() .handleAction( ACTION_KEY_DOWN, {KEY_X} );

Slide 12

Slide 12 text

class Keypad { void keyDown(); } class Dispatcher { Store store; void dispatchAction(action, args); Page getCurrentView(); } class View { void handleAction(action, page); void handleStoreUpdate(prop); } store.activeKey = KEY_X; handleStoreUpdate( STORE_PROP_ACTIVE_KEY );

Slide 13

Slide 13 text

class Keypad { void keyDown(); } class Dispatcher { Store store; void dispatchAction(action, args); Page getCurrentView(); } class View { void handleAction(action, page); void handleStoreUpdate(prop); } class Screen { void drawBackground(); void drawActiveKey(); } class Synth { void setNote(key); }