Skip to content

Commit

Permalink
fixes: added safe area insets, fixed rotation with compass, navigatio…
Browse files Browse the repository at this point in the history 
…n UI improvements
  • Loading branch information
@afonsosousah
afonsosousah committed Mar 25, 2024
1 parent ba835a9 commit dcb0ab8
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 113 deletions.
Binary file added assets/images/north.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 26 additions & 5 deletions assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,8 @@ body {
bottom: unset !important;
right: unset !important;
border-radius: 999px !important;
margin-left: env(safe-area-inset-left);
margin-top: env(safe-area-inset-top);
}
.ol-attribution button {
all: unset;
Expand All @@ -283,6 +285,7 @@ body {
position: absolute;
left: 2vh;
bottom: 2vh;
margin-left: env(safe-area-inset-left);
}
/* #endregion */

Expand All @@ -292,11 +295,12 @@ body {
width: fit-content;
height: fit-content;
position: absolute;
right: 2vh;
right: calc(2vh);
bottom: calc(2vh + 7vh + 2vh);
display: flex;
flex-direction: column;
gap: 1vh;
margin-right: env(safe-area-inset-right);
}
#zoomControls div {
background-color: var(--green);
Expand All @@ -320,7 +324,7 @@ body {

/* #region Search bar */
#searchBarDiv {
width: 100%;
width: calc(100%);
position: absolute;
bottom: 0;
left: 0;
Expand Down Expand Up @@ -414,6 +418,7 @@ input:-webkit-autofill:active{
justify-content: center;
align-items: center;
box-shadow: 0px 1px 6px 0px var(--green);
margin-right: env(safe-area-inset-right);
}
#navigationButton img {
border-radius: 999px;
Expand All @@ -437,6 +442,7 @@ input:-webkit-autofill:active{
justify-content: center;
align-items: center;
box-shadow: 0px 1px 6px 0px var(--green);
margin-right: env(safe-area-inset-right);
}
/*#userPicture img {
border-radius: 999px;
Expand Down Expand Up @@ -1111,6 +1117,8 @@ input:-webkit-autofill:active{
display: flex;
justify-content: center;
align-items: center;
margin-top: env(safe-area-inset-top);
margin-left: env(safe-area-inset-left);
}
.user-settings i {
width: 32px;
Expand All @@ -1124,6 +1132,7 @@ input:-webkit-autofill:active{
width: 100vw;
height: 24vh;
background-color: var(--green);
padding-top: env(safe-area-inset-top);
}
.user-settings #topUserContainer #footer {
position: absolute;
Expand Down Expand Up @@ -1587,6 +1596,7 @@ input:-webkit-autofill:active{
align-items: center;
justify-content: right;
flex-direction: column;
margin-left: env(safe-area-inset-left);
}
#navigationInfoPanel #costAndTimeContainer {
background-color: var(--green);
Expand Down Expand Up @@ -1631,6 +1641,12 @@ input:-webkit-autofill:active{
font-size: 2.5rem;
line-height: 2rem;
color: var(--black);
margin-right: env(safe-area-inset-right);
}
#changeRotationModeButton img {
height: 2.5rem;
width: 2.5rem;
object-fit: contain;
}
#endNavigationButton {
height: 4rem;
Expand All @@ -1647,6 +1663,7 @@ input:-webkit-autofill:active{
font-size: 2.5rem;
line-height: 2rem;
color: var(--green);
margin-right: env(safe-area-inset-right);
}
#reachedFinalStation {
height: 8%;
Expand Down Expand Up @@ -2091,6 +2108,7 @@ input:-webkit-autofill:active{
display: flex;
justify-content: center;
align-items: center;
margin-top: env(safe-area-inset-top);
}
#tripHistory #backButton i {
width: 32px;
Expand All @@ -2106,6 +2124,7 @@ input:-webkit-autofill:active{
font-size: 1.3rem;
font-weight: bold;
color: var(--green);
margin-top: env(safe-area-inset-top);
}
#tripHistory #downloadTripHistoryButton {
position: absolute;
Expand Down Expand Up @@ -2134,7 +2153,7 @@ input:-webkit-autofill:active{
list-style-type: none;
padding: 0;
margin: 0;
max-height: 90%;
max-height: calc(90% - env(safe-area-inset-top));
overflow: scroll;
padding-top: 2vh;
display: flex;
Expand Down Expand Up @@ -2241,6 +2260,7 @@ input:-webkit-autofill:active{
display: flex;
justify-content: center;
align-items: center;
margin-top: env(safe-area-inset-top);
}
#statisticsMenu #backButton i {
width: 32px;
Expand All @@ -2256,13 +2276,14 @@ input:-webkit-autofill:active{
font-size: 1.3rem;
font-weight: bold;
color: var(--green);
margin-top: env(safe-area-inset-top);
}
#statisticsMenu #usableArea {
position: absolute;
top: 8dvh;
bottom: 0;
left: 0;
width: 100vw;
height: 92dvh;
height: calc(92dvh - env(safe-area-inset-top));
display: flex;
flex-direction: column;
gap: 2dvh;
Expand Down
4 changes: 2 additions & 2 deletions scripts/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,8 +441,8 @@ function startLocationDotRotation() {
// Calculate the current compass heading that the user is 'looking at' (in radians) (global)
compassHeading = -(Math.PI / 180) * (360 - currentOrientation);

// Adjust heading if device is on landscape
//if (window.matchMedia("(orientation: landscape)").matches) compassHeading += (Math.PI / 180) * 90;
// Adjust heading with device orientation
compassHeading += (Math.PI / 180) * window.screen.orientation.angle;

if (!pos) return;

Expand Down
156 changes: 93 additions & 63 deletions scripts/navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,18 +217,29 @@ async function stopNavigation() {
}

function changeRotationMode() {
let endNavigationButton = document.getElementById("endNavigationButton");
let endNavigationButtonPortrait = document.getElementById("endNavigationButtonPortrait");
let changeRotationModeButton = document.getElementById("changeRotationModeButton");
let changeRotationModeButtonPortrait = document.getElementById("changeRotationModeButtonPortrait");

if (rotationMode === "route") {
rotationMode = "compass";
if (changeRotationModeButton) changeRotationModeButton.innerHTML = `<i class="bi bi-compass"></i>`;
if (changeRotationModeButtonPortrait) changeRotationModeButtonPortrait.innerHTML = `<i class="bi bi-compass"></i>`;
} else if (rotationMode === "compass" && !endNavigationButton && !endNavigationButtonPortrait) {
rotationMode = "north";
if (changeRotationModeButton) changeRotationModeButton.innerHTML = `<img src="assets/images/north.png">`;
if (changeRotationModeButtonPortrait)
changeRotationModeButtonPortrait.innerHTML = `<img src="assets/images/north.png">`;
} else if (rotationMode === "compass") {
rotationMode = "route";
if (changeRotationModeButton) changeRotationModeButton.innerHTML = `<i class="bi bi-sign-turn-right"></i>`;
if (changeRotationModeButtonPortrait)
changeRotationModeButtonPortrait.innerHTML = `<i class="bi bi-sign-turn-right"></i>`;
} else if (rotationMode === "north") {
rotationMode = "compass";
if (changeRotationModeButton) changeRotationModeButton.innerHTML = `<i class="bi bi-compass"></i>`;
if (changeRotationModeButtonPortrait) changeRotationModeButtonPortrait.innerHTML = `<i class="bi bi-compass"></i>`;
}
}

Expand Down Expand Up @@ -331,16 +342,24 @@ function updatePositionAndRotationWhenNavigating() {
}
}

function updatePositionWhenInNavigationUI() {
function updatePositionAndRotationWhenInNavigationUI() {
if (window.matchMedia("(orientation: landscape)").matches && !tripEnded) {
// Pan to location (pos object is global and is updated getLocation() in map.js)
let angleRad = 0;

// Get rotation
if (rotationMode === "compass") {
angleRad = -compassHeading;
}

// Pan to location and set rotation (pos object is global and is updated getLocation() in map.js)
const view = map.getView();
const mapSize = map.getSize();
const userPosition = ol.proj.fromLonLat(pos);
view.setRotation(angleRad);

view.centerOn(userPosition, mapSize, [mapSize[0] / 2, mapSize[1] * 0.9]);
view.centerOn(userPosition, mapSize, [mapSize[0] / 2, mapSize[1] * 0.7]);

requestAnimationFrame(updatePositionWhenInNavigationUI);
requestAnimationFrame(updatePositionAndRotationWhenInNavigationUI);
}
}

Expand All @@ -364,25 +383,7 @@ async function orientationChangeHandler(event) {
}

// If in navigation UI, change to default UI
if (document.querySelector("#navigationInfoPanel")) {
// Remove all the on bike navigation elements
const navigationElements = Array.from(document.querySelectorAll("*")).filter(
e => getComputedStyle(e).zIndex === "16"
);
for (element of navigationElements) {
element.remove();
}

// Remove the on bike button
if (document.getElementById("onBikeButton")) document.getElementById("onBikeButton").remove();

// Update the map style to show the standard UI
const mapElement = document.getElementById("map");
mapElement.style.zIndex = "0";

// Change map dots to available bikes
loadStationMarkersFromArray(stationsArray, !tripEnded);
}
exitLandscapeNavigationUI();
} else {
// Landscape

Expand Down Expand Up @@ -416,53 +417,82 @@ async function orientationChangeHandler(event) {

// If user switches to landscape while in trip, put into navigation UI
if (!tripEnded) {
// Make the device awake
try {
wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
// The Wake Lock request has failed - usually system related, such as battery.
console.log(`${err.name}, ${err.message}`);
}
goIntoLandscapeNavigationUI();
}
}
}

// Add the Navigation Information Panel
let navInfoPanelElement = document.createElement("div");
navInfoPanelElement.id = "navigationInfoPanel";
navInfoPanelElement.innerHTML = `
<div id="costAndTimeContainer">
<div>
<i class="bi bi-currency-euro"></i>
<span id="tripCost">0.00€</span>
</div>
<div>
<i class="bi bi-clock"></i>
<span id="tripTime">00:00:00</span>
</div>
</div>
<div id="speedContainer">
<div id="speed">00</div>
<div id="speedLabel">km/h</div>
</div>
`.trim();
document.body.appendChild(navInfoPanelElement);
async function goIntoLandscapeNavigationUI() {
// Make the device awake
try {
wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
// The Wake Lock request has failed - usually system related, such as battery.
console.log(`${err.name}, ${err.message}`);
}

// Add the Navigation Information Panel
let navInfoPanelElement = document.createElement("div");
navInfoPanelElement.id = "navigationInfoPanel";
navInfoPanelElement.innerHTML = `
<div id="costAndTimeContainer">
<div>
<i class="bi bi-currency-euro"></i>
<span id="tripCost">0.00€</span>
</div>
<div>
<i class="bi bi-clock"></i>
<span id="tripTime">00:00:00</span>
</div>
</div>
<div id="speedContainer">
<div id="speed">00</div>
<div id="speedLabel">km/h</div>
</div>
`.trim();
document.body.appendChild(navInfoPanelElement);

// Append the end navigation button
appendElementToBodyFromHTML(`
<div id="changeRotationModeButton" onclick="changeRotationMode()" style="bottom: 2dvh; right: 2dvh;"><i class="bi bi-sign-turn-right"></i></div>
`);
rotationMode = "north";

// Set map pixel ratio (fix mobile map not loading at some points)
map.pixelRatio_ = 1.5;
// Append the end navigation button
appendElementToBodyFromHTML(`
<div id="changeRotationModeButton" onclick="changeRotationMode()" style="bottom: 2dvh; right: 2dvh;"><img src="assets/images/north.png"></div>
`);

// Update the map style to hide the on foot UI
const mapElement = document.getElementById("map");
mapElement.style.zIndex = "15";
// Set map pixel ratio (fix mobile map not loading at some points)
map.pixelRatio_ = 1.5;

// Change map dots to available docks
loadStationMarkersFromArray(stationsArray, true);
// Update the map style to hide the on foot UI
const mapElement = document.getElementById("map");
mapElement.style.zIndex = "15";

// Change map dots to available docks
loadStationMarkersFromArray(stationsArray, true);

// Start the position updating
updatePositionAndRotationWhenInNavigationUI();
}

// Start the position updating
updatePositionWhenInNavigationUI();
function exitLandscapeNavigationUI() {
// If in navigation UI, change to default UI
if (document.querySelector("#navigationInfoPanel")) {
// Remove all the on bike navigation elements
const navigationElements = Array.from(document.querySelectorAll("*")).filter(
e => getComputedStyle(e).zIndex === "16"
);
for (element of navigationElements) {
element.remove();
}

// Remove the on bike button
if (document.getElementById("onBikeButton")) document.getElementById("onBikeButton").remove();

// Update the map style to show the standard UI
const mapElement = document.getElementById("map");
mapElement.style.zIndex = "0";

// Change map dots to available bikes
loadStationMarkersFromArray(stationsArray, !tripEnded);
}
}

Expand Down
Loading

0 comments on commit dcb0ab8

Please sign in to comment.