Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📡 Adds reactive data from socket connection

Browse Source
This commit is contained in:
Rune Harlyk
2023-05-11 22:25:33 +02:00
parent 8cf4c09543
commit 531945397c
5 changed files with 98 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/Controls.svelte
+47 -4
View File
@@ -1,26 +1,69 @@
<script lang="ts">
import nipplejs from 'nipplejs';
import { onMount } from 'svelte';
import { isPortrait } from '../lib/UseOrientation';
import { throttler } from '../lib/throttle';
let throttle = new throttler();
let left: nipplejs.JoystickManager;
let right: nipplejs.JoystickManager;
let throttle_timing = 50;
let left_vector = { x: 0, y: 0 };
let right_vector = { x: 0, y: 0 };
let height = 0; // -50 to 50
let speed = 0;
let mode = 'rest'; // 'rest' | 'stand' | 'stand+' | 'walk'
let stream_rotation = 0;
let temp = 0;
onMount(() => {
let left = nipplejs.create({
left = nipplejs.create({
zone: document.getElementById('left') as HTMLElement,
color: 'grey',
dynamicPage: true,
mode: 'static'
});
let right = nipplejs.create({
left.on('move', (evt, data) => {
left_vector = data.vector;
throttle.throttle(updateData, throttle_timing);
});
left.on('end', (evt, data) => {
left_vector = { x: 0, y: 0 };
throttle.throttle(updateData, throttle_timing);
});
right = nipplejs.create({
zone: document.getElementById('right') as HTMLElement,
color: 'grey',
dynamicPage: true,
mode: 'static'
});
right.on('move', (evt, data) => {
right_vector = data.vector;
throttle.throttle(updateData, throttle_timing);
});
right.on('end', (evt, data) => {
right_vector = { x: 0, y: 0 };
throttle.throttle(updateData, throttle_timing);
});
});
const updateData = () => {
console.log(height, left_vector, right_vector);
};
const lerp = (start: number, end: number, amt: number) => {
return (1 - amt) * start + amt * end;
};
</script>
<div class="absolute top-0 left-0 w-screen h-screen">
<div class="absolute top-0 left-0 h-full w-full flex {isPortrait ? 'hide' : ''}">
<div class="absolute top-0 left-0 h-full w-full flex portrait:hidden">
<div id="left" class="flex w-60 items-center justify-end" />
<div class="flex-1" />
<div id="right" class="flex w-60 items-center" />
app/src/components/Topbar.svelte
+26 -13
View File
@@ -1,20 +1,33 @@
<script lang="ts">
import { isConnected } from '../lib/socket';
import { isConnected, data } from '../lib/socket';
const toggleFullScreen = () => {
if (!document.fullscreenElement) document.documentElement.requestFullscreen();
else if (document.exitFullscreen) document.exitFullscreen();
};
</script>
<div class="absolute top-0 flex justify-center w-full z-20">
<svg height="40" width="300" class="Settings_topSVG__2VXbU">
<path stroke="none" fill="#36393f" d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z" />
</svg>
<div
class="absolute flex gap-1 h-10 w-36 justify-center items-center dots
{$isConnected ? 'connected' : 'disconnected'}"
>
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
<div class="absolute top-0 flex justify-between w-full z-20" on:dblclick={toggleFullScreen}>
<div class="w-20 p-2">☰</div>
<div class="flex justify-center">
<svg height="40" width="300" class="Settings_topSVG__2VXbU">
<path
stroke="none"
fill="#36393f"
d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z"
/>
</svg>
<div
class="absolute flex gap-1 h-10 w-36 justify-center items-center dots
{$isConnected ? 'connected' : 'disconnected'}"
>
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
</div>
</div>
<div class="w-20 p-2 text-right">{Math.floor($data[1])}°🌡️</div>
</div>
<style scoped>