Initial commit. \n 1. Screen capture plugin. \n 2. PNG annotation plugin

2024-08-19 08:58:38 +01:00
parent 6e3fc47d36
commit 40a8406427
40 changed files with 5622 additions and 0 deletions
--- a/DEPRECATED/view_display_png_v1a.html
+++ b/DEPRECATED/view_display_png_v1a.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Annotation Control</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="plugin_display_png_v1a.js"></script>
+    <style>
+        #annotationContainer {
+            position: relative;
+            width: 800px;
+            height: 600px;
+            border: 1px solid #ccc;
+            margin: 20px auto;
+        }
+        #canvas {
+            border: 1px solid #ccc;
+        }
+        #toolbox {
+            margin-bottom: 10px;
+        }
+        button {
+            margin-right: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="annotatorPNG">
+        <div id="toolbox">
+            <input type="file" id="imageUpload" accept="image/png">
+            <button id="addArrow">Add Arrow</button>
+            <button id="addTextbox">Add Textbox</button>
+            <select id="symbolSelect">
+                <option value="">Select Symbol</option>
+                <!-- Options will be populated dynamically -->
+            </select>
+            <input type="color" id="colorPicker" value="#ff0000">
+            <button id="eraseMode">Erase Mode</button>
+            <button id="saveImage">Save Image</button>
+        </div>
+        <div id="annotationContainer">
+            <canvas id="canvas" width="800" height="600"></canvas>
+        </div>
+    </div>
+</body>
+<script>
+    // $(document).ready(hookupPageDisplayPng);
+    // change to flags - enables multiple annotatorPNGs per webpage
+    var idButtonAddArrow = "#addArrow";
+    var idButtonAddTextbox = "#addTextbox";
+    var idButtonEraseMode = "#eraseMode";
+    var idButtonSaveImage = "#saveImage";
+    var idColorPicker = "#colorPicker";
+    var idImageUpload = "#imageUpload";
+    var idSelectSymbol = "#symbolSelect";
+
+    $(document).ready(function() {
+        hookupPageDisplayPng();
+    });
+</script>
+</html>