86 lines
4.0 KiB
HTML
86 lines
4.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Image Viewer</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer">
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="row m-5">
|
||
|
|
<form class="col" method="post">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<div class="btn-group" data-toggle="buttons">
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th scope="col">#</th>
|
||
|
|
<th scope="col">Wind Direction</th>
|
||
|
|
<th scope="col">Wind Speed</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
|
||
|
|
{% for row in weather %}
|
||
|
|
<tr>
|
||
|
|
<th>
|
||
|
|
<label class="btn btn-outline-primary">{{ row.id }}
|
||
|
|
<input type="radio" class="btn-check"
|
||
|
|
name="options" id="option_{{ row.id }}" value="{{ row.id }}" autocomplete="off">
|
||
|
|
</label>
|
||
|
|
</th>
|
||
|
|
<td>{{ row.WindDir }}</td>
|
||
|
|
<td>{{ row.WindSpeed }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="input-group flex-nowrap">
|
||
|
|
<span class="input-group-text" id="addon-wrapping">X</span>
|
||
|
|
<input name="x" type="text" class="form-control" placeholder="X axis" aria-label="X axis" aria-describedby="addon-wrapping">
|
||
|
|
</div>
|
||
|
|
<div class="input-group flex-nowrap">
|
||
|
|
<span class="input-group-text" id="addon-wrapping">Y</span>
|
||
|
|
<input name="y" type="text" class="form-control" placeholder="Y axis" aria-label="Y axis" aria-describedby="addon-wrapping">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary w-100">Submit</button>
|
||
|
|
</form>
|
||
|
|
<div class="col">
|
||
|
|
{{ data }}
|
||
|
|
{% if data is defined %}
|
||
|
|
<img id="display-image" src="/public/floris/{{ file_name }}" alt="Selected Image">
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function selectImage(imageName) {
|
||
|
|
const imgElement = document.getElementById('display-image');
|
||
|
|
imgElement.src = `/public/floris/${imageName}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateImage() {
|
||
|
|
alert("Image generation functionality not implemented yet.");
|
||
|
|
}
|
||
|
|
|
||
|
|
function downloadImage() {
|
||
|
|
const imgElement = document.getElementById('display-image');
|
||
|
|
const imageName = imgElement.src.split('/').pop();
|
||
|
|
window.location.href = `/floris/download_image/${imageName}`;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|