Fork me on GitHub

Source: gui.js

  1. /* globals
  2. dat, Utils
  3. G_UpdateFilters
  4. G_UpdateRuler
  5. G_UpdateStageSettings
  6. G_Update_GroundTruth
  7. G_UpdateResampled
  8. G_update_ImgMetrics
  9. G_Update_InfoDisplays
  10. G_UpdateVirtualSEMConfig
  11. ResampleFullImage
  12. G_APP_NAME
  13. G_DEBUG
  14. G_STAGES
  15. G_INPUT_IMAGE
  16. G_VSEM_PAUSED
  17. G_IMG_METRICS
  18. G_IMG_METRIC_ENABLED
  19. G_PRELOADED_IMAGES
  20. G_PRELOADED_IMAGES_ROOT
  21. G_SHOW_SUBREGION_OVERLAY
  22. */
  23. /* exported
  24. G_GUI_Controller
  25. G_Export_img_count
  26. */
  27. /* allow global reassign and magic number as this where
  28. we configure most if not all default values. */
  29. /* eslint-disable no-magic-numbers, no-global-assign */
  30. // hide the old UI for now...
  31. if (G_DEBUG) {
  32. $('#options-full-resample-anchor').show();
  33. }
  34. // handler for generate full image, currently only used by old UI
  35. $('#generateFull').click(function(){
  36. $('#loadspinner_full').show();
  37. setTimeout(function(){
  38. ResampleFullImage();
  39. $('#loadspinner_full').hide();
  40. }, 250);
  41. });
  42. // Setup the main UI and settings/options GUI controller
  43. const G_INPUT_IMG_CTRL_SELECTOR = '#_fileImgInput';
  44. const gui = new dat.GUI({autoPlace: false});
  45. /**
  46. * The main GUI controller
  47. */
  48. const G_GUI_Controller = new function() {
  49. this.pixelCountX = 8;
  50. this.pixelCountY = 8;
  51. this.brightness = 0;
  52. this.contrast = 0;
  53. this.digitalMag = "1.00x";
  54. this.advancedMode = false;
  55. this.updateViews = function(){
  56. G_UpdateVirtualSEMConfig();
  57. G_UpdateResampled();
  58. G_Update_GroundTruth();
  59. G_Update_InfoDisplays();
  60. };
  61. this.updateFilters = function(){ G_UpdateFilters(); },
  62. this.globalBC = true;
  63. this.resetBC = function(){
  64. let cGui = G_GUI_Controller.controls;
  65. cGui.brightness.setValue(0);
  66. cGui.contrast.setValue(0);
  67. G_UpdateFilters();
  68. },
  69. this.groundTruthImg = 'grains2tl.png';
  70. this.pause_vSEM = G_VSEM_PAUSED;
  71. this.imageSmoothing = true;
  72. this.doImageMetric = G_IMG_METRIC_ENABLED;
  73. this.subregionOverlay = G_SHOW_SUBREGION_OVERLAY;
  74. this.imageMetricAlgo = 'iNRMSE';
  75. this.exportResultImg = function(){ exportResultImage(); };
  76. this.importImage = function(){
  77. // getInputImage();
  78. $(G_INPUT_IMG_CTRL_SELECTOR).click();
  79. };
  80. this.aboutMessage = function(){ Utils.ShowAboutMessage(); };
  81. this.pixelSize_nm = 500; // nm/px default;
  82. this.previewOpacity = 0.4;
  83. this.showRuler = false;
  84. this.controls = {};
  85. };
  86. // setup the submenus or "folders"
  87. var gui_ip = gui.addFolder('Imaging Parameters');
  88. gui_ip.add(G_GUI_Controller, 'pixelCountX', 1, 64, 1).onChange(G_GUI_Controller.updateViews);
  89. gui_ip.add(G_GUI_Controller, 'pixelCountY', 1, 64, 1).onChange(G_GUI_Controller.updateViews);
  90. G_GUI_Controller.controls.brightness = gui_ip
  91. .add(G_GUI_Controller, 'brightness', -1, 1, 0.01)
  92. .onChange(G_GUI_Controller.updateFilters);
  93. G_GUI_Controller.controls.contrast = gui_ip
  94. .add(G_GUI_Controller, 'contrast', -100, 100, 0.1)
  95. .onChange(G_GUI_Controller.updateFilters);
  96. gui_ip.add(G_GUI_Controller, 'globalBC')
  97. .name('Global B/C')
  98. .onChange(G_GUI_Controller.updateFilters);
  99. gui_ip.add(G_GUI_Controller, 'resetBC').name('Reset Brightness / Contrast');
  100. gui_ip.add(G_GUI_Controller, 'digitalMag').listen();
  101. G_GUI_Controller.controls.pixelSize_nm = gui_ip
  102. .add(G_GUI_Controller, 'pixelSize_nm', 1, 1000, 1).onChange(function(){
  103. G_GUI_Controller.updateViews();
  104. G_UpdateRuler();
  105. });
  106. gui_ip.add(G_GUI_Controller, 'showRuler').onChange(function(){
  107. G_UpdateRuler();
  108. });
  109. gui_ip.open();
  110. var gui_do = gui.addFolder('Display Options');
  111. gui_do.add(G_GUI_Controller, 'advancedMode').onChange(function(){
  112. Utils.updateAdvancedMode();
  113. });
  114. gui_do.add(G_GUI_Controller, 'pause_vSEM').onChange(function(){
  115. G_VSEM_PAUSED = G_GUI_Controller.pause_vSEM;
  116. });
  117. gui_do.add(G_GUI_Controller, 'imageSmoothing').onChange(function(){
  118. G_UpdateStageSettings();
  119. });
  120. gui_do.add(G_GUI_Controller, 'subregionOverlay').onChange(function(){
  121. G_SHOW_SUBREGION_OVERLAY = G_GUI_Controller.subregionOverlay;
  122. G_GUI_Controller.updateViews();
  123. });
  124. gui_do.add(G_GUI_Controller, 'previewOpacity', 0, 1, 0.01).onChange(function(){
  125. G_UpdateResampled();
  126. });
  127. gui_do.add(G_GUI_Controller, 'doImageMetric').onChange(function(){
  128. G_IMG_METRIC_ENABLED = G_GUI_Controller.doImageMetric;
  129. G_update_ImgMetrics();
  130. });
  131. gui_do.add(G_GUI_Controller, 'imageMetricAlgo', G_IMG_METRICS);
  132. var gui_io = gui.addFolder('Input / Export Image');
  133. gui_io.add(G_GUI_Controller, 'groundTruthImg', G_PRELOADED_IMAGES).listen().onChange(function(){
  134. var fname = Utils.getGroundtruthImage();
  135. if (fname.length > 0) {
  136. G_INPUT_IMAGE = G_PRELOADED_IMAGES_ROOT + fname;
  137. console.log("Ground Truth Image changed to: "+G_INPUT_IMAGE);
  138. $(document.body).trigger('OnGroundtruthImageChange');
  139. }
  140. });
  141. gui_io.add(G_GUI_Controller, 'importImage');
  142. gui_io.add(G_GUI_Controller, 'exportResultImg');
  143. var aboutBtn = gui.add(G_GUI_Controller, 'aboutMessage');
  144. aboutBtn.name("About " + G_APP_NAME + " / Credits");
  145. gui_io.open();
  146. // sets up the archoring position for the options UI and makes it draggable
  147. $("#options").append(gui.domElement)
  148. .position({at:'right bottom', my:'right bottom', of: '#options-anchor'})
  149. .draggable({handle: '#options-handle'});
  150. // used to auto-name the export files with a counter
  151. var G_Export_img_count = 0;
  152. function exportResultImage(){
  153. // Export image as file download
  154. // https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html
  155. // get the image without the row/draw indicator
  156. var stageFinal = G_STAGES[G_STAGES.length - 1];
  157. var finalImage = Utils.getVirtualSEM_KonvaImage(stageFinal);
  158. // export the image
  159. var url = finalImage.toDataURL({pixelRatio:1});
  160. var filename = Utils.GetSuggestedFileName("result_image",++G_Export_img_count);
  161. Utils.downloadURI(url, filename);
  162. }
  163. // handles the browse for input image-changed event
  164. $(G_INPUT_IMG_CTRL_SELECTOR).change(function(){
  165. // https://stackoverflow.com/a/34840295/883015
  166. var file = this.files[0];
  167. var reader = new FileReader();
  168. reader.onloadend = function () {
  169. console.log("Ground Truth Image changed to: "+file.name);
  170. // clear selection in the combobox for included images
  171. G_GUI_Controller.groundTruthImg = '';
  172. G_INPUT_IMAGE = reader.result; // returns a data base64 url
  173. // G_INPUT_IMAGE = URL.createObjectURL(file); // makes a blob:// url
  174. $(document.body).trigger('OnGroundtruthImageChange');
  175. };
  176. if (file) {
  177. reader.readAsDataURL(file);
  178. } else {
  179. console.log('Imported image selection cleared.');
  180. // preview.src = "";
  181. }
  182. });

↑ Top