<body class="radial">

  <div class="radial grid">

    <main role="main">

    <section class="centered">
      <h1 class="title">Watchout Websockets Controller</h1>
      <p>open the console to see the messages being sent by the controller</p>
      <nav class="controller">
        <ul class="js-handle">
          <li onclick="run('HSD')"><a href=""><span class="genericon genericon-play"></span></a></li>
              <li onclick="halt('HSD')"><a href=""><span class="genericon genericon-pause"></span></a></li>
          <li onclick="kill('HSD')"><a href=""><span class="genericon genericon-stop"></span></a></li>
        </ul>
      </nav>

    <nav class="chapters">
      <ul> 
        <li onclick="gotoControlCue('HSD', 'HSD_CH1')" class="btn">HSD_CH1</li>
        <li onclick="gotoControlCue('HSD', 'HSD_CH2')" class="btn">HSD_CH2</li>
        <li onclick="gotoControlCue('HSD', 'HSD_CH3')" class="btn">HSD_CH3</li>
        <li onclick="gotoControlCue('HSD', 'HSD_CH4')" class="btn">HSD_CH4</li>
      </ul>
    </nav>

    </section>


    </main>

  </div>
</body>
@import url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2886/genericons.css');

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    height: 100%;
}
body {
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0;
    min-width: 260px;
    overflow-x: hidden;
    width: 100%;
    user-select: none;
    -webkit-touch-callout: none;
    font-family: 'Open Sans', sans-serif;
}

.content {
  margin: 0 auto;
  width: 90%;
  max-width: 1280px;
}

.centered {
  text-align: center;
}

@mixin radial-gradient($from, $to) {
	background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $from), color-stop(100%, $to));
	background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%);
	background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%);
	background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%);
	background: radial-gradient(center, circle cover, $from 0%, $to 100%);
	background-color: $from;
}

.radial {
	@include radial-gradient(rgb(7, 61, 162), #000);
	width: 100%;
	height: 100%;
	position: absolute;
}


.grid {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2886/grid.png) no-repeat bottom center;
  background-size: contain;
  height: 100%;
}

main[role='main'] {
  margin: 7% 7% 0 7%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  .title {
      margin-top: 1.6em;
      margin-bottom: 0;
      color: white;
  }
  p {
    color: white;
    margin-top: .5em;
    margin-bottom: 2em;
  }
}

.controller {
	border-top: 2px solid rgb(26, 160, 215);
	border-bottom: 2px solid rgb(26, 160, 215);
  font-size: 2em;
	ul {
		padding: .5em 0;
		margin: 0;
	}
	li {
		display: inline-block;
		list-style: none;
		padding: 0 .5em;
		// &.active  {
		// 	background-color: rgb(26, 160, 215);
		// 	border: 3px solid rgb(26, 160, 215);
		// 	color: $white;
		// }
		a {
			background-color: transparent;
			// border: 2px solid rgb(26, 160, 215);
			// border-radius: 50%;
			color: rgb(26, 160, 215);
			padding: 11px 9px;
			text-align: center;
			cursor: pointer;
      text-decoration: none;
			// &:hover, &.active {
			// 	background-color: rgb(26, 160, 215);
			// 	border: 3px solid rgb(26, 160, 215);
			// 	color: $white;
			// }
			// &.active  {
			// 	background-color: rgb(26, 160, 215);
			// 	border: 3px solid rgb(26, 160, 215);
			// 	color: white;
			// }
      .genericon {
        font-size: 2em;
      }
		}
	}
}

.chapters {
	font-weight: normal;
	margin: 1em auto;
	width: 70%;
  ul {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
    }
  }

	// .active i, a:hover i {
	// 	background-color: rgb(26, 160, 215);
	// 	border: 2px solid rgb(26, 160, 215);
	// 	color: $white;
	// 	@include min-screen(660px) {
	// 		border: 3px solid rgb(26, 160, 215);
	// 	}
	// }
	.btn {
		font-size: 2em;
		cursor: pointer;
	}

}

.btn {
	font-size: 2em;
  background: rgb(7, 61, 163);
  border-radius: 48px;
	box-shadow: 0px 10px 5px 0px rgba(0,0,0,.1);
	color: white;
	display: block;
	margin: 1em auto;
  padding: .78em;
  vertical-align: middle;
	transition: all 0.3s ease;
	&:hover, &.active {
		background: white;
		color: rgb(7, 61, 163);;
	}
}

    // set the IP address of the machine you wish to connect to
    // watchout listens on the port 3040
    //var host = "ws://10.172.15.244:3040";
    var host = "ws://echo.websocket.org";
    var socket = new WebSocket(host);
    var states = { HSD: false, D48V: false };

    socket.onopen = function () {
        console.log('Socket Status: ' + socket.readyState + ' (open)');
    }

    socket.onmessage = function (msg) {
        console.log('Received: ' + msg.data);
    }

    socket.onclose = function () {
        console.log('Socket Status: ' + socket.readyState + ' (Closed)');
    }

    function send(message){

        try{
            var response  = socket.send(message);
            console.log("Sent : "+message);

        } catch(exception){
            console.log(exception);
        }
    }

    function toggle(timeline) {

        if(states[timeline] == true) {
            halt(timeline);
        } else {
            run(timeline);
        }
    }

    function kill(timeline) {
        send('kill \"'+timeline+'\"\n');
        states[timeline] = false;
    }

    function run(timeline) {
        send('run \"'+timeline+'\"\n');
        states[timeline] = true;
    }

    function halt(timeline) {
        send('halt \"'+timeline+'\"\n');
        states[timeline] = false;
    }

    function gotoControlCue(timeline, command) {
        send('gotoControlCue \"'+command+'\" false '+timeline+'\n');
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.