Hugging Face's logo

Spaces:
Marthee
/
MeasurementTesting
Sleeping

App Files Community
Marthee commited on
Commit
dfcd1e9
·
1 Parent(s): 0cf82c0

Update templates/proposed-GUI.html

Browse files
Files changed (1) hide show
  1. templates/proposed-GUI.html +39 -22
templates/proposed-GUI.html CHANGED
@@ -2,17 +2,21 @@
2
  <!DOCTYPE html>
3
  <html lang="en" dir="ltr">
4
  <head>
 
 
 
5
  <link rel="stylesheet" href="https://use.typekit.net/zos0ars.css">
6
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
7
  <link rel="stylesheet" href="static/style.css">
8
  <meta charset="utf-8">
9
  <title>ADR Console</title>
 
10
  <link rel = "icon" type = "image/png" sizes = "180x154" href = "static/images/TSAlogoCropped180x154.png">
11
  <link rel = "icon" type = "image/png" sizes = "32x27" href = "static/images/TSAlogoCropped32x27.png">
12
  <link rel = "icon" type = "image/png" sizes = "16x14" href = "static/images/TSAlogoCropped16x14.png">
13
  <link rel = "mask-icon" href = "static/images/TSAlogo1.png">
14
  <link rel = "shortcut icon" href = "static/images/TSAlogo1.png">
15
-
16
  </head>
17
  <body >
18
  <div id="all">
@@ -38,13 +42,14 @@
38
  <div id="canvaswindow" hidden="until-found">
39
  <canvas id="myCanvas"></canvas>
40
 
41
-
42
  <input type="button" value="Draw New Shape" id="NewShapeButtonId" />
43
  <input type="button" value="Undo" id="undoButtonId" />
44
  <div id="colorpickers">
45
  <input type="color" id="color" value="#2FFFFF" >
46
  </div>
47
- <input type="button" value="save" id="savecanvas" />
 
48
  </div>
49
  <!-- <canvas id="myCanvas2"></canvas> -->
50
 
@@ -248,7 +253,7 @@
248
 
249
  </div>
250
 
251
- <div class="dropdown-content">
252
  <div id="userguidetext">
253
  <div id="textfirstpage">
254
  <label style="font-style: oblique;">
@@ -350,7 +355,6 @@ document.getElementById('firstpage').addEventListener('click',function(){
350
 
351
  });
352
 
353
-
354
  //___________________________________________________________________________________________________________
355
  //___________________________________________________________________________________________________________
356
  /*Red Alert to fill in the first 3 dropdowns: prj name, part, section*/
