r/greens_report
1
0
Fork 0
forked from security_vision/semantic_graph
Code Issues Pull requests Projects Releases Wiki Activity

add map to report

Browse source
This commit is contained in:
Ruben van de Ven 2021-10-07 13:32:13 +02:00
parent e0cd4100fd
commit 3f39033931
2 changed files with 95 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
www/report/mvp.css → www/report/report.css
View file

@ -1,10 +1,10 @@
/* MVP.css v1.7.3 - https://github.com/andybrewer/mvp */
/* adapted from MVP.css v1.7.3 - https://github.com/andybrewer/mvp */
:root {
--border-radius: 5px;
--box-shadow: 2px 2px 10px;
--color: darkblue;
--hover-color: blue;
--color: blue;
--hover-color: lightblue;
--color-accent: #118bee15;
--color-bg: #fff;
--color-bg-secondary: #e9e9e9;
@ -24,6 +24,31 @@
--width-content: 720px;
}
iframe {
position: fixed;
top: 0;
left: 0;
width: calc(100% - var(--width-content) - 2rem);
height: 100vh;
border-style: none none none none;
/* border-width: 3px;
border-color: black; */
}
content {
margin-left: 55vw;
max-width: var(--width-content);
margin-right: 5vw;
display: block;
}
@media screen and (max-width: 1350px) {
iframe#map{
display: none;;
}
}
/*
@media (prefers-color-scheme: dark) {
:root {
@ -60,7 +85,7 @@ body {
footer,
header,
main {
margin: 0 auto;
margin: 0 0 0 auto;
max-width: var(--width-content);
width: calc(100% - 2rem);
padding: .5rem 1rem;
@ -69,12 +94,13 @@ main {
header{
position: fixed;
top: 0;
left: calc(50% - var(--width-content) / 2);
right: 0;
padding-left: 0;
padding-right: 0;
background-color: white;
border-bottom: solid 1px var(--color-bg-secondary);
z-index: 999;
max-width: calc(var(--width-content) + 2rem);
}
@media screen and (max-width: 740px) {
@ -245,7 +271,7 @@ h5,
h6 {
text-align: left;
line-height: var(--line-height);
padding-top:5rem
padding-top: 2rem;
}
h1{
@ -254,6 +280,7 @@ h1{
font-size: 150%;
}
h2{
padding-top:5rem;
font-size: 125%;
}
/* h1::before{
@ -319,13 +346,13 @@ small {
}
sup {
background-color: var(--color-secondary);
border-radius: var(--border-radius);
color: var(--color-bg);
font-size: xx-small;
/* background-color: var(--color-secondary); */
/* border-radius: var(--border-radius); */
/* color: var(--color-secondary); */
/* font-size: xx-small; */
font-weight: bold;
margin: 0.2rem;
padding: 0.2rem 0.3rem;
/* margin: 0.2rem;
padding: 0.2rem 0.3rem; */
position: relative;
top: -2px;
}
@ -349,7 +376,7 @@ a:hover {
/* text-decoration: underline; */
}
a:hover sup{
background-color: var(--hover-color);
/* background-color: var(--hover-color); */
}
a b,
@ -560,7 +587,7 @@ h1.Title{
background-color: black;
color: var(--color-bg-secondary);
padding: 1rem;
margin: 0 -1rem;
}
.keypoints > p > strong{
margin-left:2.5rem;

59
www/report/report.html
View file

@ -5,7 +5,7 @@
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Biometric and Behavioural Mass Surveillance in EU Member States</title>
<link rel="stylesheet" href="mvp.css" />
<link rel="stylesheet" href="report.css" />
<style type="text/css">
@ -15,8 +15,54 @@
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const frameEl = document.getElementById('map');
frameEl.addEventListener('load', function () {
const caseEls = document.getElementsByClassName('level1');
for (let caseEl of caseEls) {
console.log(caseEl.dataset.title);
const toSelect = typeof caseEl.dataset.title == 'undefined' || caseEl.dataset.title == 'none' ? null : frameEl.contentWindow.getIdForTitle(caseEl.dataset.title);
// navItemEl.hash url-encodes
// let targetEl = document.getElementById(navItemEl.attributes.href.value.substr(1));
// let wrapperEl = targetEl.parentNode;
let intersectionObserver = new IntersectionObserver(function (entries) {
console.log(entries);
// If intersectionRatio is 0, the target is out of view
// and we do not need to do anything.
if (entries[0].intersectionRatio <= 0) {
// navItemEl.classList.remove('active');
} else {
if(toSelect === null) {
frameEl.contentWindow.mapGraph.deselectNode();
frameEl.contentWindow.mapGraph.resetZoom();
} else {
const node = frameEl.contentWindow.mapGraph.graph.nodes.filter(n => n.id == toSelect)[0]
frameEl.contentWindow.mapGraph.selectNode(node);
}
// navItemEl.classList.add('active');
}
});
// start observing
intersectionObserver.observe(caseEl);
}
})
});
// frame.contentWindow;
</script>
</head>
<body>
<iframe id='map' src="../index.html"></iframe>
<header id="title-block-header">
<nav id="TOC">
<a href="#">Biometric and Behavioural Mass Surveillance in EU Member States</a>
@ -1090,7 +1136,7 @@
<section id="part-ii-case-studies" class="level1 Title">
<h1 class="Title">PART II: CASE STUDIES</h1>
</section>
<section id="facial-recognition-cameras-at-brussels-international-airport-belgium" class="level1">
<section id="facial-recognition-cameras-at-brussels-international-airport-belgium" class="level1 case" data-title="Facial Recognition in Brussels Airport (Stopped)">
<h1>Facial Recognition cameras at Brussels International Airport (Belgium)</h1>
<div class="keypoints">
<p><strong>Key points</strong></p>
@ -1147,7 +1193,7 @@
<p>The French campaign Technopolice has extended to Belgium and is raising awareness through a diversified strategy based on public forums, cartography of technology and organization of events. The NGO <strong>Ligue des Droits Humains</strong> is a member of the <strong>Reclaim Your Face</strong> campaign, along with 40 other organisations<a href="#fn32" class="footnote-ref" id="fnref32" role="doc-noteref"><sup>32</sup></a>, yet it hasn’t been as active as partner organizations in neighbouring France or Germany.</p>
</section>
</section>
<section id="the-burglary-free-neighbourhood-in-rotterdam-netherlands" class="level1">
<section id="the-burglary-free-neighbourhood-in-rotterdam-netherlands" class="level1 case" data-title="Data-lab Burglary-free Neighbourhood">
<h1>The Burglary Free Neighbourhood in Rotterdam (Netherlands)</h1>
<div class="keypoints">
<p><strong>Key points</strong></p>
@ -1206,7 +1252,7 @@
<p>It is however apparent that projects such as these <strong>require (legal) fail-safes for their usage</strong>. In the case of the <strong>Burglary Free Neighbourhood</strong>, it seems the <strong>project’s privacy-by-design has been secured by project manager Delvers</strong>. The fact that local police requested access to the cameras indicates the necessity for proper oversight in such deployments. Assuming that the data protection legislation applies to the <strong>Fieldlab</strong> or any similar initiatives (to the extent that they process “personal data”), it is unclear as to who processes which type of data and the level of collaboration between the private and public sectors. This uncertainty means that it may be <strong>hard to allocate responsibilities and obligations</strong> under the data protection legislation since it may be complicated to determine who is the “competent authority”, whose processing activities in a law enforcement context fall under the <strong>scope of the LED</strong>, as well as who is the <strong>authority responsible for processing personal data</strong> (i.e., the <strong>data controller</strong>) and the one responsible for processing the data on behalf of that authority (i.e., the <strong>data processor</strong>). Such uncertainties may complicate the effectiveness of the <strong>data protection legislation</strong> (Purtova, 2018).</p>
</section>
</section>
<section id="the-safe-city-projects-in-nice-france" class="level1">
<section id="the-safe-city-projects-in-nice-france" class="level1 case" data-title="Safe City Pilot Project (Nice)">
<h1>The Safe City Projects in Nice (France)</h1>
<div class="keypoints">
<p><strong>Key points</strong></p>
@ -1264,7 +1310,7 @@
<p>As one press article reports, “For their part, many people in Nice do not seem to be hostile to this application”. The article further quotes a 72-year-old from Nice: “With terrorism, any measure that allows us to reinforce security seems desirable to me. On the condition that we don't give this application to just anyone". (Barelli 2018)</p>
</section>
</section>
<section id="facial-recognition-in-hamburg-mannheim-berlin-germany" class="level1">
<section id="facial-recognition-in-hamburg-mannheim-berlin-germany" class="level1 case" data-title="Pilot Project Südkreuz Berlin">
<h1>Facial Recognition in Hamburg, Mannheim &amp; Berlin (Germany)</h1>
<div class="keypoints">
<p><strong>Key points</strong></p>
@ -1337,7 +1383,7 @@
<p>Figure 4. Growth in police requests to INPOL system<a href="#fn37" class="footnote-ref" id="fnref37" role="doc-noteref"><sup>37</sup></a></p>
</section>
</section>
<section id="the-dragonfly-project-hungary" class="level1">
<section id="the-dragonfly-project-hungary" class="level1 case" data-title="Dragonfly Project">
<h1>The Dragonfly project (Hungary)</h1>
<div class="keypoints">
<p><strong>Key points</strong></p>
@ -1741,5 +1787,6 @@
<hr>
</article>
</main>
</body>
</html>