GMAB Periscope Station - Start by Looking

Binoculars Off.jpg

Binoculars On.jpg

Headphone Down.jpg

Headphone Up.jpg

SketchSystems.spec

GMAB Periscope Station - Start by Looking
  Binoculars Off*
    Video Stopped
    user_enter binoculars -> Binoculars On
  Binoculars On
    user_leave binoculars -> Binoculars Off
    Video At Start*
      auto_timer -> Video Playing
    Video Playing
      auto_timer -> Video At End
    Video At End
      auto_timer -> Video At Start

SketchSystems_prototype.js

function render_video(model){
  let video_state = model.active_states[0];
  if (video_state.image_url) {
    return $("img", 
      {
        src: model.active_states[0].image_url, 
        style: {
          width: "100px",
          margin: "1rem"
        }
      }
    );
  }
  else {
    return $(
      "div", 
      {
        style: {
          display: 'inline-block',
          width: "10rem",
          margin: '1rem',
        }
      },
      video_state.name
    );    
  }
}

function render_headphone(model){
  let headphone_state = model.active_states[0].parent;
  if (headphone_state.image_url) {
    return $("img", 
      {
        src: headphone_state.image_url, 
        style: {
          width: "100px",
          margin: "1rem"
        }
      }
    );
  }
  return $(
    "div",
    {
      style: {
        display: 'inline-block',
        width: "10rem",
        margin: '1rem',
      }
    },
    headphone_state.name
  );
}

function render(model){
  console.log(model);
  return $("div",
           render_video(model), 
           render_headphone(model),
           $("br"),
           $('button', {
               style: {
                 display: 'inline-block',
                 width: "100px",
                 margin: '1rem',
               },
               onClick: function(){ model.emit(model.active_states[0].transitions[0].event_name) }
             },
             model.active_states[0].transitions ? model.active_states[0].transitions[0].event_name : ""
           ),
           $('button', {
               style: {
                 display: 'inline-block',
                 width: "10rem",
                 margin: '1rem',
               },
               onClick: function(){ model.emit(model.active_states[0].parent.transitions[0].event_name) }
             },
             model.active_states[0].parent.transitions[0].event_name
           ),
  );
}

Video At End.jpg

Video At Start.jpg

Video Playing.jpg

Video Stopped.jpg