123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <template>
- <div id="app">
- <h2 id="titolone" class="subtitle" style="background:beige;position:absolute;bottom:0">
- Second attempt at building a web interface for ESP8266
- </h2>
- <div style="margin-top:1em;margin-bottom:1em;display:flex;width:100%;height:3em;background:#3333333;align-items:center;justify-content:center">
- <div>
- <div class="icon-button" style="flex:1 1 auto" v-on:click="addLine()">
- <img style="margin:auto;" src="~/assets/img/add.png">
- </div>
- </div>
- </div>
- <div v-for="line in lines" :key='line.id'>
- <sequencer class="jsonSequencer" :id='line.id' :line='line'></sequencer>
- </div>
- <div class="icon-wrapper">
- <div class="icon-button">
- <img style="margin:auto;" src="~/assets/img/barrier.png">
- </div>
- <div class="icon-button">
- <img style="margin:auto;" src="~/assets/img/pixel.png">
- </div>
- <div class="icon-button">
- <img style="margin:auto;" src="~/assets/img/squares.png">
- </div>
- <div class="icon-button">
- <img style="margin:auto;" src="~/assets/img/bell.png">
- </div>
- <input type="submit" value="Send!" style="width:5em;height:2em;background:red;border:none;color:white;" v-on:click="getSequencerData()">
- </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
- }
- },
- components: {
- sequencer,
- sequencerDivided,
- beatMenu
- },
- methods:
- {
- addLine: function (){
- this.lines.push({
- id: this.lines.length,
- slotSlider: 16,
- pulseSlider: 3,
- euclideanList: [],
- controlIsDisplayed: false });
- },
- getSequencerData: function(){
- var modelEsp = {
- 'millis_per_slot': 500, // 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("Recv", xhr.responseText);
- }
- };
- xhr.setRequestHeader('Content-Type', 'application/json');
- xhr.send(JSON.stringify(modelEsp));
- }
- }
- }
- </script>
- <style>
- .icon-button{
- display:flex;
- background-color:red;
- width:3em;
- height:3em;
- border-radius:3em;
- margin:0.2em;
- }
- .icon-wrapper{
- display:flex;
- }
- </style>
|