Add visual timeline with moving indicator, now marker, and time labels
This commit is contained in:
Clawd
@@ -49,31 +49,111 @@
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Radar timestamp display */
|
||||
.radar-timestamp {
|
||||
/* Radar timeline display */
|
||||
.radar-timeline {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
height: 24px;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.radar-timestamp.forecast {
|
||||
background: rgba(0, 100, 180, 0.8);
|
||||
.timeline-track {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forecast indicator - subtle arrow */
|
||||
.radar-timestamp.forecast::before {
|
||||
content: "▶ ";
|
||||
.timeline-past {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 33%; /* ~1h of 3h total */
|
||||
height: 100%;
|
||||
background: rgba(150, 150, 150, 0.5);
|
||||
}
|
||||
|
||||
.timeline-future {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 67%; /* ~2h of 3h total */
|
||||
height: 100%;
|
||||
background: rgba(0, 120, 200, 0.4);
|
||||
}
|
||||
|
||||
.timeline-now {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
color: #fff;
|
||||
font-size: 8px;
|
||||
opacity: 0.8;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
left: 33%; /* Will be updated by JS */
|
||||
margin-left: 30px;
|
||||
width: calc(100% - 60px);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline-now span {
|
||||
position: absolute;
|
||||
left: 33%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-indicator {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
border: 2px solid #0af;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 0 6px rgba(0, 170, 255, 0.8);
|
||||
transition: left 0.2s ease-out;
|
||||
/* Position is set by JS */
|
||||
}
|
||||
|
||||
.timeline-time {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timeline-time.forecast {
|
||||
background: rgba(0, 100, 180, 0.9);
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 9px;
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
}
|
||||
|
||||
.timeline-start {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline-end {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Legend (optional, can be enabled) */
|
||||
|
||||
@@ -351,28 +351,106 @@ Module.register("MMM-CombinedMap", {
|
||||
const container = document.getElementById("mmm-combinedmap-" + this.identifier);
|
||||
if (!container) return;
|
||||
|
||||
let timestampEl = container.querySelector(".radar-timestamp");
|
||||
if (!timestampEl) {
|
||||
timestampEl = document.createElement("div");
|
||||
timestampEl.className = "radar-timestamp";
|
||||
container.appendChild(timestampEl);
|
||||
// Create or get timeline element
|
||||
let timelineEl = container.querySelector(".radar-timeline");
|
||||
if (!timelineEl) {
|
||||
timelineEl = this.createTimelineElement();
|
||||
container.appendChild(timelineEl);
|
||||
}
|
||||
|
||||
const time = layer.timestamp;
|
||||
// Calculate position (0-100%)
|
||||
const currentIndex = this.radarLayers.indexOf(layer);
|
||||
const totalFrames = this.radarLayers.length;
|
||||
const position = (currentIndex / (totalFrames - 1)) * 100;
|
||||
|
||||
// Find "now" position
|
||||
const now = new Date();
|
||||
const diffMinutes = Math.round((time - now) / 60000);
|
||||
let nowIndex = 0;
|
||||
for (let i = 0; i < this.radarLayers.length; i++) {
|
||||
if (this.radarLayers[i].timestamp <= now) {
|
||||
nowIndex = i;
|
||||
}
|
||||
}
|
||||
const nowPosition = (nowIndex / (totalFrames - 1)) * 100;
|
||||
|
||||
let label;
|
||||
if (Math.abs(diffMinutes) <= 2) {
|
||||
label = "Now";
|
||||
} else if (diffMinutes > 0) {
|
||||
label = `+${diffMinutes} min`;
|
||||
} else {
|
||||
label = `${diffMinutes} min`;
|
||||
// Update indicator position (30px offset on each side for labels)
|
||||
const indicator = timelineEl.querySelector(".timeline-indicator");
|
||||
const trackWidth = timelineEl.offsetWidth - 60; // 30px margin each side
|
||||
if (indicator && trackWidth > 0) {
|
||||
const pixelPos = 30 + (position / 100) * trackWidth;
|
||||
indicator.style.left = pixelPos + "px";
|
||||
}
|
||||
|
||||
timestampEl.textContent = label;
|
||||
timestampEl.classList.toggle("forecast", layer.isForecast);
|
||||
// Update "now" marker position
|
||||
const nowMarker = timelineEl.querySelector(".timeline-now span");
|
||||
if (nowMarker && trackWidth > 0) {
|
||||
const nowPixelPos = (nowPosition / 100) * 100;
|
||||
nowMarker.style.left = nowPixelPos + "%";
|
||||
}
|
||||
|
||||
// Update time label
|
||||
const timeLabel = timelineEl.querySelector(".timeline-time");
|
||||
if (timeLabel) {
|
||||
const diffMinutes = Math.round((layer.timestamp - now) / 60000);
|
||||
if (Math.abs(diffMinutes) <= 2) {
|
||||
timeLabel.textContent = "Now";
|
||||
} else if (diffMinutes > 0) {
|
||||
timeLabel.textContent = "+" + diffMinutes + "m";
|
||||
} else {
|
||||
timeLabel.textContent = diffMinutes + "m";
|
||||
}
|
||||
timeLabel.classList.toggle("forecast", layer.isForecast);
|
||||
}
|
||||
},
|
||||
|
||||
createTimelineElement: function() {
|
||||
const timeline = document.createElement("div");
|
||||
timeline.className = "radar-timeline";
|
||||
|
||||
// Track (the line)
|
||||
const track = document.createElement("div");
|
||||
track.className = "timeline-track";
|
||||
|
||||
// Past section (darker)
|
||||
const past = document.createElement("div");
|
||||
past.className = "timeline-past";
|
||||
|
||||
// Future section (highlighted)
|
||||
const future = document.createElement("div");
|
||||
future.className = "timeline-future";
|
||||
|
||||
// "Now" marker
|
||||
const nowMarker = document.createElement("div");
|
||||
nowMarker.className = "timeline-now";
|
||||
nowMarker.innerHTML = "<span>▼</span>";
|
||||
|
||||
// Moving indicator
|
||||
const indicator = document.createElement("div");
|
||||
indicator.className = "timeline-indicator";
|
||||
|
||||
// Time label
|
||||
const timeLabel = document.createElement("div");
|
||||
timeLabel.className = "timeline-time";
|
||||
|
||||
// Labels for start/end
|
||||
const startLabel = document.createElement("div");
|
||||
startLabel.className = "timeline-label timeline-start";
|
||||
startLabel.textContent = "-1h";
|
||||
|
||||
const endLabel = document.createElement("div");
|
||||
endLabel.className = "timeline-label timeline-end";
|
||||
endLabel.textContent = "+2h";
|
||||
|
||||
track.appendChild(past);
|
||||
track.appendChild(future);
|
||||
timeline.appendChild(track);
|
||||
timeline.appendChild(nowMarker);
|
||||
timeline.appendChild(indicator);
|
||||
timeline.appendChild(timeLabel);
|
||||
timeline.appendChild(startLabel);
|
||||
timeline.appendChild(endLabel);
|
||||
|
||||
return timeline;
|
||||
},
|
||||
|
||||
refreshRadar: function() {
|
||||
|
||||
Reference in New Issue
Block a user