Inital Commit
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
db.php
|
||||
48
DB-Template.sql
Normal file
48
DB-Template.sql
Normal 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
44
Editor-Save.php
Normal 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
70
Editor.php
Normal 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
BIN
Screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
60
Viewer.php
Normal file
60
Viewer.php
Normal 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
16
db.php.sample
Normal 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
16
index.html
Normal 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
1
vendor/css/app.css
vendored
Normal 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
52
vendor/css/reset.css
vendored
Normal 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
18
vendor/js/picture-annotation-chunk-vendors.min.js
vendored
Normal 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
1
vendor/js/picture-annotation-chunk-vendors.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
vendor/js/picture-annotation.min.js
vendored
Normal file
2
vendor/js/picture-annotation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
vendor/js/picture-annotation.min.js.map
vendored
Normal file
1
vendor/js/picture-annotation.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
21
vendor/picture-annotation_LICENSE
vendored
Normal file
21
vendor/picture-annotation_LICENSE
vendored
Normal 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.
|
||||
Reference in New Issue
Block a user