Note style customization in Cambiare.

ltgcgo · Sep 20, 2023 · ba5991d · ba5991d
1 parent 937f904
commit ba5991d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/cambiare_demo/index.js b/src/cambiare_demo/index.js
@@ -97,6 +97,7 @@ self.gDemo = async function ({file, id, artist, title}) {
 };
 self.gStyle = async function (type) {
 	visualizer.style = type;
+	Alpine.store("noteStyle", type);
 };
 
 const propsMid = JSON.parse('{"extensions":[".mid",".MID",".kar",".KAR",".syx",".SYX",".s7e",".S7E",".mdat",".MDAT"],"startIn":"music","id":"midiOpener","description":"Open a MIDI file"}'),

diff --git a/test/cambiare.htm b/test/cambiare.htm
@@ -34,7 +34,7 @@
 			</template>
 			<div class="column"></div>
 		</div>
-		<div class="columns is-multiline is-mobile is-vcentered" x-data="{ranges:[['port1','16ch'],['compact','Compact'],['port2','32ch'],['port4','64ch']],ports:[0,1,2,3,4,5,6,7],letters:'ABCDEFGH',max:8,size:{port1:1,compact:1,port2:2,port4:4}}">
+		<div class="columns is-multiline is-mobile is-vcentered" x-data="{ranges:[['port1','16ch'],['compact','Compact'],['port2','32ch'],['port4','64ch']],ports:[0,1,2,3,4,5,6,7],letters:'ABCDEFGH',max:8,size:{port1:1,compact:1,port2:2,port4:4},styles:[['block','Block'],['comb','Comb'],['piano','Piano'],['line','Line']]}">
 			<div class="column column-option"><b>Display mode</b></div>
 			<template x-for="range in ranges">
 				<div class="column column-option column-button" @click="gRange(range[0])" x-text="range[1]" :active="($store.showRange||'port1')==range[0]?'true':'false'"></div>
@@ -43,6 +43,10 @@
 			<template x-for="port in ports">
 				<div class="column column-option column-button" @click="gPort(port)" x-text="letters[port]" :active="($store.startPort||0)==port?'true':'false'"></div>
 			</template>
+			<div class="column column-option"><b>Note style</b></div>
+			<template x-for="style in styles">
+				<div class="column column-option column-button" @click="gStyle(style[0])" x-text="style[1]" :active="($store.noteStyle||'block')==style[0]?'true':'false'"></div>
+			</template>
 			<div class="column"></div>
 		</div>
 		<div class="columns is-multiline is-mobile is-vcentered">