Niall47/slider.html

## slider.html
<!DOCTYPE html>
<html>
<style>

.rangeslider{
    width: 50%;
}

.myslider {
    -webkit-appearance: none;
    background: #FCF3CF  ;
    width: 50%;
    height: 20px;
    opacity: 2;
   }


.myslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: #34495E  ;
    width: 5%;
    height: 20px;
}


.myslider:hover {
    opacity: 1;
}

</style>
<body>

<h1>Power sliders for GPIO PWM pins</h1><br><br>
<p></p><input id="customInput" value="localhost"/>
<button id="connectButton" onClick="connect()"  > Connect </button></p>

<div class="rangeslider">
  <input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin13">
  <p>Pin13 Value: <span id="gpio13value"></span></p><br><br>
</div>

<div class="rangeslider">
  <input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin19">
  <p>Pin19 Value: <span id="gpio19value"></span></p><br><br>
</div>

<div class="rangeslider">
  <input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin18">
  <p>Pin18 Value: <span id="gpio18value"></span></p><br><br>
</div>


<div class="rangeslider">
  <input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin12">
  <p>Pin12 Value: <span id="gpio12value"></span></p><br><br>
</div>

<script>

function connect(){
  let ip = customInput.value;
  console.log(`Trying to connect to ${ip}`)
  ws = new WebSocket(`ws://${ip}:8081`);
  ws.addEventListener("open", () => {
    console.log("We are connected");
    sliderPin13.style.background = "#00FF00";
    sliderPin19.style.background = "#00FF00";
    sliderPin18.style.background = "#00FF00";
    sliderPin12.style.background = "#00FF00";
  });
  ws.addEventListener("close", () => {
    console.log("We were disconnected");
    sliderPin13.style.background = "#FF0000";
    sliderPin19.style.background = "#FF0000";
    sliderPin18.style.background = "#FF0000";
    sliderPin12.style.background = "#FF0000";
  });
};

var sliderPin13 = document.getElementById("sliderPin13");
var sliderPin19 = document.getElementById("sliderPin19");
var sliderPin18 = document.getElementById("sliderPin18");
var sliderPin12 = document.getElementById("sliderPin12");
var pin13 = document.getElementById("gpio13value");
var pin19 = document.getElementById("gpio19value");
var pin18 = document.getElementById("gpio18value");
var pin12 = document.getElementById("gpio12value");
pin13.innerHTML = sliderPin13.value;
pin19.innerHTML = sliderPin19.value;
pin18.innerHTML = sliderPin18.value;
pin12.innerHTML = sliderPin12.value;

sliderPin13.oninput = function() {
  pin13.innerHTML = this.value;
}
sliderPin19.oninput = function() {
  pin19.innerHTML = this.value;
}
sliderPin18.oninput = function() {
  pin18.innerHTML = this.value;
}
sliderPin12.oninput = function() {
  pin12.innerHTML = this.value;
}
sliderPin13.onmouseup = function() {
  var message = new Object();
  message.pin = "13";
  message.value = sliderPin13.value;
  ws.send(JSON.stringify(message));
  }
sliderPin19.onmouseup = function() {
  var message = new Object();
  message.pin = "19";
  message.value = sliderPin19.value;
  ws.send(JSON.stringify(message));
}
sliderPin18.onmouseup = function() {
  var message = new Object();
  message.pin = "18";
  message.value = sliderPin18.value;
  ws.send(JSON.stringify(message));
}
sliderPin12.onmouseup = function() {
  var message = new Object();
  message.pin = "12";
  message.value = sliderPin12.value;
  ws.send(JSON.stringify(message));
}
</script>
</body>
</html>

## slider.js
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8081 });
const Gpio = require('pigpio').Gpio;
const pin13gpio = new Gpio(13, {mode: Gpio.OUTPUT});
const pin19gpio = new Gpio(19, {mode: Gpio.OUTPUT});
const pin18gpio = new Gpio(18, {mode: Gpio.OUTPUT});
const pin12gpio = new Gpio(12, {mode: Gpio.OUTPUT});

