First commit

This commit is contained in:
GutAlexandre
2022-09-26 13:28:12 +02:00
parent 37e12d7b97
commit fc19d37840
4 changed files with 382 additions and 0 deletions

12
web/journal.min.css vendored Normal file

File diff suppressed because one or more lines are too long

108
web/plate.css Normal file
View File

@@ -0,0 +1,108 @@
body{
font-family: Brandon Text,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
}
.modal{
background-color: rgba(0, 0, 0, 0.55) ;
}
#logo{
max-height:20%;
max-width:20%;
}
#title-navbar{
color: aliceblue;
align-items: center;
}
#plate {
border: 3px solid #202020;
background-color: rgb(74, 74, 74);
top:27%;
left: 10%;
right: 10%;
width: 80%;
height: 70%;
position: absolute;
}
.deck_name{
color: aliceblue;
}
#checkboxall{
color:aliceblue
}
.rectangle{
width:19%;
height:21%;
position: absolute;
border-radius : 5px 5px;
background:rgb(125, 124, 124);
color:aliceblue;
text-align: center;
font-size: 300%;
box-shadow: inset 5px 5px 5px rgb(85, 83, 83);
z-index: 2;
}
.heatmaprect{
width:6.33%;
height:7%;
position: absolute;
text-align: center;
}
.poubelle{
width:5%;
height:21%;
position: absolute;
border-radius : 5px 5px;
left: 100%;
z-index: 3;
background:rgb(125, 124, 124);
color:aliceblue;
text-align: center;
font-size: 250%;
}
.behindpb{
width:5%;
height:50%;
position: absolute;
background:rgb(255, 255, 255);
top: 25%;
left: 100%;
}
.x1{
top: 5%;
}
.x2{
top: 28%;
}
.x3{
top: 51%;
}
.x4{
top: 74%;
}
.y1{
left: 20%;
}
.y2{
left: 40%;
}
.y3{
left: 60%;
}
.y4{
left: 80%;
}
.showheatmap{
z-index: 4;
}
.hideheatmap{
z-index: 1;
}

142
web/plate.html Normal file
View File

@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calibrator</title>
<link href="./css/plate.css" rel="stylesheet" crossorigin="anonymous" />
<!-- <link href="./css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" /> -->
<link href="./css/journal.min.css" rel="stylesheet" crossorigin="anonymous" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/plate.js"></script>
</head>
<body>
<button id="start" class="btn btn-lg btn-success" type="button">Start</button>
<button id="manuel" class="btn btn-lg btn-success" type="button">Manuel</button>
<div id="plate" ></div>
<div class="modal " id="modalman">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header-full-width modal-header text-center">
<h3 class="modal-title w-100" id="startmodallabel"> Manual Calibrator </h3>
<button type="button" class="btn-close" onclick="$('#modalman').hide()"></button>
</div>
<div class="modal-body">
<rect id="deck">
<td>
<div class="mt-3">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input
id="axis_tools_Z1"
type="radio"
class="btn-check"
name="axis_tools"
value="Z1"
data-axis="Z1"
onclick="triggerradio(this);"
checked />
<label class="btn btn-outline-info" for="axis_tools_Z1">Tool z1</label>
<input
id="axis_tools_Z2"
type="radio"
class="btn-check"
name="axis_tools"
value="Z2"
data-axis= "Z2"
onclick="triggerradio(this);"
/>
<label class="btn btn-outline-info" for="axis_tools_Z2">Tool z2</label>
</div>
<button type="button" onclick="homeall();" class="btn btn-info pull-right">Home All</button>
<br></br>
</div>
<div class="input-group mb-3">
<span class="input-group-text" >Nombre de step</span>
<input id="nbstep" type="number" class="form-control" value="1" />
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="scale">
<label class="form-check-label" for="exampleCheck1">to step</label>
</div>
<div class="mt-4">
<div class="form-group row">
<div class="form-group row">
<div class="col-8">
<label id="nameactual">Actual :</label>
</div>
<div class="col-4">
<label>Before :</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-8">
<div class="input-group mb-3">
<span class="input-group-text" id="X">X</span>
<input id="activeX" type="number" class="form-control" value="0"
data-axis="X" onfocus="trigger(this)" />
<button class="btn btn-info" type="button" onclick="">Set</button>
</div>
</div>
<div class="col-4">
<div class="input-group mb-3">
<button class="btn btn-info" class="form-control" data-axis="X" onclick="appro(this)">X</button>
<input id="pasiveX" type="number" class="form-control" value="0" />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-8">
<div class="input-group mb-3">
<span class="input-group-text" id="Y">Y</span>
<input id="activeY" type="number" class="form-control" value="0"
data-axis="Y" onfocus="trigger(this)" />
<button class="btn btn-info" type="button" onclick="">Set</button>
</div>
</div>
<div class="col-4">
<div class="input-group mb-3">
<button class="btn btn-info" class="form-control" data-axis="Y" onclick="appro(this)">Y</button>
<input id="pasiveY" type="number" class="form-control" value="0"
data-axis="y" />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-8">
<div class="input-group mb-3">
<span class="input-group-text" id="Z">Z</span>
<input id="activeZ" type="number" class="form-control" value="0"
data-axis="Z" onfocus="trigger(this)" />
<button class="btn btn-info" type="button" *>Set</button>
</div>
</div>
<div class="col-4">
<div class="input-group mb-3">
<button class="btn btn-info" class="form-control" data-axis="Z" onclick="appro(this)">Z</button>
<input id="pasiveZ" type="number" class="form-control" value="0"
data-axis="z" />
</div>
</div>
</div>
</div>
</td>
</rect>
</div>
</div>
</div>
</div>
</body>
</html>

