Fix styling and layout of SPA

This commit is contained in:
Joop Schilder 2021-05-08 23:03:33 +02:00
parent a9d0090a08
commit 362bc58c1f
1 changed files with 48 additions and 33 deletions

View File

@ -2,17 +2,14 @@
const FORM_METHOD = 'GET'; // or 'POST'
const FALLBACK_DRIVER_IMPEDANCE = 4.;
const TWO_PI = 2. * 3.1415926535;
const FREQ_MIN = 250.;
const FREQ_MAX = 18000.;
$form_source = FORM_METHOD === 'POST' ? $_POST : $_GET;
$woofer_impedance = FALLBACK_DRIVER_IMPEDANCE;
$tweeter_impedance = FALLBACK_DRIVER_IMPEDANCE;
$form_submitted = !empty($form_source);
const FREQ_MIN = 500.;
const FREQ_MAX = 16000.;
$form = FORM_METHOD === 'POST' ? $_POST : $_GET;
$form_submitted = !empty($form);
$tweeter_impedance = $woofer_impedance = FALLBACK_DRIVER_IMPEDANCE;
if ($form_submitted) {
$woofer_impedance = @(float)($form_source['w']) ?: FALLBACK_DRIVER_IMPEDANCE;
$tweeter_impedance = @(float)($form_source['t']) ?: FALLBACK_DRIVER_IMPEDANCE;
$tweeter_impedance = @(float)($form['tweeter_impedance']) ?: FALLBACK_DRIVER_IMPEDANCE;
$woofer_impedance = @(float)($form['woofer_impedance']) ?: FALLBACK_DRIVER_IMPEDANCE;
}
?>
<!DOCTYPE html>
@ -37,7 +34,7 @@ if ($form_submitted) {
.off-the-wall {
margin-left: 3em;
}
.has-breathing-room {
.with-breating-room {
margin: 1.5em 1em;
}
.right-aligned {
@ -80,58 +77,76 @@ if ($form_submitted) {
</style>
</head>
<body>
<div class="has-breathing-room">
This is a simple component calculator for a first-order crossover. Component values are calculated with the following formulae:
<div class="has-breathing-room height-padded">
<div class="with-breating-room">
This is a simple component calculator for a first-order crossover.
Component values are calculated with the following formulae:
<div class="with-breating-room height-padded">
<span class="monospace">C = 1 / (2 * π * f * R)</span><br/>
<span class="monospace">L = R / (2 * π * f)</span>
</div>
</div>
<div class="has-breathing-room explaining underlined">
First-order filters have a 20 dB/decade (or 6 dB/octave) slope. All first-order filters have a Butterworth filter characteristic. [...]
First-order filters are considered by many audiophiles to be ideal for crossovers. This is because this filter type is 'transient perfect', meaning it passes both amplitude and phase unchanged across the range of interest. [...]
In practice, speaker systems with true first-order acoustic slopes are difficult to design because they require large overlapping driver bandwidth, and the shallow slopes mean that non-coincident drivers interfere over a wide frequency range and cause large response shifts off-axis.<br/>
<div class="has-breathing-room source">From Wikipedia: <a href="https://en.wikipedia.org/wiki/Audio_crossover">Audio Crossover</a></div>
<div class="with-breating-room explaining underlined">
First-order filters have a 20 dB/decade (or 6 dB/octave) slope.
All first-order filters have a Butterworth filter characteristic.
[...]
First-order filters are considered by many audiophiles to be ideal for crossovers.
This is because this filter type is 'transient perfect',
meaning it passes both amplitude and phase unchanged across the range of interest.
[...]
In practice, speaker systems with true first-order acoustic slopes are difficult to design
because they require large overlapping driver bandwidth,
and the shallow slopes mean that non-coincident drivers interfere
over a wide frequency range and cause large response shifts off-axis.
<br/>
<div class="with-breating-room source">
From Wikipedia: <a href="https://en.wikipedia.org/wiki/Audio_crossover">Audio Crossover</a>
</div>
</div>
<div class="has-breathing-room underlined height-padded">
<div class="with-breating-room underlined height-padded">
<form class="height-padded" action="" method="<?php echo FORM_METHOD; ?>">
<table>
<tr>
<td class="height-padded right-padded">Tweeter impedance ():</td>
<td class="height-padded"><input class="monospace left-padded" type="number" min="0.5" step="0.5" name="t" placeholder="Tweeter Ω" value="<?php echo $tweeter_impedance; ?>"></td>
<td class="height-padded">
<input class="monospace left-padded" type="number" min="0.5" step="0.5"
name="tweeter_impedance" placeholder="Tweeter Ω" value="<?php echo $tweeter_impedance; ?>">
</td>
</tr>
<tr>
<td class="height-padded right-padded">Woofer impedance ():</td>
<td class="height-padded"><input class="monospace left-padded" type="number" min="0.5" step="0.5" name="w" placeholder="Woofer Ω" value="<?php echo $woofer_impedance; ?>"></td>
<td class="height-padded">
<input class="monospace left-padded" type="number" min="0.5" step="0.5"
name="woofer_impedance" placeholder="Woofer Ω" value="<?php echo $woofer_impedance; ?>">
</td>
</tr>
<tr>
<td class="height-padded" colspan="2"><input type="submit" value="Calculate"></td>
</tr>
</table>
</form>
</div>
<?php if ($form_submitted): ?>
<table class="bordered narrow off-the-wall">
<tr><th class="width-padded height-padded bordered" colspan="100%">
Component table for <?php printf("%.3g Ω ", $tweeter_impedance) ?> tweeter and <?php printf("%.3g Ω", $woofer_impedance) ?> woofer
Component table for <?php printf("%.3g Ω ", $tweeter_impedance) ?> tweeter
and <?php printf("%.3g Ω", $woofer_impedance) ?> woofer
</th></tr>
<tr>
<th class="width-padded height-padded bordered">Crossover Frequency (Hz)</th>
<th class="width-padded height-padded bordered">Tweeter Capacitor (μF)</th>
<th class="width-padded height-padded bordered">Woofer Inductor (mH)</th>
</tr>
<?php for ($f = FREQ_MIN; $f <= FREQ_MAX; $f += FREQ_MIN): ?>
<tr>
<td class="width-padded height-padded bordered monospace"><?php printf("%g", $f); ?></td>
<td class="width-padded height-padded bordered monospace"><?php printf("%.4g", 1000_000. * (1. / (TWO_PI * $f * $tweeter_impedance))); ?></td>
<td class="width-padded height-padded bordered monospace"><?php printf("%.4g", 1000. * ($woofer_impedance / (TWO_PI * $f))); ?></td>
<td class="width-padded height-padded bordered monospace">
<?php printf("%g", $f); ?>
</td>
<td class="width-padded height-padded bordered monospace">
<?php printf("%.4g", 1000_000. * (1. / (TWO_PI * $f * $tweeter_impedance))); ?>
</td>
<td class="width-padded height-padded bordered monospace">
<?php printf("%.4g", 1000. * ($woofer_impedance / (TWO_PI * $f))); ?>
</td>
</tr>
<?php endfor ?>
</table>