function salvaNumeriTerrazzeRF2() { const piccole = parseInt(document.getElementById("rf2_terrazze_piccole")?.value || "0"); const medie = parseInt(document.getElementById("rf2_terrazze_medie")?.value || "0"); const grandi = parseInt(document.getElementById("rf2_terrazze_grandi")?.value || "0"); localStorage.setItem("rf2_terrazze_piccole", piccole); localStorage.setItem("rf2_terrazze_medie", medie); localStorage.setItem("rf2_terrazze_grandi", grandi); const totale = piccole + medie + grandi; localStorage.setItem("rf2_numero_terrazze", totale); localStorage.setItem( "rf2_dettaglio_terrazze", JSON.stringify({ piccole: piccole, medie: medie, grandi: grandi, totale: totale }) ); return totale; } <

1. Dati generali dell'edificio

2. Dati tecnici

3. Planimetria

4. Preventivo

Dati dell'edificio

Compila i dati generali del fabbricato. I passaggi successivi si sbloccano automaticamente.

Passo 1 di 10

Riepilogo dati inseriti

Carica elaborati grafici del fabbricato in scala 1:200

PDF - JPG

Dati tecnici dell'intervento

Ora indica le caratteristiche tecniche principali dell'intervento. Anche questa fase sarà guidata e obbligatoria.

Che tipo di intervento vuoi preventivare?

Seleziona la lavorazione principale da considerare nel preventivo.

3. Carica la planimetria

Dopo aver inserito i dati dell'edificio, carica la planimetria per aprire il perimetro assistito e stimare il perimetro delle facciate.

Hai bisogno di aiuto per usare il perimetro assistito?

APRI IL TUTORIAL

4. Preventivo

Ritorna al preventivatore

Ritorna al preventivatore

