Skip to content

Commit

Permalink
Pellow
Browse files Browse the repository at this point in the history
  • Loading branch information
@ErikNatanael
ErikNatanael committed Dec 18, 2024
1 parent 6f046da commit 35ddfb5
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 81 deletions.
42 changes: 21 additions & 21 deletions code/BCM/browser/extension/scripts.babel/inject.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,27 +86,27 @@ var initTimeout = null;
function init() {
clearTimeout(initTimeout);
document.addEventListener('contextmenu', event => event.preventDefault());
injectStyle(chrome.extension.getURL("style/tabStyle.css"), "head");
createButton("pellowHomeButton", "Home", function (event) {
event.preventDefault();
var iframe = document.getElementById("pellowHome");
if (iframe) {
closeHome();
} else {
displayHome();
}
return false;
});
createButton("pellowLegendButton", "Legend", function (event) {
event.preventDefault();
var iframe = document.getElementById("pellowLegend");
if (iframe) {
closeLegend();
} else {
displayLegend();
}
return false;
});
// injectStyle(chrome.extension.getURL("style/tabStyle.css"), "head");
// createButton("pellowHomeButton", "Home", function (event) {
// event.preventDefault();
// var iframe = document.getElementById("pellowHome");
// if (iframe) {
// closeHome();
// } else {
// displayHome();
// }
// return false;
// });
// createButton("pellowLegendButton", "Legend", function (event) {
// event.preventDefault();
// var iframe = document.getElementById("pellowLegend");
// if (iframe) {
// closeLegend();
// } else {
// displayLegend();
// }
// return false;
// });
}
if (!isIFrame) {
window.addEventListener("DOMContentLoaded", init);
Expand Down
19 changes: 10 additions & 9 deletions code/BCM/browser/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,29 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style/fonts.css" />
<link rel="stylesheet" href="./style/visualization.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet">
<title>BCM - Visualization</title>
</head>

<body class="" style="background-color: black;">
<body class="iceland-regular" style="background-color: black;">

<div id="ui-2d"
style="position:absolute; top:0; left: 0; width: 100vw; height: 100vh; display:flex; flex-direction: row;">
<div id="sidebar-left"
style="border-right: 2px; border-color: #333; border-style: hidden dotted hidden hidden; width: 15vw; height: 100vh; display: flex;">
<div style="flex-grow: 1; box-shadow: 0px -3px 0px red inset; border: 2px; border-color: #222; margin:20px; padding-left: 20px; width: 100%;
<div
style="flex-grow: 1; box-shadow: 0px -3px 0px red inset; border: 2px; border-color: #222; margin:20px; padding-left: 20px; width: 100%;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); background-color: rgb(0, 0, 0, 0.5); display:flex; flex-direction: row; align-items: center; height: 100%;">
<!-- <h3 style="">URLs contacted</h3> -->

<!-- <h3 style="">media fetched</h3> -->
<div id="media" style="display:grid;grid-template-columns: repeat(2, 50fr [col-start]);"></div>
<div id="media" class="iceland-regular" style="display:grid;grid-template-columns: 1fr 3fr;"></div>
</div>

</div>
<div id="main-area" style="width: 70vw; height: 100vh;">

<div id="urls" style="overflow-wrap: break-word; word-break: break-all; color: #444; font-size: 8pt;"></div>
<div id="urls" class="iceland-regular"
style="overflow-wrap: break-word; word-break: break-all; color: #444; font-size: 8pt; line-height: 0.8;"></div>
</div>
<div id="sidebar-right"
style="border-left: 2px; border-color: #333; border-style: hidden hidden hidden dotted; width: 15vw; height: 100vh; display: flex; flex-direction: column;">
Expand All @@ -41,7 +40,9 @@
</div>
<div style="flex-grow: 1; box-shadow: 0px -3px 0px red inset; border: 2px; border-color: #222; margin:20px; padding-left: 20px;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); background-color: rgb(0, 0, 0, 0.5);">
<div id="services" style="display:flex; flex-direction: row; align-items: center; height: 100%;"></div>
<div id="services"
style="display:flex; flex-direction: row; align-items: center; height: 100%; font-size: 12pt; line-height: 1;">
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -131,4 +132,4 @@ <h1>Tryck på skärmen för att starta</h1>
<!-- <script src="./js/servicesTest.js"></script> -->
</body>

</html>
</html>
45 changes: 24 additions & 21 deletions code/BCM/browser/public/js/ServiceParticle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,13 @@ class AppViz {

onWindowResize() {
// const aspectRatio = this.options.installation ? (window.innerWidth / 2) / 1220 : (window.innerWidth / 2) / window.innerHeight;
const aspectRatio = window.innerWidth / window.innerHeight;
const aspectRatio = window.innerWidth / window.innerHeight;
this.camera.aspect = aspectRatio;
this.camera.updateProjectionMatrix();

const height = this.options.installation ? 1220 : window.innerHeight;
// const height = this.options.installation ? 1220 : window.innerHeight;

this.renderer.setSize(window.innerWidth, height, false);
this.renderer.setSize(window.innerWidth, window.innerHeight, true);

}

Expand Down Expand Up @@ -307,23 +307,26 @@ class AppViz {
if (!this.packagesNames.includes(type)) this.packagesNames.push(type)
if (type == "image") this.numImages++;

const newPackage = new PackageParticle(
this.scene,
method,
type,
this.font,
this.camera,
this.renderer,
timeStamp,
this.options.showLabels,
position,
s.randomDelay,
packColor,
country,
this.idle
);
newPackage.init();
this.packages.push(newPackage);
if (this.packages.length < 10) {

const newPackage = new PackageParticle(
this.scene,
method,
type,
this.font,
this.camera,
this.renderer,
timeStamp,
this.options.showLabels,
position,
s.randomDelay,
packColor,
country,
this.idle
);
newPackage.init();
this.packages.push(newPackage);
}
}

addService(name, type, timeStamp) {
Expand Down Expand Up @@ -501,7 +504,7 @@ class PackageParticle {
// this.shape = new THREE.Mesh(this.geometry, this.material);
this.geometry = new THREE.EdgesGeometry(geometry); // or WireframeGeometry( geometry )
this.material = new THREE.LineBasicMaterial({ color: newcolor, linewidth: 2 });
this.shape = new THREE.LineSegments(this.geometry, mat);
this.shape = new THREE.LineSegments(this.geometry, this.material);


//position of the shape
Expand Down
103 changes: 77 additions & 26 deletions code/BCM/browser/public/js/visualization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ const options = {
countries: {
color: 0xFFFFFF,
transparent: false,
opacityBaseLevel: 0.7
opacityBaseLevel: 0.9
},
packagesColor: {
websocket: 0xF28527,
Expand Down Expand Up @@ -166,14 +166,18 @@ const myApp = new AppViz(containerViz, options);
var page_stats = {
countries: new Set(),
media: new Map(),
media_last_update: 0,
urls: new Set(),
urls_last_update: 0,
services: new Set(),
}

function clear_stats() {
page_stats.countries = new Set();
page_stats.media = new Map();
page_stats.media_last_update = 0;
page_stats.urls = new Set();
page_stats.urls_last_update = 0;
page_stats.services = new Set();
}

Expand All @@ -194,17 +198,46 @@ function set_stats() {
services_string += "<br/>";
});
services_div.innerHTML = services_string;
let urls_string = "";
page_stats.urls.forEach((c) => {
urls_string += c + " ";
// urls_string += "<br/>";
});
urls_div.innerHTML= urls_string;
let media_string = "";
page_stats.media.forEach((value, key, map) => {
media_string += "<div style=\"text-align: right; margin-right: 10px;\">" + value + "</div><div>" + key + "</div>";
});
media_div.innerHTML= media_string;

if (page_stats.urls_last_update != page_stats.urls.size) {

let urls_string = "";
page_stats.urls.forEach((c) => {
urls_string += c + " ";
// urls_string += "<br/>";
});
urls_div.innerHTML = urls_string;
page_stats.urls_last_update = page_stats.urls.size;
}
if (page_stats.media_last_update != page_stats.media.size) {
let media_string = "";
page_stats.media.forEach((value, key, map) => {
media_string += "<div style=\"text-align: right; margin-right: 10px;\">" + value + "</div><div>" + mediaTypeTranslator(key) + "</div>";
});
media_div.innerHTML = media_string;
page_stats.media_last_update = page_stats.media.size;
}
}
function mediaTypeTranslator(type) {
switch (String(type)) {
case "main_frame":
return "main page";
break;
case "script":
return "code";
break;
case "stylesheet":
return "design style";
break;
case "ping":
return "are you there?";
break;
case "sub_frame":
return "page in page";
break;
default:
return type;
}
}

function appResize() {
Expand All @@ -213,11 +246,15 @@ function appResize() {
// SERVICE VIZ
// const serviceViz = new ServiceGenerator(1220, window.innerWidth);

var waitingMessages = [];


//READ THE SOCKET FOR ACTIVITY
const onmessage = (message) => {
const json = JSON.parse(message.data);
waitingMessages.push(message.data);
}
const parseMessage = (message) => {
const json = JSON.parse(message);
//Per request we want to add three elements


Expand Down Expand Up @@ -295,12 +332,12 @@ const onmessage = (message) => {
page_stats.urls.add(packet.url);
let location = packet.location != null && packet.location != undefined ? getCountryName(packet.location.country) : "";

if(location !== "") {
if (location !== "") {
page_stats.countries.add(location);
}

let type_num = page_stats.media.get(packet.type);
if(type_num == undefined) {
if (type_num == undefined) {
type_num = 0;
}
page_stats.media.set(packet.type, type_num + 1);
Expand All @@ -326,13 +363,13 @@ const onmessage = (message) => {
//Increment the counter for packetsOverTime
packetsOverTime++;
numRequests++;
//If it goes over the glitchThreshold trigger glitch
// if (packetsOverTime > glitchThreshold) {
// if (!triggerThisFrame) {
// glitchPass.triggerActivation(packetsOverTime);
// triggerThisFrame = true;
// }
// } else {
// If it goes over the glitchThreshold trigger glitch
if (packetsOverTime > glitchThreshold) {
if (!triggerThisFrame) {
glitchPass.triggerActivation(packetsOverTime);
triggerThisFrame = true;
}
} else {
//Process each of the services in the packet
for (const service of packet.services) {
//ADD SERVICE TO TEXT
Expand All @@ -357,7 +394,7 @@ const onmessage = (message) => {
lastRegisteredPerService.set(country, time);
activeService = country;
}
// }
}

// if (jserviceVizson.request.initiator != undefined) serviceViz.addInitiator(json.request.initiator)
const packColor = options.packagesColor[json.request.type] != null ? options.packagesColor[json.request.type] : packagesColor.default;
Expand Down Expand Up @@ -674,7 +711,7 @@ function init() {
camera = new THREE.PerspectiveCamera(
45,
// options.installation ? (window.innerWidth / 2) / 1220 : (window.innerWidth / 2) / window.innerHeight,
window.innerWidth/window.innerHeight,
window.innerWidth / window.innerHeight,
1,
4000
);
Expand Down Expand Up @@ -881,13 +918,13 @@ function init() {
// container.appendChild(stats.dom);

myApp.init(renderer);
// window.addEventListener("resize", appResize, false);
window.addEventListener("resize", appResize, false);
window.addEventListener("resize", onWindowResize, false);
}

function onWindowResize() {
// const aspectRatio = options.installation ? (window.innerWidth / 2) / 1220 : (window.innerWidth / 2) / window.innerHeight;
const aspectRatio = window.innerWidth / window.innerHeight;
const aspectRatio = window.innerWidth / window.innerHeight;
camera.aspect = aspectRatio;
camera.updateProjectionMatrix();

Expand Down Expand Up @@ -960,6 +997,19 @@ function rotateGlobe() {
var lastUpdate = 0;

function animate() {
if (waitingMessages.length > 0) {
let i = 0;
let numToParse = Math.min(waitingMessages.length, 10);
while (i < numToParse) {
let mess = waitingMessages.shift(); // remove first and return it
try {
parseMessage(mess);
} catch (error) {
console.log(error);
}
i += 1;
}
}
let now = Date.now() * 0.001;
let dt = now - lastUpdate;
if (dt !== dt) {
Expand Down Expand Up @@ -1210,6 +1260,7 @@ function generateCountries() {
opacity: options.countries.opacityBaseLevel,
shading: THREE.SmoothShading,
shininess: 50,
dithering: true,
});
const scale = 22; // + Math.random() / 2;
const mesh = new THREE.Mesh(geometry, material);
Expand Down
Loading

0 comments on commit 35ddfb5

Please sign in to comment.