Scheda Lavorazione CNC by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<map>Inserisce immagini mappa cliccabili in un documento
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
formSpecifica a quale form appartiene un elemento.
<select>Usato per creare un menu a tendina.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

questa sarà una pagina web dedic

sinodo diocesano

Due Sezioni - 4 colori (2x2)

clarinetto.html

VERDERAME | Serra e Orto Botanico

Prova altro form

Pro Vercelli LB(2)

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Scheda Lavorazione CNC</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<style>

body{
font-family:Arial;
background:#e9e9e9;
padding:20px;
}

.controls{
width:210mm;
margin:auto;
margin-bottom:10px;
display:flex;
gap:10px;
}

button{
padding:8px 14px;
border:none;
background:#2c7be5;
color:white;
border-radius:5px;
cursor:pointer;
}

.page{
width:210mm;
height:297mm;
background:white;
margin:auto;
padding:10mm;
box-shadow:0 0 10px rgba(0,0,0,0.2);
display:flex;
flex-direction:column;
box-sizing:border-box;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
}

#title{
font-size:20px;
font-weight:bold;
outline:none;
}

.logo img{
height:60px;
}

.description{
margin-top:6px;
}

.description textarea{
width:100%;
height:40px;
resize:vertical;
padding:5px;
border:1px solid #aaa;
border-radius:4px;
}

.top{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
margin:10px 0;
}

.field{
display:flex;
flex-direction:column;
font-size:13px;
}

input{
padding:5px;
border:1px solid #aaa;
border-radius:4px;
}

.pdf-container{
flex-grow:1;
border:1px solid #ccc;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

canvas{
max-width:100%;
max-height:100%;
}

.bottom{
margin-top:10px;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.panel{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.panel input{
width:65px;
}

.tools select{
height:80px;
}

#printTools{
display:none;
padding-left:20px;
}

.extra{
margin-top:8px;
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
.extraColumn{
display:flex;
flex-direction:column;
gap:6px;
margin-top:8px;
}

.extraColumn label{
font-size:13px;
}
.maxwd{
  max-width:60px;
}

#printFiles{
display:none;
padding-left:18px;
margin-top:3px;
}

@media print{

.description textarea{
border:none;
}

#fileNome{
display:none;
}

#printFiles{
display:block;
}

}
.flags{
margin-top:8px;
}

.warning{
color:red;
font-weight:bold;
}

#printFlags{
display:none;
margin-top:6px;
font-weight:bold;
}

@media print{

body{
background:white;
padding:0;
}

.controls{
display:none;
}

.page{
box-shadow:none;
margin:0;
border:2px solid black;
}

.logo{
display:none;
}

input, textarea{
border:none;
border-bottom:1px solid black;
padding:2px;
}

.tools select{
display:none;
}

.flags{
display:none;
}

#printTools{
display:block;
}

#printFlags{
display:block;
}

.hidePrint{
display:none !important;
}

.pdf-container{
border:1px solid black;
}

}

</style>
</head>

<body>

<div class="controls">
<button onclick="importPDF()">? Importa PDF</button>
<button onclick="stampa()">? Stampa</button>
<input type="file" id="fileInput" accept="application/pdf" hidden>
</div>

<div class="page">

<div class="header">

<div id="title" contenteditable="true">
Titolo documento
</div>

<div class="logo">
<img src="img.jpg">
</div>

</div>

<div class="description">
<textarea id="descrizione" placeholder="Descrizione"></textarea>
</div>

<div class="top">

<div class="field">
<label>Ordine/Commessa</label>
<input id="commessa" type="text">
</div>

<div class="field">
<label>N° lavorazioni</label>
<input id="lavorazioni" type="number">
</div>

<div class="field">
<label>Tempo lavorazione (ore)</label>
<input id="tempo" type="text">
</div>

</div>

<div class="pdf-container">
<canvas id="pdfCanvas"></canvas>
</div>

<div class="bottom">

<div>

<div class="panel">

  <strong>Misure pannello (mm):</strong>
  <div>
    L <input id="larghezza" type="number">
H <input id="altezza" type="number">
Sp <input id="spessore" type="number">

  </div>
</div>

<div class="extraColumn">

<div>
<label>Profondità Max (mm)</label>
<input id="profondita" type="text" class="maxwd">
</div>

