dthtvwls/app.js

## app.js
const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const socket = require('socket.io')
const io = socket(server)

let config = {
  servers: ['example.com', 'example.net'],
  subtrahend: 0
}

io.on('connection', socket => {
  socket.send(config)

  socket.on('message', data => {
    config = data
    socket.send(config)
  })
})

// CORS middleware
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'PUT')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})

// JSON body parser
app.use(express.json())

app.get('/crossfader', (req, res) => res.json(config))

app.put('/crossfader', (req, res) => {
  config = req.body
  res.end()
})

app.use(express.static('public'))

const port = process.env.PORT || 3000
server.listen(port, () => console.log(`Example app listening on port ${port}!`))

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Crossfader</title>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    <canvas id="chart"></canvas>
    <div id="controls">
      <input id="left-server"><input id="right-server"><br>
      <input id="subtrahend" type="range" max="256">
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/vendor/Chart-2.3.0.min.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>

## main.js
(function () {
  'use strict'

  const leftServer = document.getElementById('left-server')
  const rightServer = document.getElementById('right-server')
  const subtrahend = document.getElementById('subtrahend')

  const makeColor = () => {
    const octet = () => Math.floor(Math.random() * 16).toString(16)
    return '#' + octet() + octet() + octet()
  }

  const chart = new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: {
      datasets: [{
        backgroundColor: [makeColor(), makeColor()],
        data: [0, 0],
        label: 'weight'
      }],
      labels: ['', '']
    },
    options: {
      legend: { display: false },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            suggestedMax: 256
          }
        }]
      }
    }
  })

  const socket = io()

  socket.on('message', data => {
    chart.data.datasets[0].data = [256 - data.subtrahend, data.subtrahend]
    chart.update()

    if (leftServer !== document.activeElement) leftServer.value = data.servers[0]
    if (rightServer !== document.activeElement) rightServer.value = data.servers[1]
    if (subtrahend !== document.activeElement) subtrahend.value = data.subtrahend

    leftServer.disabled = data.subtrahend !== 256
    rightServer.disabled = data.subtrahend !== 0
  })

  const put = () => {
    socket.send({
      servers: [leftServer.value, rightServer.value],
      subtrahend: parseInt(subtrahend.value)
    })
  }

  leftServer.addEventListener('blur', put)
  rightServer.addEventListener('blur', put)
  subtrahend.addEventListener('input', put)
  subtrahend.addEventListener('change', put)
})()
	const express = require('express')
	const app = express()
	const http = require('http')
	const server = http.createServer(app)
	const socket = require('socket.io')
	const io = socket(server)

	let config = {
	servers: ['example.com', 'example.net'],
	subtrahend: 0
	}

	io.on('connection', socket => {
	socket.send(config)

	socket.on('message', data => {
	config = data
	socket.send(config)
	})
	})

	// CORS middleware
	app.use((req, res, next) => {
	res.header('Access-Control-Allow-Origin', '*')
	res.header('Access-Control-Allow-Methods', 'PUT')
	res.header('Access-Control-Allow-Headers', 'Content-Type')
	next()
	})

	// JSON body parser
	app.use(express.json())

	app.get('/crossfader', (req, res) => res.json(config))

	app.put('/crossfader', (req, res) => {
	config = req.body
	res.end()
	})

	app.use(express.static('public'))

	const port = process.env.PORT \|\| 3000
	server.listen(port, () => console.log(`Example app listening on port ${port}!`))
	<!DOCTYPE html>
	<html>
	<head>
	<title>Crossfader</title>
	<link rel="stylesheet" href="/css/main.css">
	</head>
	<body>
	<canvas id="chart"></canvas>
	<div id="controls">
	<input id="left-server"><input id="right-server"><br>
	<input id="subtrahend" type="range" max="256">
	</div>
	<script src="/socket.io/socket.io.js"></script>
	<script src="/js/vendor/Chart-2.3.0.min.js"></script>
	<script src="/js/main.js"></script>
	</body>
	</html>
	(function () {
	'use strict'

	const leftServer = document.getElementById('left-server')
	const rightServer = document.getElementById('right-server')
	const subtrahend = document.getElementById('subtrahend')

	const makeColor = () => {
	const octet = () => Math.floor(Math.random() * 16).toString(16)
	return '#' + octet() + octet() + octet()
	}

	const chart = new Chart(document.getElementById('chart'), {
	type: 'bar',
	data: {
	datasets: [{
	backgroundColor: [makeColor(), makeColor()],
	data: [0, 0],
	label: 'weight'
	}],
	labels: ['', '']
	},
	options: {
	legend: { display: false },
	scales: {
	yAxes: [{
	ticks: {
	beginAtZero: true,
	suggestedMax: 256
	}
	}]
	}
	}
	})

	const socket = io()

	socket.on('message', data => {
	chart.data.datasets[0].data = [256 - data.subtrahend, data.subtrahend]
	chart.update()

	if (leftServer !== document.activeElement) leftServer.value = data.servers[0]
	if (rightServer !== document.activeElement) rightServer.value = data.servers[1]
	if (subtrahend !== document.activeElement) subtrahend.value = data.subtrahend

	leftServer.disabled = data.subtrahend !== 256
	rightServer.disabled = data.subtrahend !== 0
	})

	const put = () => {
	socket.send({
	servers: [leftServer.value, rightServer.value],
	subtrahend: parseInt(subtrahend.value)
	})
	}

	leftServer.addEventListener('blur', put)
	rightServer.addEventListener('blur', put)
	subtrahend.addEventListener('input', put)
	subtrahend.addEventListener('change', put)
	})()