@jjlmoya/utils-drones 1.30.0 → 1.32.0

package/src/tool/drone-flight-time/component.astro

@@ -1,187 +1,187 @@
----
-const { ui } = Astro.props;
-import BatterySpecs from "./components/BatterySpecs.astro";
-import ConsumptionStats from "./components/ConsumptionStats.astro";
-import FlightDashboard from "./components/FlightDashboard.astro";
-import AutonomyChart from "./components/AutonomyChart.astro";
----
-
-<div class="flight-calculator-ui">
-    <div class="tech-mega-card animate-in fade-in zoom-in duration-700">
-        <div class="card-grid">
-            <div class="config-sidebar">
-                <BatterySpecs ui={ui} />
-                <div class="divider"></div>
-                <ConsumptionStats ui={ui} />
-            </div>
-            
-            <div class="main-display">
-                <FlightDashboard ui={ui} />
-                <div class="divider"></div>
-                <AutonomyChart ui={ui} />
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-    import { Chart, registerables } from "chart.js";
-    Chart.register(...registerables);
-
-    const capInput = document.getElementById("capacityInput") as HTMLInputElement;
-    const cellsInput = document.getElementById("cellsInput") as HTMLSelectElement;
-    const safetyInput = document.getElementById("safetyInput") as HTMLInputElement;
-    const drawInput = document.getElementById("drawInput") as HTMLInputElement;
-    const wattsInput = document.getElementById("wattsInput") as HTMLInputElement;
-    const effInput = document.getElementById("efficiencyInput") as HTMLInputElement;
-
-    const displays = {
-        cap: document.getElementById("capDisplay"),
-        cells: document.getElementById("cellsDisplay"),
-        volts: document.getElementById("voltsDisplay"),
-        safety: document.getElementById("safetyDisplay"),
-        draw: document.getElementById("drawDisplay"),
-        watts: document.getElementById("wattsDisplay"),
-        eff: document.getElementById("effDisplay"),
-        timeMain: document.getElementById("timeMainDisplay"),
-        timeTotal: document.getElementById("timeTotalDisplay"),
-        wh: document.getElementById("whDisplay"),
-        co2: document.getElementById("co2Display"),
-        circle: document.getElementById("timeCircle")
-    };
-
-    let chart: Chart | null = null;
-
-    function getChartConfig(label: string) {
-        return {
-            type: "line",
-            data: {
-                labels: [],
-                datasets: [{
-                    label,
-                    data: [],
-                    borderColor: "#f59e0b",
-                    backgroundColor: "rgba(245, 158, 11, 0.1)",
-                    borderWidth: 3,
-                    fill: true,
-                    tension: 0.4,
-                    pointRadius: 0,
-                    pointHitRadius: 10
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: { legend: { display: false } },
-                scales: {
-                    y: { beginAtZero: true, grid: { color: "rgba(0,0,0,0.05)" } },
-                    x: { grid: { display: false } }
-                }
-            }
-        };
-    }
-
-    function initChart() {
-        const canvas = document.getElementById("autonomyChart") as HTMLCanvasElement;
-        const ctx = canvas?.getContext("2d");
-        if (!ctx) return;
-        const chartLabel = canvas.dataset.label || "Minutos";
-        chart = new Chart(ctx, getChartConfig(chartLabel));
-    }
-
-    function calculate(source: string) {
-        const cap = parseFloat(capInput.value);
-        const cells = parseInt(cellsInput.value);
-        const safety = parseFloat(safetyInput.value) / 100;
-        let draw = parseFloat(drawInput.value);
-        const voltage = cells * 3.7;
-
-        if (source === 'watts') {
-            draw = parseFloat(wattsInput.value) / voltage;
-            drawInput.value = draw.toFixed(1);
-        } else {
-            wattsInput.value = (draw * voltage).toFixed(1);
-        }
-
-        const state = { cap, cells, safety, draw, voltage };
-        updateDisplays(state);
-
-        const usableAh = (cap / 1000) * safety;
-        const totalAh = cap / 1000;
-
-        const safeTimeMin = (usableAh / draw) * 60;
-        const totalTimeMin = (totalAh / draw) * 60;
-
-        const energyWh = (cap / 1000) * voltage;
-
-        renderResults(safeTimeMin, totalTimeMin, energyWh, cap);
-        updateChart(usableAh);
-    }
-
-    function updateDisplays(state: { cap: number; cells: number; safety: number; draw: number; voltage: number }) {
-        if (displays.cap) displays.cap.textContent = state.cap.toString();
-        if (displays.cells) displays.cells.textContent = state.cells.toString();
-        if (displays.volts) displays.volts.textContent = state.voltage.toFixed(1);
-        if (displays.safety) displays.safety.textContent = Math.round(state.safety * 100).toString();
-        if (displays.draw) displays.draw.textContent = state.draw.toFixed(1);
-        if (displays.watts) displays.watts.textContent = (state.draw * state.voltage).toFixed(1);
-        if (displays.eff) displays.eff.textContent = effInput.value;
-    }
-
-    function renderResults(safeMin: number, totalMin: number, wh: number, cap: number) {
-        if (displays.timeMain) displays.timeMain.textContent = formatTime(safeMin);
-        if (displays.timeTotal) displays.timeTotal.textContent = formatTime(totalMin);
-        if (displays.wh) displays.wh.textContent = `${wh.toFixed(1)} Wh`;
-        if (displays.co2) displays.co2.textContent = `${Math.round(cap * 0.05)} g`;
-
-        if (displays.circle) {
-            const limit = 20;
-            const progress = Math.min(safeMin / limit, 1);
-            const offset = 283 - (progress * 283);
-            (displays.circle as HTMLElement).style.strokeDashoffset = offset.toString();
-        }
-    }
-
-    function formatTime(decimalMin: number) {
-        if (isNaN(decimalMin) || decimalMin === Infinity) return "0:00";
-        const mins = Math.floor(decimalMin);
-        const secs = Math.floor((decimalMin - mins) * 60);
-        return `${mins}:${secs.toString().padStart(2, '0')}`;
-    }
-
-    function updateChart(usableAh: number) {
-        if (!chart) return;
-        const data: number[] = [];
-        const labels: string[] = [];
-        const currentDraw = parseFloat(drawInput.value);
-
-        for (let a = Math.max(1, currentDraw - 20); a <= currentDraw + 20; a += 2) {
-            labels.push(`${a}A`);
-            const val = ((usableAh / a) * 60);
-            data.push(Number(val.toFixed(1)));
-        }
-
-        chart.data.labels = labels;
-        if (chart.data.datasets[0]) chart.data.datasets[0].data = data;
-        chart.update('none');
-    }
-
-    [capInput, cellsInput, safetyInput, drawInput, effInput].forEach(el => {
-        el?.addEventListener("input", () => calculate('basic'));
-    });
-
-    wattsInput?.addEventListener("input", () => calculate('watts'));
-
-    document.querySelectorAll('.preset-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            capInput.value = btn.getAttribute('data-val') || "1500";
-            calculate('basic');
-        });
-    });
-
-    initChart();
-    calculate('basic');
-</script>
-
-
-
+---
+const { ui } = Astro.props;
+import BatterySpecs from "./components/BatterySpecs.astro";
+import ConsumptionStats from "./components/ConsumptionStats.astro";
+import FlightDashboard from "./components/FlightDashboard.astro";
+import AutonomyChart from "./components/AutonomyChart.astro";
+---
+
+<div class="flight-calculator-ui">
+    <div class="tech-mega-card animate-in fade-in zoom-in duration-700">
+        <div class="card-grid">
+            <div class="config-sidebar">
+                <BatterySpecs ui={ui} />
+                <div class="divider"></div>
+                <ConsumptionStats ui={ui} />
+            </div>
+            
+            <div class="main-display">
+                <FlightDashboard ui={ui} />
+                <div class="divider"></div>
+                <AutonomyChart ui={ui} />
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    import { Chart, registerables } from "chart.js";
+    Chart.register(...registerables);
+
+    const capInput = document.getElementById("capacityInput") as HTMLInputElement;
+    const cellsInput = document.getElementById("cellsInput") as HTMLSelectElement;
+    const safetyInput = document.getElementById("safetyInput") as HTMLInputElement;
+    const drawInput = document.getElementById("drawInput") as HTMLInputElement;
+    const wattsInput = document.getElementById("wattsInput") as HTMLInputElement;
+    const effInput = document.getElementById("efficiencyInput") as HTMLInputElement;
+
+    const displays = {
+        cap: document.getElementById("capDisplay"),
+        cells: document.getElementById("cellsDisplay"),
+        volts: document.getElementById("voltsDisplay"),
+        safety: document.getElementById("safetyDisplay"),
+        draw: document.getElementById("drawDisplay"),
+        watts: document.getElementById("wattsDisplay"),
+        eff: document.getElementById("effDisplay"),
+        timeMain: document.getElementById("timeMainDisplay"),
+        timeTotal: document.getElementById("timeTotalDisplay"),
+        wh: document.getElementById("whDisplay"),
+        co2: document.getElementById("co2Display"),
+        circle: document.getElementById("timeCircle")
+    };
+
+    let chart: Chart | null = null;
+
+    function getChartConfig(label: string) {
+        return {
+            type: "line",
+            data: {
+                labels: [],
+                datasets: [{
+                    label,
+                    data: [],
+                    borderColor: "#f59e0b",
+                    backgroundColor: "rgba(245, 158, 11, 0.1)",
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 0,
+                    pointHitRadius: 10
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, grid: { color: "rgba(0,0,0,0.05)" } },
+                    x: { grid: { display: false } }
+                }
+            }
+        };
+    }
+
+    function initChart() {
+        const canvas = document.getElementById("autonomyChart") as HTMLCanvasElement;
+        const ctx = canvas?.getContext("2d");
+        if (!ctx) return;
+        const chartLabel = canvas.dataset.label || "Minutos";
+        chart = new Chart(ctx, getChartConfig(chartLabel));
+    }
+
+    function calculate(source: string) {
+        const cap = parseFloat(capInput.value);
+        const cells = parseInt(cellsInput.value);
+        const safety = parseFloat(safetyInput.value) / 100;
+        let draw = parseFloat(drawInput.value);
+        const voltage = cells * 3.7;
+
+        if (source === 'watts') {
+            draw = parseFloat(wattsInput.value) / voltage;
+            drawInput.value = draw.toFixed(1);
+        } else {
+            wattsInput.value = (draw * voltage).toFixed(1);
+        }
+
+        const state = { cap, cells, safety, draw, voltage };
+        updateDisplays(state);
+
+        const usableAh = (cap / 1000) * safety;
+        const totalAh = cap / 1000;
+
+        const safeTimeMin = (usableAh / draw) * 60;
+        const totalTimeMin = (totalAh / draw) * 60;
+
+        const energyWh = (cap / 1000) * voltage;
+
+        renderResults(safeTimeMin, totalTimeMin, energyWh, cap);
+        updateChart(usableAh);
+    }
+
+    function updateDisplays(state: { cap: number; cells: number; safety: number; draw: number; voltage: number }) {
+        if (displays.cap) displays.cap.textContent = state.cap.toString();
+        if (displays.cells) displays.cells.textContent = state.cells.toString();
+        if (displays.volts) displays.volts.textContent = state.voltage.toFixed(1);
+        if (displays.safety) displays.safety.textContent = Math.round(state.safety * 100).toString();
+        if (displays.draw) displays.draw.textContent = state.draw.toFixed(1);
+        if (displays.watts) displays.watts.textContent = (state.draw * state.voltage).toFixed(1);
+        if (displays.eff) displays.eff.textContent = effInput.value;
+    }
+
+    function renderResults(safeMin: number, totalMin: number, wh: number, cap: number) {
+        if (displays.timeMain) displays.timeMain.textContent = formatTime(safeMin);
+        if (displays.timeTotal) displays.timeTotal.textContent = formatTime(totalMin);
+        if (displays.wh) displays.wh.textContent = `${wh.toFixed(1)} Wh`;
+        if (displays.co2) displays.co2.textContent = `${Math.round(cap * 0.05)} g`;
+
+        if (displays.circle) {
+            const limit = 20;
+            const progress = Math.min(safeMin / limit, 1);
+            const offset = 283 - (progress * 283);
+            (displays.circle as HTMLElement).style.strokeDashoffset = offset.toString();
+        }
+    }
+
+    function formatTime(decimalMin: number) {
+        if (isNaN(decimalMin) || decimalMin === Infinity) return "0:00";
+        const mins = Math.floor(decimalMin);
+        const secs = Math.floor((decimalMin - mins) * 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function updateChart(usableAh: number) {
+        if (!chart) return;
+        const data: number[] = [];
+        const labels: string[] = [];
+        const currentDraw = parseFloat(drawInput.value);
+
+        for (let a = Math.max(1, currentDraw - 20); a <= currentDraw + 20; a += 2) {
+            labels.push(`${a}A`);
+            const val = ((usableAh / a) * 60);
+            data.push(Number(val.toFixed(1)));
+        }
+
+        chart.data.labels = labels;
+        if (chart.data.datasets[0]) chart.data.datasets[0].data = data;
+        chart.update('none');
+    }
+
+    [capInput, cellsInput, safetyInput, drawInput, effInput].forEach(el => {
+        el?.addEventListener("input", () => calculate('basic'));
+    });
+
+    wattsInput?.addEventListener("input", () => calculate('watts'));
+
+    document.querySelectorAll('.preset-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            capInput.value = btn.getAttribute('data-val') || "1500";
+            calculate('basic');
+        });
+    });
+
+    initChart();
+    calculate('basic');
+</script>
+
+
+

