-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deployed 5415083 with MkDocs version: 1.3.1
- Loading branch information
Showing
16 changed files
with
1,665 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /* Add your desired styling here */ | ||
|
|
||
| body { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } | ||
|
|
||
| .map-container { | ||
| position: relative; | ||
| width: 400px; /* Adjust as per your map image */ | ||
| } | ||
|
|
||
| .regions { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| .region { | ||
| position: absolute; | ||
| border: 1px solid black; | ||
| background-color: rgba(255, 255, 255, 0.3); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #tooltip { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| padding: 5px; | ||
| background-color: #fff; | ||
| border: 1px solid #ccc; | ||
| box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); | ||
| display: none; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Map Hover Demo</title> | ||
| <link rel="stylesheet" type="text/css" href="journey-map.css"> | ||
| </head> | ||
| <body> | ||
| <p>Event Journey Map</p> | ||
| <div class="map-container"> | ||
| <img src="./img/journey-map.png" id="map" alt="Map with Regions"> | ||
| <div class="regions"> | ||
| <!-- row 1 --> | ||
| <div class="region" data-x="20" data-y="100" data-width="100" data-height="50" data-text="Setup" data-url="./jm/setup"></div> | ||
| <div class="region" data-x="120" data-y="100" data-width="100" data-height="50" data-text="Calibration" data-url="./jm/calibration"></div> | ||
| <div class="region" data-x="220" data-y="100" data-width="100" data-height="50" data-text="Drive Manual" data-url="./jm/drive-manual"></div> | ||
| <div class="region" data-x="330" data-y="100" data-width="100" data-height="50" data-text="Gather Images" data-url="./jm/gather-images"></div> | ||
| <!-- row 2 --> | ||
| <div class="region" data-x="20" data-y="200" data-width="100" data-height="50" data-text="Transfer Images to GPU" data-url="./jm/transfer-to-images"></div> | ||
| <div class="region" data-x="120" data-y="200" data-width="100" data-height="50" data-text="Build Model" data-url="./jm/build-model"></div> | ||
| <div class="region" data-x="220" data-y="200" data-width="100" data-height="50" data-text="Transfer Model to Car" data-url="./jm/transfer-model"></div> | ||
| <div class="region" data-x="320" data-y="200" data-width="100" data-height="50" data-text="Drive Autonomously" data-url="./jm/drive-auto"></div> | ||
| <!-- Add more regions as needed --> | ||
| </div> | ||
| </div> | ||
| <div id="tooltip" class="hidden">Hover over a region</div> | ||
| <script src="./journey-map.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| console.log("Document is loaded and parsed"); | ||
|
|
||
| const map = document.getElementById("map"); | ||
| const tooltip = document.getElementById("tooltip"); | ||
| const regions = document.querySelectorAll(".regions .region"); | ||
|
|
||
| console.log(`Found ${regions.length} region elements`); | ||
|
|
||
| regions.forEach((region, index) => { | ||
| console.log(`Region ${index + 1}: `, region); | ||
|
|
||
| region.addEventListener("mouseover", function (event) { | ||
| const { x, y, width, height, text, url } = region.dataset; | ||
|
|
||
| console.log(`Mouseover event for Region ${index + 1} at coordinates (x: ${x}, y: ${y}). Width: ${width}, Height: ${height}. Text: ${text}, URL: ${url}`); | ||
|
|
||
| tooltip.innerText = text; | ||
| tooltip.style.top = `${parseInt(y) + map.offsetTop}px`; | ||
| tooltip.style.left = `${parseInt(x) + map.offsetLeft + parseInt(width)}px`; | ||
| tooltip.style.display = "block"; | ||
| }); | ||
|
|
||
| region.addEventListener("mouseout", function (event) { | ||
| console.log(`Mouseout event for Region ${index + 1}`); | ||
| tooltip.style.display = "none"; | ||
| }); | ||
|
|
||
| region.addEventListener("click", function (event) { | ||
| const { url } = region.dataset; | ||
| console.log(`Click event for Region ${index + 1}, navigating to URL: ${url}`); | ||
| window.location.href = url; | ||
| }); | ||
|
|
||
| region.addEventListener("mouseover", function (event) { | ||
| const { x, y, width, height, text, url } = region.dataset; | ||
| console.log(`x and y values before parsing: x=${x}, y=${y}`); | ||
| const parsedX = parseInt(x); | ||
| const parsedY = parseInt(y); | ||
| console.log(`x and y values after parsing: x=${parsedX}, y=${parsedY}`); | ||
|
|
||
| // Rest of your code... | ||
| }); | ||
|
|
||
| }); | ||
| }); |
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.