fillotassi/Gadgety_Euclidean_Sequencer_Web_Interface
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add sampleType selection

Browse source
This commit is contained in:
fillotassi 2018-09-18 20:11:38 +02:00
parent 20327fcfa6
commit 8e6a2a3e46
3 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/beat.vue
View file

@ -4,7 +4,7 @@
<!--- trovare modo per prevenire scrittura di input--> <!--- trovare modo per prevenire scrittura di input-->
<div class="division-wrapper"> <div class="division-wrapper">
<div class="suddivisione-wrapper" v-for="j in nDivisioni" :key='j' :id="'suddivisione'+j" > <div class="suddivisione-wrapper" v-for="j in nDivisioni" :key='j' :id="'suddivisione'+j" >
<div class="suddivisione-content" :style="{'background-color': colore, 'width': calculatePulseSize(1) }"></div> <div class="suddivisione-content" :style="{'background-color': colore, 'width': calculatePulseSize(line.sampleType) }"></div>
</div> </div>
</div> </div>
</div> </div>

23
components/sequencer.vue
View file

@ -6,7 +6,12 @@
<div class="sequence-options"> <div class="sequence-options">
<div class="option-icon" id="icon-slots"></div> <div class="option-icon" id="icon-slots"></div>
<div class="option-icon" id="icon-euclid"></div> <div class="option-icon" id="icon-euclid"></div>
<div class="option-icon" id="icon-sample"></div> <div class="sampleType-wrapper">
<div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(1)"></div>
<div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(2)"></div>
<div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(3)"></div>
<div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(4)"></div>
</div>
<div class="option-icon" id="icon-delete"></div> <div class="option-icon" id="icon-delete"></div>
</div> </div>
<div class="sequence-bar"> <div class="sequence-bar">
@ -80,6 +85,12 @@
this.barOpacity = 1; this.barOpacity = 1;
console.log("fullOPacity"); console.log("fullOPacity");
}, },
makeFirstChild: function (){
},
selectSampleType: function (number){
this.line.sampleType = number;
console.log(number);
},
bjorklund: function (slots, pulses) { bjorklund: function (slots, pulses) {
var pattern = [], var pattern = [],
@ -221,7 +232,7 @@
position: absolute; position: absolute;
margin-left:3em; margin-left:3em;
display: flex; display: flex;
overflow-x: auto; /*overflow-x: auto;*/
} }
.sequence-bar{ .sequence-bar{
@ -247,6 +258,14 @@
display: none; display: none;
} }
.sampleType-wrapper > .option-icon:not(:nth-child(1)){
display: none;
}
.sampleType-wrapper:hover > .option-icon{
display: block;
}
.sequencer{ .sequencer{
display:flex; display:flex;
} }

3
pages/index.vue
View file

@ -46,7 +46,8 @@ export default {
pulseSlider: 3, pulseSlider: 3,
euclideanList: [], euclideanList: [],
barOpacity:1, barOpacity:1,
sequenceMilliseconds:3600 sequenceMilliseconds:3600,
sampleType:1
}); });
}, },
getSequencerData: function(){ getSequencerData: function(){