Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Timelapse: add Replay button after timelapse is completed #121

Merged
merged 4 commits into from
Apr 28, 2024
Merged

Timelapse: add Replay button after timelapse is completed #121

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a7dca04
Add Replay button when timelapse finishes
lukarenko Apr 28, 2024
6e92953
Fix reversed every 2nd replay
lukarenko Apr 28, 2024
3ebcfb0
Minor cleanups
lukarenko Apr 28, 2024
caa9aef
Add Trip name to start of Timelapse
lukarenko Apr 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 86 additions & 43 deletions src/pages/timelapse/Timelapse3.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
polyLine = ref(),
marker = ref(),
timelapse = ref(),
stopped = ref(false),
play_pause = ref(true)

// Query-string
Expand Down Expand Up @@ -110,26 +111,52 @@
}
})

const map_setup = () => {
const map_track_setup = () => {
const geojson = timelapse.value,
coord_rev = geojson.features[0].geometry.coordinates.reverse()
map.value = L.map(mapContainer.value).setView(coord_rev, zoom.value)
coord_rev = geojson.features[0].geometry.coordinates.toReversed()
map.value.setView(coord_rev, zoom.value)

// Create the line
polyLine.value = L.polyline([coord_rev], {
weight: 3,
color: color.value,
opacity: 0.9,
}).addTo(map.value)
// Create the marker
marker.value = L.polyline([coord_rev, coord_rev], {
weight: 8,
color: 'red',
}).addTo(map.value)
// Update map every x ms
setTimeout(() => {
map_update()
}, 1000 + delay.value * 1000) //ms
}

const map_track_replay = () => {
map.value.removeLayer(polyLine.value)
map.value.removeLayer(marker.value)
map_track_setup()
}

const map_setup = () => {
const geojson = timelapse.value

// The geoJSon only contains Geometry Point
if (geojson.features[0].geometry.type != 'Point') return

map.value = L.map(mapContainer.value)

// OSM
const osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
})
//.addTo(this.map)
// OpenSeaMap
const openseamap = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors',
maxZoom: 18,
})
//.addTo(this.map)
// Satellite
const sat = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
Expand All @@ -139,13 +166,11 @@
maxZoom: 17,
},
)
//.addTo(this.map)
// NOAA
const noaa = L.tileLayer('https://tileservice.charts.noaa.gov/tiles/50000_1/{z}/{x}/{y}.png', {
attribution: 'NOAA',
maxZoom: 18,
})
//.addTo(this.map)
// https://emodnet.ec.europa.eu
const bathymetryLayer = L.tileLayer.wms('http://ows.emodnet-bathymetry.eu/wms', {
layers: 'emodnet:mean_atlas_land',
Expand All @@ -162,7 +187,6 @@
opacity: 0.8,
})
const bathymetryGroupLayer = L.layerGroup([bathymetryLayer, coastlinesLayer])
//bathymetryGroupLayer.addTo(map)

const baseMaps = {
OpenStreetMap: osm,
Expand Down Expand Up @@ -202,58 +226,65 @@
// Add the note overlay to the map
const overlay = L.control({ position: 'topcenter' })
overlay.onAdd = function () {
const moorageView = L.DomUtil.create('div', 'overlay')
L.DomUtil.create('span', 'note', moorageView)
return moorageView
const overlayView = L.DomUtil.create('div', 'overlay')
const topRow = L.DomUtil.create('div', 'top-row', overlayView)
L.DomUtil.create('span', 'trip', topRow)
const bottomRow = L.DomUtil.create('div', 'bottom-row', overlayView)
L.DomUtil.create('span', 'note', bottomRow)
return overlayView
}
overlay.addTo(map.value)
// Create the line
polyLine.value = L.polyline([coord_rev], {
weight: 3,
color: color.value,
opacity: 0.9,
}).addTo(map.value)
// Create the marker
marker.value = L.polyline([coord_rev, coord_rev], {
weight: 8,
color: 'red',
}).addTo(map.value)
// Update map every x ms
setTimeout(() => {
map_update()
}, 1000 + delay.value * 1000) //ms

map_track_setup()
}

