Skip to content

Commit

Permalink
Merge pull request #31 from soundscape-community/vue
Browse files Browse the repository at this point in the history 
Migrate visual components to Vue.js
  • Loading branch information
@steinbro
steinbro authored Jul 6, 2024
2 parents de00918 + 16b7ba9 commit d67bed7
Show file tree
Hide file tree
Showing 26 changed files with 2,236 additions and 3,145 deletions.
3,714 changes: 1,376 additions & 2,338 deletions package-lock.json
View file

Large diffs are not rendered by default.

17 changes: 12 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "mocha --require @babel/register --require test/setup.js",
"test": "mocha --require @babel/register",
"serve-tiles": "node server.js"
},
"dependencies": {
Expand All @@ -20,22 +20,29 @@
"@capacitor/camera": "latest",
"@capacitor/core": "latest",
"@capacitor/splash-screen": "latest",
"@turf/turf": "^7.0.0",
"leaflet": "^1.9.4"
"@turf/bbox": "^7.0.0",
"@turf/buffer": "^7.0.0",
"@turf/centroid": "^7.0.0",
"@turf/distance": "^7.0.0",
"@turf/helpers": "^7.0.0",
"@turf/nearest-point-on-line": "^7.0.0",
"leaflet": "^1.9.4",
"vue": "^3.4.31"
},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@babel/register": "^7.24.6",
"@capacitor/assets": "^3.0.5",
"@capacitor/cli": "latest",
"@vitejs/plugin-vue": "^5.0.5",
"axios": "^1.7.2",
"chai": "^5.1.1",
"esm": "^3.2.25",
"express": "^4.19.2",
"mocha": "^10.5.2",
"mocha": "^10.6.0",
"morgan": "^1.10.0",
"vite": "^2.9.13"
"vite": "^5.3.3"
},
"author": "",
"license": "ISC",
Expand Down
141 changes: 0 additions & 141 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,41 +65,7 @@ nav select {
max-width: 30%; /* on replay_gpx, don't let file selector/slider get too big */
}

#rate {
display: flex;
/* flex-direction: row; */
align-items: center;
justify-content: center;
background-color: #e74c3d;
cursor: pointer;
font-size: 1.1em;
margin-right: 10px;
padding: 5px;
border-radius: 8px;
max-width: 20%;
}

#rate div {
height: 30px; /* Adjust height of rate value container */
padding: 0 10px; /* Add padding */
font-size: 1em; /* Adjust font size */
}

#rate button {
background-color: transparent;
border: none;
color: white;
padding: 1vw;
font-size: 1em;
display: flex;
justify-content: center;
align-items: center;
}

/* Speaking and playback rate selectors don't need to be as large */
nav input[type="number"] {
max-width: 10%; /* Adjust width */
}

/* Voice selector should be wider (names can be long) */
nav select {
Expand Down Expand Up @@ -140,92 +106,7 @@ main {
border: none;
}

#map {
width: 100%;
height: 300px;
border: 2px solid #000;
margin-bottom: 15px;
}



#recentCalloutsArea {
height: calc(100vh - 435px);
overflow-y: auto;
flex-basis: 100%;
}

#recentCalloutsList {
padding: 0;
margin: 0;
}

#recentCalloutsList li,
#recentCalloutsArea p {
list-style: none;
border-bottom: 2px solid #000;
padding: 15px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Active beacon controls */
#recentCalloutsArea p {
background-color: #e74c3c;
color: #fff;
font-weight: bold;
}

#recentCalloutsArea p button {
background-color: #2c3e50;
}

#recentCalloutsArea button {
width: 60px;
}

/* display map + recent callouts side-by-side on sufficiently wide screens */
@media screen and (min-width: 600px) {
#map {
height: calc(100vh - 140px);
width: 48%;
}

#recentCalloutsArea {
height: calc(100vh - 140px);
flex-basis: 48%;
}

#rate {
font-size: 1.2em;
padding: 0px;
}

#rate div {
font-size: 1.2em;
}

#rate button {
padding: 15px;
font-size: 1.2em;
}

#rate button:hover {
cursor: pointer;
}
}

/* Current position marker on map */
.arrow-icon {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 40px solid red;
transform-origin: bottom center;
}

