Sin descripción

msi.html 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- Link to CSS -->
  8. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  9. <link rel="stylesheet" type="text/css" href="style/msi.css">
  10. <title>MSI</title>
  11. </head>
  12. <body onload="paint_canvas()">
  13. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  14. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  16. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  18. <!-- Draw the circle -->
  19. <script type="text/javascript" src="scripts/draw-circle.js"></script>
  20. <!-- Image Selector -->
  21. <div class="row" id="row">
  22. <div class="col-md-3">
  23. <!-- Sidebar -->
  24. <nav id="sidebar" class="sidenav">
  25. <li>
  26. <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  27. </li>
  28. <li class="active">
  29. <a href="#XRFcolors" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">XRF</a>
  30. <ul class="collapse list-unstyled" id="XRFcolors">
  31. <li>
  32. <a href="#">Home 1</a>
  33. </li>
  34. <li>
  35. <a href="#">Home 2</a>
  36. </li>
  37. <li>
  38. <a href="#">Home 3</a>
  39. </li>
  40. </ul>
  41. </li>
  42. <li>
  43. <a href="#FORScolors" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">FORS</a>
  44. <ul class="collapse list-unstyled" id="FORScolors">
  45. <li>
  46. <a href="#">Page 1</a>
  47. </li>
  48. <li>
  49. <a href="#">Page 2</a>
  50. </li>
  51. <li>
  52. <a href="#">Page 3</a>
  53. </li>
  54. </ul>
  55. </li>
  56. <li>
  57. <a href="/MSI/msi.html">MSI</a>
  58. </li>
  59. </nav>
  60. <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
  61. </div>
  62. <div class="col-md-6" style="background-color: white;">
  63. <div class="canvas" id="pointer_div">
  64. <canvas style="background-image: url('images/paisaje-frances-infrared.png');" id="back-canvas" width="562px" height="620px"></canvas>
  65. <img id="oller" style="display: none;" src="images/paisaje-frances.png" width="562px" height="620px">
  66. </div>
  67. </div>
  68. <div class="col-md-3">
  69. <div class="row">
  70. <div class="col-md-6" id="radio-form">
  71. <p><b>Front Image:</b></p>
  72. <div class="form-check">
  73. <input onclick="front()" class="form-check-input" type="radio" name="front-radio" id="front-visual" value="visual" checked>
  74. <label class="form-check-label" for="front-visual">Visual</label>
  75. </div>
  76. <div class="form-check">
  77. <input onclick="front()" class="form-check-input" type="radio" name="front-radio" id="front-infrared" value="infrared">
  78. <label class="form-check-label" for="front-infrared">Infrared</label>
  79. </div>
  80. <div class="form-check">
  81. <input onclick="front()" class="form-check-input" type="radio" name="front-radio" id="front-ultraviolet" value="ultraviolet" disabled>
  82. <label class="form-check-label" for="front-ultraviolet">Ultraviolet</label>
  83. </div>
  84. <div class="form-check">
  85. <input onclick="front()" class="form-check-input" type="radio" name="front-radio" id="front-xray" value="x-ray" disabled>
  86. <label class="form-check-label" for="front-xray">X-Ray</label>
  87. </div>
  88. </div>
  89. <div class="col-md-6" id="radio-form">
  90. <p><b>Contrast Image:</b></p>
  91. <div class="form-check">
  92. <input onclick="back()" class="form-check-input" type="radio" name="back-radio" id="back-visual" value="visual">
  93. <label class="form-check-label" for="back-visual">Visual</label>
  94. </div>
  95. <div class="form-check">
  96. <input onclick="back()" class="form-check-input" type="radio" name="back-radio" id="back-infrared" value="infrared" checked>
  97. <label class="form-check-label" for="back-infrared">Infrared</label>
  98. </div>
  99. <div class="form-check">
  100. <input onclick="back()" class="form-check-input" type="radio" name="back-radio" id="back-ultraviolet" value="ultraviolet" disabled>
  101. <label class="form-check-label" for="back-ultraviolet">Ultraviolet</label>
  102. </div>
  103. <div class="form-check">
  104. <input onclick="back()" class="form-check-input" type="radio" name="back-radio" id="back-xray" value="x-ray" disabled>
  105. <label class="form-check-label" for="back-xray">X-Ray</label>
  106. </div>
  107. </div>
  108. <div class="col-md-12">
  109. <button id="clear" onclick="clear_radios()" type="button" class="btn btn-dark">Clear</button>
  110. </div>
  111. <div class="col-md-12">
  112. <p id="radius-paragraph"><b>Radius Controller:</b></p>
  113. <span class="radius-span"><b>25</b></span>
  114. <input onchange="change(this.value)" type="range" min="25" max="100" class="slider" id="radius"/>
  115. <span><b>100</b></span>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </body>
  121. </html>