acoustics-lab/absorbers.html at main · ovska/acoustics-lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Porous Absorber Efficiency Lab</title>
    <link rel="icon" href="./assets/favicons/porous-absorber.ico" sizes="any">
    <link rel="icon" href="./assets/icons/porous-absorber.svg" type="image/svg+xml">
    <link rel="icon" href="./assets/favicons/porous-absorber-512.png" type="image/png" sizes="512x512">
    <link rel="apple-touch-icon" href="./assets/favicons/porous-absorber-apple-touch.png" sizes="180x180">
    <link rel="stylesheet" href="./styles.css?v=3">
    <link rel="stylesheet" href="./navigation.css">
    <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" defer></script>
    <script src="./app.js?v=2" defer></script>
  </head>
  <body>
    <main class="app-shell">
      <header class="topbar">
        <div class="brand-lockup">
          <img class="brand-icon" src="./assets/icons/porous-absorber.svg" width="44" height="44" alt="">
          <div class="brand-copy">
            <nav class="tool-navigation" aria-label="Tool navigation">
              <a class="tool-home-link" href="./index.html">All acoustics tools</a>
            </nav>
            <div class="title-with-info">
              <h1>Porous Absorber Efficiency Lab</h1>
              <button
                class="model-info"
                type="button"
                aria-label="Based on Allard and Champoux 1992 models"
                aria-expanded="false"
                data-tooltip="Based on Allard &amp; Champoux (1992) models."
              >i</button>
            </div>
          </div>
        </div>
        <div class="top-actions" aria-label="Global controls">
          <label class="switch-control">
            <input id="darkMode" type="checkbox">
            <span class="switch-track" aria-hidden="true"></span>
            <span>Dark mode</span>
          </label>
          <button id="resetAllButton" class="secondary-button" type="button">Reset all</button>
        </div>
      </header>

      <section class="command-row" aria-label="Copy slider value">
        <label>
          <span>Copy</span>
          <select id="copyParameter"></select>
        </label>
        <label>
          <span>from</span>
          <select id="copySource"></select>
        </label>
        <button id="applyToVisibleButton" class="secondary-button" type="button">Apply to all</button>
      </section>

      <section class="command-row optimize-row" aria-label="Optimize absorber parameter">
        <input
          id="optimizeFrequencyRange"
          class="frequency-slider"
          type="range"
          min="0"
          max="1"
          step="any"
          aria-label="Optimize frequency"
        >
        <input
          id="optimizeFrequencyInput"
          class="frequency-input"
          type="number"
          max="5000"
          step="1"
          inputmode="numeric"
          aria-label="Optimize frequency value"
        >
        <span class="command-label">Hz</span>
        <span class="command-divider" aria-hidden="true"></span>
        <span class="command-label">Optimize for:</span>
        <div class="optimize-buttons" aria-label="Optimize parameter">
          <button class="secondary-button" type="button" data-optimize-param="thickness">Thickness</button>
          <button class="secondary-button" type="button" data-optimize-param="flowResistivity">Resistivity</button>
          <button class="secondary-button" type="button" data-optimize-param="airGap">Gap</button>
        </div>
        <label class="optimizer-visibility switch-control">
          <input id="optimizerLineVisible" type="checkbox">
          <span class="switch-track" aria-hidden="true"></span>
          <span>Show in graph</span>
        </label>
      </section>

      <section id="roomModesPanel" class="room-modes-panel" aria-label="Room mode controls">
        <div class="room-mode-select">
          <label>
            <span>Show room modes:</span>
            <select id="roomModeOrder">
              <option value="0">Off</option>
              <option value="1">1st order</option>
              <option value="2">2nd order</option>
              <option value="3">3rd order</option>
            </select>
          </label>
        </div>
        <div id="roomDimensionList" class="room-dimension-list"></div>
      </section>

      <section class="workspace">
        <section class="chart-panel" aria-label="Absorber chart">
          <div id="chart"></div>
          <div class="chart-footer">
            <div class="chart-summary-row">
              <label class="switch-control graph-incidence-control">
                <input id="randomIncidence" type="checkbox">
                <span class="switch-track" aria-hidden="true"></span>
                <span>Random incidence</span>
              </label>
              <div id="chartStatus" class="chart-status" role="status"></div>
            </div>
            <div class="temperature-control">
              <label class="temperature-field" for="airTemperature">
                <span>Temperature</span>
                <input
                  id="airTemperature"
                  type="number"
                  min="-20"
                  max="40"
                  step="1"
                  inputmode="numeric"
                  aria-label="Air temperature in Celsius"
                >
                <span>°C</span>
              </label>
              <button id="resetAirTemperatureButton" class="quiet-button" type="button">Reset</button>
            </div>
          </div>
        </section>

        <aside class="control-panel" aria-label="Absorber controls">
          <div class="panel-heading">
            <div class="panel-title">
              <h2>Absorbers</h2>
              <span id="absorberCount"></span>
            </div>
            <div class="panel-actions">
              <button id="undoButton" class="icon-button" type="button" title="Undo">Undo</button>
              <select id="absorberPreset" aria-label="Absorber preset"></select>
              <button id="addAbsorberButton" class="primary-button" type="button">Add absorber</button>
            </div>
          </div>
          <div id="absorberList" class="absorber-list"></div>
        </aside>
      </section>
    </main>
  </body>
</html>