From fa7f1b35ee6f8605b505468809361b7877fbc463 Mon Sep 17 00:00:00 2001 From: Teddy-1024 <39016164+Teddy-1024@users.noreply.github.com> Date: Tue, 17 Sep 2024 09:16:22 +0100 Subject: [PATCH] Delete submission - backup directory --- submission - backup/README | 72 --- submission - backup/capture-screen.css | 101 ---- submission - backup/display-png.css | 15 - submission - backup/plugin_capture_screen.js | 152 ----- submission - backup/plugin_display_png,js | 274 --------- submission - backup/screenshot (16).png | Bin 53504 -> 0 bytes submission - backup/shared.js | 13 - submission - backup/symbols/Orange Arrow.png | Bin 10526 -> 0 bytes .../test_plugin_capture_screen_Mocha.js | 527 ------------------ .../test_plugin_display_png_Mocha.js | 376 ------------- submission - backup/view_capture_screen.html | 113 ---- submission - backup/view_display_png.html | 84 --- 12 files changed, 1727 deletions(-) delete mode 100644 submission - backup/README delete mode 100644 submission - backup/capture-screen.css delete mode 100644 submission - backup/display-png.css delete mode 100644 submission - backup/plugin_capture_screen.js delete mode 100644 submission - backup/plugin_display_png,js delete mode 100644 submission - backup/screenshot (16).png delete mode 100644 submission - backup/shared.js delete mode 100644 submission - backup/symbols/Orange Arrow.png delete mode 100644 submission - backup/test_plugin_capture_screen_Mocha.js delete mode 100644 submission - backup/test_plugin_display_png_Mocha.js delete mode 100644 submission - backup/view_capture_screen.html delete mode 100644 submission - backup/view_display_png.html diff --git a/submission - backup/README b/submission - backup/README deleted file mode 100644 index f1fb175..0000000 --- a/submission - backup/README +++ /dev/null @@ -1,72 +0,0 @@ -# Screen Capture and Image Annotation Project - -This project provides two main functionalities: -1. Screen Capture: A pluggable web control to capture the current browser viewport. -2. Image Annotation: A tool to annotate PNG images with arrows, textboxes, and symbols. - -## Features - -### Screen Capture -- Capture the current browser viewport as a PNG image. -- Exclude sensitive information from inputs and textareas. -- Capture modals and floating elements. -- Save the captured image as a PNG file. - -### Image Annotation -- Upload and display PNG images. -- Add arrows, textboxes, and symbols to the image. -- Erase annotated elements. -- Save the annotated image as a Base64 PNG string. - -## Installation - -1. Clone the repository: - ``` - git clone https://github.com/your-username/screen-capture-annotation-project.git - ``` - -## Usage - -### Screen Capture - -Include the necessary files in your HTML: - -```html - - - - -``` - -Initialize the plugin on a button: - -```javascript -$('.capture-screen').screenshotButton(); -``` - -### Image Annotation - -Include the necessary files in your HTML: - -```html - - - - -``` - -Initialize the plugin on a container: - -```javascript -$('.annotator-png').annotatorPNG(); -``` - -## Testing - -To run the tests: - -1. Open the test views in your browser. - - -## Known bugs -- Colour picker button must be clicked to set colour of active canvas object after selecting colour \ No newline at end of file diff --git a/submission - backup/capture-screen.css b/submission - backup/capture-screen.css deleted file mode 100644 index 128dade..0000000 --- a/submission - backup/capture-screen.css +++ /dev/null @@ -1,101 +0,0 @@ - -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - min-height: 100vh; -} -header { - background-color: #333; - color: white; - padding: 1rem; - text-align: center; -} -.content-wrapper { - display: flex; - flex: 1; -} -main { - flex: 3; - padding: 1rem; -} - -/* Widgets */ -.modal { - position: fixed; - background-color: #f0f0f0; - border: 1px solid #ccc; - border-radius: 5px; - padding: 10px; - /* - display: none; - */ -} -.widget-toggle { - position: fixed; - padding: 10px; - background-color: #007bff; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; -} -#notification-widget { - top: 100px; - right: 20px; - width: 250px; -} -#notification-toggle { - top: 100px; - right: 20px; -} -#chat-widget { - bottom: 20px; - right: 20px; - width: 300px; - height: 400px; -} -#chat-toggle { - bottom: 20px; - right: 20px; -} -#settings-widget { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 200px; -} -#settings-toggle { - top: 20px; - left: 20px; -} -.modal:target { - display: block; -} - -.is-hidden { - display: none; -} - -/* Testing */ - -.modal { - display: none; - position: fixed; - z-index: 1; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0,0,0,0.4); -} -.modal-content { - background-color: #fefefe; - margin: 15% auto; - padding: 20px; - border: 1px solid #888; - width: 80%; -} \ No newline at end of file diff --git a/submission - backup/display-png.css b/submission - backup/display-png.css deleted file mode 100644 index 759e92e..0000000 --- a/submission - backup/display-png.css +++ /dev/null @@ -1,15 +0,0 @@ - -.annotator-png-container-annotation { - position: relative; - border: 1px solid #ccc; - margin: 20px auto; -} -.annotator-png-canvas-annotation { - border: 1px solid #ccc; -} -.annotator-png-toolbox { - margin-bottom: 10px; -} -button { - margin-right: 5px; -} \ No newline at end of file diff --git a/submission - backup/plugin_capture_screen.js b/submission - backup/plugin_capture_screen.js deleted file mode 100644 index b222577..0000000 --- a/submission - backup/plugin_capture_screen.js +++ /dev/null @@ -1,152 +0,0 @@ - -(function($) { - $.fn.screenshotButton = function(options) { - var settings = $.extend({ - buttonText: 'Capture Screen', - fileName: 'screenshot.png', - modalsSelector: '.modal, .popup, .overlay, .dialog, .tooltip, [class*="modal"], [class*="popup"], [class*="overlay"], [class*="dialog"], [class*="tooltip"], [style*="position: fixed"], [style*="position: absolute"], [style*="z-index"]', - }, options); - - function exportToBase64String(canvas) { - const dataURL = canvas.toDataURL({ - format: 'png', - quality: 1 - }); - console.log("Base64 string:", dataURL); - return dataURL; - // alert("Image saved as Base64 string. Check the console and Downloads folder for the output."); - } - function exportToBlob(canvas) { - canvas.toBlob(function(blob) { - var url = URL.createObjectURL(blob); - console.log("blob: ", blob); - return url; - }); - } - function downloadPNG(url) { - var a = document.createElement('a'); - a.style.display = 'none'; - a.href = url; - a.download = settings.fileName; - - console.log("adding button a: ", a); - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - } - - return this.each(function() { - var $button = $(this); - - $button.text(settings.buttonText); - $button.removeClass(flagIsHidden); - $button.attr('aria-label', settings.buttonText); - - if (!$button.hasClass(flagInitialised)) { - $button.addClass(flagInitialised); - $button.on('click', function() { - if (typeof html2canvas === 'undefined') { - console.error('html2canvas is not loaded. Please include the library.'); - return; - } - - // Hide button and sensitive information in inputs - // $button.hide(); - $button.addClass(flagIsHidden); - $('input').each(function() { - $(this).attr("previousValue", $(this).val()); - $(this).val(''); - }); - $('textarea').each(function() { - $(this).attr("previousValue", $(this).val()); - $(this).val(''); - }); - - // set display: block on element for all visible modals and floating elements - // elements not detected by html2canvas with cascaded class-based display style - $(settings.modalsSelector).each(function() { - $(this).css('display', $(this).css('display')); - }); - - html2canvas(document.body, { - logging: true, - useCORS: true, - allowTaint: true, - }).then(function(canvas) { - let url = exportToBase64String(canvas); - // exportToBlob(canvas); - - downloadPNG(url); - URL.revokeObjectURL(url); - - // Show button and sensitive information in inputs - // $button.show(); - $button.removeClass(flagIsHidden); - $('input').each(function() { - $(this).val($(this).attr("previousValue")); - }); - $('textarea').each(function() { - $(this).val($(this).attr("previousValue")); - }); - }).catch(function(e) { - console.error(e); - }); - }); - } - }); - }; -}(jQuery)); - -function hookupTestModals() { - let $buttonToggleModalChat = $(idButtonToggleModalChat); - let $modalChat = $(idModalChat); - let $buttonToggleModalNotifications = $(idButtonToggleModalNotifications); - let $modalNotifications = $(idModalNotifications); - let $buttonToggleModalSettings = $(idButtonToggleModalSettings); - let $modalSettings = $(idModalSettings); - - if (!$buttonToggleModalChat.hasClass(flagInitialised)) { - $buttonToggleModalChat.addClass(flagInitialised); - $buttonToggleModalChat.on('click', function() { - if ($modalChat.hasClass(flagIsHidden)) { - $modalChat.removeClass(flagIsHidden); - } else { - $modalChat.addClass(flagIsHidden); - } - }); - } - if (!$modalChat.hasClass(flagInitialised)) { - $modalChat.addClass(flagInitialised); - $modalChat.addClass(flagIsHidden); - } - - if (!$buttonToggleModalNotifications.hasClass(flagInitialised)) { - $buttonToggleModalNotifications.addClass(flagInitialised); - $buttonToggleModalNotifications.on('click', function() { - if ($modalNotifications.hasClass(flagIsHidden)) { - $modalNotifications.removeClass(flagIsHidden); - } else { - $modalNotifications.addClass(flagIsHidden); - } - }); - } - if (!$modalNotifications.hasClass(flagInitialised)) { - $modalNotifications.addClass(flagInitialised); - $modalNotifications.addClass(flagIsHidden); - } - - if (!$buttonToggleModalSettings.hasClass(flagInitialised)) { - $buttonToggleModalSettings.addClass(flagInitialised); - $buttonToggleModalSettings.on('click', function() { - if ($modalSettings.hasClass(flagIsHidden)) { - $modalSettings.removeClass(flagIsHidden); - } else { - $modalSettings.addClass(flagIsHidden); - } - }); - } - if (!$modalSettings.hasClass(flagInitialised)) { - $modalSettings.addClass(flagInitialised); - $modalSettings.addClass(flagIsHidden); - } -} \ No newline at end of file diff --git a/submission - backup/plugin_display_png,js b/submission - backup/plugin_display_png,js deleted file mode 100644 index 97eb8ef..0000000 --- a/submission - backup/plugin_display_png,js +++ /dev/null @@ -1,274 +0,0 @@ - -(function($) { - $.fn.annotatorPNG = function(options) { - var settings = $.extend({ - heightCanvas: "600px", - widthCanvas: "800px", - textButtonSave: "Save Image", - }, options); - - - function getCanvas() { - let $annotatorPNG = $(document).find("." + flagAnnotatorPNG); - let $canvasAnnotation = $($annotatorPNG.find("canvas." + flagCanvasAnnotation)[0]); - let canvas = $canvasAnnotation.data(keyFabric); - return canvas; - } - - function deleteSelectedObjects() { - let canvas = getCanvas(); - const activeObject = canvas.getActiveObject(); - if (activeObject) { - console.log("active object type:", activeObject.type); - if (activeObject.type === 'activeSelection') { - activeObject.forEachObject(function(obj) { - canvas.remove(obj); - }); - canvas.discardActiveObject(); - } else { - canvas.remove(activeObject); - } - canvas.requestRenderAll(); - } - } - - return this.each(function() { - let $annotatorPNG = $(this); - let $toolbox = $annotatorPNG.find("." + flagToolbox); - let $inputUploadImage = $toolbox.find("." + flagUploadImage); - let $buttonAddArrow = $toolbox.find("." + flagAddArrow); - let $buttonAddTextbox = $toolbox.find("." + flagAddTextbox); - let $selectAddSymbol = $toolbox.find("." + flagAddSymbol); - let $inputColourPicker = $toolbox.find("." + flagColourPicker); - let $buttonEraseMode = $toolbox.find("." + flagEraseMode); - let $buttonSaveImage = $toolbox.find("." + flagSaveImage); - let $containerAnnotation = $annotatorPNG.find("." + flagContainerAnnotation); - let $canvasAnnotation = $containerAnnotation.find("." + flagCanvasAnnotation); - - // Default values - $inputUploadImage.val(''); - - const symbols = ['Orange Arrow.png']; - symbols.forEach(symbol => { - $selectAddSymbol.append($("