const map_update = () => {
let index = 1,
let index = 0,
last = null,
distance = 0,
distanceView = map.value._container.querySelector('.legend > .top-row > .distance'),
playerView = map.value._container.querySelector('.legend > .top-row > .player'),
datetimeView = map.value._container.querySelector('.legend > .bottom-row > .datetime'),
noteView = map.value._container.querySelector('.overlay > .note')
tripView = map.value._container.querySelector('.overlay > .top-row > .trip'),
noteView = map.value._container.querySelector('.overlay > .bottom-row > .note')

playerView.innerText = '▶'
playerView.innerHTML = '<i class="va-icon material-icons">play_arrow</i>'
const geojson = timelapse.value,
//km = !GlobalStore.imperialUnits,
interval = setInterval(function () {
if (play_pause.value === false) {
return
}

// Display trip data
if (
geojson.features[index].properties.trip &&
geojson.features[index].properties.trip.name.length != 0 &&
!ignore_moorage_overlay.value
) {
tripView.innerText = geojson.features[index].properties.trip.name
tripView.style.opacity = 1
tripView.style.display = 'block'
} else {
tripView.style.opacity -= 0.0125 // slower fade-out
if (tripView.style.opacity < 0.5) {
tripView.style.display = 'none'
}
}
// Display overlay notes
//console.debug(geojson.features[index])
if (geojson.features[index].properties.notes.length != 0 && !ignore_moorage_overlay.value) {
noteView.innerText = geojson.features[index].properties.notes
noteView.style.opacity = 1
noteView.style.display = 'block'
} else {
noteView.style.opacity -= 0.025
noteView.style.opacity -= 0.025 // faster fade-out
if (noteView.style.opacity < 0.5) {
noteView.style.display = 'none'
}
}
// Get the next coordinates from the geojson
let coord_rev = geojson.features[index].geometry.coordinates.reverse()
let coord_rev = geojson.features[index].geometry.coordinates.toReversed()
// Add the next point to the polyLine
polyLine.value.addLatLng(coord_rev)
// Move the maker to a next point
Expand All @@ -266,30 +297,34 @@
distance += last.distanceTo(coord_rev)
// convert meters -> KM -> NM
distanceView.innerText = parseFloat(parseFloat(distance / 1000) * 0.5399568).toFixed(3) + ' NM'
//distanceView.innerText = distanceLatLng((distance += last.distanceTo(coord_rev)))
datetimeView.innerText = dateFormatUTC(geojson.features[index].properties.time)
}
last = L.latLng(coord_rev)
if (
// If last entry cancel Interval
index ===
geojson.features.length - 1
)
// if last entry, cancel internal, show replay
if (index === geojson.features.length - 1) {
clearInterval(interval)
last = null
distance = 0
play_pause.value = true
stopped.value = true
playerView.innerHTML = '<i class="va-icon material-icons">replay</i>'
}
index++
}, speed.value)
}

function playAndPause(e) {
console.log('playAndPause', e, play_pause.value)
let playerView = map.value._container.querySelector('.legend > .top-row > .player')
if (play_pause.value === true) {
if (stopped.value === true) {
// replay button clicked
map_track_replay()
playerView.innerHTML = '<i class="va-icon material-icons">pause</i>'
} else if (play_pause.value === true) {
play_pause.value = false
//playerView.innerText = '⏸︎'
playerView.innerHTML = '<i class="va-icon material-icons">pause</i>'
} else {
play_pause.value = true
//playerView.innerText = '▶'
playerView.innerHTML = '<i class="va-icon material-icons">play_arrow</i>'
}
}
Expand Down Expand Up @@ -342,7 +377,6 @@
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.1rem;
}
.bottom-row {
font-size: 12pt;
Expand All @@ -353,6 +387,9 @@
}
.player {
cursor: pointer;
i.material-icons {
font-size: 24pt;
}
}
}

Expand All @@ -377,8 +414,14 @@
top: 70px;
color: #ddd;
text-align: center;
font-size: 18pt;
.note {
.top-row {
font-size: 18pt;
display: flex;
justify-content: center;
align-items: center;
}
.bottom-row {
font-size: 16pt;
}
}
}
Expand Down