package/src/tool/drone-flight-time/seo.astro

@@ -1,15 +1,15 @@
----
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { droneFlightTime } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await droneFlightTime.i18n[locale]?.();
-if (!content) return null;
----
-
-{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { droneFlightTime } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await droneFlightTime.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/drone-motor-propeller-calculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as BibliographyComponent } from '@jjlmoya/utils-shared';
+import { BIBLIOGRAPHY_ITEMS } from './bibliography';
+---
+
+<BibliographyComponent links={BIBLIOGRAPHY_ITEMS} />

package/src/tool/drone-motor-propeller-calculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const BIBLIOGRAPHY_ITEMS: BibliographyEntry[] = [
+  {
+    name: 'NASA Thrust Coefficient Definition for Propellers',
+    url: 'https://ntrs.nasa.gov/api/citations/19900020078/downloads/19900020078.pdf',
+  },
+  {
+    name: 'University of Illinois UIUC Propeller Data Site',
+    url: 'https://m-selig.ae.illinois.edu/props/propDB.html',
+  },
+];

package/src/tool/drone-motor-propeller-calculator/component.astro

@@ -0,0 +1,109 @@
+---
+import type { DroneMotorPropellerUI } from './ui';
+
+interface Props {
+  ui: DroneMotorPropellerUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="drone-motor-tool" data-drone-motor-calculator data-unit="metric">
+  <script is:inline type="application/json" data-drone-motor-ui set:html={JSON.stringify(ui)}></script>
+  <div class="tool-controls">
+    <section class="setup-card presets-card" aria-labelledby="presets-title">
+      <div class="eyebrow">{ui.presetsHeader}</div>
+      <div class="preset-row" id="presets-title">
+        <button type="button" class="preset-button" data-preset="tiny-cruiser">{ui.presetTinyCruiser}</button>
+        <button type="button" class="preset-button is-selected" data-preset="freestyle">{ui.presetFreestyle}</button>
+        <button type="button" class="preset-button" data-preset="long-range">{ui.presetLongRange}</button>
+        <button type="button" class="preset-button" data-preset="cinelifter">{ui.presetCinelifter}</button>
+      </div>
+    </section>
+
+    <section class="setup-card unit-card" aria-labelledby="unit-title">
+      <div class="eyebrow" id="unit-title">{ui.unitHeader}</div>
+      <div class="unit-toggle" role="group" aria-label={ui.unitHeader}>
+        <button type="button" class="unit-button is-selected" data-unit="metric" aria-pressed="true">{ui.metricUnit}</button>
+        <button type="button" class="unit-button" data-unit="imperial" aria-pressed="false">{ui.imperialUnit}</button>
+      </div>
+    </section>
+
+    <section class="setup-card specs-card" aria-labelledby="setup-title">
+      <div class="section-heading">
+        <div class="eyebrow">01</div>
+        <h2 id="setup-title">{ui.setupHeader}</h2>
+      </div>
+      <div class="input-grid">
+        <label class="field"><span>{ui.motorKvLabel}</span><input data-field="motorKv" type="number" value="1950" min="100" max="10000" step="50" inputmode="decimal" /><small>KV</small></label>
+        <label class="field"><span>{ui.batteryVoltageLabel}</span><input data-field="batteryVoltage" type="number" value="22.2" min="1" max="60" step="0.1" inputmode="decimal" /><small>V</small></label>
+        <label class="field"><span>{ui.propDiameterLabel}</span><input data-field="propDiameterInches" type="number" value="5.1" min="1" max="30" step="0.1" inputmode="decimal" /><small data-unit-label="length">in</small></label>
+        <label class="field"><span>{ui.propPitchLabel}</span><input data-field="propPitchInches" type="number" value="4.3" min="0.5" max="25" step="0.1" inputmode="decimal" /><small data-unit-label="length">in</small></label>
+        <div class="choice-field"><span>{ui.bladeCountLabel}</span><div class="choice-row" role="group" aria-label={ui.bladeCountLabel}><button type="button" data-choice="bladeCount" data-value="2" aria-pressed="false">{ui.twoBlades}</button><button type="button" class="is-selected" data-choice="bladeCount" data-value="3" aria-pressed="true">{ui.threeBlades}</button><button type="button" data-choice="bladeCount" data-value="4" aria-pressed="false">{ui.fourBlades}</button></div></div>
+        <div class="choice-field"><span>{ui.motorCountLabel}</span><div class="choice-row" role="group" aria-label={ui.motorCountLabel}><button type="button" data-choice="motorCount" data-value="2" aria-pressed="false">{ui.twoMotors}</button><button type="button" class="is-selected" data-choice="motorCount" data-value="4" aria-pressed="true">{ui.fourMotors}</button><button type="button" data-choice="motorCount" data-value="6" aria-pressed="false">{ui.sixMotors}</button><button type="button" data-choice="motorCount" data-value="8" aria-pressed="false">{ui.eightMotors}</button></div></div>
+        <label class="field field-wide"><span>{ui.droneWeightLabel}</span><input data-field="droneWeightGrams" type="number" value="700" min="1" max="50000" step="10" inputmode="decimal" /><small data-unit-label="mass">g</small></label>
+      </div>
+    </section>
+
+    <section class="setup-card bench-card" aria-labelledby="bench-title">
+      <div class="section-heading">
+        <div class="eyebrow">02</div>
+        <h2 id="bench-title">{ui.benchDataHeader} <span>{ui.optionalLabel}</span></h2>
+      </div>
+      <div class="input-grid bench-grid">
+        <label class="field"><span>{ui.benchThrustLabel}</span><input data-field="benchThrustGrams" type="number" value="1900" min="1" max="30000" step="10" inputmode="decimal" /><small data-unit-label="mass">g</small></label>
+        <label class="field"><span>{ui.benchVoltageLabel}</span><input data-field="benchVoltage" type="number" value="22.2" min="1" max="60" step="0.1" inputmode="decimal" /><small>V</small></label>
+      </div>
+      <div class="bench-foot">
+        <p class="fine-print"><span data-output="source-note">{ui.benchBasedLabel}</span></p>
+        <button type="button" class="clear-button" data-action="clear-bench">{ui.clearBenchData}</button>
+      </div>
+    </section>
+  </div>
+
+  <section class="results-card" aria-labelledby="results-title">
+    <div class="results-topline">
+      <div>
+        <div class="eyebrow">03</div>
+        <h2 id="results-title">{ui.resultsHeader}</h2>
+      </div>
+      <div class="status-pill" data-output="status" aria-live="polite">{ui.headroomStatus}</div>
+    </div>
+    <div class="wind-tunnel">
+      <div class="tunnel-label tunnel-label-top">{ui.thrustAxisLabel}</div>
+      <div class="thrust-stream stream-left"></div>
+      <div class="thrust-stream stream-right"></div>
+      <div class="rotor-stage" data-role="rotor-stage">
+        <div class="rotor-shadow"></div>
+        <div class="rotor-disc">
+          <span class="rotor-blade blade-one"></span>
+          <span class="rotor-blade blade-two"></span>
+          <span class="rotor-blade blade-three"></span>
+          <span class="rotor-blade blade-four"></span>
+          <span class="rotor-hub"></span>
+        </div>
+        <div class="rotor-readout"><strong data-output="loaded-rpm">15,000 rpm</strong><span>{ui.sceneCaption}</span></div>
+      </div>
+      <div class="weight-marker"><span class="marker-line"></span><span>{ui.weightAxisLabel}</span></div>
+      <div class="lift-beam"><span></span></div>
+    </div>
+    <p class="status-advice" data-output="status-advice" aria-live="polite">{ui.headroomAdvice}</p>
+    <div class="result-grid">
+      <div class="result-cell accent"><span>{ui.thrustPerMotorLabel}</span><strong data-output="thrust-per-motor">1,900 g</strong></div>
+      <div class="result-cell accent"><span>{ui.totalThrustLabel}</span><strong data-output="total-thrust">7,600 g</strong></div>
+      <div class="result-cell"><span>{ui.pitchSpeedLabel}</span><strong data-output="pitch-speed">1,250 km/h</strong></div>
+      <div class="result-cell"><span>{ui.totalPowerLabel}</span><strong data-output="total-power">1,200 W</strong></div>
+      <div class="result-cell"><span>{ui.totalCurrentLabel}</span><strong data-output="total-current">54 A</strong></div>
+      <div class="result-cell"><span>{ui.thrustMarginLabel}</span><strong data-output="thrust-margin">986%</strong></div>
+      <div class="result-cell"><span>{ui.hoverThrottleLabel}</span><strong data-output="hover-throttle">30%</strong></div>
+    </div>
+    <div class="notes-row"><p>{ui.safetyNote}</p><p>{ui.modelNote}</p></div>
+  </section>
+</div>
+
+<script>
+  import { initDroneMotorPropellerCalculator } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-drone-motor-calculator]');
+  if (root) initDroneMotorPropellerCalculator(root);
+</script>