will/roman-time
1
0
Fork 0
mirror of https://github.com/zyphlar/roman-time.git synced 2024-03-08 13:57:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

allow manual gps

Browse Source
This commit is contained in:
zyphlar 2023-05-24 13:28:41 -07:00
parent 69c73e522a
commit 0117a3fe7e
Signed by: will
GPG Key ID: 1159B930701263F3
1 changed files with 49 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@ -7,6 +7,7 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script> crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
<style type="text/css"> <style type="text/css">
#map { #map {
width: 250px; width: 250px;
@ -18,15 +19,17 @@
</style> </style>
</head> </head>
<body> <body>
<p>
Latitude: <input type="text" id="lat" /><br/>
Longitude: <input type="text" id="long" /><br/>
<button id="reload">Load</button>
</p>
<div id="map"></div> <div id="map"></div>
<p>
Click the map to change the time.
</p>
<div id="clock"></div> <div id="clock"></div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg <svg
width="300" width="300"
height="300" height="300"
@ -297,8 +300,23 @@
<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
<script language="javascript"> <script language="javascript">
var map = L.map('map').on({
click: loadMapCoords
}).setView([0, 0], 10);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
const latForm = document.querySelector("#lat");
const longForm = document.querySelector("#long");
function loadMapCoords(e){
latForm.value = e.latlng.lat;
longForm.value = e.latlng.lng;
render({coords: { latitude: latForm.value , longitude: longForm.value }});
}
function render(gpsCoords) { function render(gpsCoords) {
if (!gpsCoords) { if (!gpsCoords) {
console.error("Invalid GPS:",gpsCoords); console.error("Invalid GPS:",gpsCoords);
@ -306,11 +324,7 @@
} }
// console.log(gpsCoords); // console.log(gpsCoords);
var map = L.map('map').setView([gpsCoords.coords.latitude, gpsCoords.coords.longitude], 10); map.setView([gpsCoords.coords.latitude, gpsCoords.coords.longitude]);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
let url= 'https://api.sunrise-sunset.org/json?lat='+gpsCoords.coords.latitude+'&lng='+gpsCoords.coords.longitude; let url= 'https://api.sunrise-sunset.org/json?lat='+gpsCoords.coords.latitude+'&lng='+gpsCoords.coords.longitude;
@ -327,7 +341,11 @@
function getLocation() { function getLocation() {
if (navigator.geolocation) { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(render, function(err){ navigator.geolocation.getCurrentPosition(function(gpsCoords){
latForm.value = gpsCoords.coords.latitude;
longForm.value = gpsCoords.coords.longitude;
render(gpsCoords);
}, function(err){
console.error("Invalid geo:", err); console.error("Invalid geo:", err);
}); });
} else { } else {
@ -343,7 +361,7 @@
return false; return false;
} }
let now = DateTime.now(); let now = DateTime.fromFormat("1:15:00 PM +0000", 'h:mm:ss a ZZZ');
let sunrise = DateTime.fromFormat(json.results.sunrise+" +0000", 'h:mm:ss a ZZZ'); let sunrise = DateTime.fromFormat(json.results.sunrise+" +0000", 'h:mm:ss a ZZZ');
// handle sunrises that are tomorrow UTC // handle sunrises that are tomorrow UTC
@ -384,6 +402,12 @@
romanMinuteEnglish = "almost"; romanMinuteEnglish = "almost";
} }
// 0 special case
if (romanHour == 0) {
romanHour = romanHour+1;
romanMinuteEnglish = "soon to be";
}
let romanNumeralHourArr = ["0", "I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"]; let romanNumeralHourArr = ["0", "I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
let romanNumeralHour = romanNumeralHourArr[romanHour]; let romanNumeralHour = romanNumeralHourArr[romanHour];
@ -397,13 +421,13 @@
console.log("It is", romanMinuteEnglish, "hora", romanHour, romanNumeralHour); console.log("It is", romanMinuteEnglish, "hora", romanHour, romanNumeralHour);
if (msAfterSunrise > 0) { if (msAfterSunrise > 0 && percentOfDay < 1) {
document.getElementById('clock').innerHTML = "It is "+romanMinuteEnglish+" <a href='https://en.wikipedia.org/wiki/Roman_timekeeping'>Hora "+romanHour+" ("+romanNumeralHour+")</a><br/>AKA "+(Math.round(percentOfDay*10000)/100)+"% through today's daylight."; document.getElementById('clock').innerHTML = "It is "+romanMinuteEnglish+" <a href='https://en.wikipedia.org/wiki/Roman_timekeeping'>Hora "+romanHour+" ("+romanNumeralHour+")</a><br/>AKA "+(Math.round(percentOfDay*10000)/100)+"% through today's daylight.";
let zeroHrDeg = 77; let zeroHrDeg = 86;
let twelveHrDeg = -81.5; let twelveHrDeg = -82;
let degreeSweep = twelveHrDeg-zeroHrDeg; let degreeSweep = twelveHrDeg-zeroHrDeg;
let sundialDegree = percentOfDay*degreeSweep*.975+zeroHrDeg; // .975 fudge factor let sundialDegree = percentOfDay*degreeSweep+zeroHrDeg;
let sundial = document.getElementById("sundial"); let sundial = document.getElementById("sundial");
sundial.style["display"] = "block"; sundial.style["display"] = "block";
@ -417,6 +441,12 @@
} }
getLocation(); getLocation();
const button = document.querySelector("#reload");
button.addEventListener("click", (event) => {
render({coords: { latitude: latForm.value , longitude: longForm.value }});
});
</script> </script>
</body> </body>
</html> </html>