Skip to content

Commit

Permalink
Update a few fonts used
Browse files Browse the repository at this point in the history
  • Loading branch information
@markyharris
markyharris committed Jul 14, 2022
1 parent f9a2032 commit d52635f
Show file tree
Hide file tree
Showing 4 changed files with 267 additions and 69 deletions.
6 changes: 3 additions & 3 deletions data.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
kflg
8
60
1
-2
0
0
198 changes: 198 additions & 0 deletions metar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html>
<head>
<title>METAR E-Paper Selector</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/static/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<!-- This Style is specific to the help text that appears when a selection is made -->
<!-- Technique taken from https://tutorialdeep.com/knowhow/change-image-on-dropdown-select-option-jquery/ -->
<style>
.myDiv{
display:none;
text-align:center;
}
.myDiv img{
margin: 0 auto;
}
.myDiv span{
text-align: center;
background: #b1cafc;
padding: 6px 6px;
display: block;
width: 400px;
border: 1px solid blue;
margin: 8px auto;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<p>

<!-- This script is used to 'show' the appropriate <div> for the specific information about a selection -->
<script>
$(document).ready(function(){
$('#myselection').on('change', function(){
var demovalue = $(this).val();
demovalue=$.trim(demovalue.replace(/\s/g, ''));
$("div.myDiv").hide();
$("#show"+demovalue).show();
console.log(demovalue);
});
});
</script>

<script>
$(document).ready(function(){
$(window).bind("load", function() {
$("div.myDiv").hide();
$("#show"+"0").show();
console.log(demovalue);
});
});
</script>

<p>

<!-- Main HTML code to display dropdown and submit button -->
<div class="container-fluid">
<div class="card border-primary mb-3">
<section class="py-5">


<div class="container">
<h2>METAR E-Paper Display Selector</h2>
Use 4 char Airport ICAO ID. If left blank
the default values in settings will be used.<br>

<form action="{{ url_for('metar') }}" method="post">

<label for="display"><b>Choose a Function:</b></label><br>
<select name="display" id="display">
<option value="metar" {% if display=="metar" %} selected="selected" {% endif %}>METAR Display</option>
<option value="off" {% if display=="off" %} selected="selected" {% endif %}>Clear E-Paper Display</option>
<option value="reboot" {% if display=="reboot" %} selected="selected" {% endif %}>Reboot RPi</option>
<option value="powerdown" {% if display=="powerdown" %} selected="selected" {% endif %}>Power Down RPi</option>
</select>
<br><p>

<div class="form-group">
<label for="fname"><b>Enter 4 Character Airport ID:</b></label><br>
<input style="text-transform: uppercase;" placeholder="KFLG" type="text" maxlength="4" minlength="4" size="4" name="data_field1" id="data_field1" list="list1" onfocus="this.value=''" value="{{ data_field1 }}">
<br>
<a href="https://www.world-airport-codes.com/" target="_blank">https://www.world-airport-codes.com/</a> to lookup ICAO ID's
<br><p>

<label for="fname"><b>Choose Layout:</b></label><br>
<select name="data_field2" id="myselection">
<option value="-2" {% if data_field2=="-2" %} selected="selected" {% endif %}>Cycle Through All Layouts</option>
<option value="-1" {% if data_field2=="-1" %} selected="selected" {% endif %}>Display Random Layouts</option>
<option value="0" {% if data_field2=="0" %} selected="selected" {% endif %}>Large Flight Category and METAR</option>
<option value="1" {% if data_field2=="1" %} selected="selected" {% endif %}>METAR with Data Display*</option>
<option value="2" {% if data_field2=="2" %} selected="selected" {% endif %}>Data Display with Icons*</option>
<option value="3" {% if data_field2=="3" %} selected="selected" {% endif %}>Basic Large Flight Category</option>
<option value="4" {% if data_field2=="4" %} selected="selected" {% endif %}>3 Area Display with METAR</option>
<option value="5" {% if data_field2=="5" %} selected="selected" {% endif %}>Multiple Airport Flight Categories</option>
<option value="6" {% if data_field2=="6" %} selected="selected" {% endif %}>Airport Map and Flight Category</option>
<option value="7" {% if data_field2=="7" %} selected="selected" {% endif %}>Flight Category In Circles</option>
<option value="8" {% if data_field2=="8" %} selected="selected" {% endif %}>Worst Class B & C Airport Weather</option>
<option value="9" {% if data_field2=="9" %} selected="selected" {% endif %}>Metar and Large Wind Icons</option>

</select>
<br><p>

<label for="fname"><b>*Display Airport Info or Remarks Key:</b></label><br>
<select name="rem_data" id="rem_data">
<option value="0" {% if rem_data=="0" %} selected="selected" {% endif %}>Display Airport Info</option>
<option value="1" {% if rem_data=="1" %} selected="selected" {% endif %}>Display Remarks Key</option>
</select>
<br><p>

<label for="fname"><b>Choose Update Interval:</b></label><br>
<select name="data_field3" id="data_field3">
<option value="0" {% if data_field3=="0" %} selected="selected" {% endif %}>Auto Interval</option>
<option value="60" {% if data_field3=="60" %} selected="selected" {% endif %}>1 Minute</option>
<option value="600" {% if data_field3=="600" %} selected="selected" {% endif %}>10 Minutes</option>
<option value="1200" {% if data_field3=="1200" %} selected="selected" {% endif %}>20 Minutes</option>
<option value="1800" {% if data_field3=="1800" %} selected="selected" {% endif %}>30 Minutes</option>
<option value="3600" {% if data_field3=="3600" %} selected="selected" {% endif %}>1 Hour</option>
<option value="7200" {% if data_field3=="7200" %} selected="selected" {% endif %}>2 Hours</option>

</select>
<br>
<i><b>Note:</b> Auto Interval changes the update based on Flight Category.<br>
VFR=1 hour, MVFR=30 mins, IFR=20 mins and LIFR=10 mins</i><p>

<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
<p>

<hr>
<!-- Flash message via flask and jinja to announce what is currently being displayed -->
<div class="flashes">
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class=flashes>
{% for message in messages %}
</div><b class="text-danger">{{ message }}</b>
{% endfor %}

{% endif %}
{% endwith %}
</div>
<hr>

<div id="show0" class="myDiv">
<span><p>
<img src="./static/layout0.jpg" width="300"><p><p>
</span>
</div>
<div id="show1" class="myDiv">
<span><p>
<img src="./static/layout1.jpg" width="300"><p><p>
</span>
</div>
<div id="show2" class="myDiv">
<span><p>
<img src="./static/layout2.jpg" width="300"><p><p>
</span>
</div>
<div id="show3" class="myDiv">
<span><p>
<img src="./static/layout3.jpg" width="300"><p><p>
</span>
</div>
<div id="show4" class="myDiv">
<span><p>
<img src="./static/layout4.jpg" width="300"><p><p>
</span>
</div>
<div id="show5" class="myDiv">
<span><p>
<img src="./static/layout5.jpg" width="300"><p><p>
</span>
</div>
<div id="show6" class="myDiv">
<span><p>
<img src="./static/layout6.jpg" width="300"><p><p>
</span>
</div>
<div id="show7" class="myDiv">
<span><p>
<img src="./static/layout7.jpg" width="300"><p><p>
</span>
</div>




</div>
</div>
</body>
</html>
Loading

0 comments on commit d52635f

Please sign in to comment.