Bode Plot

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.BodePlot displays magnitude and phase against a logarithmic frequency axis, reads the gain and phase margins off an open-loop response, and puts a measured response and a model on the same axes.</h2>
            <p>
                A response is given as measured points, or as a transfer function in s that the component evaluates across the frequency range. The stability margins are marked on both bands and written out: the phase margin at the frequency where the gain crosses 0 dB and the gain margin at the frequency where the phase crosses -180 degrees. Phase is unwrapped before the margins are found. A cursor reads every response at one frequency.
            </p>
        </section>

        <section>
            <h2>A servo speed loop: the open-loop response and its margins</h2>
            <p>
                The plant is a motor with an electrical and a mechanical time constant, a small transport delay and a resonance at 180 Hz; the controller is a PI. Raise the gain and watch the phase margin shrink; when it reaches zero the margins are marked as failing. The frequency response the component draws is evaluated from the transfer function, so a change of gain redraws at once. Click the plot or press the arrow keys to read the loop at a frequency.
            </p>
            <smart-bode-plot id="loop" label="Axis 2 speed loop, open loop" [showMargins]="true" [frequencyMin]="0.1" [frequencyMax]="2000"></smart-bode-plot>
            <div class="demo-actions">
                <label>Proportional gain <input type="range" id="kp" min="0.2" max="12" step="0.1" value="3" /> <span id="kpValue">3.0</span></label>
                <label>Integral time <input type="range" id="ti" min="0.005" max="0.2" step="0.005" value="0.04" /> <span id="tiValue">40 ms</span></label>
                <label><input type="checkbox" id="showMeasured" checked /> Show the measured response</label>
                <span id="loopLog" class="demo-log">margins() returns what the readout shows; cursorChange is listed here.</span>
            </div>
        </section>

        <section>
            <h2>Filters, as measured on the bench</h2>
            <p>
                A second-order low-pass and a notch, from a swept-sine measurement with a few hundred points each. The phase of the notch wraps at the notch frequency in the measurement and is unwrapped by the component before it is drawn.
            </p>
            <div class="row">
                <smart-bode-plot id="lowpass" class="half" label="Anti-alias filter, 1 kHz Butterworth" [cursor]="1000"></smart-bode-plot>
                <smart-bode-plot id="notch" class="half" label="50 Hz notch" [cursor]="50" [magnitudeMin]="-50" [magnitudeMax]="5"></smart-bode-plot>
            </div>
            <p class="hint">Keyboard: the plot is a tab stop. The left and right arrow keys move the cursor along the frequency axis, with Shift by ten steps; Home and End move it to the ends. The legend is one tab stop where Enter or Space hides and shows a response. The margins and the cursor readings are text under the plot.</p>
        </section>
    </div>
</div>

angular/app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

import { BodePlotModule } from 'smart-industrial/angular/bodeplot';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - BodePlot in Angular.
 *
 * The template is the HTML demo's markup: the elements are the wrappers, so what is
 * written on them is checked against their inputs. demo.ts drives them the way the
 * plant's data would, once every element in the view has rendered.
 */
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [BodePlotModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

    ngAfterViewInit(): void {
        const root = document.querySelector('.angular-root') as HTMLElement,
            pending: Promise<void>[] = [];

        root.querySelectorAll('*').forEach((element: any) => {
            if (typeof element.whenRendered === 'function' && !element.isRendered) {
                pending.push(element.whenRendered());
            }
        });

        Promise.all(pending).then(() => {
            if (!this.unmounted) {
                runDemo();
            }
        });
    }

    ngOnDestroy(): void {
        this.unmounted = true;
    }
}

angular/demo.ts

// @ts-nocheck
/* The HTML demo's script, as it was written: page code that feeds the elements, not a typed
   API. The types are on the wrappers in app.component.ts. */

/* The loop is a transfer function the component evaluates; the "measured" response is the
   same loop sampled with a little noise, so the two can be compared on one plot. */

function gaussian() {
    return Math.sqrt(-2 * Math.log(Math.random() || 1e-12)) * Math.cos(2 * Math.PI * Math.random());
}

/* (a0 + a1 s + ...) as coefficients highest power first, multiplied out. */
function multiply(a, b) {
    const out = new Array(a.length + b.length - 1).fill(0);

    for (let i = 0; i < a.length; i++) {
        for (let j = 0; j < b.length; j++) {
            out[i + j] += a[i] * b[j];
        }
    }

    return out;
}

export function runDemo(): void {
    /* ── The speed loop ────────────────────────────────────────────────── */
    const loop = document.getElementById('loop'),
        loopLog = document.getElementById('loopLog'),
        kp = document.getElementById('kp'),
        kpValue = document.getElementById('kpValue'),
        ti = document.getElementById('ti'),
        tiValue = document.getElementById('tiValue'),
        showMeasured = document.getElementById('showMeasured');

    const ELECTRICAL = 0.004, MECHANICAL = 0.12, DELAY = 0.0008, RESONANCE = 2 * Math.PI * 180, DAMPING = 0.08;

    /* L(s) = Kp (1 + 1/(Ti s)) · 1/((τe s + 1)(τm s + 1)) · ω²/(s² + 2ζω s + ω²) · Padé delay. */
    function openLoop(gain, integral) {
        const controller = [gain * integral, gain],                         // Kp (Ti s + 1)
            controllerDen = [integral, 0],                                   // Ti s
            plantDen = multiply([ELECTRICAL, 1], [MECHANICAL, 1]),
            resonanceNum = [RESONANCE * RESONANCE],
            resonanceDen = [1, 2 * DAMPING * RESONANCE, RESONANCE * RESONANCE],
            padeNum = [-DELAY / 2, 1],
            padeDen = [DELAY / 2, 1];

        return {
            numerator: multiply(multiply(controller, resonanceNum), padeNum),
            denominator: multiply(multiply(multiply(controllerDen, plantDen), resonanceDen), padeDen)
        };
    }

    function measured(transfer) {
        const frequencies = [], magnitude = [], phase = [];

        for (let i = 0; i <= 90; i++) {
            const f = Math.pow(10, -1 + i * 0.05),
                value = loop.evaluate(transfer, f);

            frequencies.push(f);
            magnitude.push(value.magnitude + gaussian() * 0.4);
            phase.push(value.phase + gaussian() * 1.5);
        }

        return { frequencies: frequencies, magnitude: magnitude, phase: phase };
    }

    function updateLoop() {
        const transfer = openLoop(Number(kp.value), Number(ti.value)),
            sampled = measured(transfer);

        loop.plots = [
            { id: 'model', label: 'Model', transferFunction: transfer },
            { id: 'measured', label: 'Measured', frequencies: sampled.frequencies, magnitude: sampled.magnitude, phase: sampled.phase, visible: showMeasured.checked }
        ];

        const m = loop.margins('model');

        loopLog.textContent = 'margins(): GM ' + (isFinite(m.gainMargin) ? m.gainMargin.toFixed(1) + ' dB at ' + m.gainMarginFrequency.toFixed(1) + ' Hz' : 'none') +
            ', PM ' + (isFinite(m.phaseMargin) ? m.phaseMargin.toFixed(1) + '° at ' + m.phaseMarginFrequency.toFixed(1) + ' Hz' : 'none');
    }

    kp.addEventListener('input', function () {
        kpValue.textContent = Number(kp.value).toFixed(1);
        updateLoop();
    });

    ti.addEventListener('input', function () {
        tiValue.textContent = Math.round(Number(ti.value) * 1000) + ' ms';
        updateLoop();
    });

    showMeasured.addEventListener('change', updateLoop);

    loop.addEventListener('cursorChange', function (event) {
        const value = loop.valueAt('model', event.detail.frequency);

        loopLog.textContent = 'cursorChange: ' + event.detail.frequency.toFixed(2) + ' Hz, model ' + value.magnitude.toFixed(2) + ' dB, ' + value.phase.toFixed(1) + '°';
    });

    updateLoop();

    /* ── Bench filters ─────────────────────────────────────────────────── */
    const lowpass = document.getElementById('lowpass'),
        notch = document.getElementById('notch');

    function sweep(evaluate, from, to, points, noise) {
        const frequencies = [], magnitude = [], phase = [];

        for (let i = 0; i <= points; i++) {
            const f = Math.pow(10, Math.log10(from) + (Math.log10(to) - Math.log10(from)) * i / points),
                value = evaluate(f);

            frequencies.push(f);
            /* An analyser has a noise floor; nothing measures -240 dB. */
            magnitude.push(Math.max(-70, value.magnitude) + gaussian() * noise);
            /* As an analyser reports it: wrapped to ±180. */
            phase.push(((value.phase + gaussian() * noise * 2 + 180) % 360 + 360) % 360 - 180);
        }

        return { frequencies: frequencies, magnitude: magnitude, phase: phase };
    }

    const FC = 2 * Math.PI * 1000,
        butterworth = { numerator: [FC * FC], denominator: [1, Math.SQRT2 * FC, FC * FC] },
        lp = sweep((f) => lowpass.evaluate(butterworth, f), 10, 100000, 300, 0.15);

    lowpass.plots = [
        { id: 'measured', label: 'Measured', frequencies: lp.frequencies, magnitude: lp.magnitude, phase: lp.phase },
        { id: 'design', label: 'Design', transferFunction: butterworth }
    ];

    const F0 = 2 * Math.PI * 50, Q = 8,
        notchTransfer = { numerator: [1, 0, F0 * F0], denominator: [1, F0 / Q, F0 * F0] },
        nt = sweep((f) => notch.evaluate(notchTransfer, f), 5, 500, 400, 0.1);

    notch.plots = [{ id: 'measured', label: 'Measured', frequencies: nt.frequencies, magnitude: nt.magnitude, phase: nt.phase }];
}