120
web/plate.js Normal file
View File

@@ -0,0 +1,120 @@
var current_point;
current_point = "x1y1";
$(document).ready(function () {
init_display();
$(".consomable").each(function(){
$("#"+$(this).attr("id")).click(function(){
if($("#start").text()== "Start"){
if ($("#"+$(this).attr("id")).hasClass("select")){
$("#"+$(this).attr("id")).removeClass("select").addClass("unselect")
$("#"+$(this).attr("id")).text("❌");
$("#"+$(this).attr("id")).attr("value","0");
}else{
$("#"+$(this).attr("id")).removeClass("unselect").addClass("select")
$("#"+$(this).attr("id")).text($($(this)).attr("id").toUpperCase());
$("#"+$(this).attr("id")).attr("value","1");
}
}
});
});
$("#manuel").click(function(){
$("#modalman").show();
});
$("#start").click(function(){
if ($("#start").hasClass("btn-success")){
$("#start").removeClass("btn-success").addClass("btn-danger")
$("#start").text("Pause");
current_point=nextbp(current_point)
console.log(current_point)
$("#allcheck").attr("disabled", true)
if(current_point!="end"){
alert("Début de la calibration par : " + current_point)
}else{
console.log("end ")
}
}else{
$("#start").removeClass("btn-danger").addClass("btn-success")
$("#start").text("Start");
$("#allcheck").attr("disabled", false)
}
});
$('#allcheck ').change(function(){
if ($("#allcheck").is(":checked")){
$(".consomable").removeClass("select").addClass("unselect")
$(".consomable").text("❌");
$(".consomable").attr("value","0");
}else{
$(".consomable").removeClass("unselect").addClass("select")
$(".consomable").attr("value","1");
$(".consomable").each(function(){
$("#"+$(this).attr("id")).text($($(this)).attr("id").toUpperCase());
});
}
})
});
function nextbp(current_point){
current =current_point.split('');
console.log(current);
x = parseInt(current[1]);
y = parseInt(current[3]);
while($("#x"+x+"y"+y).attr("value")==0){
if(x<=3){
x=x+1
}else{
if(y<=3){
y=y+1
x=1
}else{
alert("Fin de calibration")
return("end");
}
}
current_point="#x"+x+"y"+y
}
return(current_point);
}
function init_display(){
Type = "Acsia";
nbx=3;
nby=3;
h=`<h1><p class="deck_name">${Type}</p></h1>
<div class="form-check" id="checkboxall">
<input class="form-check-input" type="checkbox" id="allcheck" >
<label class="form-check-label">Ckeck all</label>
</div>
`
for (let y = 1; y <= 4; y++) {
for (let x = 1; x <= 4; x++) {
h+=`<div id="x${x}y${y}" class="x${x} y${y} rectangle select consomable" value="1">X${x}Y${y}</div>`;
for (let i = 1; i <= nbx; i++) {
for (let j = 1; j <= nby; j++) {
xx=(i-1)*100;
yy=(j-1)*100;
h+=`<div id="${y}${x}${i}${j}" class="x${x} y${y} heatmaprect" style="transform: translate(${yy}%, ${xx}%)"></div>`
}
}
}
}
h+=`<div id ="P1" class="x2 poubelle select consomable" value="1">P1</div>
<div id ="P8" class="x3 poubelle select consomable" value="1">P8</div>
<div id="whiterect" class="behindpb"></div>`
$("#plate").append(h);
}