meb/signalk-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migra dal codice salvato in locale al codice condiviso

Browse Source
This commit is contained in:
Giuseppe Raffa
2026-01-06 17:36:58 +01:00
parent 8a88c31c75
commit ff1566d36b
30 changed files with 8985 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
plugin/public/css/data_console.css Normal file
View File

@@ -0,0 +1,58 @@
.data-console-container {
font-family: sans-serif;
background-color: #f4f4f4;
padding: 15px;
border-radius: 25px;
display: flex;
align-items: center;
}
#error-popup {
position: fixed;
z-index: 9999;
inset: 0;
background: rgba(0,0,0,0.4);
display: none;
justify-content: center;
align-items: center;
}
#error-popup-content {
background: #fff;
padding: 20px 25px;
border-radius: 8px;
max-width: 400px;
width: 90%;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
position: relative;
font-family: sans-serif;
}
#error-popup-close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
font-size: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
border: 0px solid #f9f9f9;
font-family: sans-serif;
}
table thead {
background-color: #e5effa;
font-size: 13px;
color: rgb(0, 0, 0);
}
table.th, table td {
padding: 10px 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}

177
plugin/public/css/helm_suggestions.css Normal file
View File

@@ -0,0 +1,177 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 20px;
}
.widget-container {
width: 100%;
max-width: 600px;
padding: 30px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
.visualization-container {
position: relative;
width: 100%;
height: 300px;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
background: #fafafa;
border-radius: 8px;
border: 1px solid #eee;
}
.arrow-svg {
width: 300px;
height: 300px;
overflow: visible;
}
.arrow-head {
fill: none;
stroke: #007aff;
stroke-width: 12;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.3));
transition: transform 0.1s linear;
}
.arrow-stem {
fill: none;
stroke: #007aff;
stroke-width: 12;
stroke-linecap: round;
transition: d 0.1s linear;
filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.3));
transform: rotate(-40deg);
}
.controls-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin: 30px 0 20px;
text-align: left;
}
.control-group {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
.control-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: #666;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.control-group input[type="number"] {
width: 100%;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
color: #333;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.control-group input[type="number"]:focus {
outline: none;
border-color: #007aff;
}
.slider-container {
width: 100%;
margin-top: 30px;
position: relative;
padding: 0 10px;
box-sizing: border-box;
}
input[type=range] {
width: 100%;
cursor: pointer;
height: 8px;
border-radius: 5px;
outline: none;
-webkit-appearance: none;
appearance: none;
background: #e0e0e0;
transition: background 0.3s ease;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #007aff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
transition: transform 0.2s ease;
margin-top: -8px;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.stats {
display: flex;
justify-content: space-around;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #007aff;
transition: all 0.3s ease;
}
.stat-label {
font-size: 12px;
color: #888;
margin-top: 5px;
text-transform: uppercase;
}
.percentage-display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
font-weight: 800;
color: rgba(0, 0, 0, 0.1);
pointer-events: none;
z-index: 0;
}

785
plugin/public/decrypt_tool.html Normal file
View File

@@ -0,0 +1,785 @@
<!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>

386
plugin/public/graphs.html Normal file
View File

@@ -0,0 +1,386 @@
<!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>

336
plugin/public/steering_support/helm_steering_destra.html Normal file
View File

@@ -0,0 +1,336 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Helm Steering UI</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 20px;
}
.widget-container {
width: 100%;
max-width: 600px;
padding: 30px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
.visualization-container {
position: relative;
width: 100%;
height: 300px;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
background: #fafafa;
border-radius: 8px;
border: 1px solid #eee;
}
.arrow-svg {
width: 300px;
height: 300px;
overflow: visible;
}
.arrow-head {
fill: none;
stroke: #007aff;
stroke-width: 12;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.3));
transition: transform 0.1s linear;
}
.arrow-stem {
fill: none;
stroke: #007aff;
stroke-width: 12;
stroke-linecap: round;
transition: d 0.1s linear;
filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.3));
transform: rotate(-40deg);
}
.controls-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin: 30px 0 20px;
text-align: left;
}
.control-group {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
.control-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: #666;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.control-group input[type="number"] {
width: 100%;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
color: #333;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.control-group input[type="number"]:focus {
outline: none;
border-color: #007aff;
}
.slider-container {
width: 100%;
margin-top: 30px;
position: relative;
padding: 0 10px;
box-sizing: border-box;
}
input[type=range] {
width: 100%;
cursor: pointer;
height: 8px;
border-radius: 5px;
outline: none;
-webkit-appearance: none;
appearance: none;
background: #e0e0e0;
transition: background 0.3s ease;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #007aff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
transition: transform 0.2s ease;
margin-top: -8px;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.stats {
display: flex;
justify-content: space-around;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #007aff;
transition: all 0.3s ease;
}
.stat-label {
font-size: 12px;
color: #888;
margin-top: 5px;
text-transform: uppercase;
}
.percentage-display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
font-weight: 800;
color: rgba(0, 0, 0, 0.1);
pointer-events: none;
z-index: 0;
}
</style>
</head>
<body>
<div class="widget-container">
<h2>Helm Steering Control - Destra</h2>
<div class="visualization-container" style="scale: 1 1; rotate: 0;">
<div class=" percentage-display" id="bg-percentage">0%</div>
<svg class="arrow-svg" viewBox="0 0 200 200">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.2" />
</filter>
</defs>
<g transform="translate(100, 100)">
<path id="arrow-stem" class="arrow-stem" />
<g id="elemento-svg" transform="rotate(75 0 0) translate(-30 -115) scale(1)" fill="#007aff">
<path
d="M36.5299 45.7049L1.75948 80.3705C0.492705 81.5658 0 83.1127 0 84.8004C0 88.3162 2.60419 91.0583 6.12344 91.0583C8.02389 91.0583 9.43165 90.3553 10.6281 89.23L48.8474 50.6972C50.3958 49.0098 51.0292 47.4629 51.0292 45.7049C51.0292 44.0174 50.2548 42.2597 48.8474 40.783L10.6281 1.96883C9.43165 0.773469 8.02389 -3.6458e-07 6.05309 -3.6458e-07C2.60419 -3.6458e-07 0 2.88294 0 6.3987C0 8.01594 0.492707 9.70352 1.68914 10.8989L36.5299 45.7049Z"
fill="#007aff" />
</g>
</g>
</svg>
</div>
<div class=" controls-grid">
<div class="control-group">
<label for="start-val">Valore Inizio</label>
<input type="number" id="start-val" value="0" step="1">
</div>
<div class="control-group">
<label for="end-val">Valore Fine</label>
<input type="number" id="end-val" value="100" step="1">
</div>
</div>
<div class="slider-container">
<input type="range" id="main-slider" min="0" max="100" value="0" step="1">
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-value" id="val-current">0</div>
<div class="stat-label">Valore Attuale</div>
</div>
<div class="stat-item">
<div class="stat-value" id="val-percent">0%</div>
<div class="stat-label">Progresso</div>
</div>
</div>
</div>
<script>
const startInput = document.getElementById('start-val');
const endInput = document.getElementById('end-val');
const slider = document.getElementById('main-slider');
const valCurrentDisplay = document.getElementById('val-current');
const valPercentDisplay = document.getElementById('val-percent');
const bgPercentage = document.getElementById('bg-percentage');
const arrowStem = document.getElementById('arrow-stem');
const arrowHead = document.getElementById('arrow-head');
const RADIUS = 70;
const HEAD_ANGLE = 30;
const ANGLE_END = 30;
const MAX_ARC_LENGTH = 240;
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
let radians = (angleInDegrees) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(radians)),
y: centerY + (radius * Math.sin(radians))
};
}
function updateVisualization() {
const start = parseFloat(startInput.value) || 0;
const end = parseFloat(endInput.value) || 100;
const current = parseFloat(slider.value);
const minVal = Math.min(start, end);
const maxVal = Math.max(start, end);
if (parseFloat(slider.min) !== minVal) slider.min = minVal;
if (parseFloat(slider.max) !== maxVal) slider.max = maxVal;
let percentage;
//Range + 20 perche' così al 100% la freccia rimane visibile. * (current / 100) è per adattarsi con il valore
// di fine in modo tale sia proporzionato se la fine è 100 o 5.
const range = (end + (17 * (current / 100))) - start;
if (range === 0) {
percentage = 1;
} else {
percentage = (current - (start)) / range;
}
const clampedPct = Math.max(0, Math.min(1, percentage));
const currentArcLength = MAX_ARC_LENGTH * (1 - clampedPct);
const currentStartAngle = ANGLE_END - currentArcLength;
const startPt = polarToCartesian(0, 0, RADIUS, currentStartAngle);
const endPt = polarToCartesian(0, 0, RADIUS, ANGLE_END);
const largeArc = (ANGLE_END - currentStartAngle) > 180 ? 1 : 0;
const d = `M ${startPt.x} ${startPt.y} A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${endPt.x} ${endPt.y}`;
arrowStem.setAttribute('d', d);
const headPt = polarToCartesian(0, 0, RADIUS, ANGLE_END);
const headRot = ANGLE_END + 90;
arrowHead.setAttribute('transform', `translate(${headPt.x}, ${headPt.y}) rotate(${headRot})`);
valCurrentDisplay.textContent = current.toFixed(1);
const pctText = (clampedPct * 100).toFixed(0) + '%';
valPercentDisplay.textContent = pctText;
bgPercentage.textContent = pctText;
const sliderPct = ((current - minVal) / (maxVal - minVal)) * 100;
slider.style.background = `linear-gradient(to right, #007aff 0%, #007aff ${sliderPct}%, #e0e0e0 ${sliderPct}%, #e0e0e0 100%)`;
}
startInput.addEventListener('input', updateVisualization);
endInput.addEventListener('input', updateVisualization);
slider.addEventListener('input', updateVisualization);
updateVisualization();
</script>
</body>
</html>

