CalvinBackup/deflock
1
0
Fork 0
mirror of https://github.com/FoggedLens/deflock.git synced 2026-02-12 15:02:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Wardriving Section (#25)

Browse Source 
* 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
This commit is contained in:
Will Freeman
2025-01-04 20:38:46 -07:00
committed by GitHub
parent a937c43e76
commit cb37cbb113
10 changed files with 139 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
webapp/public/wardriving.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

3
webapp/src/App.vue
View File

@@ -17,7 +17,8 @@ const items = [
{ title: 'Map', icon: 'mdi-map', to: '/map' },
{ title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' },
{ title: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' },
{ title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
{ title: 'Wardriving', icon: 'mdi-car-connected', to: '/wardriving' },
// { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
// { title: 'About', icon: 'mdi-information', to: '/about' },
// { title: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' },
]

2
webapp/src/components/DFMapPopup.vue
View File

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

2
webapp/src/components/layout/Footer.vue
View File

@@ -57,7 +57,7 @@
<div>
<p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
<p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
<p class="mt-4">v1.0.1</p>
<p class="mt-4">v1.0.2</p>
</div>
</v-col>
</v-row>

48
webapp/src/components/layout/Hero.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<v-container fluid>
<v-row justify="center" class="hero text-center mb-4" :style="`background: url('${imageUrl}') no-repeat center center / cover;`">
<v-col cols="12" md="8">
<h1 class="mb-4">{{ title }}</h1>
<p class="mb-4">
{{ description }}
</p>
<v-btn v-if="buttonText" :href="buttonHref" :to="buttonTo" :target="buttonHref ? '_blank' : '_self'" color="rgb(18, 151, 195)" class="mt-4">{{ buttonText }}</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script setup lang="ts">
defineProps({
title: String,
description: String,
imageUrl: String,
buttonText: String,
buttonTo: String,
buttonHref: String,
});
</script>
<style scoped>
.hero {
color: white;
padding: 100px 0 !important;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.hero > * {
position: relative;
z-index: 2;
}
</style>

8
webapp/src/router/index.ts
View File

@@ -66,6 +66,14 @@ const router = createRouter({
title: 'Operators | DeFlock'
}
},
{
path: '/wardriving',
name: 'wardriving',
component: () => import('../views/Wardriving.vue'),
meta: {
title: 'Wardriving | DeFlock'
}
},
{
path: '/contact',
name: 'contact',

39
webapp/src/views/OperatorsView.vue
View File

@@ -1,44 +1,5 @@
<template>
<v-container class="info-section" max-width="1000">
<h1>Known Operators</h1>
<p>
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>.
</p>
<v-card class="my-4">
<v-card-text>
<v-select
v-model="selectedState"
:items="distinctStates"
label="Filter by State"
outlined
clearable
/>
<v-data-table
v-model:page="page"
:loading="isLoading"
:headers="headers"
:items="filteredCities"
:items-per-page="8"
:sort-by="[ { key: 'state', order: 'asc' } ]"
>
<template v-slot:item.numCameras="i: any">
<span v-if="i.item.numCameras">{{ i.item.numCameras }}</span>
<span v-else>N/A</span>
</template>
<template v-slot:item.transparencyReportUrl="i: any">
<v-btn variant="text" :href="i.item.transparencyReportUrl" target="_blank" :disabled="!i.item.transparencyReportUrl">
<v-icon start>mdi-eye</v-icon>
<span v-if="i.item.transparencyReportUrl"> View</span>
<span v-else> N/A</span>
</v-btn>
</template>
</v-data-table>
</v-card-text>
</v-card>
<h2 id="community-datasets">Community Datasets</h2>
<p>
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>.

4
webapp/src/views/PrivacyPolicy.vue
View File

@@ -1,7 +1,7 @@
<template>
<v-container class="mb-16">
<h1>Privacy Policy</h1>
<p>Effective Date: <b>12/26/2024</b></p>
<p>Effective Date: <b>1/24/2025</b></p>
<p>
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.
@@ -9,7 +9,7 @@
<h2>Information We Collect</h2>
<p>
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.
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.
</p>
<h2>Third-Party Services</h2>

49
webapp/src/views/ReportView.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-container>
<v-container class="mb-16">
<h1 class="text-center mt-4">Report a New ALPR</h1>
<p>
@@ -66,7 +66,11 @@
value="4"
editable
>
<v-img max-width="450" class="my-8" src="/adjust-angle.png" />
<v-img
max-width="450"
class="my-8"
src="/adjust-angle.png"
/>
<p>
If you know the direction that the ALPR is facing, you can use the up and down arrows to set the direction it faces.
</p>
@@ -80,7 +84,7 @@
editable
>
<p>
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.
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.
</p>
<v-alert
variant="tonal"
@@ -89,7 +93,7 @@
title="How Long Will It Take?"
>
<p>
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.
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.
</p>
</v-alert>
</v-stepper-vertical-item>
@@ -104,40 +108,27 @@
<p>
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.
</p>
<template v-slot:next>
<v-btn
color="primary"
disabled
>
Next
</v-btn>
</template>
</v-stepper-vertical-item>
</template>
</v-stepper-vertical>
<h2 class="text-center">Edit an Existing ALPR</h2>
<p class="mb-16">
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.
</p>
</v-container>
<Footer />
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import OSMTagSelector from '@/components/OSMTagSelector.vue';
import { VStepperVerticalItem, VStepperVertical } from 'vuetify/labs/components';
import Footer from '@/components/layout/Footer.vue';
import { ref } from 'vue';
import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
const step = ref(1);
const step = ref(parseInt(localStorage.getItem('currentStep') || '1'));
onMounted(() => {
step.value = parseInt(localStorage.getItem('currentStep') || '1');
});
watch(step, (newStep) => {
localStorage.setItem('currentStep', newStep.toString());
});
</script>
<style scoped>
@import url('@/assets/typography.css');
.transparent {
background-color: transparent !important;
}
</style>

57
webapp/src/views/Wardriving.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<Hero
title="Wardriving"
description="Learn how driving around with an Android phone can help map ALPRs!"
imageUrl="/wardriving.jpg"
/>
<v-container class="mb-16">
<h2>What is Wardriving?</h2>
<p>
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.
</p>
<h2>How is Wardriving Useful?</h2>
<p>
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.
</p>
<p>
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.
</p>
<h2>How to Get Started</h2>
<p>
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.
</p>
<p>
By running the app while doing your daily commute or driving around town, you can help identify new ALPRs and contribute to the map.
</p>
<h2>How to Add WiGLE Data to the Map</h2>
<v-alert
type="info"
variant="tonal"
icon="mdi-information"
class="mb-4"
title="WiGLE Map Layer Coming Soon"
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."
/>
<p>
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.
</p>
<div class="text-center mt-12">
<v-btn to="/operators" color="rgb(18, 151, 195)"><v-icon start>mdi-table</v-icon>View Datasets</v-btn>
</div>
</v-container>
<Footer />
</template>
<script setup lang="ts">
import Hero from '@/components/layout/Hero.vue';
import Footer from '@/components/layout/Footer.vue';
</script>
<style scoped>
@import url('@/assets/typography.css');
</style>