diff --git a/bin/web/assets/record.svg b/bin/web/assets/record.svg index a05d563..471ddc9 100644 --- a/bin/web/assets/record.svg +++ b/bin/web/assets/record.svg @@ -1,5 +1,5 @@ - + - - - - - diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js index 55e709d..8f61982 100644 --- a/bin/web/js/audio.js +++ b/bin/web/js/audio.js @@ -202,7 +202,8 @@ const Audio = function(tp, record) { } } } else { - audioOptions.style.background = 'rgba(0,255,255,0.2)'; // AUDIO COLOR + audioOptions.style.background = 'rgba(163, 163, 163, 0.2)'; // AUDIO COLOR + } audioOptions.style.order = parseInt(container.style.order) + 1; @@ -217,17 +218,21 @@ const Audio = function(tp, record) { const min_max_Dom = document.createElement('div'); min_max_Dom.classList.add('audio_min_max'); + const min_Cont = document.createElement('div'); + min_Cont.classList.add('audio_min_Cont'); const min_inputDom_label = document.createElement('label'); min_inputDom_label.for = 'audio_min'; - min_inputDom_label.innerHTML = 'audio_min'; + min_inputDom_label.innerHTML = 'min '; const min_inputDom = document.createElement('input'); min_inputDom.type = 'number'; min_inputDom.name = toCssClass(`audio_min${propTitle}`); min_inputDom.id = toCssClass(`audio_min${propTitle}`); min_inputDom.value = `${mappingOptions.min_out}`; + const max_Cont = document.createElement('div'); + max_Cont.classList.add('audio_max_Cont'); const max_inputDom_label = document.createElement('label'); max_inputDom_label.for = 'audio_max'; - max_inputDom_label.innerHTML = 'audio_max'; + max_inputDom_label.innerHTML = 'max '; const max_inputDom = document.createElement('input'); max_inputDom.type = 'number'; max_inputDom.name = toCssClass(`audio_max${propTitle}`); @@ -235,7 +240,7 @@ const Audio = function(tp, record) { max_inputDom.value = `${mappingOptions.max_out}`; const smoothing_inputDom_label = document.createElement('label'); smoothing_inputDom_label.for = 'audio_smoothing'; - smoothing_inputDom_label.innerHTML = 'audio_smoothing'; + smoothing_inputDom_label.innerHTML = 'audio smoothing '; const smoothing_inputDom = document.createElement('input'); smoothing_inputDom.type = 'number'; smoothing_inputDom.name = toCssClass(`audio_smoothing${propTitle}`); @@ -246,18 +251,26 @@ const Audio = function(tp, record) { smoothing_inputDom.step = 0.01; min_max_Dom.append(smoothing_inputDom_label); min_max_Dom.append(smoothing_inputDom); - min_max_Dom.append(min_inputDom_label); - min_max_Dom.append(min_inputDom); - min_max_Dom.append(max_inputDom_label); - min_max_Dom.append(max_inputDom); + min_max_Dom.append(min_Cont); + min_Cont.append(min_inputDom_label); + min_Cont.append(min_inputDom); + min_max_Dom.append(max_Cont); + max_Cont.append(max_inputDom_label); + max_Cont.append(max_inputDom); audioOptions.append(min_max_Dom); const sync_Dom = document.createElement('div'); + sync_Dom.classList.add('sync_Dom'); const sync_titleDom = document.createElement('p'); + const sync_titleDom_Cont = document.createElement('div'); + sync_titleDom_Cont.classList.add('sync_titleDom_Cont'); sync_titleDom.innerHTML = 'sync with:'; sync_Dom.append(sync_titleDom); + audio_sync_options.forEach((o) => { + const sync_inputDom_Cont = document.createElement('div'); + sync_inputDom_Cont.classList.add('sync_inputDom_Cont'); const sync_inputDom_label = document.createElement('label'); sync_inputDom_label.for = `audio_sync${o}`; sync_inputDom_label.innerHTML = o; @@ -270,10 +283,14 @@ const Audio = function(tp, record) { if (o === mappingOptions.sync) { sync_inputDom.checked = '1'; } - sync_Dom.append(sync_inputDom_label); - sync_Dom.append(sync_inputDom); + sync_inputDom_Cont.append(sync_inputDom_label); + sync_inputDom_Cont.append(sync_inputDom); + sync_titleDom_Cont.append(sync_inputDom_Cont); + sync_Dom.append(sync_titleDom_Cont); + // sync_Dom.append(sync_inputDom); sync_inputDom.addEventListener('change', updateMappingOptions); }); + audioOptions.append(sync_Dom); const fft_Dom = document.createElement('div'); @@ -296,8 +313,9 @@ const Audio = function(tp, record) { fft_selectDom.style.width = '100%'; fft_selectDom.style.height = '100%'; fft_selectDom.style.pointerEvents = 'none'; - fft_selectDom.style.backgroundColor = 'rgba(0,255,0,0.2)'; // AUDIO COLOR - fft_selectDom.style.border = '1px solid rgba(0,255,0,1.0)'; // AUDIO COLOR + fft_selectDom.style.backgroundColor = 'rgba(28, 186, 148,0.4)'; // AUDIO COLOR + fft_selectDom.style.border = 'none'; // AUDIO COLOR + fft_Dom.append(fft_imgDom); fft_Dom.append(fft_selectDom); audioOptions.append(fft_Dom); diff --git a/bin/web/js/config.js b/bin/web/js/config.js index 9376b64..a8517f4 100644 --- a/bin/web/js/config.js +++ b/bin/web/js/config.js @@ -64,9 +64,9 @@ const config = { 'rotation': 'Rotation', 'transformOrigin': 'Rotation Origin', 'mirror_x': 'Mirror X', - 'mirror_x_distance': 'Mirror X Distance', + 'mirror_x_distance': 'X Distance', 'mirror_y': 'Mirror Y', - 'mirror_y_distance': 'Mirror Y Distance', + 'mirror_y_distance': 'Y Distance', 'mirror_xy': 'Mirrox XY', 'color': 'Color', 'letterDelays': 'Letter Delays', diff --git a/bin/web/js/theatre-play.js b/bin/web/js/theatre-play.js index 4168ff1..0df8955 100644 --- a/bin/web/js/theatre-play.js +++ b/bin/web/js/theatre-play.js @@ -541,10 +541,64 @@ const TheatrePlay = function(autoInit = false) { .mirror_xWrapper input, .mirror_yWrapper input, .mirror_xyWrapper input{ margin: 0px 10px; } - label { - color: #ea2333; - margin-left:10px; + .audio_min_max{ + padding: 5px; + box-sizing: border-box; + display: grid; + /* flex-direction: column; */ + grid-template-columns: 1fr 1fr; + row-gap: 7px; } + .audio_min_Cont, .audio_max_Cont{ + grid-column-start: 1; + grid-column-end: 3; + display: flex; + justify-content: space-between; + + + } + .audio_min_max input{ + background: rgb(255, 255, 255); + border: none; + color: rgb(0, 0, 0); + padding: 3px 6px 1px; + font-style: inherit; + font-variant: inherit; + font-weight: inherit; + font-stretch: inherit; + font-size: inherit; + line-height: inherit; + font-family: inherit; + font-optical-sizing: inherit; + font-kerning: inherit; + font-feature-settings: inherit; + outline: none; + /* cursor: ew-resize; */ + /* width: 100%; */ + height: calc(100% - 4px); + border-radius: 0px; + margin-bottom: 0px; + text-align: center; + font-variation-settings: "wght" 700; + } + .audioOptions{ + margin-top: 5px; + margin-bottom: 5px; + } + .audioOptions label { + color: black; + font-family: 'Tonka'; + font-variation-settings: 'wght' 500; + } + .mirror_xWrapper label, .mirror_yWrapper label, .mirror_xyWrapper label{ + color:#ea2333; + } + // .mirror_xWrapper div:first-of-type, .mirror_yWrapper div:first-of-type, .mirror_xyWrapper div:first-of-type{ + // width: fit-content; + // background: red; + // flex-grow: 0; + // margin-right: 15px; + // } input[type=checkbox] { position: absolute; width: 27px; @@ -559,6 +613,50 @@ const TheatrePlay = function(autoInit = false) { input[type=checkbox]:checked + label::after{ content: ' ON'; } + .audioOptions input[type="radio"] { + appearance: none; + background-color: #fff; + margin: 0; + font: inherit; + color: black; + width: 1.15em; + height: 1.15em; + + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .audioOptions input[type="radio"]::before { + content: ""; + width: 0.65em; + height: 0.65em; + border-radius: 50%; + opacity: 0; + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em black; + } + .audioOptions input[type="radio"]:checked::before { + opacity: 1; + } + .sync_inputDom_Cont{ + display: flex; + width: fit-content; + justify-content: center; + align-items: center; + column-gap: 5px; + margin: 5px 15px 5px 0px; + } + .sync_Dom{ + padding: 5px; + display: flex; + flex-direction: column; + row-gap: 7px; + } + .sync_titleDom_Cont{ + display: flex; + justify-content: space-between; + } .mirror_yWrapper{ } .mirror_xyWrapper{ @@ -702,18 +800,82 @@ const TheatrePlay = function(autoInit = false) { margin-top: 5px; } .audioButton{ - width: 20px; - margin: 2px; + width: 17px; + margin: 2px 2px 2px 5px; + flex-shrink: 0; + display: flex; + background: rgb(163, 163, 163); + border-radius: 50%; + height: 17px; + align-self: center; + display: flex; + align-items: center; + justify-content: center; + padding: 2px; + box-sizing: border-box; + cursor: pointer + } + .audioButton:hover{ + background: #1cba94; + } + .audioButton img{ + max-width: 70%; } .audioButton.active{ - background: green; + background: #1cba94; } .recordButton{ - width: 20px; + width: 17px; margin: 2px; + flex-shrink: 0; + display: flex; + background: rgb(163, 163, 163); + border-radius: 50%; + height: 17px; + align-self: center; + display: flex; + align-items: center; + justify-content: center; + padding: 2px; + box-sizing: border-box; + cursor: pointer + } + .recording{ + overflow: hidden; + background: rgb(255, 255, 255); + border: none; + color: rgb(0, 0, 0); + padding: 3px 6px 1px; + font-style: inherit; + font-variant: inherit; + font-weight: inherit; + font-stretch: inherit; + font-size: inherit; + line-height: inherit; + font-family: inherit; + font-optical-sizing: inherit; + font-kerning: inherit; + font-feature-settings: inherit; + outline: none; + cursor: ew-resize; + width: 100%; + height: calc(100% - 4px); + border-radius: 0px; + margin-bottom: 0px; + text-align: center; + font-variation-settings: "wght" 700; + } + .recordButton:hover{ + background: #1cba94; + } + .recordButton img{ + max-width: 70%; } .recordButton.active{ - background: green; + background: #1cba94; + } + .panelMomWrapper{ + overflow-x: hidden; } `; this.shadowRoot.appendChild(style); diff --git a/bin/web/theatre_modules/core-and-studio.js b/bin/web/theatre_modules/core-and-studio.js index af89241..a5ae592 100644 --- a/bin/web/theatre_modules/core-and-studio.js +++ b/bin/web/theatre_modules/core-and-studio.js @@ -38828,7 +38828,7 @@ Instead found: ${devStringify(butFoundInstead)}` : ""; padding: 0 0px 0 0px; box-sizing: border-box; height: 100%; - width: 50%; + width: 42%; flex-shrink: 0; flex-grow: 0; padding-bottom: 4px; @@ -44630,7 +44630,7 @@ ${content} right: 0px; top: 0px; // Temporary, see comment about CSS grid in SingleRowPropEditor. - width: 280px; + width: 305px; height: 100vh; z-index: ${panelZIndexes.propsPanel}; backdrop-filter: blur(2px);