okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

room dimension settings will now change in real time

Browse source
This commit is contained in:
booploops 2021-12-30 02:46:45 -08:00
parent d5c393c071
commit 193e0a9690
1 changed files with 39 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/renderer/views/components/spatial-properties.ejs
View file

@ -1,31 +1,31 @@
<script type="text/x-template" id="spatial-properties"> <script type="text/x-template" id="spatial-properties">
<div class="modal-fullscreen spatialproperties-panel"> <div class="modal-fullscreen spatialproperties-panel">
<div class="modal-window"> <div class="modal-window" v-if="ready">
<div class="modal-header"> <div class="modal-header">
<div class="modal-title">Spatial Properties</div> <div class="modal-title">Spatial Properties</div>
<button class="close-btn" @click="app.resetState()"></button> <button class="close-btn" @click="close()"></button>
</div> </div>
<div class="modal-content"> <div class="modal-content">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label> <label>
Width Width
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;" <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.room_dimensions.width" step="1"/> v-model="room_dimensions.width" step="1"/>
</label> </label>
<label> <label>
Height Height
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;" <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.room_dimensions.height" step="1"/> v-model="room_dimensions.height" step="1"/>
</label> </label>
<label> <label>
Depth Depth
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;" <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.room_dimensions.depth" step="1"/> v-model="room_dimensions.depth" step="1"/>
</label> </label>
<label v-if="!app.cfg.audio.normalization"> <label v-if="!app.cfg.audio.normalization">
Gain Gain
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;" <input type="number" min="0" @input="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/> v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
</label> </label>
</div> </div>
@ -41,7 +41,7 @@
<div class="col"> <div class="col">
<label> <label>
Up Up
<select class="md-select" @change="setRoom()" <select class="md-select" @input="setRoom()"
v-model="app.cfg.audio.spatial_properties.room_materials.up"> v-model="app.cfg.audio.spatial_properties.room_materials.up">
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option> <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
</select> </select>
@ -53,8 +53,8 @@
<div class="col"> <div class="col">
<label> <label>
Left Left
<select class="md-select" @change="setRoom()" <select class="md-select" @input="setRoom()"
v-model="app.cfg.audio.spatial_properties.room_materials.left"> v-model="room_materials.left">
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option> <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
</select> </select>
</label> </label>
@ -62,15 +62,15 @@
<div class="col"> <div class="col">
<label> <label>
Front Front
<select class="md-select" @change="setRoom()" <select class="md-select" @input="setRoom()"
v-model="app.cfg.audio.spatial_properties.room_materials.front"> v-model="room_materials.front">
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option> <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
</select> </select>
</label> </label>
<label> <label>
Back Back
<select class="md-select" @change="setRoom()" <select class="md-select" @input="setRoom()"
v-model="app.cfg.audio.spatial_properties.room_materials.back"> v-model="room_materials.back">
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option> <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
</select> </select>
</label> </label>
@ -78,8 +78,8 @@
<div class="col"> <div class="col">
<label> <label>
Right Right
<select class="md-select" @change="setRoom()" <select class="md-select" @input="setRoom()"
v-model="app.cfg.audio.spatial_properties.room_materials.right"> v-model="room_materials.right">
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option> <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
</select> </select>
</label> </label>
@ -90,8 +90,8 @@
<div class="col"> <div class="col">
<label> <label>
Down Down
<select class="md-select" @change="setRoom()" <select class="md-select" @input="setRoom()"
v-model="app.cfg.audio.spatial_properties.room_materials.down"> v-model="room_materials.down">
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option> <option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
</select> </select>
</label> </label>
@ -109,6 +109,8 @@
data: function () { data: function () {
return { return {
app: this.$root, app: this.$root,
room_dimensions: null,
room_materials: null,
roomProps: [ roomProps: [
'transparent', 'transparent',
'acoustic-ceiling-tiles', 'acoustic-ceiling-tiles',
@ -134,29 +136,40 @@
'wood-panel', 'wood-panel',
'uniform' 'uniform'
], ],
visualMultiplier: 4 visualMultiplier: 4,
ready: false
} }
}, },
props: {}, props: {},
mounted() { mounted() {
if(typeof this.app.mk.nowPlayingItem != "undefined") {
this.setRoom()
}
this.room_dimensions = JSON.parse(JSON.stringify(this.$root.cfg.audio.spatial_properties.room_dimensions))
this.room_materials = JSON.parse(JSON.stringify(this.$root.cfg.audio.spatial_properties.room_materials))
this.ready = true
}, },
methods: { methods: {
topFaceStyle() { topFaceStyle() {
let style = { let style = {
transform: `rotateX(60deg) rotateZ(-45deg) translateZ(${this.app.cfg.audio.spatial_properties.room_dimensions.height * this.visualMultiplier}px)` transform: `rotateX(60deg) rotateZ(-45deg) translateZ(${this.room_dimensions.height * this.visualMultiplier}px)`
} }
return style return style
}, },
faceStyle() { faceStyle() {
let style = { let style = {
width: `${this.app.cfg.audio.spatial_properties.room_dimensions.width * this.visualMultiplier}px`, width: `${this.room_dimensions.width * this.visualMultiplier}px`,
height: `${this.app.cfg.audio.spatial_properties.room_dimensions.depth * this.visualMultiplier}px`, height: `${this.room_dimensions.depth * this.visualMultiplier}px`,
} }
return style return style
}, },
close() {
this.$root.cfg.audio.spatial_properties.room_dimensions = this.room_dimensions
this.$root.cfg.audio.spatial_properties.room_materials = this.room_materials
app.resetState()
},
setRoom() { setRoom() {
window.CiderAudio.audioNodes.spatialNode.setRoomProperties(app.cfg.audio.spatial_properties.room_dimensions, app.cfg.audio.spatial_properties.room_materials); window.CiderAudio.audioNodes.spatialNode.setRoomProperties(this.room_dimensions, this.room_materials);
if(!this.app.cfg.audio.normalization) { if(!this.app.cfg.audio.normalization) {
window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain
} }