GMAB Style Transfer Selfie Station

Counting Down.jpg

Landing Screen.jpg

Next Style Presented & Get Ready.jpg

Processing Animation.jpg

Ready To Take Photo.jpg

Remote Control Down.jpg

Remote Control Up.jpg

Restart Instructions.jpg

Selfie in Bazovsky Style.jpg

SketchSystems.spec

GMAB Style Transfer Selfie Station
  Remote Control Down*
    Landing Screen
    user_pick up remote control -> Remote Control Up
  Remote Control Up
    user_put down remote control -> Remote Control Down
    Next Style Presented & Get Ready
      auto_next -> Counting Down
    Counting Down
      auto_next -> Ready To Take Photo
    Ready To Take Photo
      auto_next -> Processing Animation
    Processing Animation
      auto_next -> Selfie in Bazovsky Style
    Selfie in Bazovsky Style
      auto_next -> Restart Instructions
    Restart Instructions
      user_put down remote control -> Remote Control Down

SketchSystems_prototype.js

function render_state(state){
  if (state.image_url) {
    return $("img", 
      {
        src: state.image_url, 
        style: {
          width: "100px",
          margin: "1rem"
        }
      }
    );
  }
  else {
    return $(
      "div", 
      {
        style: {
          display: 'inline-block',
          width: "10rem",
          margin: '1rem',
        }
      },
      state.name
    );
  }
}

function render_button(model, eventToEmit, buttonText) {
  console.log(model);
  return $(
    'button', 
    {
      style: {
        display: 'inline-block',
        width: "100px",
        margin: '1rem',
      },
      onClick: function(){ model.emit(eventToEmit) }
    },
    buttonText
  )
}

function render(model){
  console.log(model);
  return $(
    "div",
    render_state(model.active_states[0]), 
    render_state(model.active_states[0].parent),
    $("br"),
    render_button(
      model,
      'auto_next', 
      model.active_states[0].parent.name === "Remote Control Up" ? "auto_next" : ""
    ),
    render_button(
      model,
      model.active_states[0].parent.name === "Remote Control Up" ? "user_put down remote control" : "user_pick up remote control", 
      model.active_states[0].parent.name === "Remote Control Up" ? "user_put down remote control" : "user_pick up remote control"
    )
  );
}