Aggiunto collegamento al server
This commit is contained in:
Giuseppe Raffa
@@ -5,6 +5,7 @@
|
||||
border-radius: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
#error-popup {
|
||||
|
||||
@@ -1,785 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MEB - Decryption Tool</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
min-height: 100vh;
|
||||
color: #e4e4e4;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #00d4ff;
|
||||
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
header p {
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
margin-bottom: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: #00d4ff;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card h2 .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Drop Zone */
|
||||
.drop-zone {
|
||||
border: 2px dashed rgba(0, 212, 255, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(0, 212, 255, 0.05);
|
||||
}
|
||||
|
||||
.drop-zone:hover,
|
||||
.drop-zone.dragover {
|
||||
border-color: #00d4ff;
|
||||
background: rgba(0, 212, 255, 0.15);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.drop-zone .icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drop-zone p {
|
||||
color: #aaa;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.drop-zone .hint {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* File Input Hidden */
|
||||
#fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Key Input */
|
||||
.key-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
flex: 1;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
outline: none;
|
||||
border-color: #00d4ff;
|
||||
box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.input-group input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 14px 28px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #444;
|
||||
color: #888;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #00ff88, #00cc6a);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
box-shadow: 0 8px 25px rgba(0, 255, 136, 0.4);
|
||||
}
|
||||
|
||||
/* File Info */
|
||||
.file-info {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #00d4ff;
|
||||
}
|
||||
|
||||
.file-info.visible {
|
||||
display: block;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.file-info .file-name {
|
||||
font-weight: 600;
|
||||
color: #00d4ff;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-info .file-size {
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Status Messages */
|
||||
.status {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.status.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
border: 1px solid rgba(0, 255, 136, 0.3);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: rgba(255, 68, 68, 0.15);
|
||||
border: 1px solid rgba(255, 68, 68, 0.3);
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.status.info {
|
||||
background: rgba(0, 212, 255, 0.15);
|
||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
/* Preview Section */
|
||||
.preview-section {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.preview-section.visible {
|
||||
display: block;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.preview-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.preview-content::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.preview-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 212, 255, 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Algorithm Info */
|
||||
.algo-info {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #ffc107;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.algo-info code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 600px) {
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toggle visibility button */
|
||||
.toggle-visibility {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
font-size: 1.2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-visibility:hover {
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: #fff;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🔐 MEB Decryption Tool</h1>
|
||||
<p>Decripta i file CSV criptati con AES-256-GCM</p>
|
||||
</header>
|
||||
|
||||
<!-- Upload Section -->
|
||||
<div class="card">
|
||||
<h2><span class="icon">📁</span> Importa File Criptato</h2>
|
||||
|
||||
<div class="drop-zone" id="dropZone">
|
||||
<span class="icon">⬆️</span>
|
||||
<p>Trascina qui il file criptato o clicca per selezionarlo</p>
|
||||
<span class="hint">Formati supportati: .csv (criptati)</span>
|
||||
</div>
|
||||
<input type="file" id="fileInput" accept=".csv,.bin,.enc">
|
||||
|
||||
<div class="file-info" id="fileInfo">
|
||||
<div class="file-name" id="fileName"></div>
|
||||
<div class="file-size" id="fileSize"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Section -->
|
||||
<div class="card">
|
||||
<h2><span class="icon">🔑</span> Chiave di Decriptazione</h2>
|
||||
|
||||
<div class="key-section">
|
||||
<div class="input-group">
|
||||
<input type="password" id="decryptKey" placeholder="Inserisci la chiave di decriptazione (token)">
|
||||
<button class="toggle-visibility" id="toggleKey" title="Mostra/Nascondi chiave">👁️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="algo-info">
|
||||
<strong>ℹ️ Formato chiave supportato:</strong><br>
|
||||
• Token esadecimale (48 caratteri): <code>217af80a15d54289...</code><br>
|
||||
• Qualsiasi stringa (verrà hashata con SHA-256)<br>
|
||||
• Algoritmo: <code>AES-256-GCM</code> con IV (12 byte) + Auth Tag (16 byte)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Decrypt Button -->
|
||||
<div class="card">
|
||||
<button class="btn btn-primary" id="decryptBtn" disabled>
|
||||
<span id="decryptBtnText">🔓 Decripta File</span>
|
||||
</button>
|
||||
|
||||
<div class="status" id="status"></div>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<div class="preview-section" id="previewSection">
|
||||
<div class="preview-header">
|
||||
<h3>📄 Anteprima Contenuto</h3>
|
||||
<span id="previewLines"></span>
|
||||
</div>
|
||||
<div class="preview-content" id="previewContent"></div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-success" id="downloadBtn">
|
||||
⬇️ Scarica File Decriptato
|
||||
</button>
|
||||
<button class="btn btn-secondary" id="copyBtn">
|
||||
📋 Copia negli Appunti
|
||||
</button>
|
||||
<button class="btn btn-secondary" id="resetBtn">
|
||||
🔄 Nuovo File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ==================== CRYPTO FUNCTIONS (Same as crypt.js) ====================
|
||||
|
||||
/**
|
||||
* Normalizza qualsiasi chiave a 32 byte per AES-256
|
||||
* Replica la logica di normalizeKey() in crypt.js
|
||||
*/
|
||||
async function normalizeKey(customKey) {
|
||||
if (!customKey) {
|
||||
throw new Error("Chiave non fornita");
|
||||
}
|
||||
|
||||
// Se è hex di 64 caratteri, converti direttamente
|
||||
if (/^[0-9a-fA-F]{64}$/.test(customKey)) {
|
||||
return hexToArrayBuffer(customKey);
|
||||
}
|
||||
|
||||
// Se è hex di 48 caratteri (token standard), hash con SHA-256
|
||||
// Altrimenti hash SHA-256 per ottenere 32 byte
|
||||
const encoder = new TextEncoder();
|
||||
const data = encoder.encode(customKey);
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
|
||||
return hashBuffer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Converte stringa hex in ArrayBuffer
|
||||
*/
|
||||
function hexToArrayBuffer(hex) {
|
||||
const bytes = new Uint8Array(hex.length / 2);
|
||||
for (let i = 0; i < hex.length; i += 2) {
|
||||
bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
|
||||
}
|
||||
return bytes.buffer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Decripta dati con AES-256-GCM
|
||||
* Struttura file: [IV(12 byte) + TAG(16 byte) + CIPHERTEXT]
|
||||
*/
|
||||
async function decryptAES256GCM(encryptedBuffer, keyBuffer) {
|
||||
const encryptedArray = new Uint8Array(encryptedBuffer);
|
||||
|
||||
if (encryptedArray.length < 28) {
|
||||
throw new Error("File troppo corto o corrotto");
|
||||
}
|
||||
|
||||
// Estrai IV (primi 12 byte)
|
||||
const iv = encryptedArray.slice(0, 12);
|
||||
|
||||
// Estrai Auth Tag (byte 12-28)
|
||||
const tag = encryptedArray.slice(12, 28);
|
||||
|
||||
// Estrai ciphertext (resto del file)
|
||||
const ciphertext = encryptedArray.slice(28);
|
||||
|
||||
// In WebCrypto, il tag è concatenato al ciphertext per la decrittazione
|
||||
const ciphertextWithTag = new Uint8Array(ciphertext.length + tag.length);
|
||||
ciphertextWithTag.set(ciphertext);
|
||||
ciphertextWithTag.set(tag, ciphertext.length);
|
||||
|
||||
// Importa la chiave
|
||||
const cryptoKey = await crypto.subtle.importKey(
|
||||
'raw',
|
||||
keyBuffer,
|
||||
{ name: 'AES-GCM' },
|
||||
false,
|
||||
['decrypt']
|
||||
);
|
||||
|
||||
// Decripta
|
||||
const decryptedBuffer = await crypto.subtle.decrypt(
|
||||
{
|
||||
name: 'AES-GCM',
|
||||
iv: iv,
|
||||
tagLength: 128 // 16 byte = 128 bit
|
||||
},
|
||||
cryptoKey,
|
||||
ciphertextWithTag
|
||||
);
|
||||
|
||||
return decryptedBuffer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Controlla se il file è già in chiaro (CSV/testo)
|
||||
*/
|
||||
function isPlainText(buffer) {
|
||||
const arr = new Uint8Array(buffer);
|
||||
if (arr.length < 10) return false;
|
||||
|
||||
// soglia: se più del 10% dei byte nei primi 256 sono non stampabili, consideriamo binario
|
||||
const maxCheck = Math.min(256, arr.length);
|
||||
let nonPrintable = 0;
|
||||
|
||||
for (let i = 0; i < maxCheck; i++) {
|
||||
const b = arr[i];
|
||||
|
||||
// caratteri ammessi: tab (9), newline (10), carriage return (13),
|
||||
// spazio (32) fino a ~ carattere 126 (tilde)
|
||||
const isAllowedWhitespace = b === 9 || b === 10 || b === 13;
|
||||
const isPrintable = b >= 32 && b <= 126;
|
||||
|
||||
if (!(isAllowedWhitespace || isPrintable)) {
|
||||
nonPrintable++;
|
||||
}
|
||||
}
|
||||
|
||||
const ratio = nonPrintable / maxCheck;
|
||||
return ratio < 0.1; // se meno del 10% sono strani, lo consideriamo testo
|
||||
}
|
||||
|
||||
// ==================== DOM ELEMENTS ====================
|
||||
const dropZone = document.getElementById('dropZone');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileInfo = document.getElementById('fileInfo');
|
||||
const fileName = document.getElementById('fileName');
|
||||
const fileSize = document.getElementById('fileSize');
|
||||
const decryptKey = document.getElementById('decryptKey');
|
||||
const toggleKey = document.getElementById('toggleKey');
|
||||
const decryptBtn = document.getElementById('decryptBtn');
|
||||
const decryptBtnText = document.getElementById('decryptBtnText');
|
||||
const status = document.getElementById('status');
|
||||
const previewSection = document.getElementById('previewSection');
|
||||
const previewContent = document.getElementById('previewContent');
|
||||
const previewLines = document.getElementById('previewLines');
|
||||
const downloadBtn = document.getElementById('downloadBtn');
|
||||
const copyBtn = document.getElementById('copyBtn');
|
||||
const resetBtn = document.getElementById('resetBtn');
|
||||
|
||||
// ==================== STATE ====================
|
||||
let selectedFile = null;
|
||||
let decryptedContent = null;
|
||||
|
||||
// ==================== EVENT LISTENERS ====================
|
||||
|
||||
// Drop zone click
|
||||
dropZone.addEventListener('click', () => fileInput.click());
|
||||
|
||||
// Drag and drop
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('dragover');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragleave', () => {
|
||||
dropZone.classList.remove('dragover');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('dragover');
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
handleFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// File input change
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
if (e.target.files.length > 0) {
|
||||
handleFile(e.target.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle key visibility
|
||||
toggleKey.addEventListener('click', () => {
|
||||
const type = decryptKey.type === 'password' ? 'text' : 'password';
|
||||
decryptKey.type = type;
|
||||
toggleKey.textContent = type === 'password' ? '👁️' : '🙈';
|
||||
});
|
||||
|
||||
// Key input
|
||||
decryptKey.addEventListener('input', updateDecryptButton);
|
||||
|
||||
// Decrypt button
|
||||
decryptBtn.addEventListener('click', decryptFile);
|
||||
|
||||
// Download button
|
||||
downloadBtn.addEventListener('click', downloadDecrypted);
|
||||
|
||||
// Copy button
|
||||
copyBtn.addEventListener('click', copyToClipboard);
|
||||
|
||||
// Reset button
|
||||
resetBtn.addEventListener('click', resetAll);
|
||||
|
||||
// ==================== FUNCTIONS ====================
|
||||
|
||||
function handleFile(file) {
|
||||
selectedFile = file;
|
||||
fileName.textContent = `📄 ${file.name}`;
|
||||
fileSize.textContent = `Dimensione: ${formatSize(file.size)}`;
|
||||
fileInfo.classList.add('visible');
|
||||
updateDecryptButton();
|
||||
hideStatus();
|
||||
previewSection.classList.remove('visible');
|
||||
decryptedContent = null;
|
||||
}
|
||||
|
||||
function formatSize(bytes) {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
|
||||
}
|
||||
|
||||
function updateDecryptButton() {
|
||||
decryptBtn.disabled = !(selectedFile && decryptKey.value.trim());
|
||||
}
|
||||
|
||||
function showStatus(message, type) {
|
||||
status.textContent = message;
|
||||
status.className = `status visible ${type}`;
|
||||
}
|
||||
|
||||
function hideStatus() {
|
||||
status.classList.remove('visible');
|
||||
}
|
||||
|
||||
async function decryptFile() {
|
||||
if (!selectedFile || !decryptKey.value.trim()) return;
|
||||
|
||||
// Show loading
|
||||
decryptBtnText.innerHTML = '<span class="spinner"></span> Decrittazione...';
|
||||
decryptBtn.disabled = true;
|
||||
|
||||
try {
|
||||
// Read file
|
||||
const fileBuffer = await selectedFile.arrayBuffer();
|
||||
|
||||
// Check if already plain text
|
||||
if (isPlainText(fileBuffer)) {
|
||||
decryptedContent = new TextDecoder().decode(fileBuffer);
|
||||
showStatus('⚠️ Il file è già in chiaro (non criptato)', 'info');
|
||||
} else {
|
||||
// Normalize key
|
||||
const keyBuffer = await normalizeKey(decryptKey.value.trim());
|
||||
|
||||
// Decrypt
|
||||
const decryptedBuffer = await decryptAES256GCM(fileBuffer, keyBuffer);
|
||||
decryptedContent = new TextDecoder().decode(decryptedBuffer);
|
||||
|
||||
showStatus('✅ File decriptato con successo!', 'success');
|
||||
}
|
||||
|
||||
// Show preview
|
||||
showPreview(decryptedContent);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Decryption error:', error);
|
||||
|
||||
let errorMsg = '❌ Errore nella decrittazione: ';
|
||||
if (error.message.includes('tag') || error.message.includes('decrypt')) {
|
||||
errorMsg += 'Chiave non valida o file corrotto';
|
||||
} else {
|
||||
errorMsg += error.message;
|
||||
}
|
||||
|
||||
showStatus(errorMsg, 'error');
|
||||
previewSection.classList.remove('visible');
|
||||
} finally {
|
||||
decryptBtnText.innerHTML = '🔓 Decripta File';
|
||||
updateDecryptButton();
|
||||
}
|
||||
}
|
||||
|
||||
function showPreview(content) {
|
||||
const lines = content.split('\n');
|
||||
const previewText = lines.slice(0, 50).join('\n');
|
||||
|
||||
previewContent.textContent = previewText;
|
||||
previewLines.textContent = `${lines.length} righe totali`;
|
||||
|
||||
if (lines.length > 50) {
|
||||
previewContent.textContent += '\n\n... [Anteprima troncata a 50 righe] ...';
|
||||
}
|
||||
|
||||
previewSection.classList.add('visible');
|
||||
}
|
||||
|
||||
function downloadDecrypted() {
|
||||
if (!decryptedContent || !selectedFile) return;
|
||||
|
||||
const blob = new Blob([decryptedContent], { type: 'text/csv;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = selectedFile.name.replace('.csv', '_decrypted.csv');
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
showStatus('✅ File scaricato!', 'success');
|
||||
}
|
||||
|
||||
async function copyToClipboard() {
|
||||
if (!decryptedContent) return;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(decryptedContent);
|
||||
showStatus('✅ Contenuto copiato negli appunti!', 'success');
|
||||
} catch (error) {
|
||||
showStatus('❌ Errore nella copia: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
selectedFile = null;
|
||||
decryptedContent = null;
|
||||
fileInput.value = '';
|
||||
decryptKey.value = '';
|
||||
fileInfo.classList.remove('visible');
|
||||
previewSection.classList.remove('visible');
|
||||
hideStatus();
|
||||
updateDecryptButton();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,386 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Previsioni - 7 giorni</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header .status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #4ade80;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 10px 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
padding: 20px 30px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
padding: 25px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.chart-card h3 {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-card .icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
padding: 20px 30px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.stat-card .unit {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>📊 MEB Grafici Meteo</h1>
|
||||
<div class="status">
|
||||
<div class="status-dot"></div>
|
||||
<span id="last-update">Aggiornamento...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control-btn active" data-hours="24">24 Ore</button>
|
||||
<button class="control-btn" data-hours="48">48 Ore</button>
|
||||
<button class="control-btn" data-hours="168">7 Giorni</button>
|
||||
<button class="control-btn" onclick="refreshData()">🔄 Aggiorna</button>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="label">🌡️ Temperatura Attuale</div>
|
||||
<div class="value" id="current-temp">--</div>
|
||||
<div class="unit" id="unit-temp">°C</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">🌬️ Vento</div>
|
||||
<div class="value" id="current-wind">--</div>
|
||||
<div class="unit" id="unit-wind">km/h</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">🌊 Altezza Onde</div>
|
||||
<div class="value" id="current-waves">--</div>
|
||||
<div class="unit" id="unit-waves">m</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">💧 Umidità</div>
|
||||
<div class="value" id="current-humidity">--</div>
|
||||
<div class="unit" id="unit-humidity">%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="chart-card">
|
||||
<h3><span class="icon">🌡️</span> Temperatura</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="temperatureChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<h3><span class="icon">🌬️</span> Velocità Vento</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="windChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<h3><span class="icon">🌊</span> Altezza Onde</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="waveChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<h3><span class="icon">💧</span> Umidità</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="humidityChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Configurazione globale Chart.js
|
||||
Chart.defaults.color = 'rgba(255, 255, 255, 0.7)';
|
||||
Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
|
||||
|
||||
let charts = {};
|
||||
let selectedHours = 24;
|
||||
|
||||
// Opzioni comuni per i grafici
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: 'rgba(255, 255, 255, 0.05)' },
|
||||
ticks: { maxTicksLimit: 8 }
|
||||
},
|
||||
y: {
|
||||
grid: { color: 'rgba(255, 255, 255, 0.05)' },
|
||||
beginAtZero: false
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
point: { radius: 2, hoverRadius: 5 },
|
||||
line: { borderWidth: 2 }
|
||||
}
|
||||
};
|
||||
|
||||
// Inizializza grafici
|
||||
function initCharts() {
|
||||
const tempCtx = document.getElementById('temperatureChart').getContext('2d');
|
||||
charts.temperature = new Chart(tempCtx, {
|
||||
type: 'line',
|
||||
data: { labels: [], datasets: [] },
|
||||
options: chartOptions
|
||||
});
|
||||
|
||||
const windCtx = document.getElementById('windChart').getContext('2d');
|
||||
charts.wind = new Chart(windCtx, {
|
||||
type: 'line',
|
||||
data: { labels: [], datasets: [] },
|
||||
options: chartOptions
|
||||
});
|
||||
|
||||
const waveCtx = document.getElementById('waveChart').getContext('2d');
|
||||
charts.wave = new Chart(waveCtx, {
|
||||
type: 'line',
|
||||
data: { labels: [], datasets: [] },
|
||||
options: chartOptions
|
||||
});
|
||||
|
||||
const humidityCtx = document.getElementById('humidityChart').getContext('2d');
|
||||
charts.humidity = new Chart(humidityCtx, {
|
||||
type: 'line',
|
||||
data: { labels: [], datasets: [] },
|
||||
options: chartOptions
|
||||
});
|
||||
}
|
||||
|
||||
// Aggiorna dati dai grafici
|
||||
async function refreshData() {
|
||||
try {
|
||||
const response = await fetch(`/plugins/meb/api/graphs?hours=${selectedHours}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.temperature) {
|
||||
charts.temperature.data = data.temperature;
|
||||
charts.temperature.update('none');
|
||||
}
|
||||
|
||||
if (data.windSpeed) {
|
||||
charts.wind.data = data.windSpeed;
|
||||
charts.wind.update('none');
|
||||
}
|
||||
|
||||
if (data.waveHeight) {
|
||||
charts.wave.data = data.waveHeight;
|
||||
charts.wave.update('none');
|
||||
}
|
||||
|
||||
if (data.humidity) {
|
||||
charts.humidity.data = data.humidity;
|
||||
charts.humidity.update('none');
|
||||
}
|
||||
|
||||
// Aggiorna valori attuali
|
||||
if (data.current) {
|
||||
document.getElementById('current-temp').textContent =
|
||||
data.current.temperature?.toFixed(1) ?? '--';
|
||||
document.getElementById('current-wind').textContent =
|
||||
data.current.windSpeed?.toFixed(1) ?? '--';
|
||||
document.getElementById('current-waves').textContent =
|
||||
data.current.waveHeight?.toFixed(2) ?? '--';
|
||||
document.getElementById('current-humidity').textContent =
|
||||
data.current.humidity?.toFixed(0) ?? '--';
|
||||
}
|
||||
|
||||
// Aggiorna unità dinamiche
|
||||
if (data.units) {
|
||||
const { forecast, waves } = data.units;
|
||||
if (forecast) {
|
||||
document.getElementById('unit-temp').textContent = forecast.temperature || '°C';
|
||||
document.getElementById('unit-wind').textContent = forecast.windSpeed || 'km/h';
|
||||
document.getElementById('unit-humidity').textContent = forecast.humidity || '%';
|
||||
}
|
||||
if (waves) {
|
||||
document.getElementById('unit-waves').textContent = waves.waveHeight || 'm';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('last-update').textContent =
|
||||
`Ultimo aggiornamento: ${new Date().toLocaleTimeString('it-IT')}`;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Errore caricamento dati:', error);
|
||||
document.getElementById('last-update').textContent = 'Errore connessione';
|
||||
}
|
||||
}
|
||||
|
||||
// Gestione pulsanti periodo
|
||||
document.querySelectorAll('.control-btn[data-hours]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.control-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
selectedHours = parseInt(btn.dataset.hours);
|
||||
refreshData();
|
||||
});
|
||||
});
|
||||
|
||||
// Inizializzazione
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initCharts();
|
||||
refreshData();
|
||||
// Aggiorna ogni 2 minuti
|
||||
setInterval(refreshData, 2 * 60 * 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
264
plugin/public/map.html
Normal file
264
plugin/public/map.html
Normal file
@@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mappa SignalK</title>
|
||||
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
transform-origin: center center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: rgba(233, 233, 233, 0.412);
|
||||
border: 1px solid rgba(233, 233, 233, 0.412);
|
||||
padding: 12px 18px;
|
||||
border-radius: 20px;
|
||||
font-size: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.25;
|
||||
min-width: 270px;
|
||||
z-index: 999;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<div id="infoBox" class="info">
|
||||
Caricamento dati...
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// MAPBOX TOKEN
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoic2VzZWUzIiwiYSI6ImNtZ2dydndkMDBsNjUya3NjeW91dW41MzcifQ.M2qxj0wL1W7plRzIataojQ";
|
||||
|
||||
// Centro predefinito
|
||||
const defaultCenter = [9.19, 44.41];
|
||||
|
||||
// MAPPA
|
||||
const map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
style: "mapbox://styles/mapbox/streets-v12",
|
||||
center: defaultCenter,
|
||||
zoom: 15
|
||||
});
|
||||
|
||||
// FUNZIONE CALCOLO DESTINAZIONE VETTORE
|
||||
function destinationPoint([lon, lat], bearingDeg, distanceMeters) {
|
||||
const R = 6371000;
|
||||
const brng = bearingDeg * Math.PI / 180;
|
||||
const d = distanceMeters;
|
||||
|
||||
const lat1 = lat * Math.PI / 180;
|
||||
const lon1 = lon * Math.PI / 180;
|
||||
|
||||
const lat2 = Math.asin(
|
||||
Math.sin(lat1) * Math.cos(d / R) +
|
||||
Math.cos(lat1) * Math.sin(d / R) * Math.cos(brng)
|
||||
);
|
||||
|
||||
const lon2 = lon1 + Math.atan2(
|
||||
Math.sin(brng) * Math.sin(d / R) * Math.cos(lat1),
|
||||
Math.cos(d / R) - Math.sin(lat1) * Math.sin(lat2)
|
||||
);
|
||||
|
||||
return [ lon2 * 180/Math.PI, lat2 * 180/Math.PI ];
|
||||
}
|
||||
|
||||
// QUANDO LA MAPPA È PRONTA
|
||||
map.on("load", () => {
|
||||
map.addSource("waveVector", {
|
||||
type: "geojson",
|
||||
data: { type: "Feature", geometry: { type: "LineString", coordinates: [defaultCenter, defaultCenter] }}
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "waveVectorLine",
|
||||
type: "line",
|
||||
source: "waveVector",
|
||||
paint: { "line-color": "#0000ff", "line-width": 6 }
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "waveLabelText",
|
||||
type: "symbol",
|
||||
source: "waveVector",
|
||||
layout: {
|
||||
"symbol-placement": "line",
|
||||
"text-field": "Direzione Onde",
|
||||
"text-size": 30,
|
||||
"text-allow-overlap": true
|
||||
},
|
||||
paint: {
|
||||
"text-color": "#0000ff",
|
||||
"text-halo-color": "white",
|
||||
"text-halo-width": 4
|
||||
}
|
||||
});
|
||||
|
||||
map.addSource("windVector", {
|
||||
type: "geojson",
|
||||
data: { type: "Feature", geometry: { type: "LineString", coordinates: [defaultCenter, defaultCenter] }}
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "windVectorLine",
|
||||
type: "line",
|
||||
source: "windVector",
|
||||
paint: { "line-color": "lime", "line-width": 6 }
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "windLabelText",
|
||||
type: "symbol",
|
||||
source: "windVector",
|
||||
layout: {
|
||||
"symbol-placement": "line",
|
||||
"text-field": "Direzione Vento",
|
||||
"text-size": 30,
|
||||
"text-allow-overlap": true
|
||||
},
|
||||
paint: {
|
||||
"text-color": "lime",
|
||||
"text-halo-color": "black",
|
||||
"text-halo-width": 3
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// MARKER BARCA
|
||||
const boatEl = document.createElement("div");
|
||||
boatEl.className = "icon";
|
||||
boatEl.innerHTML = "⛵";
|
||||
boatEl.style.fontSize = "60px";
|
||||
const boatMarker = new mapboxgl.Marker({ element: boatEl }).setLngLat(defaultCenter).addTo(map);
|
||||
|
||||
// FRECCE
|
||||
const arrowEl = document.createElement("div");
|
||||
arrowEl.className = "icon";
|
||||
arrowEl.innerHTML = `<svg width="80" height="80" viewBox="0 0 100 100"><g id="arrowGroup" transform="rotate(0 50 50)"><polygon points="50,0 90,100 50,75 10,100" fill="blue" /></g></svg>`;
|
||||
const arrowMarker = new mapboxgl.Marker({ element: arrowEl }).setLngLat(defaultCenter).addTo(map);
|
||||
|
||||
const windEl = document.createElement("div");
|
||||
windEl.className = "icon";
|
||||
windEl.innerHTML = `<svg width="80" height="80" viewBox="0 0 100 100"><g id="windArrowGroup" transform="rotate(0 50 50)"><polygon points="50,0 90,100 50,75 10,100" fill="lime" /></g></svg>`;
|
||||
const windMarker = new mapboxgl.Marker({ element: windEl }).setLngLat(defaultCenter).addTo(map);
|
||||
|
||||
// SIGNALK VARIABILI
|
||||
let position=null, waveDir=null, waveHeight=null, wavePeriod=null, windDir=null, windSpeed=null, temperature=null;
|
||||
|
||||
// WebSocket SK
|
||||
const ws = new WebSocket(`ws://${location.host}/signalk/v1/stream?subscribe=all`);
|
||||
|
||||
ws.onmessage = msg => {
|
||||
const data = JSON.parse(msg.data);
|
||||
if (!data.updates) return;
|
||||
|
||||
data.updates.forEach(u => {
|
||||
u.values?.forEach(v => {
|
||||
|
||||
if (v.path === "navigation.position") position = [v.value.longitude, v.value.latitude];
|
||||
|
||||
if (v.path === "meb.waves.direction") waveDir = v.value;
|
||||
if (v.path === "meb.waves.height") waveHeight = v.value;
|
||||
if (v.path === "meb.waves.period") wavePeriod = v.value;
|
||||
|
||||
if (v.path === "meb.wind.direction") windDir = v.value;
|
||||
if (v.path === "environment.wind.speedTrue") windSpeed = v.value;
|
||||
|
||||
if (v.path === "environment.outside.temperature") temperature = v.value;
|
||||
});
|
||||
});
|
||||
|
||||
updateMap();
|
||||
};
|
||||
|
||||
// UPDATE MAP
|
||||
function updateMap() {
|
||||
if (!position) return;
|
||||
|
||||
boatMarker.setLngLat(position);
|
||||
|
||||
if (waveDir !== null) {
|
||||
const endPoint = destinationPoint(position, waveDir, 1000);
|
||||
map.getSource("waveVector").setData({
|
||||
type: "Feature",
|
||||
geometry: { type: "LineString", coordinates: [position, endPoint] }
|
||||
});
|
||||
arrowMarker.setLngLat(endPoint);
|
||||
document.getElementById("arrowGroup").setAttribute("transform", `rotate(${waveDir} 50 50)`);
|
||||
}
|
||||
|
||||
if (windDir !== null) {
|
||||
const windHeading = (windDir + 180) % 360;
|
||||
const windEndPoint = destinationPoint(position, windHeading, 1000);
|
||||
map.getSource("windVector").setData({
|
||||
type: "Feature",
|
||||
geometry: { type: "LineString", coordinates: [position, windEndPoint] }
|
||||
});
|
||||
windMarker.setLngLat(windEndPoint);
|
||||
document.getElementById("windArrowGroup").setAttribute("transform", `rotate(${windHeading} 50 50)`);
|
||||
}
|
||||
|
||||
updateInfoBox();
|
||||
map.easeTo({ center: position });
|
||||
}
|
||||
|
||||
// UPDATE INFO BOX
|
||||
function updateInfoBox() {
|
||||
const box = document.getElementById("infoBox");
|
||||
if (!position) return;
|
||||
|
||||
const lat = position[1].toFixed(5);
|
||||
const lon = position[0].toFixed(5);
|
||||
|
||||
const waveDeg = waveDir !== null ? `${waveDir.toFixed(0)}°` : "Need Request";
|
||||
const heightM = waveHeight !== null ? `${waveHeight.toFixed(2)} m` : "Need Request";
|
||||
const periodS = wavePeriod !== null ? `${wavePeriod.toFixed(1)} s` : "Need Request";
|
||||
|
||||
const windDeg = windDir !== null ? `${windDir.toFixed(0)}°` : "Need Request";
|
||||
const windKMH = windSpeed !== null ? `${(windSpeed*3.6).toFixed(1)} km/h` : "Need Request";
|
||||
const tempC = temperature !== null ? `${(temperature - 273.15).toFixed(1)} °C` : "Need Request";
|
||||
box.innerHTML = `
|
||||
<b>Direzione Onde:</b> ${waveDeg}<br>
|
||||
<b>Altezza Onda:</b> ${heightM}<br>
|
||||
<b>Periodo Onda:</b> ${periodS}<br>
|
||||
<b>Direzione Vento:</b> ${windDeg}<br>
|
||||
<b>Intensità Vento:</b> ${windKMH}<br>
|
||||
<b>Temperatura:</b> ${tempC}<br>
|
||||
<b>Lat:</b> ${lat} | <b>Lon:</b> ${lon}
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -210,6 +210,7 @@
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: linear-gradient(to right, #007aff 0%, #007aff 0%, #e0e0e0 0%, #e0e0e0 100%);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user