angular/app.component.css

smart-bode-plot {
    --smart-bode-height: 440px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

smart-bode-plot.half {
    --smart-bode-height: 360px;
    flex: 1 1 420px;
    min-width: 0;
    width: auto;
}

.demo-actions input[type="range"] {
    width: 160px;
    vertical-align: middle;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

react/App.jsx

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/styles/smart.industrial-dark.css';
import './App.css';
import React from 'react';
import { BodePlot } from 'smart-industrial/react/bodeplot';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The loop is a transfer function the component evaluates; the "measured" response is the
   same loop sampled with a little noise, so the two can be compared on one plot. */

function gaussian() {
    return Math.sqrt(-2 * Math.log(Math.random() || 1e-12)) * Math.cos(2 * Math.PI * Math.random());
}

/* (a0 + a1 s + ...) as coefficients highest power first, multiplied out. */
function multiply(a, b) {
    const out = new Array(a.length + b.length - 1).fill(0);

    for (let i = 0; i < a.length; i++) {
        for (let j = 0; j < b.length; j++) {
            out[i + j] += a[i] * b[j];
        }
    }

    return out;
}

const App = () => {
    const root = React.useRef(null);

    React.useEffect(() => {
        /* The elements render after React has mounted them, and the demo's logic - written
           for a page's load event - reads their parts, so it waits for every element in the
           tree to have rendered first. */
        const pending = Array.from(root.current.querySelectorAll('*'))
            .filter((element) => typeof element.whenRendered === 'function' && !element.isRendered)
            .map((element) => element.whenRendered());
        let unmounted = false;

        Promise.all(pending).then(() => {
            if (unmounted) {
                return;
            }

            /* ── The speed loop ────────────────────────────────────────────────── */
            const loop = document.getElementById('loop'),
                loopLog = document.getElementById('loopLog'),
                kp = document.getElementById('kp'),
                kpValue = document.getElementById('kpValue'),
                ti = document.getElementById('ti'),
                tiValue = document.getElementById('tiValue'),
                showMeasured = document.getElementById('showMeasured');

            const ELECTRICAL = 0.004, MECHANICAL = 0.12, DELAY = 0.0008, RESONANCE = 2 * Math.PI * 180, DAMPING = 0.08;

            /* L(s) = Kp (1 + 1/(Ti s)) · 1/((τe s + 1)(τm s + 1)) · ω²/(s² + 2ζω s + ω²) · Padé delay. */
            function openLoop(gain, integral) {
                const controller = [gain * integral, gain],                         // Kp (Ti s + 1)
                    controllerDen = [integral, 0],                                   // Ti s
                    plantDen = multiply([ELECTRICAL, 1], [MECHANICAL, 1]),
                    resonanceNum = [RESONANCE * RESONANCE],
                    resonanceDen = [1, 2 * DAMPING * RESONANCE, RESONANCE * RESONANCE],
                    padeNum = [-DELAY / 2, 1],
                    padeDen = [DELAY / 2, 1];

                return {
                    numerator: multiply(multiply(controller, resonanceNum), padeNum),
                    denominator: multiply(multiply(multiply(controllerDen, plantDen), resonanceDen), padeDen)
                };
            }

            function measured(transfer) {
                const frequencies = [], magnitude = [], phase = [];

                for (let i = 0; i <= 90; i++) {
                    const f = Math.pow(10, -1 + i * 0.05),
                        value = loop.evaluate(transfer, f);

                    frequencies.push(f);
                    magnitude.push(value.magnitude + gaussian() * 0.4);
                    phase.push(value.phase + gaussian() * 1.5);
                }

                return { frequencies: frequencies, magnitude: magnitude, phase: phase };
            }

            function updateLoop() {
                const transfer = openLoop(Number(kp.value), Number(ti.value)),
                    sampled = measured(transfer);

                loop.plots = [
                    { id: 'model', label: 'Model', transferFunction: transfer },
                    { id: 'measured', label: 'Measured', frequencies: sampled.frequencies, magnitude: sampled.magnitude, phase: sampled.phase, visible: showMeasured.checked }
                ];

                const m = loop.margins('model');

                loopLog.textContent = 'margins(): GM ' + (isFinite(m.gainMargin) ? m.gainMargin.toFixed(1) + ' dB at ' + m.gainMarginFrequency.toFixed(1) + ' Hz' : 'none') +
                    ', PM ' + (isFinite(m.phaseMargin) ? m.phaseMargin.toFixed(1) + '° at ' + m.phaseMarginFrequency.toFixed(1) + ' Hz' : 'none');
            }

            kp.addEventListener('input', function () {
                kpValue.textContent = Number(kp.value).toFixed(1);
                updateLoop();
            });

            ti.addEventListener('input', function () {
                tiValue.textContent = Math.round(Number(ti.value) * 1000) + ' ms';
                updateLoop();
            });

            showMeasured.addEventListener('change', updateLoop);

            loop.addEventListener('cursorChange', function (event) {
                const value = loop.valueAt('model', event.detail.frequency);

                loopLog.textContent = 'cursorChange: ' + event.detail.frequency.toFixed(2) + ' Hz, model ' + value.magnitude.toFixed(2) + ' dB, ' + value.phase.toFixed(1) + '°';
            });

            updateLoop();

            /* ── Bench filters ─────────────────────────────────────────────────── */
            const lowpass = document.getElementById('lowpass'),
                notch = document.getElementById('notch');

            function sweep(evaluate, from, to, points, noise) {
                const frequencies = [], magnitude = [], phase = [];

                for (let i = 0; i <= points; i++) {
                    const f = Math.pow(10, Math.log10(from) + (Math.log10(to) - Math.log10(from)) * i / points),
                        value = evaluate(f);

                    frequencies.push(f);
                    /* An analyser has a noise floor; nothing measures -240 dB. */
                    magnitude.push(Math.max(-70, value.magnitude) + gaussian() * noise);
                    /* As an analyser reports it: wrapped to ±180. */
                    phase.push(((value.phase + gaussian() * noise * 2 + 180) % 360 + 360) % 360 - 180);
                }

                return { frequencies: frequencies, magnitude: magnitude, phase: phase };
            }

            const FC = 2 * Math.PI * 1000,
                butterworth = { numerator: [FC * FC], denominator: [1, Math.SQRT2 * FC, FC * FC] },
                lp = sweep((f) => lowpass.evaluate(butterworth, f), 10, 100000, 300, 0.15);

            lowpass.plots = [
                { id: 'measured', label: 'Measured', frequencies: lp.frequencies, magnitude: lp.magnitude, phase: lp.phase },
                { id: 'design', label: 'Design', transferFunction: butterworth }
            ];

            const F0 = 2 * Math.PI * 50, Q = 8,
                notchTransfer = { numerator: [1, 0, F0 * F0], denominator: [1, F0 / Q, F0 * F0] },
                nt = sweep((f) => notch.evaluate(notchTransfer, f), 5, 500, 400, 0.1);

            notch.plots = [{ id: 'measured', label: 'Measured', frequencies: nt.frequencies, magnitude: nt.magnitude, phase: nt.phase }];
        });

        return () => {
            unmounted = true;
        };
    }, []);

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.BodePlot displays magnitude and phase against a logarithmic frequency axis, reads the gain and phase margins off an open-loop response, and puts a measured response and a model on the same axes.</h2>
                    <p>A response is given as measured points, or as a transfer function in s that the component evaluates across the frequency range. The stability margins are marked on both bands and written out: the phase margin at the frequency where the gain crosses 0 dB and the gain margin at the frequency where the phase crosses -180 degrees. Phase is unwrapped before the margins are found. A cursor reads every response at one frequency.</p>
                </section>
                <section>
                    <h2>A servo speed loop: the open-loop response and its margins</h2>
                    <p>The plant is a motor with an electrical and a mechanical time constant, a small transport delay and a resonance at 180 Hz; the controller is a PI. Raise the gain and watch the phase margin shrink; when it reaches zero the margins are marked as failing. The frequency response the component draws is evaluated from the transfer function, so a change of gain redraws at once. Click the plot or press the arrow keys to read the loop at a frequency.</p>
                    <BodePlot id="loop" label="Axis 2 speed loop, open loop" showMargins frequencyMin={0.1} frequencyMax={2000}></BodePlot>
                    <div className="demo-actions">
                        <label>Proportional gain <input type="range" id="kp" min="0.2" max="12" step="0.1" defaultValue="3" /> <span id="kpValue">3.0</span></label>
                        <label>Integral time <input type="range" id="ti" min="0.005" max="0.2" step="0.005" defaultValue="0.04" /> <span id="tiValue">40 ms</span></label>
                        <label><input type="checkbox" id="showMeasured" defaultChecked /> Show the measured response</label>
                        <span id="loopLog" className="demo-log">margins() returns what the readout shows; cursorChange is listed here.</span>
                    </div>
                </section>
                <section>
                    <h2>Filters, as measured on the bench</h2>
                    <p>A second-order low-pass and a notch, from a swept-sine measurement with a few hundred points each. The phase of the notch wraps at the notch frequency in the measurement and is unwrapped by the component before it is drawn.</p>
                    <div className="row">
                        <BodePlot id="lowpass" className="half" label="Anti-alias filter, 1 kHz Butterworth" cursor={1000}></BodePlot>
                        <BodePlot id="notch" className="half" label="50 Hz notch" cursor={50} magnitudeMin={-50} magnitudeMax={5}></BodePlot>
                    </div>
                    <p className="hint">Keyboard: the plot is a tab stop. The left and right arrow keys move the cursor along the frequency axis, with Shift by ten steps; Home and End move it to the ends. The legend is one tab stop where Enter or Space hides and shows a response. The margins and the cursor readings are text under the plot.</p>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

smart-bode-plot {
    --smart-bode-height: 440px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

smart-bode-plot.half {
    --smart-bode-height: 360px;
    flex: 1 1 420px;
    min-width: 0;
    width: auto;
}

.demo-actions input[type="range"] {
    width: 160px;
    vertical-align: middle;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

vue/App.vue

<template>
  <div class="vue-root" theme="industrial" v-pre>
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.BodePlot displays magnitude and phase against a logarithmic frequency axis, reads the gain and phase margins off an open-loop response, and puts a measured response and a model on the same axes.</h2>
            <p>
                A response is given as measured points, or as a transfer function in s that the component evaluates across the frequency range. The stability margins are marked on both bands and written out: the phase margin at the frequency where the gain crosses 0 dB and the gain margin at the frequency where the phase crosses -180 degrees. Phase is unwrapped before the margins are found. A cursor reads every response at one frequency.
            </p>
        </section>

        <section>
            <h2>A servo speed loop: the open-loop response and its margins</h2>
            <p>
                The plant is a motor with an electrical and a mechanical time constant, a small transport delay and a resonance at 180 Hz; the controller is a PI. Raise the gain and watch the phase margin shrink; when it reaches zero the margins are marked as failing. The frequency response the component draws is evaluated from the transfer function, so a change of gain redraws at once. Click the plot or press the arrow keys to read the loop at a frequency.
            </p>
            <smart-bode-plot id="loop" label="Axis 2 speed loop, open loop" show-margins frequency-min="0.1" frequency-max="2000"></smart-bode-plot>
            <div class="demo-actions">
                <label>Proportional gain <input type="range" id="kp" min="0.2" max="12" step="0.1" value="3" /> <span id="kpValue">3.0</span></label>
                <label>Integral time <input type="range" id="ti" min="0.005" max="0.2" step="0.005" value="0.04" /> <span id="tiValue">40 ms</span></label>
                <label><input type="checkbox" id="showMeasured" checked /> Show the measured response</label>
                <span id="loopLog" class="demo-log">margins() returns what the readout shows; cursorChange is listed here.</span>
            </div>
        </section>

        <section>
            <h2>Filters, as measured on the bench</h2>
            <p>
                A second-order low-pass and a notch, from a swept-sine measurement with a few hundred points each. The phase of the notch wraps at the notch frequency in the measurement and is unwrapped by the component before it is drawn.
            </p>
            <div class="row">
                <smart-bode-plot id="lowpass" class="half" label="Anti-alias filter, 1 kHz Butterworth" cursor="1000"></smart-bode-plot>
                <smart-bode-plot id="notch" class="half" label="50 Hz notch" cursor="50" magnitude-min="-50" magnitude-max="5"></smart-bode-plot>
            </div>
            <p class="hint">Keyboard: the plot is a tab stop. The left and right arrow keys move the cursor along the frequency axis, with Shift by ten steps; Home and End move it to the ends. The legend is one tab stop where Enter or Space hides and shows a response. The margins and the cursor readings are text under the plot.</p>
        </section>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-industrial/source/styles/smart.default.css";
import "smart-industrial/source/styles/smart.industrial-elements.css";
import "smart-industrial/source/styles/smart.industrial.css";
import "smart-industrial/source/styles/smart.industrial-dark.css";
import "smart-industrial/source/modules/smart.bodeplot.js";


/* The loop is a transfer function the component evaluates; the "measured" response is the
   same loop sampled with a little noise, so the two can be compared on one plot. */

function gaussian() {
    return Math.sqrt(-2 * Math.log(Math.random() || 1e-12)) * Math.cos(2 * Math.PI * Math.random());
}

/* (a0 + a1 s + ...) as coefficients highest power first, multiplied out. */
function multiply(a, b) {
    const out = new Array(a.length + b.length - 1).fill(0);

    for (let i = 0; i < a.length; i++) {
        for (let j = 0; j < b.length; j++) {
            out[i + j] += a[i] * b[j];
        }
    }

    return out;
}

export default {
  name: "app",
  setup() {
    onMounted(() => {
      /* The elements render after Vue has mounted them, and the demo's logic - written for
         a page's load event - reads their parts, so it waits for every element in the tree
         to have rendered first. */
      const pending = Array.from(document.querySelector(".vue-root").querySelectorAll("*"))
        .filter((element) => typeof element.whenRendered === "function" && !element.isRendered)
        .map((element) => element.whenRendered());

      Promise.all(pending).then(() => {
        /* ── The speed loop ────────────────────────────────────────────────── */
        const loop = document.getElementById('loop'),
            loopLog = document.getElementById('loopLog'),
            kp = document.getElementById('kp'),
            kpValue = document.getElementById('kpValue'),
            ti = document.getElementById('ti'),
            tiValue = document.getElementById('tiValue'),
            showMeasured = document.getElementById('showMeasured');

        const ELECTRICAL = 0.004, MECHANICAL = 0.12, DELAY = 0.0008, RESONANCE = 2 * Math.PI * 180, DAMPING = 0.08;

        /* L(s) = Kp (1 + 1/(Ti s)) · 1/((τe s + 1)(τm s + 1)) · ω²/(s² + 2ζω s + ω²) · Padé delay. */
        function openLoop(gain, integral) {
            const controller = [gain * integral, gain],                         // Kp (Ti s + 1)
                controllerDen = [integral, 0],                                   // Ti s
                plantDen = multiply([ELECTRICAL, 1], [MECHANICAL, 1]),
                resonanceNum = [RESONANCE * RESONANCE],
                resonanceDen = [1, 2 * DAMPING * RESONANCE, RESONANCE * RESONANCE],
                padeNum = [-DELAY / 2, 1],
                padeDen = [DELAY / 2, 1];

            return {
                numerator: multiply(multiply(controller, resonanceNum), padeNum),
                denominator: multiply(multiply(multiply(controllerDen, plantDen), resonanceDen), padeDen)
            };
        }

        function measured(transfer) {
            const frequencies = [], magnitude = [], phase = [];

            for (let i = 0; i <= 90; i++) {
                const f = Math.pow(10, -1 + i * 0.05),
                    value = loop.evaluate(transfer, f);

                frequencies.push(f);
                magnitude.push(value.magnitude + gaussian() * 0.4);
                phase.push(value.phase + gaussian() * 1.5);
            }

            return { frequencies: frequencies, magnitude: magnitude, phase: phase };
        }

        function updateLoop() {
            const transfer = openLoop(Number(kp.value), Number(ti.value)),
                sampled = measured(transfer);

            loop.plots = [
                { id: 'model', label: 'Model', transferFunction: transfer },
                { id: 'measured', label: 'Measured', frequencies: sampled.frequencies, magnitude: sampled.magnitude, phase: sampled.phase, visible: showMeasured.checked }
            ];

            const m = loop.margins('model');

            loopLog.textContent = 'margins(): GM ' + (isFinite(m.gainMargin) ? m.gainMargin.toFixed(1) + ' dB at ' + m.gainMarginFrequency.toFixed(1) + ' Hz' : 'none') +
                ', PM ' + (isFinite(m.phaseMargin) ? m.phaseMargin.toFixed(1) + '° at ' + m.phaseMarginFrequency.toFixed(1) + ' Hz' : 'none');
        }

        kp.addEventListener('input', function () {
            kpValue.textContent = Number(kp.value).toFixed(1);
            updateLoop();
        });

        ti.addEventListener('input', function () {
            tiValue.textContent = Math.round(Number(ti.value) * 1000) + ' ms';
            updateLoop();
        });

        showMeasured.addEventListener('change', updateLoop);

        loop.addEventListener('cursorChange', function (event) {
            const value = loop.valueAt('model', event.detail.frequency);

            loopLog.textContent = 'cursorChange: ' + event.detail.frequency.toFixed(2) + ' Hz, model ' + value.magnitude.toFixed(2) + ' dB, ' + value.phase.toFixed(1) + '°';
        });

        updateLoop();

        /* ── Bench filters ─────────────────────────────────────────────────── */
        const lowpass = document.getElementById('lowpass'),
            notch = document.getElementById('notch');

        function sweep(evaluate, from, to, points, noise) {
            const frequencies = [], magnitude = [], phase = [];

            for (let i = 0; i <= points; i++) {
                const f = Math.pow(10, Math.log10(from) + (Math.log10(to) - Math.log10(from)) * i / points),
                    value = evaluate(f);

                frequencies.push(f);
                /* An analyser has a noise floor; nothing measures -240 dB. */
                magnitude.push(Math.max(-70, value.magnitude) + gaussian() * noise);
                /* As an analyser reports it: wrapped to ±180. */
                phase.push(((value.phase + gaussian() * noise * 2 + 180) % 360 + 360) % 360 - 180);
            }

            return { frequencies: frequencies, magnitude: magnitude, phase: phase };
        }

        const FC = 2 * Math.PI * 1000,
            butterworth = { numerator: [FC * FC], denominator: [1, Math.SQRT2 * FC, FC * FC] },
            lp = sweep((f) => lowpass.evaluate(butterworth, f), 10, 100000, 300, 0.15);

        lowpass.plots = [
            { id: 'measured', label: 'Measured', frequencies: lp.frequencies, magnitude: lp.magnitude, phase: lp.phase },
            { id: 'design', label: 'Design', transferFunction: butterworth }
        ];

        const F0 = 2 * Math.PI * 50, Q = 8,
            notchTransfer = { numerator: [1, 0, F0 * F0], denominator: [1, F0 / Q, F0 * F0] },
            nt = sweep((f) => notch.evaluate(notchTransfer, f), 5, 500, 400, 0.1);

        notch.plots = [{ id: 'measured', label: 'Measured', frequencies: nt.frequencies, magnitude: nt.magnitude, phase: nt.phase }];
      });
    });
  }
};
</script>

<style>
smart-bode-plot {
    --smart-bode-height: 440px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

smart-bode-plot.half {
    --smart-bode-height: 360px;
    flex: 1 1 420px;
    min-width: 0;
    width: auto;
}

.demo-actions input[type="range"] {
    width: 160px;
    vertical-align: middle;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}
</style>