')
- .css({
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- zIndex: maxZIndex + 1,
- pointerEvents: 'none'
- })
- .appendTo('body');
-
- // Move all fixed and absolute positioned elements into the wrapper
- $('body *').each(function() {
- var $el = $(this);
- var position = $el.css('position');
- if (position === 'fixed' || position === 'absolute') {
- var offset = $el.offset();
- $el.data('original-position', {
- parent: $el.parent(),
- nextSibling: $el.next(),
- position: position,
- top: $el.css('top'),
- left: $el.css('left'),
- zIndex: $el.css('z-index')
- });
- $el.appendTo($wrapper)
- .css({
- position: 'absolute',
- top: offset.top,
- left: offset.left,
- zIndex: position === 'fixed' ? (parseFloat($el.css('z-index')) || 0) + maxZIndex : $el.css('z-index')
- });
- }
- });
-
- // Use html2canvas to capture the screenshot
- html2canvas(document.body, {
- ignoreElements: function(element) {
- // Exclude the button and any elements matching the excludeSelector
- return element === $button[0] ||
- (settings.excludeSelector && $(element).is(settings.excludeSelector));
- },
- windowWidth: document.documentElement.scrollWidth,
- windowHeight: document.documentElement.scrollHeight
- }).then(function(canvas) {
- // Convert canvas to blob
- canvas.toBlob(function(blob) {
- // Create a temporary URL for the blob
- var url = URL.createObjectURL(blob);
-
- // Create a temporary anchor element
- var a = document.createElement('a');
- a.style.display = 'none';
- a.href = url;
- a.download = settings.filename;
-
- // Append the anchor to the body, click it, and remove it
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
-
- // Revoke the blob URL
- URL.revokeObjectURL(url);
-
- // Restore the original positions of moved elements
- $wrapper.children().each(function() {
- var $el = $(this);
- var originalPosition = $el.data('original-position');
- if (originalPosition) {
- if (originalPosition.nextSibling.length) {
- $el.insertBefore(originalPosition.nextSibling);
- } else {
- $el.appendTo(originalPosition.parent);
- }
- $el.css({
- position: originalPosition.position,
- top: originalPosition.top,
- left: originalPosition.left,
- zIndex: originalPosition.zIndex
- });
- }
- });
-
- // Remove the wrapper
- $wrapper.remove();
-
- // Show the button again
- $button.show();
- });
- });
- }
- });
- };
-}(jQuery));
\ No newline at end of file
diff --git a/DEPRECATED/plugin_display_png_v1a.js b/DEPRECATED/plugin_display_png_v1a.js
deleted file mode 100644
index eba2522..0000000
--- a/DEPRECATED/plugin_display_png_v1a.js
+++ /dev/null
@@ -1,183 +0,0 @@
-
-
-
-var isEraseMode = false;
-var activeSelection = null;
-
-function hookupPageDisplayPng() {
- const canvas = new fabric.Canvas('canvas');
- const symbolSelect = document.getElementById('symbolSelect');
- const colorPicker = document.getElementById('colorPicker');
- const symbols = ['Orange Arrow.png'];
-
- // Populate symbol select
- symbols.forEach(symbol => {
- const option = document.createElement('option');
- option.value = symbol;
- option.textContent = symbol.replace('.png', '');
- symbolSelect.appendChild(option);
- });
-
- // Image upload
- document.getElementById('imageUpload').addEventListener('change', function(e) {
- const file = e.target.files[0];
- const reader = new FileReader();
- reader.onload = function(f) {
- fabric.Image.fromURL(f.target.result, function(img) {
- canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
- scaleX: canvas.width / img.width,
- scaleY: canvas.height / img.height
- });
- });
- };
- reader.readAsDataURL(file);
- });
-
- // Add arrow
- document.getElementById('addArrow').addEventListener('click', function() {
- const arrow = new fabric.Path('M 0 0 L 200 100', {
- fill: colorPicker.value,
- stroke: colorPicker.value,
- strokeWidth: 2,
- left: 100,
- top: 100
- });
- canvas.add(arrow);
- });
-
- // Add textbox
- document.getElementById('addTextbox').addEventListener('click', function() {
- const textbox = new fabric.Textbox('Type here', {
- left: 100,
- top: 100,
- width: 150,
- fontSize: 20,
- fill: colorPicker.value
- });
- canvas.add(textbox);
- });
-
- // Add symbol
- symbolSelect.addEventListener('change', function() {
- if (this.value) {
- fabric.Image.fromURL(`symbols/${this.value}`, function(img) {
- img.set({
- left: 100,
- top: 100,
- scaleX: 0.5,
- scaleY: 0.5
- });
- canvas.add(img);
- });
- this.value = ''; // Reset select
- }
- });
-
- // Color change for selected object
- colorPicker.addEventListener('change', function() {
- const activeObject = canvas.getActiveObject();
- if (activeObject) {
- if (activeObject.type === 'textbox') {
- activeObject.set('fill', this.value);
- } else {
- activeObject.set('fill', this.value);
- activeObject.set('stroke', this.value);
- }
- canvas.renderAll();
- }
- });
-
- // Erase mode
- document.getElementById('eraseMode').addEventListener('click', function() {
- isEraseMode = !isEraseMode;
- this.textContent = isEraseMode ? 'Exit Erase Mode' : 'Erase Mode';
-
- if (isEraseMode) {
- // Delete any pre-selected elements when entering erase mode
- deleteSelectedObjects(canvas);
-
- // Disable selection and drawing
- canvas.selection = false;
- canvas.isDrawingMode = false;
-
- // Change cursor to indicate erase mode
- canvas.defaultCursor = 'crosshair';
- canvas.hoverCursor = 'crosshair';
- } else {
- // Re-enable selection when exiting erase mode
- canvas.selection = true;
-
- // Reset cursors
- canvas.defaultCursor = 'default';
- canvas.hoverCursor = 'move';
- }
- });
-
- // Object selection in erase mode
- canvas.on('selection:created', function(options) {
- if (isEraseMode) {
- deleteSelectedObjects(canvas);
- }
- });
-
- canvas.on('mouse:down', function(options) {
- if (isEraseMode && options.target) {
- canvas.remove(options.target);
- canvas.requestRenderAll();
- }
- });
-
- // Prevent dragging in erase mode
- canvas.on('object:moving', function(options) {
- if (isEraseMode) {
- options.target.setCoords();
- canvas.remove(options.target);
- canvas.requestRenderAll();
- }
- });
-
- // Save image
- document.getElementById('saveImage').addEventListener('click', function() {
- if (confirm("Please ensure there is no sensitive information or PII in your annotations. Do you want to proceed with saving?")) {
- const dataURL = canvas.toDataURL({
- format: 'png',
- quality: 1
- });
- console.log("Base64 string:", dataURL);
- // Here you would typically send this dataURL to your server or database
- alert("Image saved as Base64 string. Check the console for the output.");
- }
- });
- /*
- // Object selection
- canvas.on('selection:created', function(options) {
- if (isEraseMode && options.target) {
- canvas.remove(options.target);
- } else if (options.target) {
- if (options.target.type === 'textbox') {
- colorPicker.value = options.target.fill;
- } else {
- colorPicker.value = options.target.stroke || options.target.fill;
- }
- }
- });
- */
-}
-
-function deleteSelectedObjects(canvas) {
- // const canvas = new fabric.Canvas('canvas');
- const activeObject = canvas.getActiveObject();
- if (activeObject) {
- if (activeObject.type === 'activeSelection') {
- // If it's a multi-selection, remove all selected objects
- activeObject.forEachObject(function(obj) {
- canvas.remove(obj);
- });
- canvas.discardActiveObject();
- } else {
- // If it's a single object, just remove it
- canvas.remove(activeObject);
- }
- canvas.requestRenderAll();
- }
-}
diff --git a/DEPRECATED/plugin_display_png_v2a.js b/DEPRECATED/plugin_display_png_v2a.js
deleted file mode 100644
index fc26cb6..0000000
--- a/DEPRECATED/plugin_display_png_v2a.js
+++ /dev/null
@@ -1,268 +0,0 @@
-
-(function($) {
- $.fn.annotatorPNG = function(options) {
- var settings = $.extend({
- heightCanvas: "600px",
- widthCanvas: "800px",
- }, options);
-
- var flagToolbox = "annotator-png-toolbox";
- var flagContainer = "annotator-png-container";
- var flagContainerAnnotation = "annotator-png-container-annotation";
- var flagUploadImage = "annotator-png-upload-image";
- var flagAddArrow = "annotator-png-add-arrow";
- var flagAddTextbox = "annotator-png-add-textbox";
- var flagAddSymbol = "annotator-png-add-symbol";
- var flagColourPicker = "annotator-png-colour-picker";
- var flagEraseMode = "annotator-png-erase-mode";
- var flagSaveImage = "annotator-png-save-image";
- var flagCanvasAnnotation = "annotator-png-canvas-annotation";
- var keyFabric = "fabric";
- var keyIsEraseMode = "isEraseMode";
-
- function getCanvas() {
- let $annotatorPNG = $(document).find("." + flagAnnotatorPNG);
- let $canvasAnnotation = $annotatorPNG.find("canvas." + flagCanvasAnnotation);
- let canvas = $canvasAnnotation.data(keyFabric);
- console.log("canvas: ", canvas);
- return canvas;
- }
-
- function deleteSelectedObjects() {
- let canvas = getCanvas();
- const activeObject = canvas.getActiveObject();
- if (activeObject) {
- console.log("active object type:", activeObject.type);
- if (activeObject.type === 'activeSelection') {
- // If it's a multi-selection, remove all selected objects
- activeObject.forEachObject(function(obj) {
- canvas.remove(obj);
- });
- canvas.discardActiveObject();
- } else {
- // If it's a single object, just remove it
- canvas.remove(activeObject);
- }
- canvas.requestRenderAll();
- }
- }
-
- return this.each(function() {
- var $annotatorPNG = $(this);
- $annotatorPNG.data(keyIsEraseMode, false);
-
- const symbols = ['Orange Arrow.png'];
-
- // Make elements
- var $toolbox = $('
');
-
- var $inputUploadImage = $('
');
- $toolbox.append($inputUploadImage);
-
- var $buttonAddArrow = $('
');
- $toolbox.append($buttonAddArrow);
-
- var $buttonAddTextbox = $('
');
- $toolbox.append($buttonAddTextbox);
-
- var $selectAddSymbol = $('
');
- $selectAddSymbol.append($("