@@ -1171,7 +1175,7 @@ if (!formvalues['selectprojs'].startsWith('2.1'))
1171
  else{
1172
  $.ajax({
1173
  type: "POST",
1174
- url: "/2o1Trial/",
1175
 
1176
  // set content type header to use Flask response.get_json()
1177
  contentType: "application/json",
@@ -2231,7 +2235,7 @@ myCanvas.addEventListener("click", e => {
2231
  });
2232
 
2233
  function drawChart() {
2234
- ctx.lineWidth = 15;
2235
 
2236
  // for every array in the ry array
2237
  for (let index = 0; index < ry.length; index++) {
@@ -2296,26 +2300,35 @@ levelsin.addEventListener('click',function(){
2296
  $.get( '/canvaspdftoimgBackground/'+pdfname).then (function(data){
2297
 
2298
  var popup = window.open('');
2299
- // popup.document.body.style.zoom=0.4;
 
2300
  var element = popup.document.createElement('div');
2301
  element.setAttribute('id', 'mydiv');
2302
- canvaswindow.childNodes[1].height=data[1]; //canvas -->child 3
2303
- canvaswindow.childNodes[1].width=data[2];
2304
- element.append(canvaswindow);
2305
- console.log(canvaswindow.childNodes)
2306
 
2307
- canvaswindow.removeAttribute('hidden');
2308
- var imgDrawon =document.createElement("img");
2309
- imgDrawon.src = 'data:image/gif;base64,' +data[0];
2310
- imgDrawon.width=data[2];
2311
- imgDrawon.id='imgcanvas';
2312
- // imgDrawon.alt="Larry";
 
 
 
 
 
 
2313
 
2314
 
2315
  imgDrawon.onload = function(){
 
 
 
 
2316
 
2317
  }
2318
-
2319
 
2320
  undoButtonId.addEventListener("click", e => {
2321
  //when undoButtonId is clicked the last point from the last array is deleted
@@ -2328,10 +2341,13 @@ levelsin.addEventListener('click',function(){
2328
  ry[ry.length - 1].pop();
2329
  }
2330
  // delete everything
 
2331
  ctx.clearRect(0,0, canvas.width, canvas.height);
2332
  //redraw background to draw lines over again
2333
- ctx.drawImage(imgDrawon,0,0);
2334
 
 
 
 
2335
 
2336
  drawChart();
2337
 
@@ -2340,7 +2356,7 @@ levelsin.addEventListener('click',function(){
2340
 
2341
  var win = popup.document.body;
2342
  win.appendChild(element);
2343
- var drp=popup.document.body.childNodes[0].childNodes[0].childNodes[7];
2344
  NewShapeButtonId.addEventListener('click',function(){
2345
 
2346
  // drp.lastChild.onchange = change; //canvas color element --> child 7
@@ -2348,7 +2364,8 @@ levelsin.addEventListener('click',function(){
2348
  });
2349
 
2350
  // ['click', 'touchend'].forEach(event => console.log(event))
2351
- drp.childNodes[1].addEventListener('click',function(){
 
2352
  drp.childNodes[1].onchange=change;
2353
 
2354
  })
 
2
  <!DOCTYPE html>
3
  <html lang="en" dir="ltr">
4
  <head>
5
+
6
+ <!-- <link rel="icon" type="images/x-icon" href="https://www.w3docs.com/favicon.ico" /> -->
7
+
8
  <link rel="stylesheet" href="https://use.typekit.net/zos0ars.css">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10
  <link rel="stylesheet" href="static/style.css">
11
  <meta charset="utf-8">
12
  <title>ADR Console</title>
13
+ <!-- <link rel = "apple-touch-icon" sizes = "180x180" href = "images/logo180x180.png"> -->
14
  <link rel = "icon" type = "image/png" sizes = "180x154" href = "static/images/TSAlogoCropped180x154.png">
15
  <link rel = "icon" type = "image/png" sizes = "32x27" href = "static/images/TSAlogoCropped32x27.png">
16
  <link rel = "icon" type = "image/png" sizes = "16x14" href = "static/images/TSAlogoCropped16x14.png">
17
  <link rel = "mask-icon" href = "static/images/TSAlogo1.png">
18
  <link rel = "shortcut icon" href = "static/images/TSAlogo1.png">
19
+
20
  </head>
21
  <body >
22
  <div id="all">
 
42
  <div id="canvaswindow" hidden="until-found">
43
  <canvas id="myCanvas"></canvas>
44
 
45
+ <br>
46
  <input type="button" value="Draw New Shape" id="NewShapeButtonId" />
47
  <input type="button" value="Undo" id="undoButtonId" />
48
  <div id="colorpickers">
49
  <input type="color" id="color" value="#2FFFFF" >
50
  </div>
51
+ <input type="button" value="Save" id="savecanvas" />
52
+
53
  </div>
54
  <!-- <canvas id="myCanvas2"></canvas> -->
55
 
 
253
 
254
  </div>
255
 
256
+ <div class="dropdown-content">
257
  <div id="userguidetext">
258
  <div id="textfirstpage">
259
  <label style="font-style: oblique;">
 
355
 
356
  });
357
 
 
358
  //___________________________________________________________________________________________________________
359
  //___________________________________________________________________________________________________________
360
  /*Red Alert to fill in the first 3 dropdowns: prj name, part, section*/
 
1175
  else{
1176
  $.ajax({
1177
  type: "POST",
1178
+ url: "/2.1Trial/",
1179
 
1180
  // set content type header to use Flask response.get_json()
1181
  contentType: "application/json",
 
2235
  });
2236
 
2237
  function drawChart() {
2238
+ ctx.lineWidth = 5;
2239
 
2240
  // for every array in the ry array
2241
  for (let index = 0; index < ry.length; index++) {
 
2300
  $.get( '/canvaspdftoimgBackground/'+pdfname).then (function(data){
2301
 
2302
  var popup = window.open('');
2303
+ popup.document.write('<html><head><title>ADR Console:Draw on PDF tool</title><link rel="stylesheet" href="static/style.css"></head><body>');
2304
+
2305
  var element = popup.document.createElement('div');
2306
  element.setAttribute('id', 'mydiv');
2307
+ canvaswindow.childNodes[1].height=data[1]; //canvas -->child 3
2308
+ canvaswindow.childNodes[1].width=data[2];
2309
+ canvaswindow.childNodes[1].style.width= 0.5*screen.width +'px'
 
2310
 
2311
+ HeightStyleratio= canvaswindow.childNodes[1].height * 0.5*screen.width / canvaswindow.childNodes[1].width ;
2312
+ canvaswindow.childNodes[1].style.height= HeightStyleratio.toString() + 'px';
2313
+ element.append(canvaswindow);
2314
+ console.log(canvaswindow.childNodes)
2315
+
2316
+ canvaswindow.removeAttribute('hidden');
2317
+ var imgDrawon =document.createElement("img");
2318
+ imgDrawon.src = 'data:image/gif;base64,' +data[0];
2319
+ imgDrawon.width=data[2];
2320
+ imgDrawon.style.width='700px';
2321
+ imgDrawon.id='imgcanvas';
2322
+ imgDrawon.alt="Larry";
2323
 
2324
 
2325
  imgDrawon.onload = function(){
2326
+ ctx.drawImage(imgDrawon,0,0);
2327
+ var scale = data[2] / canvaswindow.childNodes[1].style.width.slice(0,-2) ; // get the scale that matches display size
2328
+ ctx.setTransform(scale,0,0,scale,0,0);
2329
+
2330
 
2331
  }
 
2332
 
2333
  undoButtonId.addEventListener("click", e => {
2334
  //when undoButtonId is clicked the last point from the last array is deleted
 
2341
  ry[ry.length - 1].pop();
2342
  }
2343
  // delete everything
2344
+
2345
  ctx.clearRect(0,0, canvas.width, canvas.height);
2346
  //redraw background to draw lines over again
 
2347
 
2348
+ // console.log(canvaswindow.childNodes[1].style.width.slice(0,-2))
2349
+ ctx.drawImage(imgDrawon,0,0,canvaswindow.childNodes[1].style.width.slice(0, -2),canvaswindow.childNodes[1].style.height.slice(0, -2));
2350
+
2351
 
2352
  drawChart();
2353
 
 
2356
 
2357
  var win = popup.document.body;
2358
  win.appendChild(element);
2359
+ var drp=popup.document.body.childNodes[0].childNodes[0].childNodes[9];//color picker div
2360
  NewShapeButtonId.addEventListener('click',function(){
2361
 
2362
  // drp.lastChild.onchange = change; //canvas color element --> child 7
 
2364
  });
2365
 
2366
  // ['click', 'touchend'].forEach(event => console.log(event))
2367
+ console.log('drppp',drp.childNodes[1])
2368
+ drp.childNodes[1].addEventListener('click',function(){ //color picker
2369
  drp.childNodes[1].onchange=change;
2370
 
2371
  })