158
plugin/public/steering_support/helm_steering_sinistra.html Normal file
View File

@@ -0,0 +1,158 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Helm Steering UI</title>
<link rel="stylesheet" href="/plugin/public/css/helm_suggestions.css">
</head>
<body>
<div class="widget-container">
<h2>Helm Steering Control - Sinistra</h2>
<div class="visualization-container" style="scale: -1 1; rotate: 90;">
<div class=" percentage-display" id="bg-percentage">0%</div>
<svg class="arrow-svg" viewBox="0 0 200 200">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.2" />
</filter>
</defs>
<g transform="translate(100, 100)">
<path id="arrow-stem" class="arrow-stem" />
<g id="elemento-svg" transform="rotate(75 0 0) translate(-30 -115) scale(1)" fill="#007aff">
<path
d="M36.5299 45.7049L1.75948 80.3705C0.492705 81.5658 0 83.1127 0 84.8004C0 88.3162 2.60419 91.0583 6.12344 91.0583C8.02389 91.0583 9.43165 90.3553 10.6281 89.23L48.8474 50.6972C50.3958 49.0098 51.0292 47.4629 51.0292 45.7049C51.0292 44.0174 50.2548 42.2597 48.8474 40.783L10.6281 1.96883C9.43165 0.773469 8.02389 -3.6458e-07 6.05309 -3.6458e-07C2.60419 -3.6458e-07 0 2.88294 0 6.3987C0 8.01594 0.492707 9.70352 1.68914 10.8989L36.5299 45.7049Z"
fill="#007aff"/>
</g>
</g>
</svg>
</div>
<div class=" controls-grid">
<div class="control-group">
<label for="start-val">Valore Inizio</label>
<input type="number" id="start-val" value="0" step="1">
</div>
<div class="control-group">
<label for="end-val">Valore Fine</label>
<input type="number" id="end-val" value="100" step="1">
</div>
</div>
<div class="slider-container">
<input type="range" id="main-slider" min="0" max="100" value="0" step="1">
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-value" id="val-current">0</div>
<div class="stat-label">Valore Attuale</div>
</div>
<div class="stat-item">
<div class="stat-value" id="val-percent">0%</div>
<div class="stat-label">Progresso</div>
</div>
</div>
</div>
<script>
const startInput = document.getElementById('start-val');
const endInput = document.getElementById('end-val');
const slider = document.getElementById('main-slider');
const valCurrentDisplay = document.getElementById('val-current');
const valPercentDisplay = document.getElementById('val-percent');
const bgPercentage = document.getElementById('bg-percentage');
const arrowStem = document.getElementById('arrow-stem');
const arrowHead = document.getElementById('arrow-head');
const RADIUS = 70;
const HEAD_ANGLE = 30;
const ANGLE_END = 30;
const MAX_ARC_LENGTH = 240;
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
let radians = (angleInDegrees) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(radians)),
y: centerY + (radius * Math.sin(radians))
};
}
function updateVisualization() {
const start = parseFloat(startInput.value) || 0;
const end = parseFloat(endInput.value) || 100;
const current = parseFloat(slider.value);
const minVal = Math.min(start, end);
const maxVal = Math.max(start, end);
if (parseFloat(slider.min) !== minVal) slider.min = minVal;
if (parseFloat(slider.max) !== maxVal) slider.max = maxVal;
let percentage;
//Range + 20 perche' così al 100% la freccia rimane visibile. * (current / 100) è per adattarsi con il valore
// di fine in modo tale sia proporzionato se la fine è 100 o 5.
const range = (end + (17 * (current / 100))) - start;
if (range === 0) {
percentage = 1;
} else {
percentage = (current - (start)) / range;
}
const clampedPct = Math.max(0, Math.min(1, percentage));
const currentArcLength = MAX_ARC_LENGTH * (1 - clampedPct);
const currentStartAngle = ANGLE_END - currentArcLength;
const startPt = polarToCartesian(0, 0, RADIUS, currentStartAngle);
const endPt = polarToCartesian(0, 0, RADIUS, ANGLE_END);
const largeArc = (ANGLE_END - currentStartAngle) > 180 ? 1 : 0;
const d = `M ${startPt.x} ${startPt.y} A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${endPt.x} ${endPt.y}`;
arrowStem.setAttribute('d', d);
const headPt = polarToCartesian(0, 0, RADIUS, ANGLE_END);
const headRot = ANGLE_END + 90;
arrowHead.setAttribute('transform', `translate(${headPt.x}, ${headPt.y}) rotate(${headRot})`);
valCurrentDisplay.textContent = current.toFixed(1);
const pctText = (clampedPct * 100).toFixed(0) + '%';
valPercentDisplay.textContent = pctText;
bgPercentage.textContent = pctText;
const sliderPct = ((current - minVal) / (maxVal - minVal)) * 100;
slider.style.background = `linear-gradient(to right, #007aff 0%, #007aff ${sliderPct}%, #e0e0e0 ${sliderPct}%, #e0e0e0 100%)`;
}
startInput.addEventListener('input', updateVisualization);
endInput.addEventListener('input', updateVisualization);
slider.addEventListener('input', updateVisualization);
updateVisualization();
</script>
</body>
</html>

588
plugin/public/steering_support/steering_helm_tip_builder.html Normal file
View File

@@ -0,0 +1,588 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Steering Suggestions Widget</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 20px;
}
.widget-container {
width: 100%;
max-width: 700px;
padding: 30px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
margin-top: 0;
color: #555;
font-weight: 600;
}
.progress-circle-container {
position: relative;
width: 500px;
height: 220px;
margin: 20px auto;
}
.progress-circle {
width: 100%;
height: 100%;
}
.progress-circle-bg {
fill: none;
stroke: #e0e0e0;
stroke-width: 14;
}
.progress-circle-fill {
fill: none;
stroke: #007aff;
stroke-width: 14;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1),
stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.3));
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: bold;
color: #007aff;
transition: all 0.3s ease;
}
.controls-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin: 20px 0;
text-align: left;
}
.control-group {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
.control-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: #666;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.control-group input[type="number"] {
width: 100%;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
color: #333;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.control-group input[type="number"]:focus {
outline: none;
border-color: #007aff;
}
.toggle-container {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 20px 0;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.toggle-label {
font-size: 14px;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input:checked+.toggle-slider {
background-color: #007aff;
}
input:checked+.toggle-slider:before {
transform: translateX(26px);
}
.direction-indicator {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: #007aff;
}
.direction-arrow {
font-size: 18px;
transition: transform 0.3s ease;
}
.slider-container {
width: 100%;
margin-top: 20px;
position: relative;
}
#mio-slider {
width: 100%;
cursor: pointer;
height: 10px;
border-radius: 5px;
outline: none;
-webkit-appearance: none;
background: linear-gradient(to right, #007aff 0%, #007aff 0%, #e0e0e0 0%, #e0e0e0 100%);
transition: background 0.3s ease;
}
#mio-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #007aff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#mio-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 12px rgba(0, 122, 255, 0.6);
}
#mio-slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: #007aff;
cursor: pointer;
border: none;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#mio-slider::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 3px 12px rgba(0, 122, 255, 0.6);
}
.labels {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px 5px 0;
box-sizing: border-box;
font-weight: bold;
color: #888;
font-size: 14px;
}
.stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #007aff;
transition: all 0.3s ease;
}
.stat-label {
font-size: 12px;
color: #888;
margin-top: 5px;
}
.info-badge {
display: inline-block;
background: #e3f2fd;
color: #1976d2;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="widget-container">
<h2>Progress Circle</h2>
<div class="progress-circle-container">
<svg class="progress-circle" viewBox="0 0 200 200">
<circle id="progress-circle-fill" class="progress-circle-fill" cx="100" cy="100" r="90">
</circle>
<g id="elemento-svg" transform="rotate(70 0 0) translate(80 -150) scale(1)" fill="#007aff">
<path
d="M36.5299 45.7049L1.75948 80.3705C0.492705 81.5658 0 83.1127 0 84.8004C0 88.3162 2.60419 91.0583 6.12344 91.0583C8.02389 91.0583 9.43165 90.3553 10.6281 89.23L48.8474 50.6972C50.3958 49.0098 51.0292 47.4629 51.0292 45.7049C51.0292 44.0174 50.2548 42.2597 48.8474 40.783L10.6281 1.96883C9.43165 0.773469 8.02389 -3.6458e-07 6.05309 -3.6458e-07C2.60419 -3.6458e-07 0 2.88294 0 6.3987C0 8.01594 0.492707 9.70352 1.68914 10.8989L36.5299 45.7049Z"
fill="black" fill-opacity="0.85" />
</g>
</svg>
<div class="progress-text" id="progress-text">0%</div>
</div>
<div class="controls-grid">
<div class="control-group">
<label for="start-angle">Inizio (gradi)</label>
<input type="number" id="start-angle" min="0" max="360" value="0" step="1">
<div class="info-badge">Punto di partenza</div>
</div>
<div class="control-group">
<label for="max-angle">Limite (gradi)</label>
<input type="number" id="max-angle" min="1" max="360" value="40" step="1">
<div class="info-badge">Arco massimo</div>
</div>
</div>
<!-- Toggle per la direzione -->
<div class="toggle-container">
<span class="toggle-label">Direzione</span>
<div class="direction-indicator">
<span class="direction-arrow" id="direction-arrow">↻</span>
<span id="direction-text">Oraria</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="direction-toggle">
<span class="toggle-slider"></span>
</label>
</div>
<div class="slider-container">
<input type="range" id="mio-slider" min="0" max="100" value="0" step="0.5">
<div class="labels">
<span>0%</span>
<span>50%</span>
<span>100%</span>
</div>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-value" id="stat-degrees">0°</div>
<div class="stat-label">Progresso</div>
</div>
<div class="stat-item">
<div class="stat-value" id="stat-arc">0°</div>
<div class="stat-label">Arco attuale</div>
</div>
<div class="stat-item">
<div class="stat-value" id="stat-remaining">100%</div>
<div class="stat-label">Rimanente</div>
</div>
</div>
<div class="container"
style="max-width:500px; background:white; padding:30px; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,0.1);">
<h2>Controllo Trasformazioni Freccia</h2>
<div class="controls">
<div class="control-group">
<label for="rotate-input">Rotazione (°)</label>
<input type="number" id="rotate-input" value="70" step="1">
<div class="value-display" id="rotate-display">70°</div>
</div>
<div class="control-group">
<label for="rotate-x">Centro Rot. X</label>
<input type="number" id="rotate-x" value="0" step="1">
<div class="value-display" id="rotate-x-display">0</div>
</div>
<div class="control-group">
<label for="rotate-y">Centro Rot. Y</label>
<input type="number" id="rotate-y" value="0" step="1">
<div class="value-display" id="rotate-y-display">0</div>
</div>
<div class="control-group">
<label for="scale-input">Scala</label>
<input type="number" id="scale-input" value="1" step="0.1" min="0.1" max="5">
<div class="value-display" id="scale-display">1x</div>
</div>
<div class="control-group">
<label for="translate-x">Posizione X</label>
<input type="number" id="translate-x" value="80" step="1">
<div class="value-display" id="translate-x-display">80</div>
</div>
<div class="control-group">
<label for="translate-y">Posizione Y</label>
<input type="number" id="translate-y" value="-150" step="1">
<div class="value-display" id="translate-y-display">-150</div>
</div>
<div class="control-group full-width">
<label>Transform String</label>
<textarea id="transform-output" readonly></textarea>
</div>
</div>
</div>
</div>
<script>
const slider = document.getElementById('mio-slider');
const progressCircle = document.getElementById('progress-circle-fill');
const progressText = document.getElementById('progress-text');
const startAngleInput = document.getElementById('start-angle');
const maxAngleInput = document.getElementById('max-angle');
const directionToggle = document.getElementById('direction-toggle');
const directionText = document.getElementById('direction-text');
const directionArrow = document.getElementById('direction-arrow');
const fineFreccia = document.getElementById('fine-freccia');
const statDegrees = document.getElementById('stat-degrees');
const statArc = document.getElementById('stat-arc');
const statRemaining = document.getElementById('stat-remaining');
// Calcoliamo la circonferenza del cerchio
const raggio = 90;
const circonferenza = 2 * Math.PI * raggio;
function aggiornaProgresso() {
const valore = parseFloat(slider.value);
const startAngle = parseFloat(startAngleInput.value) || 0;
const maxAngle = parseFloat(maxAngleInput.value) || 40;
const isReverse = directionToggle.checked;
// Calcoliamo l'angolo effettivo del progresso
const angoloProgressoEffettivo = (valore / 100) * maxAngle;
// Calcoliamo la lunghezza dell'arco
const lunghezzaArcoAttuale = (angoloProgressoEffettivo / 360) * circonferenza;
// Impostiamo stroke-dasharray
progressCircle.style.strokeDasharray = `${lunghezzaArcoAttuale} ${circonferenza}`;
// Calcoliamo la rotazione in base alla direzione
let rotazione;
let rotazioneFreccia;
if (isReverse) {
// Direzione antioraria
rotazione = startAngle - 90;
progressCircle.style.transform = `rotate(${rotazione}deg) scale(-1, 1)`;
// La freccia deve ruotare al contrario e compensare lo scale
rotazioneFreccia = -startAngle + 90;
} else {
// Direzione oraria
rotazione = startAngle - 90;
progressCircle.style.transform = `rotate(${rotazione}deg)`;
rotazioneFreccia = startAngle - 90;
}
progressCircle.style.transformOrigin = 'center';
// Ruotiamo la freccia per allinearla al punto iniziale
fineFreccia.style.transform = `rotate(${rotazioneFreccia}deg)`;
fineFreccia.style.transformOrigin = '100px 100px'; // Centro del cerchio
// Aggiorniamo il testo
progressText.textContent = valore.toFixed(1) + '%';
// Aggiorniamo le statistiche
statDegrees.textContent = angoloProgressoEffettivo.toFixed(1) + '°';
statArc.textContent = maxAngle + '°';
statRemaining.textContent = (100 - valore).toFixed(1) + '%';
// Aggiorniamo il colore dello slider
slider.style.background = `linear-gradient(to right, #007aff 0%, #007aff ${valore}%, #e0e0e0 ${valore}%, #e0e0e0 100%)`;
}
function aggiornaIndicatoreDirection() {
if (directionToggle.checked) {
directionText.textContent = 'Antioraria';
directionArrow.textContent = '↺';
} else {
directionText.textContent = 'Oraria';
directionArrow.textContent = '↻';
}
}
// Event listeners
slider.addEventListener('input', aggiornaProgresso);
startAngleInput.addEventListener('input', aggiornaProgresso);
maxAngleInput.addEventListener('input', aggiornaProgresso);
directionToggle.addEventListener('change', () => {
aggiornaIndicatoreDirection();
aggiornaProgresso();
});
const elementoSvg = document.getElementById('elemento-svg');
const rotateInput = document.getElementById('rotate-input');
const rotateX = document.getElementById('rotate-x');
const rotateY = document.getElementById('rotate-y');
const scaleInput = document.getElementById('scale-input');
const translateX = document.getElementById('translate-x');
const translateY = document.getElementById('translate-y');
const transformOutput = document.getElementById('transform-output');
const rotateDisplay = document.getElementById('rotate-display');
const rotateXDisplay = document.getElementById('rotate-x-display');
const rotateYDisplay = document.getElementById('rotate-y-display');
const scaleDisplay = document.getElementById('scale-display');
const translateXDisplay = document.getElementById('translate-x-display');
const translateYDisplay = document.getElementById('translate-y-display');
function aggiornaTransform() {
const rotate = parseFloat(rotateInput.value) || 0;
const rotX = parseFloat(rotateX.value) || 0;
const rotY = parseFloat(rotateY.value) || 0;
const scale = parseFloat(scaleInput.value) || 1;
const transX = parseFloat(translateX.value) || 0;
const transY = parseFloat(translateY.value) || 0;
const transformString = `rotate(${rotate} ${rotX} ${rotY}) translate(${transX} ${transY}) scale(${scale})`;
elementoSvg.setAttribute('transform', transformString);
rotateDisplay.textContent = `${rotate}°`;
rotateXDisplay.textContent = rotX;
rotateYDisplay.textContent = rotY;
scaleDisplay.textContent = `${scale}x`;
translateXDisplay.textContent = transX;
translateYDisplay.textContent = transY;
transformOutput.value = transformString;
}
[rotateInput, rotateX, rotateY, scaleInput, translateX, translateY].forEach(el =>
el.addEventListener('input', aggiornaTransform)
);
aggiornaTransform();
// Inizializzazione
aggiornaIndicatoreDirection();
aggiornaProgresso();
// --- NEW PROGRESS CIRCLE LOGIC ---
const newSlider = document.getElementById('new-slider');
const newProgressCircle = document.getElementById('new-progress-circle-fill');
const newProgressText = document.getElementById('new-progress-text');
const newRaggio = 90;
const newCirconferenza = 2 * Math.PI * newRaggio;
function aggiornaNuovoProgresso() {
const valore = parseFloat(newSlider.value);
const offset = newCirconferenza - (valore / 100) * newCirconferenza;
newProgressCircle.style.strokeDasharray = `${newCirconferenza} ${newCirconferenza}`;
newProgressCircle.style.strokeDashoffset = offset;
newProgressText.textContent = valore.toFixed(0) + '%';
// Update slider background
newSlider.style.background = `linear-gradient(to right, #007aff 0%, #007aff ${valore}%, #e0e0e0 ${valore}%, #e0e0e0 100%)`;
}
newSlider.addEventListener('input', aggiornaNuovoProgresso);
// Initialize
aggiornaNuovoProgresso();
</script>
</body>
</html>