355 lines
No EOL
19 KiB
Text
355 lines
No EOL
19 KiB
Text
<script type="text/x-template" id="spatial-properties">
|
|
<div class="modal-fullscreen spatialproperties-panel" @click.self="close()" @contextmenu.self="close()">
|
|
<div class="modal-window" v-if="ready">
|
|
<div class="modal-header">
|
|
<div class="modal-title">{{$root.getLz('spatial.spatialProperties')}}</div>
|
|
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
|
|
</div>
|
|
<div class="modal-content">
|
|
<template v-if="roomEditType == 'dimensions'">
|
|
<div class="row">
|
|
<div class="col"><h3>{{$root.getLz('spatial.roomDimensions')}}</h3></div>
|
|
<div class="col-auto flex-center">
|
|
<button class="md-btn" @click="roomEditType = 'positions'">{{$root.getLz('spatial.setPositions')}}</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
{{$root.getLz('spatial.width')}}
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="room_dimensions.width" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="room_dimensions.width" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
{{$root.getLz('spatial.height')}}
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="room_dimensions.height" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="room_dimensions.height" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
{{$root.getLz('spatial.depth')}}
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="room_dimensions.depth" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="room_dimensions.depth" step="1"/>
|
|
</div>
|
|
</div>
|
|
<label v-if="!app.cfg.audio.normalization">
|
|
{{$root.getLz('spatial.gain')}}
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;"
|
|
v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
|
|
</label>
|
|
</div>
|
|
<div class="col visual-container">
|
|
<div class="visual" :style="objectContainerStyle()">
|
|
<div class="face" :style="[faceStyle()]"></div>
|
|
<div class="face" :style="[faceStyle(), topFaceStyle()]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="roomEditType == 'positions'">
|
|
<div class="row">
|
|
<div class="col"><h3>{{$root.getLz('spatial.roomPositions')}}</h3></div>
|
|
<div class="col-auto flex-center">
|
|
<button class="md-btn" @click="roomEditType = 'dimensions'">{{$root.getLz('spatial.setDimensions')}}</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
X ({{$root.getLz('spatial.listener')}})
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="listener_position[0]" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="listener_position[0]" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
Y ({{$root.getLz('spatial.listener')}})
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="listener_position[1]" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="listener_position[1]" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
Z ({{$root.getLz('spatial.listener')}})
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="listener_position[2]" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="listener_position[2]" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
X ({{$root.getLz('spatial.audioSource')}})
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="audio_position[0]" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="audio_position[0]" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
Y ({{$root.getLz('spatial.audioSource')}})
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="audio_position[1]" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="audio_position[1]" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-3 flex-center">
|
|
Z ({{$root.getLz('spatial.audioSource')}})
|
|
</div>
|
|
<div class="col flex-center">
|
|
<input type="range" class="md-slider" min="0" max="100" @change="setRoom()" style="width: 100%;"
|
|
v-model="audio_position[2]" step="1"/>
|
|
</div>
|
|
<div class="col-3 flex-center">
|
|
<input type="number" min="0" @change="setRoom()" style="width: 100%;text-align: center"
|
|
v-model="audio_position[2]" step="1"/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col visual-container">
|
|
<div class="visual">
|
|
<div class="face" :style="[faceStyle()]"></div>
|
|
<div class="face" :style="[faceStyle(), topFaceStyle()]"></div>
|
|
|
|
<!-- <div class="listener" :style="[listenerStyle()]">L</div> -->
|
|
<!-- <div class="audiosource" :style="[audioSourceStyle()]">A</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="row">
|
|
<div class="col"><h3>{{$root.getLz('spatial.roomMaterials')}}</h3></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col flex-center">
|
|
<label>
|
|
{{$root.getLz('spatial.up')}}
|
|
<select class="md-select" @change="setRoom()"
|
|
v-model="room_materials.up">
|
|
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col flex-center">
|
|
<label>
|
|
{{$root.getLz('spatial.left')}}
|
|
<select class="md-select" @change="setRoom()"
|
|
v-model="room_materials.left">
|
|
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="col flex-center">
|
|
<label>
|
|
{{$root.getLz('spatial.front')}}
|
|
<select class="md-select" @change="setRoom()"
|
|
v-model="room_materials.front">
|
|
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
{{$root.getLz('spatial.back')}}
|
|
<select class="md-select" @change="setRoom()"
|
|
v-model="room_materials.back">
|
|
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="col flex-center">
|
|
<label>
|
|
{{$root.getLz('spatial.right')}}
|
|
<select class="md-select" @change="setRoom()"
|
|
v-model="room_materials.right">
|
|
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col flex-center">
|
|
<label>
|
|
{{$root.getLz('spatial.down')}}
|
|
<select class="md-select" @change="setRoom()"
|
|
v-model="room_materials.down">
|
|
<option v-for="prop in roomProps" :value="prop">{{ prop }}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="col"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('spatial-properties', {
|
|
template: '#spatial-properties',
|
|
data: function () {
|
|
return {
|
|
app: this.$root,
|
|
room_dimensions: null,
|
|
room_materials: null,
|
|
listener_position: null,
|
|
audio_position: null,
|
|
roomEditType: "dimensions",
|
|
roomProps: [
|
|
'transparent',
|
|
'acoustic-ceiling-tiles',
|
|
'brick-bare',
|
|
'brick-painted',
|
|
'concrete-block-coarse',
|
|
'concrete-block-painted',
|
|
'curtain-heavy',
|
|
'fiber-glass-insulation',
|
|
'glass-thin',
|
|
'glass-thick',
|
|
'grass',
|
|
'linoleum-on-concrete',
|
|
'marble',
|
|
'metal',
|
|
'parquet-on-concrete',
|
|
'plaster-smooth',
|
|
'plywood-panel',
|
|
'polished-concrete-or-tile',
|
|
'sheetrock',
|
|
'water-or-ice-surface',
|
|
'wood-ceiling',
|
|
'wood-panel',
|
|
'uniform'
|
|
],
|
|
visualMultiplier: 4,
|
|
ready: false
|
|
}
|
|
},
|
|
props: {},
|
|
mounted() {
|
|
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.audio_position = JSON.parse(JSON.stringify(this.$root.cfg.audio.spatial_properties.audio_position))
|
|
this.listener_position = JSON.parse(JSON.stringify(this.$root.cfg.audio.spatial_properties.listener_position))
|
|
if (typeof this.app.mk.nowPlayingItem != "undefined") {
|
|
this.setRoom()
|
|
}
|
|
this.ready = true
|
|
},
|
|
methods: {
|
|
listenerStyle() {
|
|
let style = {
|
|
transform: `rotateX(60deg) rotateZ(-45deg) translateX(${this.listener_position[0]}px) translateY(${this.listener_position[2]}px) translateZ(${100 + +this.listener_position[1]}px)`
|
|
}
|
|
return style
|
|
},
|
|
audioSourceStyle() {
|
|
let style = {
|
|
transform: `rotateX(60deg) rotateZ(-45deg) translateX(${this.audio_position[0]}px) translateY(${this.audio_position[2]}px) translateZ(${100 + +this.audio_position[1]}px)`
|
|
}
|
|
return style
|
|
},
|
|
topFaceStyle() {
|
|
let style = {
|
|
transform: `rotateX(60deg) rotateZ(-45deg) translateZ(${this.room_dimensions.height * this.visualMultiplier}px)`
|
|
}
|
|
return style
|
|
},
|
|
objectContainerStyle() {
|
|
let scale = 1
|
|
if (this.room_dimensions.width * this.visualMultiplier > 300) {
|
|
scale = 300 / (this.room_dimensions.width * this.visualMultiplier)
|
|
}
|
|
let style = {
|
|
transform: `scale(${scale})`
|
|
}
|
|
return style
|
|
},
|
|
faceStyle() {
|
|
let style = {
|
|
width: `${this.room_dimensions.width * this.visualMultiplier}px`,
|
|
height: `${this.room_dimensions.depth * this.visualMultiplier}px`,
|
|
}
|
|
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
|
|
this.$root.cfg.audio.spatial_properties.audio_position = this.audio_position
|
|
this.$root.cfg.audio.spatial_properties.listener_position = this.listener_position
|
|
app.resetState()
|
|
},
|
|
setRoom() {
|
|
window.CiderAudio.audioNodes.spatialNode.setRoomProperties(this.room_dimensions, this.room_materials);
|
|
CiderAudio.audioNodes.spatialInput.setPosition(...this.audio_position)
|
|
CiderAudio.audioNodes.spatialNode.setListenerPosition(...this.listener_position)
|
|
if (!this.app.cfg.audio.normalization) {
|
|
window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script> |