Add preview page for the color bars

tsupinie · May 17, 2024 · c66e6da · c66e6da
1 parent 3846565
commit c66e6da
Showing 1 changed file with 62 additions and 0 deletions.
diff --git a/public/colorbars.html b/public/colorbars.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>AutumnPlotGL Colorbars</title>
+        <script src="autumnplot-gl.js"></script>
+        <style>
+            body {
+                font-family: 'Trebuchet MS';
+            }
+
+            table {
+                border-collapse: collapse;
+            }
+
+            th {
+                font-weight: normal;
+                text-align: right;
+                border-right: 2px solid black;
+            }
+
+            th, td {
+                border-bottom: 2px solid black;
+                padding: 0.5em;
+            }
+
+            tr:last-child td, tr:last-child th {
+                border-bottom: 0px;
+            }
+        </style>
+    </head>
+    <body>
+        <table id="main"><tbody></tbody></table>
+        <script>
+            cb_info = {
+                'pw_speed500mb': {label: 'Wind Speed (kts)', ticks: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140]},
+                'pw_speed850mb': {label: 'Wind Speed (kts)', ticks: [20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
+                'pw_t2m': {label: 'Temperature (\u00b0F)', ticks: [-60, -50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]},
+                'pw_td2m': {label: 'Dewpoint Temperature (\u00b0F)', ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90]},
+                'pw_cape': {label: 'CAPE (J/kg)', ticks: [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 10000]},
+                'nws_storm_clear_refl': {label: 'Reflectivity (dBZ)', ticks: [-20, -10, 0, 10, 20, 30, 40, 50, 60, 70]},
+                'redblue': {label: '', ticks: [-10, -8, -6, -4, -2, 0, 2, 4, 6, 8, 10], lower: -10, upper: 10, ncolors: 20},
+                'bluered': {label: '', ticks: [-10, -8, -6, -4, -2, 0, 2, 4, 6, 8, 10], lower: -10, upper: 10, ncolors: 20},
+            };
+
+            const root = document.querySelector('#main tbody');
+            Object.entries(cb_info).forEach(([name, cmap_info]) => {
+                let cmap = apgl.colormaps[name];
+                let display_name = name;
+                if ('lower' in cmap_info && 'upper' in cmap_info && 'ncolors' in cmap_info) {
+                    cmap = cmap(cmap_info.lower, cmap_info.upper, cmap_info.ncolors);
+                    display_name = `${name}(${cmap_info.lower}, ${cmap_info.upper}, ${cmap_info.ncolors})`;
+                }
+
+                root.innerHTML += `<tr><th>${display_name}</th><td id="${name}-cmap"></td></tr>`;
+                const cbar = apgl.makeColorBar(cmap, {label: cmap_info.label, fontface: 'Trebuchet MS', ticks: cmap_info.ticks, orientation: 'horizontal', tick_direction: 'bottom'});
+
+                document.getElementById(`${name}-cmap`).appendChild(cbar);
+            });
+
+        </script>
+    </body>
+</html>