Work_Archive/ImgAnnotations
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Inital Commit

Browse Source
This commit is contained in:
Bram Prieshof
2022-01-21 16:01:56 +01:00
commit ab40ebe2ce
15 changed files with 351 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
db.php

48
DB-Template.sql Normal file
View File

@@ -0,0 +1,48 @@
-- phpMyAdmin SQL Dump
-- version 5.1.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jan 21, 2022 at 03:57 PM
-- Server version: 8.0.28
-- PHP Version: 8.1.1
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `pa1`
--
-- --------------------------------------------------------
--
-- Table structure for table `ImgAnnotations`
--
CREATE TABLE `ImgAnnotations` (
`id` int NOT NULL,
`data` longtext CHARACTER SET utf8 COLLATE utf8_bin NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COLLATE=utf8_bin;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `ImgAnnotations`
--
ALTER TABLE `ImgAnnotations`
ADD PRIMARY KEY (`id`);
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

44
Editor-Save.php Normal file
View File

@@ -0,0 +1,44 @@
<style>
a.button {
background-color: Gainsboro;
border: none;
color: black;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<?php
include 'db.php';
//Debug
echo "<br>";echo "ID:"; echo $_POST["TheID"];echo "<br>";
//EndDebugs
//Check if data was send
if (empty($_POST["TheNewData"])) {
echo 'No data has been submitted <br><button onclick="history.back()">Go Back</button>';
}
else {
$stmt = $mysqli->prepare("SELECT TRUE FROM ImgAnnotations WHERE id = ? LIMIT 1");
$stmt->bind_param("i", $_POST["TheID"]);
$stmt->execute();
$result = $stmt->get_result(); // get the mysqli result
if( mysqli_num_rows($result) > 0) {
//ID does exits, updating";
$stmt = $mysqli->prepare("UPDATE ImgAnnotations SET data = ? WHERE id = ?");
$stmt->bind_param("si", $_POST["TheNewData"], $_POST["TheID"]);
}else {
//ID doesn't exits, creating";
$stmt = $mysqli->prepare("INSERT INTO ImgAnnotations (id, data) VALUES (?, ?)");
$stmt->bind_param("is", $_POST["TheID"], $_POST["TheNewData"]);
}
$stmt->execute();
echo 'Data has been saved<br> <a href="Editor.php" class="button">Editor</a><a> </a><a href="Viewer.php" class="button">Viewer</a>';
}
//echo $_POST["TheNewData"]
?>

70
Editor.php Normal file
View File

@@ -0,0 +1,70 @@
<?php
//ID Check
if (empty($_POST["TheID"])) {
echo '<style type="text/css">.EditorDialog{display:none;}</style>';
}else {
//If id is set check in database if exists
include 'db.php';
$stmt = $mysqli->prepare("SELECT data FROM ImgAnnotations WHERE id = ? LIMIT 1");
$stmt->bind_param("i", $_POST["TheID"]);
$stmt->execute();
$result = $stmt->get_result();
$resultData = $result->fetch_assoc();
//Check if exists
if (!empty($resultData)) {
//If exists get data
$TheData = $resultData['data'];
}else {
//If not exists start clean
$TheData = "";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<!--Load CSS and JS-->
<link rel="stylesheet" href="vendor/css/app.css">
<link rel="stylesheet" href="vendor/css/reset.css">
<link href="vendor/css/app.css" rel="preload" as="style">
<link href="vendor/js/picture-annotation-chunk-vendors.min.js" rel="preload" as="script">
<link href="vendor/js/picture-annotation.min.js" rel="preload" as="script">
<link href="vendor/css/app.css" rel="stylesheet">
<!--StoreData in js Var until saved-->
<script type="application/javascript">
function callBack(data) {
document.Save.TheNewData.value = data;
}
</script>
</head>
<body>
<div class="LoadDialog">
<!--Load data-->
<form method="post" name="Load" action="">
<label for="TheID">Enter DeviceID:</label>
<input type="number" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
<input type="submit" value="Load">
</form>
</div>
<div class="EditorDialog">
<!--Editor-->
<div id="my-pic-annotation" class="picture-annotation" data-image-src="Screen.png" data-width="1200" data-height="500" data-edit-mode="1" data-callback="callBack">
<!--Load existing Data-->
<div class="picture-annotation-data" style="display:none;"><?php echo $TheData; ?></div>
</div>
<script src="vendor/js/picture-annotation-chunk-vendors.min.js"></script><script src="vendor/js/picture-annotation.min.js"></script>
<!--Hidden form for submitting to DB-->
<form method="post" name="Save" action="Editor-Save.php">
<input type="hidden" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
<input type="hidden" name="TheNewData" value="">
<input type="submit" value="Save" >
</form>
<!--Hidden form for opeing in Vierwer-->
<form method="post" name="OpenInViewer" action="Viewer.php">
<input type="hidden" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
<input type="submit" value="Open in Viewer" >
</form>
</div>
</body>
</html>

BIN
Screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

60
Viewer.php Normal file
View File

@@ -0,0 +1,60 @@
<?php
//ID Check
if (empty($_POST["TheID"])) {
echo '<style type="text/css">.EditorDialog{display:none;}</style>';
}else {
//If id is set check in database if exists
include 'db.php';
$stmt = $mysqli->prepare("SELECT data FROM ImgAnnotations WHERE id = ? LIMIT 1");
$stmt->bind_param("i", $_POST["TheID"]);
$stmt->execute();
$result = $stmt->get_result();
$resultData = $result->fetch_assoc();
//Check if exists
if (!empty($resultData)) {
//If exists get data
$TheData = $resultData['data'];
}else {
//If not exists start clean
echo '<p style="color: red;font-weight: bold;">This DeviceID does not exist</p>';
echo '<p style="font-weight: bold;">Open in Editor to create it</p>';
echo '<style type="text/css">.EditorDialog{display:none;}</style>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<!--Load CSS and JS-->
<link rel="stylesheet" href="vendor/css/app.css">
<link rel="stylesheet" href="vendor/css/reset.css">
<link href="vendor/css/app.css" rel="preload" as="style">
<link href="vendor/js/picture-annotation-chunk-vendors.min.js" rel="preload" as="script">
<link href="vendor/js/picture-annotation.min.js" rel="preload" as="script">
<link href="vendor/css/app.css" rel="stylesheet">
</head>
<body>
<div class="LoadDialog">
<!--Load data-->
<form method="post" name="Load" action="">
<label for="TheID">Enter DeviceID:</label>
<input type="number" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
<input type="submit" value="Load">
</form>
</div>
<div class="EditorDialog">
<!--Editor-->
<div id="my-pic-annotation-view" class="picture-annotation" data-image-src="Screen.png"data-width="1200" data-height="500" >
<!--Load existing Data-->
<div class="picture-annotation-data" style="display:none;"><?php echo $TheData; ?></div>
</div>
<script src="vendor/js/picture-annotation-chunk-vendors.min.js"></script><script src="vendor/js/picture-annotation.min.js"></script>
</div>
<!--Hidden form for opeing in editor-->
<form method="post" name="OpenInEditor" action="Editor.php">
<input type="hidden" name="TheID" value="<?php echo $_POST["TheID"]; ?>">
<input type="submit" value="Open in Editor" >
</form>
</body>
</html>

16
db.php.sample Normal file
View File

@@ -0,0 +1,16 @@
<?php
// DB Credentials
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'DBUserName');
define('DB_PASSWORD', 'DBPassword');
define('DB_DBNAME', 'DBName');
// mysqli object
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_DBNAME);
if($mysqli->connect_error) {
exit('Error connecting to database');
}
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$mysqli->set_charset("utf8");

16
index.html Normal file
View File

@@ -0,0 +1,16 @@
<style>
a.button {
background-color: Gainsboro;
border: none;
color: black;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<a href="Editor.php" class="button">Open editor</a>
<br>
<br>
<a href="Viewer.php" class="button">Open viewer</a>

1
vendor/css/app.css vendored Normal file
View File

@@ -0,0 +1 @@
.pa-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;display:grid;grid-template-columns:2fr 1fr;overflow:hidden}.pa-canvas{border:1px solid #ccc;position:relative;overflow:hidden}.pa-controls{position:absolute;z-index:100;background-color:#fff;padding:.3em;left:1em;top:1em;border:1px solid #333;border-radius:.5em}.pa-controls a{color:#000;display:block;padding:.2em}.pa-controls hr{color:#000;padding:0;margin:.1em 0 .3em 0}.pa-polygon-hint{position:absolute;bottom:1em;left:1em;background-color:rgba(0,0,0,.6);color:#fff;padding:.5em;border-radius:.5em;font-size:90%}.pa-infobar{margin-left:5px;overflow-y:scroll}.pa-loader{position:absolute;z-index:102;left:0;top:0;background-color:#000;background-color:rgba(0,0,0,.4)}.lds-ring,.pa-loader{width:100%;height:100%}.lds-ring{display:inline-block;position:relative}.lds-ring div{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;top:30%;left:calc(50% - 82px);position:absolute;width:164px;height:164px;margin:8px;border:18px solid #fff;border-radius:50%;-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#fff transparent transparent transparent}.lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}.lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}.lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}@-webkit-keyframes lds-ring{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes lds-ring{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.pa-side-bar-entry.is-hover-target .pa-accordion,.pa-side-bar-entry.is-selected-target .pa-accordion{background-color:#efc4b0}.pa-accordion{background-color:#eee;color:#444;cursor:pointer;padding:18px;width:100%;text-align:left;border:none;outline:none;-webkit-transition:.4s;transition:.4s;margin-bottom:2px}.pa-accordion.is-active,.pa-accordion:hover{background-color:#ccc}.pa-side-bar-title{vertical-align:top;padding-left:5px}.pa-side-bar-icons{float:right}.pa-annotation-text{padding:5px}.pa-panel{padding:0 18px;background-color:#fff;max-height:0;overflow:hidden;-webkit-transition:max-height .2s ease-out;transition:max-height .2s ease-out}.pa-annotation-link{display:block;text-align:center;color:#000;text-decoration:none;background:#fafad2;padding:.7em;border:0;margin:1em 0;-webkit-transition:background .5s ease-out;transition:background .5s ease-out}.pa-annotation-link:focus,.pa-annotation-link:hover{background:gold}.pa-annotation-form{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;display:grid;grid-template-columns:auto 1fr;grid-gap:1em;padding:10px 0}.pa-annotation-form label{grid-column:1/2;text-align:right}.pa-annotation-form button{grid-column:2/3;background:#d3d3d3;padding:.7em;border:0}.pa-annotation-form button:hover{background:gold}.pa-annotation-form input,.pa-annotation-form textarea{grid-column:2/3;background:#fff;border:1px solid #9c9c9c}.pa-annotation-form input:focus,.pa-annotation-form textarea:focus{outline:3px solid gold}.pa-annotation-form textarea{height:10em}

52
vendor/css/reset.css vendored Normal file
View File

@@ -0,0 +1,52 @@
/* http://meyerweb.com/eric/tools/css/reset/
v5.0.1 | 20191019
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
menu, ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

18
vendor/js/picture-annotation-chunk-vendors.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
vendor/js/picture-annotation-chunk-vendors.min.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
vendor/js/picture-annotation.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
vendor/js/picture-annotation.min.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

21
vendor/picture-annotation_LICENSE vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Maximilian Kalus
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.