<div>
<label>Scala</label>
<input id="scala" type="text" class="maxwd">
</div>

<div>
<label>File</label>
<input id="fileNome" type="text" placeholder="file1.iso, file2.jpg" title="dividi i file con la virgola"> 
<ul id="printFiles"></ul>
</div>

</div>
<div class="flags">

<label><input id="urgente" type="checkbox"> URGENTE</label>

<label class="warning">
<input id="attenzione" type="checkbox"> ATTENZIONE
</label>

<label>
<input id="verifica" type="checkbox"> verificare misure!
</label>

</div>

<div id="printFlags"></div>

</div>

<div class="tools">

<label>Punte / Utensili utilizzati</label>

<select id="toolsSelect" multiple>

<option>Fresa Ø4 candela</option>
<option>Fresa Ø6 candela</option>
<option>Fresa Ø6 sferica</option>
<option>Fresa Ø10 candela</option>
<option>Fresa Ø12 candela</option>
<option>Fresa Ø19 candela</option>
<option>Punta Ø60 </option>
<option>Punta GOLA 26 mm</option>
<option>Punta a V 91°</option>
<option>Punta raggiatura 9.5 mm</option>
<option>CMT set pantografatura mod.1</option>
<option>CMT set pantografatura mod.2</option>
<option>CMT set pantografatura mod.3</option>
<option>vedi disegno</option>

</select>

<ul id="printTools"></ul>

</div>

</div>

</div>

<script>

function stampa(){

generaListaUtensili();
generaFlags();
generaListaFile();
gestisciCampiVuoti();

setTimeout(()=>window.print(),100);

}

function gestisciCampiVuoti(){

document.querySelectorAll("input, textarea").forEach(el=>{

if(el.type==="checkbox") return;

if(el.value.trim()===""){
el.parentElement.classList.add("hidePrint");
}else{
el.parentElement.classList.remove("hidePrint");
}

});

}

function generaListaUtensili(){

const select=document.getElementById("toolsSelect");
const list=document.getElementById("printTools");

list.innerHTML="";

Array.from(select.selectedOptions).forEach(opt=>{
const li=document.createElement("li");
li.textContent=opt.text;
list.appendChild(li);
});

}
function generaListaFile(){

const input=document.getElementById("fileNome").value;
const list=document.getElementById("printFiles");

list.innerHTML="";

if(!input.trim()) return;

const files=input.split(",");

files.forEach(f=>{

const li=document.createElement("li");
li.textContent=f.trim();
list.appendChild(li);

});

}

function generaFlags(){

const flags=document.getElementById("printFlags");
flags.innerHTML="";

if(document.getElementById("urgente").checked){
flags.innerHTML+="<div>⚠ URGENTE</div>";
}

if(document.getElementById("attenzione").checked){
flags.innerHTML+="<div style='color:red'>⚠ ATTENZIONE</div>";
}

if(document.getElementById("verifica").checked){
flags.innerHTML+="<div>✔ Verificare misure</div>";
}

}

function importPDF(){
document.getElementById("fileInput").click();
}

document.getElementById("fileInput").addEventListener("change",function(){

const file=this.files[0];
const reader=new FileReader();

reader.onload=function(){

const typedarray=new Uint8Array(this.result);

pdfjsLib.getDocument(typedarray).promise.then(function(pdf){

pdf.getPage(1).then(function(page){

const canvas=document.getElementById("pdfCanvas");
const context=canvas.getContext("2d");

const viewport=page.getViewport({scale:1});

const container=document.querySelector(".pdf-container");

const scale=Math.min(
container.clientWidth/viewport.width,
container.clientHeight/viewport.height
);

const scaledViewport=page.getViewport({scale:scale});

canvas.height=scaledViewport.height;
canvas.width=scaledViewport.width;

page.render({
canvasContext:context,
viewport:scaledViewport
});

});

});

};

reader.readAsArrayBuffer(file);

});

async function caricaUtensili(){

const response = await fetch("utensili.json");
const utensili = await response.json();

const select = document.getElementById("toolsSelect");

utensili.forEach(u => {

const option = document.createElement("option");
option.value = u;
option.textContent = u;

select.appendChild(option);

});

}

caricaUtensili();

</script>

</body>
</html>