wss.on("connection", ws => {
    console.log("New client connected");

    ws.on("message", data => {
        let input = JSON.parse(data);
        console.log(input)
        switch( parseInt(input.pin )) {
            case 13:
                pin13gpio.pwmWrite(input.value);
                break;
            case 19:
                pin19gpio.pwmWrite(input.value);
                break;
            case 18:
                pin18gpio.pwmWrite(input.value);
                break;
            case 12:
                pin12gpio.pwmWrite(input.value);
                break;
            default:
                console.log('Unexpected input')
                console.log(input);
        }
    });

    ws.on("close", () => {
        console.log("Client has disconnected");
        pin13gpio.pwmWrite(0);
        pin19gpio.pwmWrite(0);
        pin18gpio.pwmWrite(0);
        pin12gpio.pwmWrite(0);
    });

});
	<!DOCTYPE html>
	<html>
	<style>

	.rangeslider{
	width: 50%;
	}

	.myslider {
	-webkit-appearance: none;
	background: #FCF3CF ;
	width: 50%;
	height: 20px;
	opacity: 2;
	}


	.myslider::-webkit-slider-thumb {
	-webkit-appearance: none;
	cursor: pointer;
	background: #34495E ;
	width: 5%;
	height: 20px;
	}


	.myslider:hover {
	opacity: 1;
	}

	</style>
	<body>

	<h1>Power sliders for GPIO PWM pins</h1><br><br>
	<p></p><input id="customInput" value="localhost"/>
	<button id="connectButton" onClick="connect()" > Connect </button></p>

	<div class="rangeslider">
	<input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin13">
	<p>Pin13 Value: <span id="gpio13value"></span></p><br><br>
	</div>

	<div class="rangeslider">
	<input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin19">
	<p>Pin19 Value: <span id="gpio19value"></span></p><br><br>
	</div>

	<div class="rangeslider">
	<input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin18">
	<p>Pin18 Value: <span id="gpio18value"></span></p><br><br>
	</div>


	<div class="rangeslider">
	<input type="range" min="0" max="255" value="0" class="myslider" id="sliderPin12">
	<p>Pin12 Value: <span id="gpio12value"></span></p><br><br>
	</div>

	<script>

	function connect(){
	let ip = customInput.value;
	console.log(`Trying to connect to ${ip}`)
	ws = new WebSocket(`ws://${ip}:8081`);
	ws.addEventListener("open", () => {
	console.log("We are connected");
	sliderPin13.style.background = "#00FF00";
	sliderPin19.style.background = "#00FF00";
	sliderPin18.style.background = "#00FF00";
	sliderPin12.style.background = "#00FF00";
	});
	ws.addEventListener("close", () => {
	console.log("We were disconnected");
	sliderPin13.style.background = "#FF0000";
	sliderPin19.style.background = "#FF0000";
	sliderPin18.style.background = "#FF0000";
	sliderPin12.style.background = "#FF0000";
	});
	};

	var sliderPin13 = document.getElementById("sliderPin13");
	var sliderPin19 = document.getElementById("sliderPin19");
	var sliderPin18 = document.getElementById("sliderPin18");
	var sliderPin12 = document.getElementById("sliderPin12");
	var pin13 = document.getElementById("gpio13value");
	var pin19 = document.getElementById("gpio19value");
	var pin18 = document.getElementById("gpio18value");
	var pin12 = document.getElementById("gpio12value");
	pin13.innerHTML = sliderPin13.value;
	pin19.innerHTML = sliderPin19.value;
	pin18.innerHTML = sliderPin18.value;
	pin12.innerHTML = sliderPin12.value;

	sliderPin13.oninput = function() {
	pin13.innerHTML = this.value;
	}
	sliderPin19.oninput = function() {
	pin19.innerHTML = this.value;
	}
	sliderPin18.oninput = function() {
	pin18.innerHTML = this.value;
	}
	sliderPin12.oninput = function() {
	pin12.innerHTML = this.value;
	}
	sliderPin13.onmouseup = function() {
	var message = new Object();
	message.pin = "13";
	message.value = sliderPin13.value;
	ws.send(JSON.stringify(message));
	}
	sliderPin19.onmouseup = function() {
	var message = new Object();
	message.pin = "19";
	message.value = sliderPin19.value;
	ws.send(JSON.stringify(message));
	}
	sliderPin18.onmouseup = function() {
	var message = new Object();
	message.pin = "18";
	message.value = sliderPin18.value;
	ws.send(JSON.stringify(message));
	}
	sliderPin12.onmouseup = function() {
	var message = new Object();
	message.pin = "12";
	message.value = sliderPin12.value;
	ws.send(JSON.stringify(message));
	}
	</script>
	</body>
	</html>
	const WebSocket = require("ws");
	const wss = new WebSocket.Server({ port: 8081 });
	const Gpio = require('pigpio').Gpio;
	const pin13gpio = new Gpio(13, {mode: Gpio.OUTPUT});
	const pin19gpio = new Gpio(19, {mode: Gpio.OUTPUT});
	const pin18gpio = new Gpio(18, {mode: Gpio.OUTPUT});
	const pin12gpio = new Gpio(12, {mode: Gpio.OUTPUT});

	wss.on("connection", ws => {
	console.log("New client connected");

	ws.on("message", data => {
	let input = JSON.parse(data);
	console.log(input)
	switch( parseInt(input.pin )) {
	case 13:
	pin13gpio.pwmWrite(input.value);
	break;
	case 19:
	pin19gpio.pwmWrite(input.value);
	break;
	case 18:
	pin18gpio.pwmWrite(input.value);
	break;
	case 12:
	pin12gpio.pwmWrite(input.value);
	break;
	default:
	console.log('Unexpected input')
	console.log(input);
	}
	});

	ws.on("close", () => {
	console.log("Client has disconnected");
	pin13gpio.pwmWrite(0);
	pin19gpio.pwmWrite(0);
	pin18gpio.pwmWrite(0);
	pin12gpio.pwmWrite(0);
	});

	});