Map Projection

0 At Start.jpg

0 Ended.jpg

0 Playing.jpg

1 At Start.jpg

1 Ended.jpg

1 Playing.jpg

2 At Start.jpg

2 Ended.jpg

2 Playing.jpg

3 At Start.jpg

3 Ended.jpg

3 Playing.jpg

SketchSystems.spec

Map Projection
  Welcome Animation
    button press -> Map Animation 1
    0 At Start
      timer -> 0 Playing
    0 Playing
      timer -> 0 Ended
    0 Ended
      timer -> 0 At Start
  Map Animation 1
    button press -> Map Animation 2
    1 At Start
      timer -> 1 Playing
    1 Playing
      timer -> 1 Ended
    1 Ended
      time out -> Welcome Animation
  Map Animation 2
    button press -> Map Animation 3
    2 At Start
      timer -> 2 Playing
    2 Playing
      timer -> 2 Ended
    2 Ended
      time out -> Welcome Animation
  Map Animation 3
    button press -> Map Animation 1
    3 At Start
      timer -> 3 Playing
    3 Playing
      timer -> 3 Ended
    3 Ended
      time out -> Welcome Animation

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
           ),
  );
}