Skip to content

Instantly share code, notes, and snippets.

@vgrovestine

vgrovestine/psu_meteo410_metar_highlighter.html

Last active August 29, 2023 13:24
Show Gist options
  • Save vgrovestine/9a99506174850909a5abfa1f79b899a0 to your computer and use it in GitHub Desktop.
Save vgrovestine/9a99506174850909a5abfa1f79b899a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
psu_meteo410_metar_highlighter.html
<!DOCTYPE html>
<html>
<head>
<title>PSU METEO 410: METAR Highlighter</title>
<style>
body,
input {
font-family: sans-serif;
font-size: 16px;
line-height: 1.375em;
}
body {
background-color: #f9f9f9;
color: #111;
padding: 1.375em;
}
h1 {
font-size: 2em;
font-weight: bold;
margin: 0;
}
h2 {
font-size: 1.75em;
font-weight: normal;
color: #333;
margin: 1em 0 0.5em 0;
}
.smaller {
font-size: 0.875em;
}
textarea#metar_raw {
font-family: monospace;
font-size: 14px;
display: block;
width: 100%;
height: 11em;
padding: 0.0625em 0.125em;
white-space: pre;
}
ol#metar_formatted {
padding: 0 0 0 2em;
}
#metar_formatted li {
font-family: monospace;
margin: 0.25em;
}
#metar_formatted li::marker {
font-family: sans-serif;
font-size: 0.75em;
color: #999;
margin-right: 0.5em;
}
#metar_formatted li:nth-child(odd) {
background-color: #f3f3f3;
}
#metar_formatted li:hover {
background-color: #fec;
}
#metar_formatted span {
font-weight: bold;
}
.m_datetime {
background-color: #ccc;
}
.m_wind {
background-color: #fcf;
}
.m_slp {
background-color: #cff;
}
.m_grp1 {
background-color: #fcc;
}
.m_grp2 {
background-color: #cfc;
}
.m_grp6 {
background-color: #ccf;
}
.m_grpt {
background-color: #ffc;
}
</style>
<script text="text/javascript">
function doHighlight() {
var m = document.getElementById("metar_raw").value;
m = m.trim();
if(m.length > 0) {
m = m.replace(/ +/g, ' ');
m = m.replace(/ (\d{6}Z)/g, ' <span class="m_datetime">$1</span>');
m = m.replace(/ ((\d|VRB|G)+KT)/g, ' <span class="m_wind">$1</span>');
m = m.replace(/ (SLP\d+)/g, ' <span class="m_slp">$1</span>');
m = m.replace(/ (1\d{4})/g, ' <span class="m_grp1">$1</span>');
m = m.replace(/ (2\d{4})/g, ' <span class="m_grp2">$1</span>');
m = m.replace(/ (6\d{4})/g, ' <span class="m_grp6">$1</span>');
m = m.replace(/ (T\d{8})/g, ' <span class="m_grpt">$1</span>');
m = '<li>' + m.replace(/\n/g, '</li><li>') + '</li>';
}
document.getElementById("metar_formatted").innerHTML = m;
}
function doClear() {
document.getElementById("metar_raw").value = '';
}
</script>
</head>
<body>
<h1>PSU METEO 410: METAR Highlighter</h1>
<h2>Raw METAR</h2>
<form action="#" method="get" onsubmit="doHighlight(); return(false);">
<p><textarea name="metar_raw" id="metar_raw" rows="10" cols="100">
KMLT 282353Z AUTO 00000KT 10SM FEW041 BKN050 BKN100 21/16 A3006 RMK AO2 SLP181 T02110161 10256 20211 53007
KMLT 282253Z AUTO 10SM FEW075 22/15 A3004 RMK AO2 SLP177 T02220150
KMLT 282153Z AUTO 00000KT 10SM CLR 24/14 A3003 RMK AO2 SLP174 T02440139
KMLT 282053Z AUTO VRB05KT 10SM CLR 25/14 A3003 RMK AO2 SLP175 T02500139 56008
KMLT 281953Z AUTO VRB04KT 10SM FEW050 26/13 A3004 RMK AO2 SLP175 T02560133
KMLT 281853Z AUTO VRB04KT 10SM SCT050 25/13 A3004 RMK AO2 SLP178 T02500133
KMLT 281753Z AUTO VRB04KT 10SM SCT049 SCT060 24/13 A3006 RMK AO2 SLP182 T02440133 10244 20139 58010
KMLT 281653Z AUTO 30004KT 10SM FEW049 23/12 A3007 RMK AO2 SLP187 T02330122
KMLT 281553Z AUTO 00000KT 10SM CLR 23/12 A3008 RMK AO2 SLP191 T02330122
KMLT 281453Z AUTO 24004KT 10SM CLR 22/12 A3009 RMK AO2 SLP192 T02170117 58002
KMLT 281353Z AUTO 00000KT 10SM CLR 21/12 A3009 RMK AO2 SLP193 T02060117
KMLT 281253Z AUTO 00000KT 10SM CLR 17/13 A3009 RMK AO2 SLP195 T01720133
KMLT 281153Z AUTO 00000KT 10SM CLR 14/11 A3009 RMK AO2 SLP195 T01390111 10139 20089 53012
KMLT 281053Z AUTO 00000KT 10SM CLR 11/09 A3008 RMK AO2 SLP192 T01060089
KMLT 280953Z AUTO 00000KT 10SM CLR 09/08 A3006 RMK AO2 SLP186 T00940083
KMLT 280853Z AUTO 31003KT 10SM CLR 09/09 A3006 RMK AO2 SLP183 T00940089 53005
KMLT 280753Z AUTO 00000KT 10SM CLR 10/09 A3005 RMK AO2 SLP180 T01000094
KMLT 280653Z AUTO 00000KT 10SM CLR 11/10 A3004 RMK AO2 SLP178 T01060100
KMLT 280553Z AUTO 00000KT 10SM CLR 11/10 A3004 RMK AO2 SLP178 T01110100 10167 20111 51008
KMLT 280453Z AUTO 00000KT 10SM CLR 12/11 A3004 RMK AO2 SLP177 T01170106 402390117
KMLT 280353Z AUTO 00000KT 10SM CLR 13/12 A3003 RMK AO2 SLP173 T01280117
KMLT 280253Z AUTO 00000KT 10SM CLR 13/12 A3002 RMK AO2 SLP170 T01330122 51012
KMLT 280153Z AUTO 00000KT 10SM CLR 14/13 A3002 RMK AO2 SLP168 T01440133
KMLT 280053Z AUTO 00000KT 10SM CLR 16/14 A3000 RMK AO2 SLP163 T01560139
KMLT 272353Z AUTO 00000KT 10SM CLR 16/14 A2999 RMK AO2 SLP158 T01610139 10239 20161 53013
KMLT 272253Z AUTO 00000KT 10SM FEW050 20/14 A2997 RMK AO2 SLP153 T02000139
KMLT 272153Z AUTO 07003KT 10SM BKN060 22/12 A2996 RMK AO2 SLP149 T02220122
KMLT 272053Z AUTO VRB03KT 10SM OVC050 23/13 A2995 RMK AO2 SLP145 T02330128 55001
KMLT 271953Z AUTO 04007KT 10SM OVC047 24/12 A2995 RMK AO2 SLP143 T02390117
KMLT 271853Z AUTO 10SM BKN042 BKN050 23/13 A2995 RMK AO2 SLP144 T02280128
KMLT 271753Z AUTO 34006KT 10SM BKN038 OVC047 22/13 A2995 RMK AO2 SLP145 T02220128 10228 20167 56010
KMLT 271653Z AUTO 34007KT 10SM BKN039 22/12 A2996 RMK AO2 SLP146 T02220122
KMLT 271553Z AUTO 34005KT 10SM CLR 21/12 A2997 RMK AO2 SLP151 T02060122
KMLT 271537Z AUTO VRB06KT 10SM FEW028 21/12 A2997 RMK AO2 T02060122
KMLT 271453Z AUTO 05006KT 10SM BKN028 19/12 A2998 RMK AO2 SLP156 T01940122 50002
KMLT 271440Z AUTO 01005KT 10SM BKN029 20/12 A2998 RMK AO2 T02000122
KMLT 271353Z AUTO 36009KT 320V040 10SM CLR 19/12 A2999 RMK AO2 SLP159 T01890122
KMLT 271253Z AUTO 03006KT 10SM FEW017 18/12 A2999 RMK AO2 SLP160 T01780122
</textarea></p>
<p>
<input type="submit" value="Highlight">
<input type="submit" value="Clear" onclick="doClear();">
<span class="smaller">(Hint: Get METAR texts from <a href="https://weather.rap.ucar.edu/surface/">NCAR surface observations</a>.)</span>
</p>
</form>
<h2>Highlighted METAR</h2>
<ol reversed id="metar_formatted"></ol>
<p class="smaller">
<strong>Legend:</strong>
<span class="m_datetime">Date+Time</span>,
<span class="m_wind">Wind</span>,
<span class="m_slp">Surface-level Pressure</span>,
<span class="m_grpt">T-group (Temperatures)</span>,
<span class="m_grp1">1-group (Max temperature)</span>,
<span class="m_grp2">2-group (Min temperature)</span>,
<span class="m_grp6">6-group (Precipitation)</span>,
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment