chabad360/index.html

## index.html
<!DOCTYPE html>
<head>
  <style>
    body {
      height:100vh;
    }
    * {
      margin:0px;
    }
    .cliphead {
      width:100%;
      background-color: grey;
      min-height: 20%;
      box-sizing: border-box;
    }
    #cliphead {
      padding-top: 10%;
      /* padding-right:-10%; */
      max-width: 80%;
      margin-left:10%;
    }
    #playpause,#back {
      width:20%;
      min-height:80%;
    }
    .time {
      font-family: monospace;
      min-width: 60%;
      /* min-height:80%; */
      /* padding-top:34%; */
      /* margin: top -40%, !important; */
      text-align: center;
      box-sizing: border-box;
      background-color: grey;
      display:inline-block;
      font-size: 5em;
    }
  </style>
  </head>
<body>
  <div class="cliphead">
  <input id="cliphead" style="width:100%" type="range" min="0" max="1" onchange="funcs.position(this.value);">
  </div>
  <button id="back" type="button" onclick="funcs.back();">Back 30s</button><div class="time"><span id="time">-0:0:0.000</span></div><button id="playpause" type="button" onclick="funcs.playPause();">pause</button>

  <script type="module">
    const time = document.getElementById("time")
    const cliphead = document.getElementById("cliphead")
    const playpause = document.getElementById("playpause")
    import jp from 'https://cdn.jsdelivr.net/npm/jsonpath@1.1.1/+esm'

    const resolume = new WebSocket("ws://192.168.1.125:7003/api/v1");
    let params = []
    let selected = {}
    let pos = 0

    function subscribe(param) {
      params.push(param)
      let action = {
        action: "subscribe",
        parameter: "/parameter/by-id/"+param
      }
      resolume.send(JSON.stringify(action))
    }

    function unsubscribe(param) {
      let action = {
        action: "unsubscribe",
        parameter: "/parameter/by-id/"+param
      }
      resolume.send(JSON.stringify(action))
    }

    function unsubscribeAll() {
      params = params.filter((v) => {
        unsubscribe(v)
        return false
      })
    }

    function set(param, value) {
      let action = {
        action: "set",
        parameter: "/parameter/by-id/"+param,
        value: value
      }
      resolume.send(JSON.stringify(action))
    }

    function trigger(path) {
      let action = {
        action: "trigger",
        parameter: path
      }
      resolume.send(JSON.stringify(action))
    }

    function pause() {
      set(selected.transport.controls.playdirection.id, 1)
      playpause.innerText = 'play'
    }
    function play() {
      set(selected.transport.controls.playdirection.id, 2)
      playpause.innerText = 'pause'
    }
    function playPause() {
      if (playpause.innerText == 'pause') {
        pause()
      } else {
        play()
      }
    }

    function back() {
      position(pos - 30000)
    }

    function position(value) {
      value = Math.trunc(value)
      set(selected.transport.position.id, value)
    }

    resolume.addEventListener("message" ,(ev) => {
      let data = JSON.parse(ev.data);
      if (data.type == "parameter_update") {
        if (data.path.includes("/position")) {
          let d = new Date(data.max-data.value);
          time.innerText = "-"+d.getUTCHours()+":"+d.getUTCMinutes()+":"+d.getUTCSeconds()+"."+d.getUTCMilliseconds();
          if (cliphead !== document.activeElement) {
            cliphead.value = data.value;
            pos = data.value;
          }
        }
      } else if (data.layers != null) {
        let clip = jp.query(data, '$.layers..clips[?(@.selected.value==true)]')[0]
        console.log(clip)
        unsubscribeAll()
        if (clip != null) {
          selected = clip;
          if (clip.transport != undefined) {
            cliphead.max = clip.transport.position.max;
            subscribe(clip.transport.position.id);
          }
        }
      } else {
        console.log(JSON.parse(ev.data))
      }
    })
    window.funcs = {playPause, position, back}
  </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<style>
	body {
	height:100vh;
	}
	* {
	margin:0px;
	}
	.cliphead {
	width:100%;
	background-color: grey;
	min-height: 20%;
	box-sizing: border-box;
	}
	#cliphead {
	padding-top: 10%;
	/* padding-right:-10%; */
	max-width: 80%;
	margin-left:10%;
	}
	#playpause,#back {
	width:20%;
	min-height:80%;
	}
	.time {
	font-family: monospace;
	min-width: 60%;
	/* min-height:80%; */
	/* padding-top:34%; */
	/* margin: top -40%, !important; */
	text-align: center;
	box-sizing: border-box;
	background-color: grey;
	display:inline-block;
	font-size: 5em;
	}
	</style>
	</head>
	<body>
	<div class="cliphead">
	<input id="cliphead" style="width:100%" type="range" min="0" max="1" onchange="funcs.position(this.value);">
	</div>
	<button id="back" type="button" onclick="funcs.back();">Back 30s</button><div class="time"><span id="time">-0:0:0.000</span></div><button id="playpause" type="button" onclick="funcs.playPause();">pause</button>

	<script type="module">
	const time = document.getElementById("time")
	const cliphead = document.getElementById("cliphead")
	const playpause = document.getElementById("playpause")
	import jp from 'https://cdn.jsdelivr.net/npm/jsonpath@1.1.1/+esm'

	const resolume = new WebSocket("ws://192.168.1.125:7003/api/v1");
	let params = []
	let selected = {}
	let pos = 0

	function subscribe(param) {
	params.push(param)
	let action = {
	action: "subscribe",
	parameter: "/parameter/by-id/"+param
	}
	resolume.send(JSON.stringify(action))
	}

	function unsubscribe(param) {
	let action = {
	action: "unsubscribe",
	parameter: "/parameter/by-id/"+param
	}
	resolume.send(JSON.stringify(action))
	}

	function unsubscribeAll() {
	params = params.filter((v) => {
	unsubscribe(v)
	return false
	})
	}

	function set(param, value) {
	let action = {
	action: "set",
	parameter: "/parameter/by-id/"+param,
	value: value
	}
	resolume.send(JSON.stringify(action))
	}

	function trigger(path) {
	let action = {
	action: "trigger",
	parameter: path
	}
	resolume.send(JSON.stringify(action))
	}

	function pause() {
	set(selected.transport.controls.playdirection.id, 1)
	playpause.innerText = 'play'
	}
	function play() {
	set(selected.transport.controls.playdirection.id, 2)
	playpause.innerText = 'pause'
	}
	function playPause() {
	if (playpause.innerText == 'pause') {
	pause()
	} else {
	play()
	}
	}

	function back() {
	position(pos - 30000)
	}

	function position(value) {
	value = Math.trunc(value)
	set(selected.transport.position.id, value)
	}

	resolume.addEventListener("message" ,(ev) => {
	let data = JSON.parse(ev.data);
	if (data.type == "parameter_update") {
	if (data.path.includes("/position")) {
	let d = new Date(data.max-data.value);
	time.innerText = "-"+d.getUTCHours()+":"+d.getUTCMinutes()+":"+d.getUTCSeconds()+"."+d.getUTCMilliseconds();
	if (cliphead !== document.activeElement) {
	cliphead.value = data.value;
	pos = data.value;
	}
	}
	} else if (data.layers != null) {
	let clip = jp.query(data, '$.layers..clips[?(@.selected.value==true)]')[0]
	console.log(clip)
	unsubscribeAll()
	if (clip != null) {
	selected = clip;
	if (clip.transport != undefined) {
	cliphead.max = clip.transport.position.max;
	subscribe(clip.transport.position.id);
	}
	}
	} else {
	console.log(JSON.parse(ev.data))
	}
	})
	window.funcs = {playPause, position, back}
	</script>
	</body>
	</html>