Fix styling and layout of SPA
This commit is contained in:
parent
a9d0090a08
commit
362bc58c1f
@ -2,17 +2,14 @@
|
|||||||
const FORM_METHOD = 'GET'; // or 'POST'
|
const FORM_METHOD = 'GET'; // or 'POST'
|
||||||
const FALLBACK_DRIVER_IMPEDANCE = 4.;
|
const FALLBACK_DRIVER_IMPEDANCE = 4.;
|
||||||
const TWO_PI = 2. * 3.1415926535;
|
const TWO_PI = 2. * 3.1415926535;
|
||||||
const FREQ_MIN = 250.;
|
const FREQ_MIN = 500.;
|
||||||
const FREQ_MAX = 18000.;
|
const FREQ_MAX = 16000.;
|
||||||
|
$form = FORM_METHOD === 'POST' ? $_POST : $_GET;
|
||||||
$form_source = FORM_METHOD === 'POST' ? $_POST : $_GET;
|
$form_submitted = !empty($form);
|
||||||
$woofer_impedance = FALLBACK_DRIVER_IMPEDANCE;
|
$tweeter_impedance = $woofer_impedance = FALLBACK_DRIVER_IMPEDANCE;
|
||||||
$tweeter_impedance = FALLBACK_DRIVER_IMPEDANCE;
|
|
||||||
|
|
||||||
$form_submitted = !empty($form_source);
|
|
||||||
if ($form_submitted) {
|
if ($form_submitted) {
|
||||||
$woofer_impedance = @(float)($form_source['w']) ?: FALLBACK_DRIVER_IMPEDANCE;
|
$tweeter_impedance = @(float)($form['tweeter_impedance']) ?: FALLBACK_DRIVER_IMPEDANCE;
|
||||||
$tweeter_impedance = @(float)($form_source['t']) ?: FALLBACK_DRIVER_IMPEDANCE;
|
$woofer_impedance = @(float)($form['woofer_impedance']) ?: FALLBACK_DRIVER_IMPEDANCE;
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
@ -37,7 +34,7 @@ if ($form_submitted) {
|
|||||||
.off-the-wall {
|
.off-the-wall {
|
||||||
margin-left: 3em;
|
margin-left: 3em;
|
||||||
}
|
}
|
||||||
.has-breathing-room {
|
.with-breating-room {
|
||||||
margin: 1.5em 1em;
|
margin: 1.5em 1em;
|
||||||
}
|
}
|
||||||
.right-aligned {
|
.right-aligned {
|
||||||
@ -80,58 +77,76 @@ if ($form_submitted) {
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="has-breathing-room">
|
<div class="with-breating-room">
|
||||||
This is a simple component calculator for a first-order crossover. Component values are calculated with the following formulae:
|
This is a simple component calculator for a first-order crossover.
|
||||||
<div class="has-breathing-room height-padded">
|
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">C = 1 / (2 * π * f * R)</span><br/>
|
||||||
<span class="monospace">L = R / (2 * π * f)</span>
|
<span class="monospace">L = R / (2 * π * f)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="with-breating-room explaining underlined">
|
||||||
<div class="has-breathing-room explaining underlined">
|
First-order filters have a 20 dB/decade (or 6 dB/octave) slope.
|
||||||
First-order filters have a 20 dB/decade (or 6 dB/octave) slope. All first-order filters have a Butterworth filter characteristic. [...]
|
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/>
|
First-order filters are considered by many audiophiles to be ideal for crossovers.
|
||||||
<div class="has-breathing-room source">From Wikipedia: <a href="https://en.wikipedia.org/wiki/Audio_crossover">Audio Crossover</a></div>
|
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>
|
||||||
|
<div class="with-breating-room underlined height-padded">
|
||||||
<div class="has-breathing-room underlined height-padded">
|
|
||||||
<form class="height-padded" action="" method="<?php echo FORM_METHOD; ?>">
|
<form class="height-padded" action="" method="<?php echo FORM_METHOD; ?>">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="height-padded right-padded">Tweeter impedance (Ω):</td>
|
<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>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td class="height-padded right-padded">Woofer impedance (Ω):</td>
|
<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>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td class="height-padded" colspan="2"><input type="submit" value="Calculate"></td>
|
<td class="height-padded" colspan="2"><input type="submit" value="Calculate"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($form_submitted): ?>
|
<?php if ($form_submitted): ?>
|
||||||
<table class="bordered narrow off-the-wall">
|
<table class="bordered narrow off-the-wall">
|
||||||
<tr><th class="width-padded height-padded bordered" colspan="100%">
|
<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>
|
</th></tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<th class="width-padded height-padded bordered">Crossover Frequency (Hz)</th>
|
<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">Tweeter Capacitor (μF)</th>
|
||||||
<th class="width-padded height-padded bordered">Woofer Inductor (mH)</th>
|
<th class="width-padded height-padded bordered">Woofer Inductor (mH)</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<?php for ($f = FREQ_MIN; $f <= FREQ_MAX; $f += FREQ_MIN): ?>
|
<?php for ($f = FREQ_MIN; $f <= FREQ_MAX; $f += FREQ_MIN): ?>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="width-padded height-padded bordered monospace"><?php printf("%g", $f); ?></td>
|
<td class="width-padded height-padded bordered monospace">
|
||||||
<td class="width-padded height-padded bordered monospace"><?php printf("%.4g", 1000_000. * (1. / (TWO_PI * $f * $tweeter_impedance))); ?></td>
|
<?php printf("%g", $f); ?>
|
||||||
<td class="width-padded height-padded bordered monospace"><?php printf("%.4g", 1000. * ($woofer_impedance / (TWO_PI * $f))); ?></td>
|
</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>
|
</tr>
|
||||||
<?php endfor ?>
|
<?php endfor ?>
|
||||||
</table>
|
</table>
|
||||||
|
Loading…
Reference in New Issue
Block a user