Skip to content

Commit cb37cbb

Browse files
frillweemanfrillweeman
authored
Add Wardriving Section (#25)
* remove dangers page, fix counter * fix bad instrucitons * cleanup * allow nonstandard direction tag, link to OSM * update privacy policy to account for intro message * add footer to Report, add Wardriving section * upgrade version, update wardriving copy
1 parent a937c43 commit cb37cbb

File tree

10 files changed

+138
-72
lines changed

10 files changed

+138
-72
lines changed

‎webapp/public/wardriving.jpg‎

234 KB
Loading

‎webapp/src/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const items = [
1717
{ title: 'Map', icon: 'mdi-map', to: '/map' },
1818
{ title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' },
1919
{ title: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' },
20-
{ title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
20+
{ title: 'Wardriving', icon: 'mdi-car-connected', to: '/wardriving' },
21+
// { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
2122
// { title: 'About', icon: 'mdi-information', to: '/about' },
2223
// { title: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' },
2324
]

‎webapp/src/components/DFMapPopup.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</template>
4646

4747
<script setup lang="ts">
48-
import { defineProps, computed } from 'vue';
48+
import { computed } from 'vue';
4949
import type { PropType } from 'vue';
5050
import type { ALPR } from '@/types';
5151
import { VIcon, VList, VSheet, VListItem, VBtn } from 'vuetify/components';

‎webapp/src/components/layout/Footer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
<div>
5858
<p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
5959
<p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
60-
<p class="mt-4">v1.0.1</p>
60+
<p class="mt-4">v1.0.2</p>
6161
</div>
6262
</v-col>
6363
</v-row>

‎webapp/src/components/layout/Hero.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<v-container fluid>
3+
<v-row justify="center" class="hero text-center mb-4" :style="`background: url('${imageUrl}') no-repeat center center / cover;`">
4+
<v-col cols="12" md="8">
5+
<h1 class="mb-4">{{ title }}</h1>
6+
<p class="mb-4">
7+
{{ description }}
8+
</p>
9+
<v-btn v-if="buttonText" :href="buttonHref" :to="buttonTo" :target="buttonHref ? '_blank' : '_self'" color="rgb(18, 151, 195)" class="mt-4">{{ buttonText }}</v-btn>
10+
</v-col>
11+
</v-row>
12+
</v-container>
13+
</template>
14+
15+
<script setup lang="ts">
16+
defineProps({
17+
title: String,
18+
description: String,
19+
imageUrl: String,
20+
buttonText: String,
21+
buttonTo: String,
22+
buttonHref: String,
23+
});
24+
</script>
25+
26+
<style scoped>
27+
.hero {
28+
color: white;
29+
padding: 100px 0 !important;
30+
position: relative;
31+
}
32+
33+
.hero::before {
34+
content: '';
35+
position: absolute;
36+
top: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
background: rgba(0, 0, 0, 0.6);
41+
z-index: 1;
42+
}
43+
44+
.hero > * {
45+
position: relative;
46+
z-index: 2;
47+
}
48+
</style>

‎webapp/src/router/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@ const router = createRouter({
6666
title: 'Operators | DeFlock'
6767
}
6868
},
69+
{
70+
path: '/wardriving',
71+
name: 'wardriving',
72+
component: () => import('../views/Wardriving.vue'),
73+
meta: {
74+
title: 'Wardriving | DeFlock'
75+
}
76+
},
6977
{
7078
path: '/contact',
7179
name: 'contact',

‎webapp/src/views/OperatorsView.vue‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,5 @@
11
<template>
22
<v-container class="info-section" max-width="1000">
3-
<h1>Known Operators</h1>
4-
<p>
5-
We regularly scrape Flock's site for cities/counties that have Flock ALPRs. Here is our current list of jurisdictions we've scraped that have ALPRs. Not every Flock operator has opted in to sharing their usage with Flock, so this list is <i>not exhaustive</i>.
6-
</p>
7-
8-
<v-card class="my-4">
9-
<v-card-text>
10-
<v-select
11-
v-model="selectedState"
12-
:items="distinctStates"
13-
label="Filter by State"
14-
outlined
15-
clearable
16-
/>
17-
18-
<v-data-table
19-
v-model:page="page"
20-
:loading="isLoading"
21-
:headers="headers"
22-
:items="filteredCities"
23-
:items-per-page="8"
24-
:sort-by="[ { key: 'state', order: 'asc' } ]"
25-
>
26-
<template v-slot:item.numCameras="i: any">
27-
<span v-if="i.item.numCameras">{{ i.item.numCameras }}</span>
28-
<span v-else>N/A</span>
29-
</template>
30-
31-
<template v-slot:item.transparencyReportUrl="i: any">
32-
<v-btn variant="text" :href="i.item.transparencyReportUrl" target="_blank" :disabled="!i.item.transparencyReportUrl">
33-
<v-icon start>mdi-eye</v-icon>
34-
<span v-if="i.item.transparencyReportUrl"> View</span>
35-
<span v-else> N/A</span>
36-
</v-btn>
37-
</template>
38-
</v-data-table>
39-
</v-card-text>
40-
</v-card>
41-
423
<h2 id="community-datasets">Community Datasets</h2>
434
<p>
445
Here are some datasets that have been shared with us by the community through various collection methods (FOIA requests, scraping, wardriving, etc.). If you have a dataset you'd like to share, please reach out to us <router-link to="/contact">here</router-link>.

‎webapp/src/views/PrivacyPolicy.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<v-container class="mb-16">
33
<h1>Privacy Policy</h1>
4-
<p>Effective Date: <b>12/26/2024</b></p>
4+
<p>Effective Date: <b>1/24/2025</b></p>
55

66
<p>
77
At DeFlock, we respect your privacy. This privacy policy outlines our approach to user privacy and how information may be handled when using our platform.
88
</p>
99

1010
<h2>Information We Collect</h2>
1111
<p>
12-
DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
12+
DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message as well as to persist application state. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
1313
</p>
1414

1515
<h2>Third-Party Services</h2>

‎webapp/src/views/ReportView.vue‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-container>
2+
<v-container class="mb-16">
33
<h1 class="text-center mt-4">Report a New ALPR</h1>
44

55
<p>
@@ -66,7 +66,11 @@
6666
value="4"
6767
editable
6868
>
69-
<v-img max-width="450" class="my-8" src="/adjust-angle.png" />
69+
<v-img
70+
max-width="450"
71+
class="my-8"
72+
src="/adjust-angle.png"
73+
/>
7074
<p>
7175
If you know the direction that the ALPR is facing, you can use the up and down arrows to set the direction it faces.
7276
</p>
@@ -80,7 +84,7 @@
8084
editable
8185
>
8286
<p>
83-
Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top right corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
87+
Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top left corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
8488
</p>
8589
<v-alert
8690
variant="tonal"
@@ -89,7 +93,7 @@
8993
title="How Long Will It Take?"
9094
>
9195
<p>
92-
We pull data from OpenStreetMap <i>hourly</i>, so it may take up to an hour for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
96+
We pull data from OpenStreetMap <i>daily</i>, so it may take up to 24 hours for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
9397
</p>
9498
</v-alert>
9599
</v-stepper-vertical-item>
@@ -104,40 +108,27 @@
104108
<p>
105109
Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
106110
</p>
107-
108-
<template v-slot:next>
109-
<v-btn
110-
color="primary"
111-
disabled
112-
>
113-
Next
114-
</v-btn>
115-
</template>
116111
</v-stepper-vertical-item>
117112
</template>
118113
</v-stepper-vertical>
119-
120-
<h2 class="text-center">Edit an Existing ALPR</h2>
121-
<p class="mb-16">
122-
If you find an ALPR that's missing information and would like to update it, you can click the <b>View on OSM</b> button to edit it in the OpenStreetMap editor.
123-
</p>
124114
</v-container>
115+
125116
<Footer />
126117
</template>
127118

128119
<script setup lang="ts">
120+
import { ref, onMounted, watch } from 'vue';
129121
import OSMTagSelector from '@/components/OSMTagSelector.vue';
122+
import { VStepperVerticalItem, VStepperVertical } from 'vuetify/labs/components';
130123
import Footer from '@/components/layout/Footer.vue';
131-
import { ref } from 'vue';
132-
import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
133124
134-
const step = ref(1);
135-
</script>
125+
const step = ref(parseInt(localStorage.getItem('currentStep') || '1'));
136126
137-
<style scoped>
138-
@import url('@/assets/typography.css');
127+
onMounted(() => {
128+
step.value = parseInt(localStorage.getItem('currentStep') || '1');
129+
});
139130
140-
.transparent {
141-
background-color: transparent !important;
142-
}
143-
</style>
131+
watch(step, (newStep) => {
132+
localStorage.setItem('currentStep', newStep.toString());
133+
});
134+
</script>

‎webapp/src/views/Wardriving.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<Hero
3+
title="Wardriving"
4+
description="Learn how driving around with an Android phone can help map ALPRs!"
5+
imageUrl="/wardriving.jpg"
6+
/>
7+
<v-container class="mb-16">
8+
<h2>What is Wardriving?</h2>
9+
<p>
10+
Wardriving is the practice of collecting data on wireless networks, Bluetooth devices, and other signals while traveling (typically in a car). For DeFlock, this technique can be a valuable way to locate Flock ALPRs and contribute to the map.
11+
</p>
12+
13+
<h2>How is Wardriving Useful?</h2>
14+
<p>
15+
Flock ALPRs often use battery packs called <b>Penguin Packs</b> that emit a Bluetooth signal with names starting with <b>"Penguin-"</b>. By recording these signals while wardriving, you can identify the general location of these cameras.
16+
</p>
17+
<p>
18+
This data can be used to identify new locations of ALPRs and verify the accuracy of existing locations. Members of the community regularly review WiGLE data to identify new ALPRs and update the map accordingly.
19+
</p>
20+
21+
<h2>How to Get Started</h2>
22+
<p>
23+
Download the <a href="https://play.google.com/store/apps/details?id=net.wigle.wigleandroid" target="_blank">WiGLE WiFi Wardriving</a> app on your Android phone. This app will allow you to record the Bluetooth signals emitted by Penguin Packs.
24+
</p>
25+
<p>
26+
By running the app while doing your daily commute or driving around town, you can help identify new ALPRs and contribute to the map.
27+
</p>
28+
29+
<h2>How to Add WiGLE Data to the Map</h2>
30+
<v-alert
31+
type="info"
32+
variant="tonal"
33+
icon="mdi-information"
34+
class="mb-4"
35+
title="WiGLE Map Layer Coming Soon"
36+
text="We're working on a way to visualize WiGLE data on the map to identify unmapped areas. Until then, you can download some of our datasets and contribute to the map manually."
37+
/>
38+
<p>
39+
Even if you haven't collected WiGLE data yourself, you can still contribute to the map by downloading the data from the <router-link to="/operators">our community datasets</router-link> or by performing a <a href="https://wigle.net/search#btSearch" target="_blank">WiGLE search</a> yourself. Once you have the data, you can import the CSV to a map such as <a href="https://www.google.com/mymaps" target="_blank">Google My Maps</a>. From there, you can verify the ALPR's location, direction, and other details. Once you're confident in the data, you can submit it to OpenStreetMap for inclusion in the map.
40+
</p>
41+
<div class="text-center mt-12">
42+
<v-btn to="/operators" color="rgb(18, 151, 195)"><v-icon start>mdi-table</v-icon>View Datasets</v-btn>
43+
</div>
44+
45+
</v-container>
46+
47+
<Footer />
48+
</template>
49+
50+
<script setup lang="ts">
51+
import Hero from '@/components/layout/Hero.vue';
52+
import Footer from '@/components/layout/Footer.vue';
53+
</script>
54+
55+
<style scoped>
56+
@import url('@/assets/typography.css');
57+
</style>

0 commit comments

Comments
 (0)