(function() { var filePlanimetriaDaCaricare = null; function caricaPlanimetriaNelCanvas(event) { filePlanimetriaDaCaricare = event.target.files[0]; if (!filePlanimetriaDaCaricare) { alert("Nessun file selezionato."); return; } alert("File selezionato: " + filePlanimetriaDaCaricare.name); if (typeof window.caricaImmagineNelCanvasDisegno === "function") { window.caricaImmagineNelCanvasDisegno(filePlanimetriaDaCaricare); } else { alert("Il canvas non è ancora pronto."); } } // Compatibilità con il vecchio modulo di disegno if (typeof window.disegna !== "function") { window.disegna = function () { if (typeof ridisegnaRicalcoDiretto === "function") { ridisegnaRicalcoDiretto(); } }; } function avviaDisegnoCanvas() { const canvas = document.getElementById("canvasRicalco"); if (!canvas) { console.log("Canvas non trovato"); return; } const ctx = canvas.getContext("2d"); // Il riquadro rappresenta 100 metri x 100 metri const metriMaxX = 100; const metriMaxY = 100; const pixelPerMetroX = canvas.width / metriMaxX; const pixelPerMetroY = canvas.height / metriMaxY; let punti = []; let puntoProvvisorio = null; let lineaChiusa = false; let immaginePlanimetria = null; window.caricaImmagineNelCanvasDisegno = function(file) { if (!file) { alert("Nessun file ricevuto dal canvas."); return; } if (!file.type.startsWith("image/")) { alert("Per ora selezionare solo file immagine JPG, JPEG o PNG."); return; } const reader = new FileReader(); reader.onload = function(e) { alert("File letto dal browser."); const img = new Image(); img.onload = function() { alert("Immagine caricata: " + img.width + " x " + img.height + " pixel"); immaginePlanimetria = img; /* immagine usata dal nuovo modulo ricalco diretto */ window.immaginePlanimetriaGlobale = img; /* reset vecchio modulo */ punti = []; puntoProvvisorio = null; lineaChiusa = false; /* reset nuovo modulo ricalco diretto */ if (typeof puntiRicalcoDiretto !== "undefined") { puntiRicalcoDiretto = []; } if (typeof ricalcoChiusoDiretto !== "undefined") { ricalcoChiusoDiretto = false; } alert("PUNTI INSERITI: " + punti.length); if (typeof disegna === "function") { disegna(); } if (typeof ridisegnaRicalcoDiretto === "function") { ridisegnaRicalcoDiretto(); } /* // APERTURA AUTOMATICA FULLSCREEN DOPO CARICAMENTO FILE setTimeout(function () { if (typeof apriRicalcoFullscreenDiretto === "function") { apriRicalcoFullscreenDiretto(); } }, 300); */ try { aggiornaRisultati(); } catch (errore) { alert("Errore in aggiornaRisultati: " + errore.message); } }; img.onerror = function() { alert("Errore: il file non può essere caricato come immagine."); }; img.src = e.target.result; }; reader.onerror = function() { alert("Errore nella lettura del file."); }; reader.readAsDataURL(file); /* window.caricaPlanimetriaNelCanvas = function(event) { const file = event.target.files[0]; if (!file) { alert("Nessun file selezionato."); return; } alert("File selezionato: " + file.name + " - tipo: " + file.type); if (!file.type.startsWith("image/")) { alert("Per ora selezionare solo file immagine JPG, JPEG o PNG."); return; } const reader = new FileReader(); reader.onload = function(e) { alert("File letto dal browser."); const img = new Image(); img.onload = function() { alert("Immagine caricata: " + img.width + " x " + img.height + " pixel"); immaginePlanimetria = img; punti = []; puntoProvvisorio = null; lineaChiusa = false; aggiornaRisultati(); disegna(); }; img.onerror = function() { alert("Errore: il file è stato letto, ma non può essere caricato come immagine."); }; img.src = e.target.result; }; reader.onerror = function() { alert("Errore nella lettura del file."); }; reader.readAsDataURL(file); }; const inputFileGrafici = document.getElementById("fileGrafici"); if (inputFileGrafici) { inputFileGrafici.onchange = function(event) { window.caricaPlanimetriaNelCanvas(event); }; console.log("Collegamento fileGrafici attivato."); } else { alert("Errore: campo fileGrafici non trovato."); } */ function agganciaAPuntoEsistente(punto) { for (let i = 0; i < punti.length; i++) { const p = punti[i]; const dx = punto.x - p.x; const dy = punto.y - p.y; const distanza = Math.sqrt(dx * dx + dy * dy); if (distanza <= distanzaAggancio) { return { x: p.x, y: p.y, agganciato: true, indice: i }; } } return punto; } const distanzaAggancio = 12; // pixel di tolleranza per agganciare il punto canvas.addEventListener("click", function(event) { alert("CLICK SUL CANVAS RICEVUTO"); const punto = leggiPuntoMouse(event); alert("PUNTO LETTO: X=" + punto.x.toFixed(2) + " Y=" + punto.y.toFixed(2)); punti.push(punto); puntoProvvisorio = null; lineaChiusa = false; if (typeof disegna === "function") { disegna(); } else if (typeof ridisegnaRicalcoDiretto === "function") { ridisegnaRicalcoDiretto(); } try { aggiornaRisultati(); } catch (errore) { alert("Errore in aggiornaRisultati: " + errore.message); } }); canvas.addEventListener("mousemove", function(event) { if (punti.length === 0 || lineaChiusa) return; const punto = leggiPuntoMouse(event); const ultimo = punti[punti.length - 1]; puntoProvvisorio = correggiDirezione(ultimo, punto); puntoProvvisorio = agganciaAPuntoEsistente(puntoProvvisorio); aggiornaMisuraSegmentoProvvisorio(); disegna(); }); canvas.addEventListener("mouseleave", function() { puntoProvvisorio = null; document.getElementById("misuraSegmento").innerText = "0.00"; disegna(); }); function leggiPuntoMouse(event) { const rect = canvas.getBoundingClientRect(); const scalaX = canvas.width / rect.width; const scalaY = canvas.height / rect.height; const x = (event.clientX - rect.left) * scalaX; const y = (event.clientY - rect.top) * scalaY; return { x: x, y: y }; } function correggiDirezione(p1, p2) { const modo = document.getElementById("modoLinea") ? document.getElementById("modoLinea").value : "auto"; if (modo === "libera") { return p2; } const dx = p2.x - p1.x; const dy = p2.y - p1.y; const adx = Math.abs(dx); const ady = Math.abs(dy); if (adx === 0 && ady === 0) { return p2; } /* Modalità automatica: - se il movimento è quasi orizzontale -> blocca in orizzontale - se è quasi verticale -> blocca in verticale - altrimenti lo trasforma in diagonale a 45° */ if (adx > ady * 1.8) { // orizzontale return { x: p2.x, y: p1.y }; } if (ady > adx * 1.8) { // verticale return { x: p1.x, y: p2.y }; } // diagonale a 45° const lato = Math.min(adx, ady); return { x: p1.x + Math.sign(dx) * lato, y: p1.y + Math.sign(dy) * lato }; } window.chiudiElementoDisegno = function() { if (punti.length < 3) { alert("Servono almeno 3 punti per chiudere il perimetro."); return; } lineaChiusa = true; puntoProvvisorio = null; aggiornaRisultati(); var perimetro = calcolaMetriLineari(); if (typeof registraPerimetroDisegnato === "function") { registraPerimetroDisegnato(perimetro); } disegna(); }; window.annullaUltimoPunto = function() { if (punti.length > 0) { punti.pop(); lineaChiusa = false; puntoProvvisorio = null; aggiornaRisultati(); disegna(); } }; window.cancellaDisegno = function() { punti = []; puntoProvvisorio = null; lineaChiusa = false; document.getElementById("misuraSegmento").innerText = "0.00"; document.getElementById("mlTracciato").innerText = "0.00"; document.getElementById("areaTracciata").innerText = "0.00"; document.getElementById("metriLineariTracciato").value = "0"; document.getElementById("areaTracciataInput").value = "0"; disegna(); }; window.aggiungiPuntoDaMisure = function() { const xMetri = parseFloat(document.getElementById("puntoXmetri").value); const yMetri = parseFloat(document.getElementById("puntoYmetri").value); if (isNaN(xMetri) || isNaN(yMetri)) { alert("Inserisci sia X che Y in metri."); return; } if (xMetri < 0 || xMetri > metriMaxX || yMetri < 0 || yMetri > metriMaxY) { alert("Il punto deve essere compreso tra 0 e 100 metri."); return; } const nuovoPunto = { x: xMetri * pixelPerMetroX, y: yMetri * pixelPerMetroY }; if (punti.length > 0) { const ultimo = punti[punti.length - 1]; punti.push(correggiDirezione(ultimo, nuovoPunto)); } else { punti.push(nuovoPunto); } lineaChiusa = false; puntoProvvisorio = null; aggiornaRisultati(); disegna(); }; function disegna() { ctx.clearRect(0, 0, canvas.width, canvas.height); disegnaSfondo(); if (punti.length > 0) { disegnaLineaDefinitiva(); disegnaPunti(); if (puntoProvvisorio && !lineaChiusa) { disegnaLineaProvvisoria(); } } } function rf2ApplicaTrasformazioneVista() { ctx.translate(rf2OffsetXPlanimetria, rf2OffsetYPlanimetria); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(rf2ZoomPlanimetria, rf2ZoomPlanimetria); ctx.translate(-canvas.width / 2, -canvas.height / 2); } function rf2AggiornaEtichettaZoom() { var etichetta = document.getElementById("rf2-valore-zoom"); if (!etichetta) { return; } etichetta.innerText = Math.round(rf2ZoomPlanimetria * 100) + "%"; } function disegna() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.save(); rf2ApplicaTrasformazioneVista(); disegnaSfondo(); if (punti.length > 0) { disegnaLineaDefinitiva(); disegnaPunti(); if (puntoProvvisorio && !lineaChiusa) { disegnaLineaProvvisoria(); } } ctx.restore(); ctx.strokeStyle = "#b00000"; ctx.lineWidth = 3; ctx.strokeRect(0, 0, canvas.width, canvas.height); rf2AggiornaEtichettaZoom(); } window.rf2RidisegnaPlanimetria = disegna; function disegnaSfondo() { ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); if (immaginePlanimetria) { const rapportoCanvas = canvas.width / canvas.height; const rapportoImmagine = immaginePlanimetria.width / immaginePlanimetria.height; let larghezzaDisegno; let altezzaDisegno; let x; let y; if (rapportoImmagine > rapportoCanvas) { larghezzaDisegno = canvas.width; altezzaDisegno = canvas.width / rapportoImmagine; x = 0; y = (canvas.height - altezzaDisegno) / 2; } else { altezzaDisegno = canvas.height; larghezzaDisegno = canvas.height * rapportoImmagine; x = (canvas.width - larghezzaDisegno) / 2; y = 0; } ctx.drawImage( immaginePlanimetria, x, y, larghezzaDisegno, altezzaDisegno ); } ctx.strokeStyle = "#b00000"; ctx.lineWidth = 3; ctx.strokeRect(0, 0, canvas.width, canvas.height); } function disegnaLineaDefinitiva() { ctx.beginPath(); ctx.moveTo(punti[0].x, punti[0].y); for (let i = 1; i < punti.length; i++) { ctx.lineTo(punti[i].x, punti[i].y); } if (lineaChiusa && punti.length >= 3) { ctx.lineTo(punti[0].x, punti[0].y); } ctx.strokeStyle = "#ff0000"; ctx.lineWidth = 4; ctx.stroke(); if (lineaChiusa && punti.length >= 3) { ctx.fillStyle = "rgba(176,0,0,0.12)"; ctx.fill(); } disegnaMisureSegmenti(); } function disegnaLineaProvvisoria() { const ultimo = punti[punti.length - 1]; ctx.beginPath(); ctx.moveTo(ultimo.x, ultimo.y); ctx.lineTo(puntoProvvisorio.x, puntoProvvisorio.y); ctx.strokeStyle = "#444444"; ctx.lineWidth = 2; ctx.setLineDash([6, 4]); ctx.stroke(); ctx.setLineDash([]); const misura = distanzaMetri(ultimo, puntoProvvisorio); scriviMisuraSegmento(ultimo, puntoProvvisorio, misura, "#000000"); } function disegnaPunti() { punti.forEach(function(p) { ctx.beginPath(); ctx.arc(p.x, p.y, 10, 0, Math.PI * 2); ctx.fillStyle = "#ff0000"; ctx.fill(); ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 4; ctx.stroke(); }); } function disegnaMisureSegmenti() { if (punti.length < 2) return; for (let i = 1; i < punti.length; i++) { const p1 = punti[i - 1]; const p2 = punti[i]; const misura = distanzaMetri(p1, p2); scriviMisuraSegmento(p1, p2, misura, "#b00000"); } if (lineaChiusa && punti.length >= 3) { const p1 = punti[punti.length - 1]; const p2 = punti[0]; const misura = distanzaMetri(p1, p2); scriviMisuraSegmento(p1, p2, misura, "#b00000"); } } function scriviMisuraSegmento(p1, p2, misura, colore) { const mx = (p1.x + p2.x) / 2; const my = (p1.y + p2.y) / 2; const testo = misura.toFixed(2) + " m"; ctx.font = "bold 13px Arial"; const larghezzaTesto = ctx.measureText(testo).width; ctx.fillStyle = "rgba(255,255,255,0.85)"; ctx.fillRect(mx - larghezzaTesto / 2 - 4, my - 18, larghezzaTesto + 8, 18); ctx.fillStyle = colore; ctx.fillText(testo, mx - larghezzaTesto / 2, my - 5); } function distanzaMetri(p1, p2) { const dxMetri = (p2.x - p1.x) / pixelPerMetroX; const dyMetri = (p2.y - p1.y) / pixelPerMetroY; return Math.sqrt(dxMetri * dxMetri + dyMetri * dyMetri); } function calcolaMetriLineari() { if (punti.length < 2) return 0; let totale = 0; for (let i = 1; i < punti.length; i++) { totale += distanzaMetri(punti[i - 1], punti[i]); } if (lineaChiusa && punti.length >= 3) { totale += distanzaMetri(punti[punti.length - 1], punti[0]); } return totale; } function calcolaArea() { if (!lineaChiusa || punti.length < 3) return 0; let area = 0; for (let i = 0; i < punti.length; i++) { let j = (i + 1) % punti.length; let xi = punti[i].x / pixelPerMetroX; let yi = punti[i].y / pixelPerMetroY; let xj = punti[j].x / pixelPerMetroX; let yj = punti[j].y / pixelPerMetroY; area += xi * yj; area -= xj * yi; } return Math.abs(area / 2); } function aggiornaMisuraSegmentoProvvisorio() { if (!puntoProvvisorio || punti.length === 0) { document.getElementById("misuraSegmento").innerText = "0.00"; return; } const ultimo = punti[punti.length - 1]; const misura = distanzaMetri(ultimo, puntoProvvisorio); document.getElementById("misuraSegmento").innerText = misura.toFixed(2); } function aggiornaRisultati() { const ml = calcolaMetriLineari(); const area = calcolaArea(); document.getElementById("mlTracciato").innerText = ml.toFixed(2); document.getElementById("areaTracciata").innerText = area.toFixed(2); document.getElementById("metriLineariTracciato").value = ml.toFixed(2); document.getElementById("areaTracciataInput").value = area.toFixed(2); } disegna(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", avviaDisegnoCanvas); } else { avviaDisegnoCanvas(); } })(); function getCanvasRicalcoDiretto() { return document.getElementById("canvasRicalco"); } function getCoordinateCanvasDiretto(event, canvas) { var rect = canvas.getBoundingClientRect(); var scalaX = canvas.width / rect.width; var scalaY = canvas.height / rect.height; return { x: (event.clientX - rect.left) * scalaX, y: (event.clientY - rect.top) * scalaY }; } function ridisegnaRicalcoDiretto() { var canvas = getCanvasRicalcoDiretto(); if (!canvas) { alert("Canvas ricalco non trovato."); return; } var ctx = canvas.getContext("2d"); // pulisce il canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // ridisegna lo sfondo bianco ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); // ridisegna la planimetria, se caricata var img = window.immaginePlanimetriaGlobale; if (img) { var rapportoCanvas = canvas.width / canvas.height; var rapportoImmagine = img.width / img.height; var larghezzaDisegno; var altezzaDisegno; var x; var y; if (rapportoImmagine > rapportoCanvas) { larghezzaDisegno = canvas.width; altezzaDisegno = canvas.width / rapportoImmagine; x = 0; y = (canvas.height - altezzaDisegno) / 2; } else { altezzaDisegno = canvas.height; larghezzaDisegno = canvas.height * rapportoImmagine; x = (canvas.width - larghezzaDisegno) / 2; y = 0; } ctx.drawImage(img, x, y, larghezzaDisegno, altezzaDisegno); } // disegna la linea rossa tra i punti // disegna la linea rossa tra i punti if (puntiRicalcoDiretto.length > 1) { ctx.beginPath(); ctx.moveTo(puntiRicalcoDiretto[0].x, puntiRicalcoDiretto[0].y); for (var i = 1; i < puntiRicalcoDiretto.length; i++) { ctx.lineTo(puntiRicalcoDiretto[i].x, puntiRicalcoDiretto[i].y); } // chiusura del perimetro: ultimo punto → primo punto if (ricalcoChiusoDiretto && puntiRicalcoDiretto.length >= 3) { ctx.lineTo(puntiRicalcoDiretto[0].x, puntiRicalcoDiretto[0].y); } ctx.strokeStyle = "#ff0000"; ctx.lineWidth = 2; ctx.stroke(); } // disegna i punti for (var j = 0; j < puntiRicalcoDiretto.length; j++) { var p = puntiRicalcoDiretto[j]; ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fillStyle = "#ff0000"; ctx.fill(); ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 1; ctx.stroke(); } // bordo del canvas ctx.strokeStyle = "#b00000"; ctx.lineWidth = 2; ctx.strokeRect(0, 0, canvas.width, canvas.height); } window.ricalcoOrtogonaleAttivo = true; window.ricalcoOrtogonaleAttivo = true; function ricalcoClickDiretto(event) { var canvas = getCanvasRicalcoDiretto(); if (!canvas) { alert("Canvas ricalco non trovato."); return; } var punto = getCoordinateCanvasDiretto(event, canvas); if (window.ricalcoOrtogonaleAttivo === true && puntiRicalcoDiretto.length > 0) { var puntoPrecedente = puntiRicalcoDiretto[puntiRicalcoDiretto.length - 1]; var dx = Math.abs(punto.x - puntoPrecedente.x); var dy = Math.abs(punto.y - puntoPrecedente.y); if (dx >= dy) { punto.y = puntoPrecedente.y; } else { punto.x = puntoPrecedente.x; } } puntiRicalcoDiretto.push(punto); ricalcoChiusoDiretto = false; ridisegnaRicalcoDiretto(); } function toggleRicalcoOrtogonale() { window.ricalcoOrtogonaleAttivo = !window.ricalcoOrtogonaleAttivo; var bottone = document.getElementById("btn-ortogonale-ricalco"); if (bottone) { if (window.ricalcoOrtogonaleAttivo === true) { bottone.innerHTML = "Ortogonale ON"; bottone.style.background = "#b00000"; bottone.style.color = "#ffffff"; } else { bottone.innerHTML = "Linea libera"; bottone.style.background = "#666666"; bottone.style.color = "#ffffff"; } } console.log("Ortogonale attivo:", window.ricalcoOrtogonaleAttivo); } function annullaUltimoPuntoFabbricato() { if (puntiRicalcoDiretto.length > 0) { puntiRicalcoDiretto.pop(); ricalcoChiusoDiretto = false; ridisegnaRicalcoDiretto(); } } function cancellaRicalcoFabbricato() { puntiRicalcoDiretto = []; ricalcoChiusoDiretto = false; ridisegnaRicalcoDiretto(); } function distanzaRicalcoDiretto(p1, p2) { var canvas = getCanvasRicalcoDiretto(); var metriMaxX = 100; var metriMaxY = 100; var pixelPerMetroX = canvas.width / metriMaxX; var pixelPerMetroY = canvas.height / metriMaxY; var dxMetri = (p2.x - p1.x) / pixelPerMetroX; var dyMetri = (p2.y - p1.y) / pixelPerMetroY; return Math.sqrt(dxMetri * dxMetri + dyMetri * dyMetri); } function calcolaMetriLineariRicalcoDiretto() { if (puntiRicalcoDiretto.length < 2) { return 0; } var totale = 0; for (var i = 1; i < puntiRicalcoDiretto.length; i++) { totale += distanzaRicalcoDiretto( puntiRicalcoDiretto[i - 1], puntiRicalcoDiretto[i] ); } if (ricalcoChiusoDiretto && puntiRicalcoDiretto.length >= 3) { totale += distanzaRicalcoDiretto( puntiRicalcoDiretto[puntiRicalcoDiretto.length - 1], puntiRicalcoDiretto[0] ); } return totale; } function chiudiPerimetroFabbricato() { if (puntiRicalcoDiretto.length < 3) { alert("Servono almeno 3 punti per chiudere il perimetro."); return; } ricalcoChiusoDiretto = true; ridisegnaRicalcoDiretto(); var perimetro = calcolaMetriLineariRicalcoDiretto(); alert("Perimetro chiuso: " + perimetro.toFixed(2) + " m"); if (typeof registraPerimetroDisegnato === "function") { registraPerimetroDisegnato(perimetro); } } /* BLOCCO ZOOM/MANINA SPERIMENTALE RIMOSSO */ window.annullaUltimoPuntoFabbricato = annullaUltimoPuntoFabbricato; window.cancellaRicalcoFabbricato = cancellaRicalcoFabbricato; window.chiudiPerimetroFabbricato = chiudiPerimetroFabbricato; window.annullaUltimoPunto = annullaUltimoPuntoFabbricato; window.cancellaDisegno = cancellaRicalcoFabbricato; window.chiudiElementoDisegno = chiudiPerimetroFabbricato;

TORNA AI PREVENTIVATORI