YN360_web_control.html

<html>
<head>
<meta charset="UTF-8">

	<style>
	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


	/* --- https://divtable.com/table-styler/-------------------------------------------------- */
	
	
	div.blueTable {
  border: 0px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 800px;
  text-align: center;
  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  border: 0px solid #AAAAAA;
  padding: 2px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 16px;
  font-weight:bold;
  padding:10px 2px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
  background: #43526A;
  background: -moz-linear-gradient(top, #727d8f 0%, #556379 66%, #43526A 100%);
  background: -webkit-linear-gradient(top, #727d8f 0%, #556379 66%, #43526A 100%);
  background: linear-gradient(to bottom, #727d8f 0%, #556379 66%, #43526A 100%);
}
.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
}
.blueTable .tableFootStyle {
  font-size: 14px;
}
.blueTable .tableFootStyle .links {
	 text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

.divTableCell .slider {width:300px;}
.divTableCell .slidecontainer {width:300px;}

.divTableCell {vertical-align: middle;}


/*----------------------https://www.w3schools.com/howto/howto_js_rangeslider.asp---------------------*/


.slidecontainer {
  width: 250px; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 5px; /* Specified height */
  margin:12px 0px;
  margin-top:10px;
  background: #444; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.85; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */


.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 40px;
  margin:0px 0px;
  background: url('slider.png');
  background-repeat: no-repeat;
  background-size: 60px 40px;
  border: 0;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 60px;
  height: 40px;
  margin:0px 0px;
  background: url('slider.png');
  background-repeat: no-repeat;
  background-size: 60px 40px;
  border: 0;
  cursor: pointer;
}


/*------------------------------------------------------------*/
	body {display: flex; flex-direction:column; justify-content:space-between; height:100%;}

	#header, #content, #footer {text-align:center;}

	#header, #footer {width:100%;  text-align:center; padding:10px 0px; background:#CCC;}
	#header {height:24px;}
	#footer {height:20px;}
	#header h1 {font-size:24px;}

	#modeselect { background:#CCC; padding:16px; margin-bottom:16px;}
	#setConnectMode, #setRGBMode, #setToneMode, #setOctoMode {display:inline-box;padding:5px; margin:5px; border-radius:5px; background: #FFF; border: 3px solid white}
	#setConnectMode {border: 3px solid black}

	#content {max-width:1200px; max-height:600px;  padding-bottom:8px ; margin:0px auto; text-align:center; border:1px solid #999; border-radius:5px;  vertical-align:middle; }

	#connectsection {display:block; }
	#connectsection li {max-width:300px; margin: 20px auto;}
	#rgbsection, #tonesection, #octosection {display:none;}

	.slidecontainer {margin:0px 10px; width:250px; display: inline-block;height:25px;}

	/*#rgbsection .slidecontainer {width:250px};*/
	/*#tonesection .slidecontainer {width:250px};*/
	/*#octosection .slidecontainer {width:250px};*/
	

	/*.colorsection span {display: inline-block; width:50px; }*/
	/*.whitesection span {display: inline-block; width:150px; text-align:right;}*/
	/*.octosection span {}*/

    
    #rgbsection li, #tonesection li {display:flex; flex-wrap:wrap; align-items:center;justify-content: center;margin:10px 10px;}
    #rgbsection .colorsection label, #tonesection .whitesection label {width:50px; text-align:right; margin-right:10px;}
    #rgbsection input[type=number], #tonesection input[type=number], #octosection input[type=number] {width:50px;}
    #tonesection .whitesection label {width:150px}

	#colorGrid {display:block; height:60px; width:240px; background:#CCC; border:1px solid black; margin:10px auto; padding 0px;}
	#colorGrid div.row {display:block; width:240px; height:30px; margin:0px; padding 0px;}
	#colorGrid div.row div.box {display:block; float:left; width:30px; height: 30px; margin:0px; padding 0px;}

    #octosection #buttons {height:40px; margin:10px;}
    
    input[type=button] { margin:5px 5px; padding:6px 8px; font-weight:bold; background-color:#EEE; border-radius: 5px;}
    input[type=checkbox] { margin-left:20px; }
    input[type=button]:hover {background-color:#FFF;}

	</style>

</head>

<body>
    
    <div id="header"><h1>Yongnuo YN360 Controller</h1></div>

	<div id="content">
			
		<div id="modeselect"><span id="setConnectMode">Connect 🔌</span><span id="setRGBMode">Colours🎨</span><span id="setToneMode">White Tones 💡</span><span id="setOctoMode">8-Chan 🐙</span></div>
		
		
		<div id="connectsection" >
		    
		    <ul>
		        <li><input class="button" type="button" id="connectButton" value="Connect / Pair" /><input class="button" type="button" id="disconnectButton" value="Disconnect" /></li>
		        <li><p>Please note:  this page requires <a href="https://caniuse.com/web-bluetooth">Web Bluetooth</a> support to work, so you will need to use Google Chrome, Microsoft Edge or Opera.</p></li>
		    </ul>
		</div>    
		    
		<div id="rgbsection" >
		<ul>
		    <li>
		        <input id="colorPicker" type="color" style="width:250px; height:50px;"/>
		    </li>
		    <li id="redsection" class="colorsection">
		        <label>Red: </label><input id="redhex" type="number" min="0" max="255" value="0"/><div class="slidecontainer"><input type="range" min="0" max="255" value="0" class="slider" id="redhexslider"></div>
		    </li>
		    <li id="bluesection" class="colorsection">
		        <label>Blue: </label><input id="bluehex" type="number" min="0" max="255" value="0"/><div class="slidecontainer"><input type="range" min="0" max="255" value="0" class="slider" id="bluehexslider"></div>
		    </li>		    
		    <li id="greensection" class="colorsection">
		        <label>Green: </label><input id="greenhex" type="number" min="0" max="255" value="0"/><div class="slidecontainer"><input type="range" min="0" max="255" value="0" class="slider" id="greenhexslider"></div>
		    </li>		    
		   
		   
		   <li>
   		       <div id="colorGrid">
					<div class="row">
						<div class="box" onclick="setColor('#00FFFF')" style="background:#00FFFF" ></div>
						<div class="box" onclick="setColor('#FF00FF')" style="background:#FF00FF" ></div>
						<div class="box" onclick="setColor('#FFFF00')" style="background:#FFFF00" ></div>
						<div class="box" onclick="setColor('#0000FF')" style="background:#0000FF" ></div>
						<div class="box" onclick="setColor('#FF0000')" style="background:#FF0000" ></div>
						<div class="box" onclick="setColor('#00FF00')" style="background:#00FF00" ></div>
						<div class="box" onclick="setColor('#FFFFFF')" style="background:#FFFFFF" ></div>
						<div class="box" onclick="setColor('#FFFFFF')" style="background:#FFFFFF" ></div>
					</div>
					<div class="row">
						<div class="box" onclick="setColor('#000000')" style="background:#000000" ></div>
						<div class="box" onclick="setColor('#404040')" style="background:#404040" ></div>
						<div class="box" onclick="setColor('#808080')" style="background:#808080" ></div>
						<div class="box" onclick="setColor('#FFFFFF')" style="background:#FFFFFF" ></div>
						<div class="box" onclick="setColor('#FFFFFF')" style="background:#FFFFFF" ></div>
						<div class="box" onclick="setColor('#FFFFFF')" style="background:#FFFFFF" ></div>
						<div class="box" onclick="setColor('#FFFFFF')" style="background:#FFFFFF" ></div>
						<div class="box" onclick="setColor('#FFFFFF')" style="background:#FFFFFF" ></div>
					</div>
				</div>
		   </li>
		   <li>
		        <input class="button" type="button" id="colorButton" value="Send Colour" /><input class="button" type="button" id="colorFadeButton" value="Fade to Colour" /><input class="button" type="button" id="offColorButton" value="Off" /> <input class="checkbox" type="checkbox" id="liveColorCheckbox" checked value="0" /><label for="liveColorCheckbox"> Live</label>
		   </li>
		</ul>
		</div>
				
		<div id="tonesection" >
		    <ul>
		        
		        <li id="channelsection" class="">
		        <label>Channel:</label><input id="channel" type="text" maxlength="1" size="3" value="1" /> (1-8, YN360II only)
		        </li>
		        <li id="warmsection" class="whitesection">
		        <label>Warm White (3200K):</label><input id="warmhex" type="number" min="0" max="99" value="0" /><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider"></div>
		        </li>		        
		        <li id="coolsection" class="whitesection">
		        <label>Cool White (5500K):</label><input id="coolhex" type="number" min="0" max="99" value="0" /><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider"></div>
		        </li>
		        <li>
		        <input class="button" type="button" id="toneButton" value="Set Light" /><input class="button" type="button" id="toneFadeOn" value="Fade On" /><input class="button" type="button" id="toneFadeOff" value="Fade Off" /><input class="button" type="button" id="offToneButton" value="Off" /> <input class="checkbox" type="checkbox" id="liveToneCheckbox" checked value="0" /><label for="liveToneCheckbox"> Live</label>
		        </li>
		        
		        
		    </ul>
		</div>
		
		<div id="octosection" >
		    
		    <div id="buttons">
		        <input class="button octoButton" type="button" id="octoOn" value="ON" />
 		        <input class="button octoButton" type="button" id="octoWarm" value="WARM" />
 		        <input class="button octoButton" type="button" id="octoCool" value="COOL" />
 		        <input class="button octoButton" type="button" id="octoOff" value="OFF" />
 		    </div>
            <div class="divTable blueTable">
                <div class="divTableHeading">
                    <div class="divTableRow row0">
                        <div class="divTableHead col1">Channel</div>
                        <div class="divTableHead col2">Warm White (3200K)</div>
                        <div class="divTableHead col3">Cool White (5500K)</div>
                        <div class="divTableHead col4">W Val</div>
                        <div class="divTableHead col5">C Val</div>
                    </div>
                </div>
                <div class="divTableBody">
                    <div class="divTableRow row1"><div class="divTableCell col1">Ch. 1</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider1"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider1"></div></div><div class="divTableCell col4"><input id="warmhex1" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex1" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                    <div class="divTableRow row2"><div class="divTableCell col1">Ch. 2</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider2"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider2"></div></div><div class="divTableCell col4"><input id="warmhex2" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex2" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                    <div class="divTableRow row3"><div class="divTableCell col1">Ch. 3</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider3"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider3"></div></div><div class="divTableCell col4"><input id="warmhex3" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex3" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                    <div class="divTableRow row4"><div class="divTableCell col1">Ch. 4</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider4"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider4"></div></div><div class="divTableCell col4"><input id="warmhex4" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex4" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                    <div class="divTableRow row5"><div class="divTableCell col1">Ch. 5</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider5"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider5"></div></div><div class="divTableCell col4"><input id="warmhex5" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex5" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                    <div class="divTableRow row6"><div class="divTableCell col1">Ch. 6</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider6"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider6"></div></div><div class="divTableCell col4"><input id="warmhex6" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex6" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                    <div class="divTableRow row7"><div class="divTableCell col1">Ch. 7</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider7"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider7"></div></div><div class="divTableCell col4"><input id="warmhex7" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex7" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                    <div class="divTableRow row8"><div class="divTableCell col1">Ch. 8</div><div class="divTableCell  col2"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="warmhexslider8"></div></div><div class="divTableCell col3"><div class="slidecontainer"><input type="range" min="0" max="99" value="0" class="slider" id="coolhexslider8"></div></div><div class="divTableCell col4"><input id="warmhex8" type="number" maxlength="3" size="3" value="0" disabled/></div><div class="divTableCell col5"><input id="coolhex8" type="number" maxlength="3" size="3" value="0" disabled/></div></div>
                </div>
            </div>
        </div>

	  		
	</div>
    
	<div id="bottom" >
		<div style="padding:5px;">
			<hr/>
			<p>v 1.21, 11/12/20, Last Command: <span id="deviceHeartbeat"></span></p>
		</div>
		<div id="footer">
			<div><a href="https://samuelpinches.com.au">Samuel Pinches</a>, Dec 2020 </div>
		</div>
	</div>


<script>

const zeroPad = (num, places) => String(num).padStart(places, '0')

function hexToRgb(hex){
  const r = parseInt(hex.substring(1, 3), 16); //start at 1 to avoid #
  const g = parseInt(hex.substring(3, 5), 16);
  const b = parseInt(hex.substring(5, 7), 16);
  return [r, g, b];
};

function rgbToHex(r,g,b){
    hex = "#"+decimalToHex(r,2)+decimalToHex(g,2)+decimalToHex(b,2);
    return hex;
};

function decimalToHex(d, padding) {
    var hex = Number(d).toString(16);
    padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
    while (hex.length < padding) {hex = "0" + hex;}
    return hex;
}

const primaryServiceUuid = 'f000aa60-0451-4000-b000-000000000000';
const receiveCharUuid = 'f000aa63-0451-4000-b000-000000000000';
const sendCharUuid = 'f000aa61-0451-4000-b000-000000000000';

const channel = document.getElementById('channel');
const deviceHeartbeat = document.getElementById('deviceHeartbeat');

const setConnectMode = document.getElementById('setConnectMode');
const setRGBMode = document.getElementById('setRGBMode');
const setToneMode = document.getElementById('setToneMode');
const setOctoMode = document.getElementById('setOctoMode');

const connectsection = document.getElementById('connectsection');
const connectButton = document.getElementById('connectButton');
const disconnectButton = document.getElementById('disconnectButton');

const rgbsection = document.getElementById('rgbsection');
const colorPicker = document.getElementById('colorPicker');
const colorButton = document.getElementById('colorButton');
const colorFadeButton = document.getElementById('colorFadeButton');
const liveColorCheckbox = document.getElementById('liveColorCheckbox');

const tonesection = document.getElementById('tonesection');
const toneButton = document.getElementById('toneButton');
const liveToneCheckbox = document.getElementById('liveToneCheckbox');

const octosection = document.getElementById('octosection');
const octoOn = document.getElementById('octoOn');
const octoWarm = document.getElementById('octoWarm');
const octoCool = document.getElementById('octoCool');
const octoOff = document.getElementById('octoOff');
const toneFadeOn = document.getElementById('toneFadeOn');
const toneFadeOff = document.getElementById('toneFadeOff');


const coolhexsliders = [document.getElementById('coolhexslider'),
                        document.getElementById('coolhexslider1'),
                        document.getElementById('coolhexslider2'),
                        document.getElementById('coolhexslider3'),
                        document.getElementById('coolhexslider4'),
                        document.getElementById('coolhexslider5'),
                        document.getElementById('coolhexslider6'),
                        document.getElementById('coolhexslider7'),
                        document.getElementById('coolhexslider8')];
const warmhexsliders = [document.getElementById('warmhexslider'),
                        document.getElementById('warmhexslider1'),
                        document.getElementById('warmhexslider2'),
                        document.getElementById('warmhexslider3'),
                        document.getElementById('warmhexslider4'),
                        document.getElementById('warmhexslider5'),
                        document.getElementById('warmhexslider6'),
                        document.getElementById('warmhexslider7'),
                        document.getElementById('warmhexslider8')];

const coolhex = [document.getElementById('coolhex'),
                 document.getElementById('coolhex1'),
                 document.getElementById('coolhex2'),
                 document.getElementById('coolhex3'),
                 document.getElementById('coolhex4'),
                 document.getElementById('coolhex5'),
                 document.getElementById('coolhex6'),
                 document.getElementById('coolhex7'),
                 document.getElementById('coolhex8')];
const warmhex = [document.getElementById('warmhex'),
                 document.getElementById('warmhex1'),
                 document.getElementById('warmhex2'),
                 document.getElementById('warmhex3'),
                 document.getElementById('warmhex4'),
                 document.getElementById('warmhex5'),
                 document.getElementById('warmhex6'),
                 document.getElementById('warmhex7'),
                 document.getElementById('warmhex8')];
                        
                        
const redhex = document.getElementById('redhex');
const redhexslider = document.getElementById('redhexslider');
const greenhex = document.getElementById('greenhex');
const greenhexslider = document.getElementById('greenhexslider');
const bluehex = document.getElementById('bluehex');
const bluehexslider = document.getElementById('bluehexslider');

/* ----- Init -------*/

var mouseDown = false;
const allbuttons = document.querySelectorAll('input[type=button]');
allbuttons.forEach(allbuttons => allbuttons.disabled = true);
connectButton.disabled = false;

var lastRGB = [0,0,0];

/* ----- Start Functions-------*/

function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms));}

  redhexslider.onmousedown = async function(){ mouseDown = true; await updateColorSlider(); };
greenhexslider.onmousedown = async function(){ mouseDown = true; await updateColorSlider(); };
 bluehexslider.onmousedown = async function(){ mouseDown = true; await updateColorSlider(); };
  redhexslider.onmouseup   = function(){ mouseDown = false; };
greenhexslider.onmouseup   = function(){ mouseDown = false; };
 bluehexslider.onmouseup   = function(){ mouseDown = false; };

warmhexsliders[0].onmousedown = async function(){ mouseDown = true; await updateToneSliders(0); };
warmhexsliders[1].onmousedown = async function(){ mouseDown = true; await updateToneSliders(1); };
warmhexsliders[2].onmousedown = async function(){ mouseDown = true; await updateToneSliders(2); };
warmhexsliders[3].onmousedown = async function(){ mouseDown = true; await updateToneSliders(3); };
warmhexsliders[4].onmousedown = async function(){ mouseDown = true; await updateToneSliders(4); };
warmhexsliders[5].onmousedown = async function(){ mouseDown = true; await updateToneSliders(5); };
warmhexsliders[6].onmousedown = async function(){ mouseDown = true; await updateToneSliders(6); };
warmhexsliders[7].onmousedown = async function(){ mouseDown = true; await updateToneSliders(7); };
warmhexsliders[8].onmousedown = async function(){ mouseDown = true; await updateToneSliders(8); };
coolhexsliders[0].onmousedown = async function(){ mouseDown = true; await updateToneSliders(0); };
coolhexsliders[1].onmousedown = async function(){ mouseDown = true; await updateToneSliders(1); };
coolhexsliders[2].onmousedown = async function(){ mouseDown = true; await updateToneSliders(2); };
coolhexsliders[3].onmousedown = async function(){ mouseDown = true; await updateToneSliders(3); };
coolhexsliders[4].onmousedown = async function(){ mouseDown = true; await updateToneSliders(4); };
coolhexsliders[5].onmousedown = async function(){ mouseDown = true; await updateToneSliders(5); };
coolhexsliders[6].onmousedown = async function(){ mouseDown = true; await updateToneSliders(6); };
coolhexsliders[7].onmousedown = async function(){ mouseDown = true; await updateToneSliders(7); };
coolhexsliders[8].onmousedown = async function(){ mouseDown = true; await updateToneSliders(8); };
warmhexsliders[0].onmouseup = function(){ mouseDown = false; };
warmhexsliders[1].onmouseup = function(){ mouseDown = false; };
warmhexsliders[2].onmouseup = function(){ mouseDown = false; };
warmhexsliders[3].onmouseup = function(){ mouseDown = false; };
warmhexsliders[4].onmouseup = function(){ mouseDown = false; };
warmhexsliders[5].onmouseup = function(){ mouseDown = false; };
warmhexsliders[6].onmouseup = function(){ mouseDown = false; };
warmhexsliders[7].onmouseup = function(){ mouseDown = false; };
warmhexsliders[8].onmouseup = function(){ mouseDown = false; };
coolhexsliders[0].onmouseup = function(){ mouseDown = false; };
coolhexsliders[1].onmouseup = function(){ mouseDown = false; };
coolhexsliders[2].onmouseup = function(){ mouseDown = false; };
coolhexsliders[3].onmouseup = function(){ mouseDown = false; };
coolhexsliders[4].onmouseup = function(){ mouseDown = false; };
coolhexsliders[5].onmouseup = function(){ mouseDown = false; };
coolhexsliders[6].onmouseup = function(){ mouseDown = false; };
coolhexsliders[7].onmouseup = function(){ mouseDown = false; };
coolhexsliders[8].onmouseup = function(){ mouseDown = false; };

/* ----- UI Functions -------*/

resetMode = function(){
    connectsection.style.display = 'none';
    rgbsection.style.display = 'none';
    tonesection.style.display = 'none';
    octosection.style.display = 'none';
    setConnectMode.style.border = "3px solid white";
    setRGBMode.style.border = "3px solid white";
    setToneMode.style.border = "3px solid white";
    setOctoMode.style.border = "3px solid white"  ;
}

setConnectMode.onclick = function(){
    resetMode();
    connectsection.style.display = 'block';
    setConnectMode.style.border = "3px solid black";
 }; 
 
setRGBMode.onclick = function(){
    resetMode();
    rgbsection.style.display = 'block';
    setRGBMode.style.border = "3px solid black";
 }; 

setToneMode.onclick = function(){
    resetMode();
    tonesection.style.display = 'block';
    setToneMode.style.border = "3px solid black";
 }; 
 
setOctoMode.onclick = function(){
    resetMode();
    octosection.style.display = 'block';
    setOctoMode.style.border = "3px solid black";
 }; 
 
 
function showCommand(data){
    const value0 = data[0].toString(16);
    const value1 = data[1].toString(16);
    const value2 = data[2].toString(16);
    const value3 = data[3].toString(16);
    const value4 = data[4].toString(16);
    const value5 = data[5].toString(16);
    deviceHeartbeat.innerText = value5 + " " + value4+" "+value3+" "+value2+" "+value1+" "+value0;
    return;
}


 /* ----- Octo Functions -------*/

 async function octoAll(cool,warm) {
    const inputs = document.querySelectorAll('input.octoButton');
    inputs.forEach(input => input.disabled = true);
    var i;
    for (i = 0; i < 8; i++) {
      let data = new Uint8Array([0xae,0xaa,i+1,cool,warm,0x56]); 
        await sendCharacteristic.writeValue(data);
        showCommand(data);
    } 
    inputs.forEach(input => input.disabled = false);
    coolhexsliders.forEach(coolhexsliders => coolhexsliders.value = cool);
    warmhexsliders.forEach(warmhexsliders => warmhexsliders.value = warm);
 }
 
 octoOn.onclick   = async function(){await octoAll(0x63,0x63);}
 octoWarm.onclick = async function(){await octoAll(0x0, 0x63);}
 octoCool.onclick = async function(){await octoAll(0x63,0x0 );}
 octoOff.onclick  = async function(){await octoAll(0x0, 0x0 );}
 
 
 /* ----- Tone Functions -------*/

 
 toneFadeOn.onclick  = async function(){
    let start=0; let end = 8; var i; 
    var fade=[1,6,14,25,39,56,76,99]
    for (i = start; i < end; i++) { await updateTone(1,fade[i],fade[i]);}
 }
 
 toneFadeOff.onclick  = async function(){
    let start=0; let end = 8; var i; 
    var fade=[99,75,55,38,24,13,5,0];
    for (i = start; i < end; i++) { await updateTone(1,fade[i],fade[i]);}
 }
 
 
coolhex[0].onchange = function(){if(coolhex[0].value>99){coolhex[0].value = 99;} if(coolhex[0].value<0){coolhex[0].value = 0;} coolhexsliders[0].value = coolhex[0].value; updateToneSliders(0);}
warmhex[0].onchange = function(){if(warmhex[0].value>99){warmhex[0].value = 99;} if(warmhex[0].value<0){warmhex[0].value = 0;} warmhexsliders[0].value = warmhex[0].value; updateToneSliders(0);}

toneButton.onclick = async () => {
  const data = new Uint8Array([0xae,0xaa,channel.value,coolhex[0].value,warmhex[0].value,0x56]); //on
  await sendCharacteristic.writeValue(data);
  showCommand(data);
};

offToneButton.onclick = async () => {
  const data = new Uint8Array([0xae,0xee,channel.value,coolhex[0].value,warmhex[0].value,0x56]); //off
  await sendCharacteristic.writeValue(data);
  showCommand(data);
}

async function updateTone(chan,cool,warm) {
        if(chan==0){chan=1;}
        var data = new Uint8Array([0xae,0xaa,chan,cool,warm,0x56]); //on
        await sendCharacteristic.writeValue(data)
        showCommand(data);
        return;
}

async function updateToneSliders(chan=0) {
    warmhex[chan].value = warmhexsliders[chan].value;
    coolhex[chan].value = coolhexsliders[chan].value;
    if (liveToneCheckbox.checked){await updateTone(chan,coolhexsliders[chan].value,warmhexsliders[chan].value);    }
    if(mouseDown){setTimeout(await updateToneSliders(chan), 10);}
    return;
}

 /* ----- Colour Functions -------*/

 offColorButton.onclick = async () => {
  const rgb = hexToRgb(colorPicker.value)
  const data = new Uint8Array([0xae,0xee,rgb[0],rgb[1],rgb[2],0x56]); //off
  sendCharacteristic.writeValue(data);
    showCommand(data);
}

function updateColorPicker(){colorPicker.value =  rgbToHex(redhex.value,greenhex.value,bluehex.value);}
redhex.onchange = function(){if(redhex.value>255){redhex.value = 255;} redhexslider.value = redhex.value; updateColorPicker(); updateColorSlider();}
bluehex.onchange = function(){if(bluehex.value>255){bluehex.value = 255;}bluehexslider.value = bluehex.value; updateColorPicker(); updateColorSlider();}
greenhex.onchange = function(){if(greenhex.value>255){greenhex.value = 255;} greenhexslider.value = greenhex.value; updateColorPicker(); updateColorSlider(); }

colorPicker.onchange = function(){
    const rgb = hexToRgb(colorPicker.value);
    redhexslider.value = rgb[0];
    greenhexslider.value = rgb[1];
    bluehexslider.value = rgb[2];
    redhex.value = rgb[0];
    greenhex.value = rgb[1];
    bluehex.value = rgb[2];   
    updateColorSlider();
    return;
}

colorFadeButton.onclick = async function() {
    let oldR = parseInt(lastRGB[0]);
    let oldG = parseInt(lastRGB[1]);
    let oldB = parseInt(lastRGB[2]);
    let newR = parseInt(redhexslider.value);
    let newG = parseInt(greenhexslider.value);
    let newB = parseInt(bluehexslider.value);
    let diffR = newR - oldR;
    let diffG = newG - oldG;
    let diffB = newB - oldB;
    let sequenceR = [oldR,0.0,0.0,0.0,0.0,0.0,0.0,newR];
    let sequenceG = [oldG,0.0,0.0,0.0,0.0,0.0,0.0,newG];
    let sequenceB = [oldB,0.0,0.0,0.0,0.0,0.0,0.0,newB];
    var i;
    for (i = 1; i < 7; i++) {
      sequenceR[i]=sequenceR[i-1] + diffR/8.0;
      sequenceG[i]=sequenceG[i-1] + diffG/8.0;
      sequenceB[i]=sequenceB[i-1] + diffB/8.0;
    } 
    for (i = 1; i < 7; i++) {
      sequenceR[i]=Math.round(sequenceR[i]);
      sequenceG[i]=Math.round(sequenceG[i]);
      sequenceB[i]=Math.round(sequenceB[i]);
    } 
    for (i = 0; i < 8; i++) {
      await updateColor(sequenceR[i],sequenceG[i],sequenceB[i])
    } 
}

function setColor(hex){
    colorPicker.value = hex;
    rgb = hexToRgb(hex);
    redhexslider.value = rgb[0];
    greenhexslider.value = rgb[1];
    bluehexslider.value = rgb[2];
    redhex.value = rgb[0];
    greenhex.value = rgb[1];
    bluehex.value = rgb[2];    
    if(liveColorCheckbox.checked== true) {updateColor(rgb[0],rgb[1],rgb[2]);}
    return;
}

async function updateColor(r,g,b) {
    var data = new Uint8Array([0xae,0xa1,r,g,b,0x56]); //on
    lastRGB = [r,g,b];
    await sendCharacteristic.writeValue(data);
    showCommand(data);
}

async function updateColorSlider() {
    redhex.value = redhexslider.value;
    greenhex.value = greenhexslider.value;
    bluehex.value = bluehexslider.value;
    updateColorPicker();
    if(liveColorCheckbox.checked){updateColor(redhexslider.value,greenhexslider.value,bluehexslider.value) }
    if(mouseDown){setTimeout(await updateColorSlider, 10);}
    return;
}

colorButton.onclick = async () => {
    const rgb = hexToRgb(colorPicker.value)
    const data = new Uint8Array([0xae,0xa1,rgb[0],rgb[1],rgb[2],0x56]); //on
    lastRGB = [rgb[0],rgb[1],rgb[2]];
    await sendCharacteristic.writeValue(data);
    showCommand(data);
};

offColorButton.onclick = async () => {
    const rgb = hexToRgb(colorPicker.value)
    const data = new Uint8Array([0xae,0xee,rgb[0],rgb[1],rgb[2],0x56]); //off
    lastRGB = [0,0,0];
    await sendCharacteristic.writeValue(data);
    showCommand(data);
}

colorButton.onclick = async () => {
    const rgb = hexToRgb(colorPicker.value)
    const data = new Uint8Array([0xae,0xa1,rgb[0],rgb[1],rgb[2],0x56]); //on
    lastRGB = [rgb[0],rgb[1],rgb[2]];
    await sendCharacteristic.writeValue(data);
    showCommand(data);
};

offColorButton.onclick = async () => {
    const rgb = hexToRgb(colorPicker.value)
    const data = new Uint8Array([0xae,0xee,rgb[0],rgb[1],rgb[2],0x56]); //off
    lastRGB = [0,0,0];
    await sendCharacteristic.writeValue(data);
    showCommand(data);
}


/* ----- BT Communication Functions -------*/


let device, sendCharacteristic, receiveCharacteristic;
connectButton.onclick = async () => {
  device = await navigator.bluetooth.requestDevice({ filters: [{ services: [primaryServiceUuid] }] });
  const server = await device.gatt.connect();
  const service = await server.getPrimaryService(primaryServiceUuid);
  receiveCharacteristic = await service.getCharacteristic(receiveCharUuid);
  sendCharacteristic = await service.getCharacteristic(sendCharUuid);
  device.ongattserverdisconnected = disconnect;
  listen();

  setConnectMode.style.background = 'green';
  setConnectMode.style.color = 'white';
  setConnectMode.innerText = "Connected 🔌";
  allbuttons.forEach(allbuttons => allbuttons.disabled = false);

  connectButton.style.display = 'none';
  disconnectButton.style.display = 'initial';
};

const listen = () => {
  receiveCharacteristic.addEventListener('characteristicvaluechanged', (evt) => {
	const value0 = evt.target.value.getUint8(0, true).toString(16);
    const value1 = evt.target.value.getUint8(1, true).toString(16);
    const value2 = evt.target.value.getUint8(2, true).toString(16);
    const value3 = evt.target.value.getUint8(3, true).toString(16);
    const value4 = evt.target.value.getUint8(4, true).toString(16);
    const value5 = evt.target.value.getUint8(5, true).toString(16);
    deviceHeartbeat.innerText = value5 + " " + value4+" "+value3+" "+value2+" "+value1+" "+value0;
});
  receiveCharacteristic.startNotifications();  
};

disconnectButton.onclick = async () => {
  await device.gatt.disconnect();
  disconnect();
};

const disconnect = () => {
  device = null;
  receiveCharacteristic = null;
  sendCharacteristic = null;
  connected.style.display = 'none';
  connectButton.style.display = 'initial';
  disconnectButton.style.display = 'none';
};

</script>

</body>

</html>