linked up the blitzortung ws
This commit is contained in:
parent
57be46cb34
commit
e0257071e7
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vertical Line Animation</title>
|
||||
<title>Mishka Henner - Conductor</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -17,6 +17,6 @@
|
|||
id="time-indicator"
|
||||
></object>
|
||||
</div>
|
||||
<script src="/src/script.js"></script>
|
||||
<script type="module" src="/src/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
class EventEmitter {
|
||||
constructor() {
|
||||
this.events = {};
|
||||
}
|
||||
|
||||
on(event, listener) {
|
||||
if (!this.events[event]) {
|
||||
this.events[event] = [];
|
||||
}
|
||||
this.events[event].push(listener);
|
||||
}
|
||||
|
||||
emit(event, ...args) {
|
||||
if (this.events[event]) {
|
||||
this.events[event].forEach(listener => listener(...args));
|
||||
}
|
||||
}
|
||||
|
||||
removeAllListeners() {
|
||||
this.events = {};
|
||||
}
|
||||
}
|
||||
|
||||
// Convert Node.js module system to ES6 module system
|
||||
export class NotConnectedError extends Error {
|
||||
constructor(client) {
|
||||
super("Client not connected");
|
||||
this.client = client;
|
||||
}
|
||||
}
|
||||
|
||||
export const Polarity = {
|
||||
Negative: 0,
|
||||
Positive: 1,
|
||||
};
|
||||
|
||||
export const Region = {
|
||||
Unknown: 0,
|
||||
Europe: 1,
|
||||
Oceania: 2,
|
||||
NorthAmerica: 3,
|
||||
Asia: 4,
|
||||
SouthAmerica: 5,
|
||||
};
|
||||
|
||||
export class Client extends EventEmitter {
|
||||
constructor(socketFactory) {
|
||||
super();
|
||||
this.socketFactory = socketFactory;
|
||||
}
|
||||
|
||||
getSocket() {
|
||||
return this.socket;
|
||||
}
|
||||
|
||||
connect(url = this.generateRandomConnectionUrl()) {
|
||||
const socket = (this.socket = this.socketFactory.make(url));
|
||||
socket.onmessage = (event) => {
|
||||
const rawData = this.decode(event.data);
|
||||
|
||||
this.emit("data", this.buildStrikeData(JSON.parse(rawData)));
|
||||
};
|
||||
socket.onopen = () => {
|
||||
this.sendJSON({ a: 111 });
|
||||
this.emit("connect", socket);
|
||||
};
|
||||
socket.onerror = (err) => this.emit("error", err);
|
||||
}
|
||||
|
||||
close() {
|
||||
if (!this.socket) {
|
||||
throw new NotConnectedError(this);
|
||||
}
|
||||
this.socket.close();
|
||||
this.removeAllListeners();
|
||||
}
|
||||
|
||||
processRawLocation(location) {
|
||||
return {
|
||||
latitude: location.lat,
|
||||
longitude: location.lon,
|
||||
altitude: location.alt,
|
||||
};
|
||||
}
|
||||
|
||||
buildStrikeData(strike) {
|
||||
return {
|
||||
location: this.processRawLocation(strike),
|
||||
deviation: strike.mds,
|
||||
delay: strike.delay,
|
||||
time: new Date(Math.floor(strike.time / 1e6)),
|
||||
detectors: strike.sig.map((rawDec) => ({
|
||||
id: rawDec.sta,
|
||||
location: this.processRawLocation(rawDec),
|
||||
status: rawDec.status,
|
||||
delay: rawDec.time,
|
||||
})),
|
||||
polarity: strike.pol > 0 ? Polarity.Positive : Polarity.Negative,
|
||||
maxDeviation: strike.mds,
|
||||
maxCircularGap: strike.mcg,
|
||||
region: 1 <= strike.region && strike.region <= 5 ? strike.region : Region.Unknown,
|
||||
};
|
||||
}
|
||||
|
||||
decode(b) {
|
||||
let a,
|
||||
e = {},
|
||||
d = b.split(""),
|
||||
c = d[0],
|
||||
f = c,
|
||||
g = [c],
|
||||
h = 256,
|
||||
o = h;
|
||||
|
||||
for (let i = 1; i < d.length; i++) {
|
||||
let charCode = d[i].charCodeAt(0);
|
||||
a = h > charCode ? d[i] : e[charCode] ? e[charCode] : f + c;
|
||||
g.push(a);
|
||||
c = a.charAt(0);
|
||||
e[o] = f + c;
|
||||
o++;
|
||||
f = a;
|
||||
}
|
||||
|
||||
return g.join("");
|
||||
}
|
||||
|
||||
sendJSON(data) {
|
||||
this.socket.send(JSON.stringify(data));
|
||||
}
|
||||
|
||||
generateRandomConnectionUrl() {
|
||||
const knownServerIds = [1, 7, 8];
|
||||
return `wss://ws${knownServerIds[Math.floor(Math.random() * knownServerIds.length)]}.blitzortung.org:443/`;
|
||||
}
|
||||
}
|
||||
|
||||
export class BrowserSocketFactory {
|
||||
make(url) {
|
||||
return new WebSocket(url);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,10 @@
|
|||
import { Client, BrowserSocketFactory } from './blitz.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const socketFactory = new BrowserSocketFactory();
|
||||
const client = new Client(socketFactory);
|
||||
|
||||
const svgFiles = [
|
||||
{ fileName: 'Gong.svg', yPos: '20%' },
|
||||
{ fileName: 'Orchestral Bass.svg', yPos: '10%' },
|
||||
|
|
@ -48,32 +54,37 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
client.on('data', (strike) => {
|
||||
|
||||
const randomStaveNumber = Math.floor(Math.random() * numStaves + 1);
|
||||
const randomFileNumber = Math.floor(Math.random() * numFiles + 1);
|
||||
const rect = timeIndicator.getBoundingClientRect();
|
||||
const sheetLeft = sheetWindow.getBoundingClientRect().left;
|
||||
const xPosition = rect.left + window.scrollX - sheetLeft;
|
||||
if (strike.region > 1 ){
|
||||
|
||||
console.log(`${svgFiles[randomStaveNumber].fileName}`);
|
||||
|
||||
const newObject = document.createElement('div');
|
||||
newObject.classList.add('event-icon');
|
||||
newObject.style.position = 'absolute';
|
||||
newObject.style.left = `${xPosition}px`;
|
||||
newObject.style.top = `${svgFiles[randomFileNumber].yPos}`;
|
||||
const eventIcon = document.createElement('object');
|
||||
eventIcon.type = 'image/svg+xml';
|
||||
eventIcon.data = `assets/svg/${svgFiles[randomFileNumber].fileName}`;
|
||||
eventIcon.style.width = '35px';
|
||||
eventIcon.style.height = '35px';
|
||||
// eventIcon.style.backgroundColor = 'red';
|
||||
|
||||
newObject.appendChild(eventIcon);
|
||||
|
||||
const staveWrapper = document.getElementById(`stave-wrapper-${randomStaveNumber}`);
|
||||
staveWrapper.appendChild(newObject);
|
||||
const randomStaveNumber = Math.floor(Math.random() * numStaves + 1);
|
||||
const randomFileNumber = Math.floor(Math.random() * numFiles + 1);
|
||||
const rect = timeIndicator.getBoundingClientRect();
|
||||
const sheetLeft = sheetWindow.getBoundingClientRect().left;
|
||||
const xPosition = rect.left + window.scrollX - sheetLeft;
|
||||
|
||||
console.log(`${svgFiles[randomStaveNumber].fileName}`);
|
||||
|
||||
const newObject = document.createElement('div');
|
||||
newObject.classList.add('event-icon');
|
||||
newObject.style.position = 'absolute';
|
||||
newObject.style.left = `${xPosition}px`;
|
||||
newObject.style.top = `${svgFiles[randomFileNumber].yPos}`;
|
||||
const eventIcon = document.createElement('object');
|
||||
eventIcon.type = 'image/svg+xml';
|
||||
eventIcon.data = `assets/svg/${svgFiles[randomFileNumber].fileName}`;
|
||||
eventIcon.style.width = '35px';
|
||||
eventIcon.style.height = '35px';
|
||||
// eventIcon.style.backgroundColor = 'red';
|
||||
|
||||
newObject.appendChild(eventIcon);
|
||||
|
||||
const staveWrapper = document.getElementById(`stave-wrapper-${randomStaveNumber}`);
|
||||
staveWrapper.appendChild(newObject);
|
||||
}
|
||||
});
|
||||
|
||||
client.connect();
|
||||
|
||||
})
|
||||
|
|
@ -19,7 +19,9 @@ body {
|
|||
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
align-content: center;
|
||||
color: white;
|
||||
height: 20vh;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue