add icons to interface
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
This commit is contained in:
parent
10f0ac0576
commit
f2486208c7
GPG Key ID:
CC76D6B296CAC8B0
|
|
@ -0,0 +1,50 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve">
|
||||
<g id="XMLID_894_">
|
||||
<g id="XMLID_895_">
|
||||
<path id="XMLID_896_" d="M164.998,210c35.888,0,65.085-29.195,65.085-65.12l-0.204-80c0-35.775-29.105-64.88-64.881-64.88
|
||||
c-35.773,0-64.877,29.105-64.877,64.842l-0.203,80.076C99.918,180.805,129.112,210,164.998,210z M130.121,64.88
|
||||
c0-19.233,15.646-34.88,34.877-34.88c19.233,0,34.881,15.647,34.881,34.919l0.204,80c0,19.344-15.739,35.081-35.085,35.081
|
||||
c-19.343,0-35.08-15.737-35.08-35.044L130.121,64.88z"/>
|
||||
</g>
|
||||
<g id="XMLID_899_">
|
||||
<path id="XMLID_900_" d="M280.084,154.96c0-8.284-6.716-15-15-15c-8.284,0-15,6.716-15,15c0,46.732-37.878,84.774-84.546,85.068
|
||||
c-0.181-0.006-0.357-0.027-0.54-0.027c-0.183,0-0.359,0.021-0.541,0.027c-46.665-0.293-84.541-38.335-84.541-85.068
|
||||
c0-8.284-6.716-15-15-15s-15,6.716-15,15c0,58.373,43.688,106.731,100.082,114.104V300H117c-8.284,0-15,6.716-15,15
|
||||
s6.716,15,15,15h96.001c8.284,0,15-6.716,15-15s-6.716-15-15-15h-33.003v-30.936C236.395,261.69,280.084,213.332,280.084,154.96z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione-monotone" preserveAspectRatio="xMidYMid meet"><path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2zm0 57.5C16.836 59.5 4.5 47.164 4.5 32S16.836 4.5 32 4.5S59.5 16.836 59.5 32S47.164 59.5 32 59.5z" fill="currentColor"></path><circle cx="32" cy="45.139" r="7" fill="currentColor"></circle><circle cx="20.248" cy="25.045" r="4.5" fill="currentColor"></circle><circle cx="42.75" cy="25.045" r="4.5" fill="currentColor"></circle></svg>
|
||||
|
After Width: | Height: | Size: 654 B |
|
|
@ -60,9 +60,11 @@
|
|||
align-content: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border: 2px solid black;
|
||||
background-color: $bg;
|
||||
width: 20vh;
|
||||
height: 20vh;
|
||||
width: 15vh;
|
||||
height: 15vh;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.box {
|
||||
|
|
@ -75,5 +77,6 @@
|
|||
|
||||
img {
|
||||
width: 75%;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,35 +48,48 @@
|
|||
}}
|
||||
/>
|
||||
|
||||
<div bind:this={bar} class="bar-container">
|
||||
{#if withSetpoint}
|
||||
<div
|
||||
bind:this={point}
|
||||
class="setpoint"
|
||||
use:draggable={{
|
||||
onDragStart: () => (pos = undefined),
|
||||
handle: ".handle",
|
||||
position: pos,
|
||||
axis: "y",
|
||||
bounds: "parent",
|
||||
onDragEnd: (e) => {
|
||||
let rect = bar.getBoundingClientRect();
|
||||
let y = (e.domRect.y - rect.y + e.domRect.height / 2) / rect.height;
|
||||
onSetpointChange(1.0 - y);
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div class="handle" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="bar" style="height: {$tweenedProgress}px;" />
|
||||
<div class="box">
|
||||
<div bind:this={bar} class="bar-container">
|
||||
{#if withSetpoint}
|
||||
<div
|
||||
bind:this={point}
|
||||
class="setpoint"
|
||||
use:draggable={{
|
||||
onDragStart: () => (pos = undefined),
|
||||
handle: ".handle",
|
||||
position: pos,
|
||||
axis: "y",
|
||||
bounds: "parent",
|
||||
onDragEnd: (e) => {
|
||||
let rect = bar.getBoundingClientRect();
|
||||
let y = (e.domRect.y - rect.y + e.domRect.height / 2) / rect.height;
|
||||
onSetpointChange(1.0 - y);
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div class="handle" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="bar" style="height: {$tweenedProgress}px;" />
|
||||
</div>
|
||||
<slot class="icon" />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1vh;
|
||||
:global(img) {
|
||||
width: var(--bar-width, 5vh);
|
||||
}
|
||||
}
|
||||
|
||||
.setpoint {
|
||||
position: absolute;
|
||||
background-color: black;
|
||||
width: 10vh;
|
||||
width: var(--bar-width, 5vh);
|
||||
height: 0.5vh;
|
||||
.handle {
|
||||
position: absolute;
|
||||
|
|
@ -97,7 +110,7 @@
|
|||
background-color: white;
|
||||
border: 2px solid black;
|
||||
height: 80vh;
|
||||
width: 10vh;
|
||||
width: var(--bar-width, 5vh);
|
||||
}
|
||||
|
||||
.bar {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts" context="module">
|
||||
import { writable } from "svelte/store";
|
||||
const transparent = writable(false);
|
||||
let threshold = writable(0.5);
|
||||
let level = writable(0);
|
||||
const threshold = writable(0.5);
|
||||
const level = writable(0);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -36,6 +36,8 @@
|
|||
$level = await invoke("get_audio_level");
|
||||
await tick();
|
||||
}, 40);
|
||||
|
||||
$threshold = await invoke("get_mic_threshold");
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
|
|
@ -71,13 +73,15 @@
|
|||
$threshold = e;
|
||||
}}
|
||||
--bar-color={active ? "lightgreen" : "blue"}
|
||||
/>
|
||||
><img src="mic.svg" alt="microphone" /></Bar
|
||||
>
|
||||
<Bar
|
||||
withSetpoint
|
||||
progress={activation}
|
||||
setpoint={closeThreshold}
|
||||
onSetpointChange={(y) => (closeThreshold = y * 100)}
|
||||
/>
|
||||
><img src="mouth.svg" alt="mouth" /></Bar
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue