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

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>