🏮 Adds servo config table

This commit is contained in:
Rune Harlyk
2024-09-10 17:37:08 +02:00
committed by Rune Harlyk
parent b02d633f41
commit 6ab093786a
8 changed files with 28253 additions and 28281 deletions
@@ -1,7 +1,9 @@
<script lang="ts">
import Servos from './servos.svelte';
import Servos from './servos.svelte';
import ServoTable from './ServoTable.svelte';
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
<Servos />
<Servos />
<ServoTable />
</div>
@@ -0,0 +1,69 @@
<script lang="ts">
import { api } from '$lib/api';
import { onMount } from 'svelte';
export let data = {
servos: []
};
const updateValue = (event, index, key) => {
data.servos[index][key] = event.target.innerText;
};
const syncConfig = async () => {
await api.post('/api/servo/config', data);
};
onMount(async () => {
const result = await api.get('/api/servo/config');
if (result.isOk()) {
data = result.inner;
}
});
</script>
<div class="overflow-x-auto">
<table class="table table-xs">
<thead>
<tr>
<th>Center PWM</th>
<th>Center Angle</th>
<th>Direction</th>
<th>Conversion</th>
</tr>
</thead>
<tbody>
{#each data.servos as servo, index}
<tr>
<td
contenteditable="true"
on:blur={syncConfig}
on:input={event => updateValue(event, index, 'center_pwm')}
>
{servo.center_pwm}
</td>
<td
contenteditable="true"
on:blur={syncConfig}
on:input={event => updateValue(event, index, 'center_angle')}
>
{servo.center_angle}
</td>
<td
contenteditable="true"
on:blur={syncConfig}
on:input={event => updateValue(event, index, 'direction')}
>
{servo.direction}
</td>
<td
contenteditable="true"
on:blur={syncConfig}
on:input={event => updateValue(event, index, 'conversion')}
>
{servo.conversion}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
@@ -1,30 +0,0 @@
<script lang="ts">
import type { Servo } from "$lib/types/models";
import { createEventDispatcher } from "svelte";
export let servo: Servo;
const dispatch = createEventDispatcher();
const sweep = () => {
dispatch('sweep', {channel: servo.channel});
};
</script>
<div>
<h2 class="text-lg">{ servo.name }</h2>
<div class="flex gap-2 items-center">
Is inverted <input type="checkbox" bind:checked={servo.inverted} class="toggle"/>
</div>
<div>
Middle position <input type="number" bind:value={servo.center_angle} class="input input-bordered input-sm max-w-xs"/>
</div>
<div class="relative mb-6">
<label for="labels-range-input" class="sr-only">Labels range</label>
<input id="labels-range-input" type="range" bind:value={servo.angle} min="0" max="180" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">0</span>
<span class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">90</span>
<span class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">180</span>
</div>
<button class="btn btn-neutral btn-sm" on:click={sweep}>Sweep range</button>
</div>
+42 -31
View File
@@ -1,58 +1,69 @@
<script lang="ts">
import SettingsCard from '$lib/components/SettingsCard.svelte';
import type { ServoConfiguration, Servo } from '$lib/types/models';
import ServoController from './servo.svelte';
import Spinner from '$lib/components/Spinner.svelte';
import SettingsCard from '$lib/components/SettingsCard.svelte';
import type { ServoConfiguration, Servo } from '$lib/types/models';
import Spinner from '$lib/components/Spinner.svelte';
import { socket } from '$lib/stores';
import { onDestroy, onMount } from 'svelte';
import { throttler as Throttler } from '$lib/utilities';
import { MotorOutline } from '$lib/components/icons';
import { socket } from '$lib/stores';
import { onDestroy, onMount } from 'svelte';
import { throttler as Throttler } from '$lib/utilities';
import { MotorOutline } from '$lib/components/icons';
let isLoading = false;
let isLoading = false;
let active = false
let active = false;
let servoId = 0
let servoId = 0;
const throttler = new Throttler()
const throttler = new Throttler();
const sweep = (event:any) => {
const sweep = (event: any) => {
let channel = event.detail.channel;
socket.sendEvent('servoConfiguration', {servos:[{channel, sweep: true}]});
socket.sendEvent('servoConfiguration', { servos: [{ channel, sweep: true }] });
};
const activateServo = (event:any) => {
socket.sendEvent('servoState', {'active':1});
const activateServo = (event: any) => {
socket.sendEvent('servoState', { active: 1 });
};
const deactivateServo = (event:any) => {
socket.sendEvent('servoState', {'active':0});
const deactivateServo = (event: any) => {
socket.sendEvent('servoState', { active: 0 });
};
let pwm = 306;
const updatePWM = () => {
throttler.throttle(() => {
socket.sendEvent('servoPWM', {servo_id:servoId, pwm});
}, 10)
}
socket.sendEvent('servoPWM', { servo_id: servoId, pwm });
}, 10);
};
</script>
<SettingsCard collapsible={false}>
<MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
<span slot="title">Servo</span>
<input type="range" min="200" max="400" bind:value={pwm} on:input={updatePWM} class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
<MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
<span slot="title">Servo</span>
<input
type="range"
min="200"
max="400"
bind:value={pwm}
on:input={updatePWM}
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
{#if isLoading}
<Spinner />
{:else}
<div class="flex flex-col">
<h2 class="text-lg">General servo configuration</h2>
{#if isLoading}
<Spinner />
{:else}
<div class="flex flex-col">
<h2 class="text-lg">General servo configuration</h2>
<span class="flex items-center gap-2">
<label for="servoId">Servo active{servoId}</label>
<input type="checkbox" class="toggle" bind:checked={active} on:change={active ? deactivateServo : activateServo}>
<input
type="checkbox"
class="toggle"
bind:checked={active}
on:change={active ? deactivateServo : activateServo}
/>
</span>
</div>
{/if}
{/if}
</SettingsCard>
@@ -104,6 +104,13 @@ void ESP32SvelteKit::setupServer() {
return _apService.endpoint.handleStateUpdate(request, json);
});
// servo
_server->on("/api/servo/config", HTTP_GET,
[this](PsychicRequest *request) { return _servoController.endpoint.getState(request); });
_server->on("/api/servo/config", HTTP_POST, [this](PsychicRequest *request, JsonVariant &json) {
return _servoController.endpoint.handleStateUpdate(request, json);
});
#ifdef EMBED_WWW
ESP_LOGV("ESP32SvelteKit", "Registering routes from PROGMEM static resources");
WWWData::registerRoutes([&](const String &uri, const String &contentType, const uint8_t *content, size_t len) {
+2 -1
View File
@@ -10,4 +10,5 @@
#define NTP_SETTINGS_FILE "/config/ntpSettings.json"
#define DEVICE_CONFIG_FILE "/config/peripheral.json"
#define SECURITY_SETTINGS_FILE "/config/securitySettings.json"
#define WIFI_SETTINGS_FILE "/config/wifiSettings.json"
#define WIFI_SETTINGS_FILE "/config/wifiSettings.json"
#define SERVO_SETTINGS_FILE "/config/servoSettings.json"
+69 -4
View File
@@ -7,17 +7,78 @@
#include <HttpEndpoint.h>
#include <SecurityManager.h>
#include <StatefulService.h>
#include <stateful_service_endpoint.h>
#include <MathUtils.h>
#include <Timing.h>
#define EVENT_SERVO_CONFIGURATION_SETTINGS "servoPWM"
#define EVENT_SERVO_STATE "servoState"
class ServoController {
typedef struct {
float centerPwm;
float direction;
float centerAngle;
float conversion;
const char *name;
// bool enable;
} servo_settings_t;
class ServoSettings {
public:
servo_settings_t servos[12] = {
{306, -1, 0, 2.2, "Servo1"}, {306, 1, -45, 2.1055555, "Servo2"}, {306, 1, 90, 1.96923, "Servo3"},
{306, -1, 0, 2.2, "Servo4"}, {306, -1, 45, 2.1055555, "Servo5"}, {306, -1, -90, 1.96923, "Servo6"},
{306, 1, 0, 2.2, "Servo7"}, {306, 1, -45, 2.1055555, "Servo8"}, {306, 1, 90, 1.96923, "Servo9"},
{306, 1, 0, 2.2, "Servo10"}, {306, -1, 45, 2.1055555, "Servo11"}, {306, -1, -90, 1.96923, "Servo12"}};
static void read(ServoSettings &settings, JsonObject &root) {
JsonArray servos = root["servos"].to<JsonArray>();
for (auto &servo : settings.servos) {
JsonObject newServo = servos.add<JsonObject>();
newServo["center_pwm"] = servo.centerPwm;
newServo["direction"] = servo.direction;
newServo["center_angle"] = servo.centerAngle;
newServo["conversion"] = servo.conversion;
}
}
static StateUpdateResult update(JsonObject &root, ServoSettings &settings) {
if (root["servos"].is<JsonArray>()) {
JsonArray servosJson = root["servos"];
int i = 0;
for (auto servo : servosJson) {
JsonObject servoObject = servo.as<JsonObject>();
uint8_t servoId = i; // servoObject["id"].as<uint8_t>();
settings.servos[servoId].centerPwm = servoObject["center_pwm"].as<float>();
settings.servos[servoId].centerAngle = servoObject["center_angle"].as<float>();
settings.servos[servoId].direction = servoObject["direction"].as<float>();
settings.servos[servoId].conversion = servoObject["conversion"].as<float>();
i++;
}
}
ESP_LOGI("ServoController", "Updating servo data");
return StateUpdateResult::CHANGED;
};
};
class ServoController : public StatefulService<ServoSettings> {
public:
ServoController(PsychicHttpServer *server, FS *fs, SecurityManager *securityManager, Peripherals *peripherals,
EventSocket *socket)
: _server(server), _securityManager(securityManager), _peripherals(peripherals), _socket(socket) {}
: _server(server),
_securityManager(securityManager),
_peripherals(peripherals),
_socket(socket),
endpoint(ServoSettings::read, ServoSettings::update, this),
_fsPersistence(ServoSettings::read, ServoSettings::update, this, &ESPFS, SERVO_SETTINGS_FILE) {
_fsPersistence.readFromFS();
}
void begin() {
_socket->onEvent(EVENT_SERVO_CONFIGURATION_SETTINGS,
@@ -61,8 +122,9 @@ class ServoController {
void updateServoState() {
for (int i = 0; i < 12; i++) {
angles[i] = lerp(angles[i], target_angles[i], 0.2);
float angle = dir[i] * angles[i] + center_angle_deg[i];
uint16_t pwm = angle * servo_conversion[i] + center[i];
auto &servo = _state.servos[i];
float angle = servo.direction * angles[i] + servo.centerAngle;
uint16_t pwm = angle * servo.conversion + servo.centerPwm;
if (pwm < 125 || pwm > 600) {
ESP_LOGE("ServoController", "Servo %d, Invalid PWM value %d", i, pwm);
continue;
@@ -75,11 +137,14 @@ class ServoController {
EXECUTE_EVERY_N_MS(ServoInterval, { updateServoState(); });
}
StatefulHttpEndpoint<ServoSettings> endpoint;
private:
PsychicHttpServer *_server;
SecurityManager *_securityManager;
Peripherals *_peripherals;
EventSocket *_socket;
FSPersistence<ServoSettings> _fsPersistence;
bool is_active {true};
constexpr static int ServoInterval = 2;
File diff suppressed because it is too large Load Diff