img {
width: 25%;
Expand All @@ -246,26 +127,4 @@ img {

.row {
margin-bottom: 20px;
}
/* Current beacon marker on map */
.beacon-icon {
position: relative;
width: 20px;
height: 20px;
background-color: #e74c3c;
border-radius: 50% 50% 50% 50%;
border: 3px solid #2c3e50;
}

.pulsing {
animation: pulse 0.75s infinite;
}

@keyframes pulse {
0%, 100% {
opacity: 0.1;
}
50% {
opacity: 1.0;
}
}
44 changes: 1 addition & 43 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,51 +23,9 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<link rel="stylesheet" href="./css/main.css" />

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
<script src="./js/vendor/unmute.js" type="module"></script>
<script src="./js/main.js" type="module"></script>
</head>
<body>
<nav>
<button class="nav-button"
id="btn_callouts" title="btn_callouts">
<i class='fas'>&#xf124;</i>
</button>
<button
class="nav-button"
id="btn_near_me"
title="Announce places near me"
>
ⓘ
</button>
<select
class="nav-button"
id="voice"
name="voice"
title="Voice"
required
></select>

<div id="rate" title="Speaking rate">
<button id="decreaseRate" title="Decrease speaking rate">−</button>
<div id="rateValue">2</div>
<button id="increaseRate" title="Increase speaking rate">+</button>
</div>

<button class="nav-button">
<a href="./help.html" title="FAQ page">
<i class="fas fa-question" style="color: white;"></i>
</a>
</button>

</nav>

<main>
<div id="map"></div>
<section id="recentCalloutsArea">
<ul id="recentCalloutsList"></ul>
</section>
</main>
</body>
<body></body>
</html>
6 changes: 4 additions & 2 deletions src/js/audio/callout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
import sense_mobility_wav from "/sounds/sense_mobility.wav";
import sense_poi_wav from "/sounds/sense_poi.wav";

import { centroid } from '@turf/centroid';
import { nearestPointOnLine } from '@turf/nearest-point-on-line';
import cache from "../data/cache.js";
import { enumerateTilesAround } from "../data/tile.js";

Expand Down Expand Up @@ -62,14 +64,14 @@ function createCalloutAnnouncer(audioQueue) {
// point on a line, or to the centroid of a polygon.
switch (feature.geometry.type) {
case "LineString": // e.g. roads
feature.point = turf.nearestPointOnLine(
feature.point = nearestPointOnLine(
feature,
audioQueue.locationProvider.turfPoint(),
{ units: "meters" }
);
break;
default: // buildings, landmarks, etc.
feature.point = turf.centroid(feature.geometry);
feature.point = centroid(feature.geometry);
}
feature.distance = audioQueue.locationProvider.distance(feature.point, {
units: "meters",
Expand Down
23 changes: 15 additions & 8 deletions src/js/audio/notabeacon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import Classic_OffAxis_wav from "/sounds/beacons/Classic/Classic_OffAxis.wav";
import sense_mobility_wav from "/sounds/sense_mobility.wav";
import SS_beaconFound2_48k_wav from "/sounds/SS_beaconFound2_48k.wav";

import { point } from '@turf/helpers';
import { reactive } from 'vue';

const onCourseAngle = 30; // degrees +/- Y axis
const foundProximityMeters = 10; // proximity to auto-stop beacon
const announceEveryMeters = 50;
Expand Down Expand Up @@ -40,13 +43,13 @@ export function createPanner(audioContext) {
}

export function createBeacon(
name,
latitude,
longitude,
locationProvider,
audioQueue,
map
) {
const sourceLocation = turf.point([longitude, latitude]);
const sourceLocation = point([longitude, latitude]);
var relativePosition =
locationProvider.normalizedRelativePosition(sourceLocation);
var lastAnnouncedDistance = null;
Expand All @@ -69,20 +72,18 @@ export function createBeacon(
offCourseSource.connect(panner);
panner.connect(audioContext.destination);

// Render beacon on the visual map
map.plotBeacon(latitude, longitude);

var beacon = {
name: name,
latitude: latitude,
longitude: longitude,
start: () => {
onCourse.play();
offCourse.play();
map.startBeaconPulse();
},

stop: () => {
onCourse.pause();
offCourse.pause();
map.pauseBeaconPulse();
},

isEnabled: () => !onCourse.paused || !offCourse.paused,
Expand Down Expand Up @@ -149,4 +150,10 @@ export function createBeacon(
);

return beacon;
}
}

// state that will make UI responsive to changes
export const currentBeacon = reactive({
beacon: null,
playing: false,
})
Loading

0 comments on commit d67bed7

Please sign in to comment.