Skip to content

Instantly share code, notes, and snippets.

@standarddeviant

standarddeviant/tsp32.html

Last active March 1, 2022 13:54
Show Gist options
  • Save standarddeviant/92322352cc413a5a50a6342bb13cc8e6 to your computer and use it in GitHub Desktop.
Save standarddeviant/92322352cc413a5a50a6342bb13cc8e6 to your computer and use it in GitHub Desktop.
Download ZIP
TSP32 UI
Raw
tsp32.html
<!doctype html>
<html>
<head>
<style>
.note_button {
background-color: #1f78b4;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
body div.ui-slider-range.ui-widget-header {
background:#1f78b4;
}
#ampenv > span { height:120px; float:left; margin:15px; }
#filenv > span { height:120px; float:left; margin:15px; }
</style>
<title>TSP32 Demo</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js" integrity="sha512-iqRVtNB+t9O+epcgUTIPF+nklypcR23H1yR1NFM9kffn6/iBhZ9bTB6oKLaGMv8JE9UgjcwfBFg/eHC/VMws+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js" integrity="sha512-NhRZzPdzMOMf005Xmd4JonwPftz4Pe99mRVcFeRDcdCtfjv46zPIi/7ZKScbpHD/V0HB1Eb+ZWigMqw94VUVaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<!--
#a6cee3, lighter alt: cce0eb
#1f78b4
#b2df8a, lighter alt: cbdeba
-->
<body bgcolor="#ffffff">
<h1>TSP32 Demo</h1>
<div class="d-flex flex-row">
<div class="d-flex flex-column"> <!-- <h2>3x3 knobs</h2> -->
<div class="d-flex flex-row">
<input type="text" value="50" class="dial0">
<input type="text" value="50" class="dial1">
<input type="text" value="50" class="dial2">
</div>
<div class="d-flex flex-row">
<input type="text" value="50" class="dial3">
<input type="text" value="50" class="dial4">
<input type="text" value="50" class="dial5">
</div>
<div class="d-flex flex-row">
<input type="text" value="50" class="dial6">
<input type="text" value="50" class="dial7">
<input type="text" value="50" class="dial8">
</div>
</div> <!-- end: 3x3 knobs -->
<div class="d-flex flex-column">
<div id="ampenv" class="d-flex flex-row">
<span>50</span>
<span>60</span>
<span>70</span>
<span>80</span>
</div>
<div id="filenv" class="d-flex flex-row">
<span>50</span>
<span>60</span>
<span>70</span>
<span>80</span>
</div>
</div>
</div> <!-- end: top row (class="d-flex flex-row") -->
<div class="d-flex flex-row">
<!-- <h2>Note Buttons</h2> -->
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<button class="note_button" id="button0">0</button>
<button class="note_button" id="button1">1</button>
<button class="note_button" id="button2">2</button>
<button class="note_button" id="button3">3</button>
</div>
<div class="d-flex flex-row">
<button class="note_button" id="button4">4</button>
<button class="note_button" id="button5">5</button>
<button class="note_button" id="button6">6</button>
<button class="note_button" id="button7">7</button>
</div>
</div> <!-- end: note buttons (flex-column) -->
<!-- <h2>2x4 knobs</h2> -->
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<input type="text" value="50" class="dial9">
<input type="text" value="50" class="dial10">
<input type="text" value="50" class="dial11">
<input type="text" value="50" class="dial12">
</div>
<div class="d-flex flex-row">
<input type="text" value="50" class="dial13">
<input type="text" value="50" class="dial14">
<input type="text" value="50" class="dial15">
<input type="text" value="50" class="dial16">
</div>
</div>
</div>
<script>
let default_fgColor = "#1f78b4";
for(ii=0; ii<17; ii++) {
let name = '.dial' + String(ii)
const dialix = ii;
console.log(name)
$(function() {
$(name).knob({
width: 90,
height: 72,
fgColor: default_fgColor,
bgColor: '#cbdeba',
angleOffset: 180+55,
angleArc: 250,
change: function(inp) {
console.log('dial(' + dialix + ') = ' + inp)
}
});
});
}
for(ii=0; ii<8; ii++) {
let name = '#button' + String(ii)
const local_ii = ii; // this is critical to having the right index...
console.log(name)
$(name).on('mousedown', (function() {
console.log('clicked! (' + String(local_ii) + ')')
}));
$(name).on('mouseup', (function() {
console.log('released! (' + String(local_ii) + ')')
}));
}
$( function() {
$( "#ampenv > span" ).each(function(ampix) {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical",
slide: function( event, ui ) {
console.log('amp(' + String(ampix) + ') = ' + String(ui.value))
}
});
});
$( "#filenv > span" ).each(function(filix) {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical",
slide: function( event, ui ) {
console.log('fil(' + String(filix) + ') = ' + String(ui.value))
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment