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

Added visual representation of the room scale

Browse source
This commit is contained in:
booploops 2021-12-30 02:21:27 -08:00
parent 9ce6dc8fd3
commit d5c393c071
2 changed files with 141 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/renderer/style.less
View file

@ -1585,6 +1585,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin: 4px;
font-weight: 500;
}
.handle {
margin: 4px;
opacity: 0.7;
@ -1644,7 +1645,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow-y: overlay;
}
.modal-footer {}
.modal-footer {
}
}
}
@ -1656,6 +1658,42 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
max-width: 800px;
overflow: hidden;
.visual-container {
display: flex;
justify-content: center;
align-items: center;
}
.visual {
position: relative;
height: 250px;
width: 300px;
display: inline-flex;
align-items: flex-end;
justify-content: center;
filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
margin: 0 auto;
.face {
position: absolute;
width: calc(12px * 6);
height: calc(12px * 6);
border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s var(--appleEase);
}
.face:nth-of-type(1) {
background: linear-gradient(45deg, #28223a, #1f2038);
}
.face:nth-of-type(2) {
background: linear-gradient(45deg, #7d53ad, #5763ff);
transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
opacity: 0.7;
}
}
.modal-header {
padding: 16px;
position: relative;
@ -1754,7 +1792,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin-right: 6px;
}
.name {}
.name {
}
&:hover {
background: var(--selected);
@ -2278,13 +2317,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
&.no-shadow {
box-shadow: none;
&::after {
display: none;
}
}
&.subtle-shadow {
box-shadow: var(--mediaItemShadow-ShadowSubtle);
}
&.shadow {
box-shadow: var(--mediaItemShadow-Shadow);
}
@ -2636,7 +2678,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
/* mediaitem-square-large */
.cd-mediaitem-square-large {
width: 190px;

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

@ -10,30 +10,31 @@
<div class="col">
<label>
Width
<input type="number" min="0" @change="setRoom()"
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.room_dimensions.width" step="1"/>
</label>
</div>
<div class="col">
<label>
Height
<input type="number" min="0" @change="setRoom()"
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.room_dimensions.height" step="1"/>
</label>
</div>
<div class="col">
<label>
Depth
<input type="number" min="0" @change="setRoom()"
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.room_dimensions.depth" step="1"/>
</label>
</div>
<div class="col">
<label>
<label v-if="!app.cfg.audio.normalization">
Gain
<input type="number" min="0" @change="setRoom()" v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
</label>
</div>
<div class="col visual-container">
<div class="visual">
<div class="face" :style="[faceStyle()]"></div>
<div class="face" :style="[faceStyle(), topFaceStyle()]"></div>
</div>
</div>
</div>
<div class="row">
<div class="col"></div>
@ -132,7 +133,8 @@
'wood-ceiling',
'wood-panel',
'uniform'
]
],
visualMultiplier: 4
}
},
props: {},
@ -140,10 +142,25 @@
},
methods: {
topFaceStyle() {
let style = {
transform: `rotateX(60deg) rotateZ(-45deg) translateZ(${this.app.cfg.audio.spatial_properties.room_dimensions.height * this.visualMultiplier}px)`
}
return style
},
faceStyle() {
let style = {
width: `${this.app.cfg.audio.spatial_properties.room_dimensions.width * this.visualMultiplier}px`,
height: `${this.app.cfg.audio.spatial_properties.room_dimensions.depth * this.visualMultiplier}px`,
}
return style
},
setRoom() {
window.CiderAudio.audioNodes.spatialNode.setRoomProperties(app.cfg.audio.spatial_properties.room_dimensions, app.cfg.audio.spatial_properties.room_materials);
if(!this.app.cfg.audio.normalization) {
window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain
}
}
}
});
</script>