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

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

References

<li>Inserisce voci all'interno di una lista
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
downloadConsente di scaricare file al click di collegamento ipertestuale.
classDefinisce una o più classi per elemento
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

"esercitazione5.html”

Tabelle con inserimento immagini

noc-fisicas-reroll-parcial1

Esame di informatica

HTML - Esercizi

Pagina di documentazione

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>