123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <template>
- <div id="app">
- <div id="app-wrapper">
- <div id="gadgety-view">
- <div id="left-bar">
- <div class="sequencer-wrapper" v-for="line in lines" :key='line.id'>
- <sequencer class="jsonSequencer" :id='line.id' :line='line'></sequencer>
- </div>
- <div class="icon-button" v-on:click="addLine()"></div>
- </div>
- <div class="icon-wrapper">
- <input type="number" style="width:5em;height:2em;background:red;border:none;color:white;" v-model="bpm" >
- <input type="submit" value="Send!" style="width:5em;height:2em;background:red;border:none;color:white;" v-on:click="getSequencerData()">
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import sequencer from '~/components/sequencer.vue'
- import sequencerDivided from '~/components/sequencerDivided.vue'
- import beatMenu from '~/components/beatMenu.vue'
- import moduleData from '~/assets/js/moduleData.json'
- export default {
- data() {
- return {
- lines: [],
- // https://stackoverflow.com/questions/44869287/set-object-in-data-from-a-method-in-vue-js#44869373
- // creata object in data vue
- bpm:120
- }
- },
- components: {
- sequencer,
- sequencerDivided,
- beatMenu
- },
- methods:
- {
- addLine: function (){
- this.lines.push({
- id: this.lines.length,
- slotSlider: 16,
- pulseSlider: 3,
- euclideanList: [],
- barOpacity:1,
- sequenceMilliseconds:3600,
- sampleType:1,
- sampleLengths: [285, 110, 175, 560]
- });
- },
- getSequencerData: function(){
- var modelEsp = {
- 'millis_per_slot': Math.floor(60000 / this.bpm), // bpm = 60000 / millis_per_slot
- 'lines': this.lines.map(function(line) {
- return line.euclideanList.reduce(function(acc, x) { return acc + x.toString(); }, '');
- })
- };
- var xhr = new XMLHttpRequest();
- xhr.open('POST', '/play.ws');
- xhr.onreadystatechange = function () {
- if(xhr.readyState === 4 && xhr.status === 200) {
- //self.commits = JSON.parse(xhr.responseText);
- console.log("Sent", xhr.responseText);
- }
- };
- xhr.setRequestHeader('Content-Type', 'application/json');
- console.log("Sending", modelEsp);
- xhr.send(JSON.stringify(modelEsp));
- }
- }
- }
- </script>
- <style>
- #app{
- height:100vh;
- background-color: cornflowerblue;
- }
- #app-wrapper{
- height: 100%;
- background: brown;
- display: flex;
- }
- #left-bar{
- flex:1 1 3em;
- background-color: crimson;
- display: flex;
- flex-wrap: wrap;
- }
- .icon-button{
- width: 3em;
- height: 3em;
- background: white;
- background-image: url("~/assets/img/add.png");
- background-repeat: no-repeat;
- background-position: center;
- }
- .sequencer-wrapper{
- flex:1 1 100%;
- }
- #gadgety-view{
- flex: 1 1 auto;
- top:0;
- }
- </style>
|