Skip to content

Instantly share code, notes, and snippets.

@wismer

wismer/index.html

Created February 22, 2018 18:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wismer/e3f4dfa9ed9b938e8c6cdbd7886dd289 to your computer and use it in GitHub Desktop.
Save wismer/e3f4dfa9ed9b938e8c6cdbd7886dd289 to your computer and use it in GitHub Desktop.
Download ZIP
arduino thingie
Raw
index.html
<html>
<form method='post'>
<div id='container'>
<div>
<input name='one' orient='vertical' id='channel-one' type='range' min='1' max='255'>
</div>
<div>
<input name='two' orient='vertical' id='channel-two' type='range' min='1' max='255'>
</div>
<div>
<input name='three' orient='vertical' id='channel-three' type='range' min='1' max='255'>
</div>
<div>
<input name='four' orient='vertical' id='channel-four' type='range' min='1' max='255'>
</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<button type='submit'>Submit</button>
</form>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type=range][orient=vertical] {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}
.channel {
font-size: 5em;
}
body {
font-family: sans-serif;
padding: 40px;
}
#container {
display: grid;
grid-template-rows: 2fr;
text-align: center;
font-size: 6em;
grid-template-columns: repeat(4, 2fr);
}
</style>
<script>
function onChange(event) {
console.log(event);
}
var input = document.querySelector('#channel-one');
/* input.addEventListener('change', function(e) {
let url = `localhost:PORT/?`
fetch('localhost:PORT/')
}); */
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment