Static Canvas mockup

8b7a21ee · bbaer · 0d5f954b · 8b7a21ee
Commit 8b7a21ee authored 7 years ago by bbaer
--- a/mockup/staticFabric.html
+++ b/mockup/staticFabric.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="../css/jqx.base.css">
+    <link rel="stylesheet" href="../css/jqx.bootstrap.css">
+    <link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
+    <title>Input Mode Switcher</title>
+</head>
+<body>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-10 ">
+            <div class="btn-toolbar pull-right" role="toolbar">
+                <div class="btn-group" role="group">
+                    <button id="save-button" type="button" class="btn btn-default navbar-btn"><span
+                            class="glyphicon glyphicon-ok"></span></button>
+                    <button id="close-button" type="button" class="btn btn-default navbar-btn"><span
+                            class="glyphicon glyphicon-remove"></span></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
+                            class="glyphicon glyphicon-trash"></span></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
+                            class="glyphicon glyphicon-plus"></span></a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-4">
+            <div class="fabric" data-fabric-json="{&quot;objects&quot;:[{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:494.4,&quot;top&quot;:8.56,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:2.37,&quot;scaleY&quot;:2.37,&quot;angle&quot;:52.59,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f604.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:142,&quot;top&quot;:88,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f642.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:275,&quot;top&quot;:231,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f641.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:100,&quot;top&quot;:198,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60a.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:296,&quot;top&quot;:24,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60d.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;path&quot;,&quot;originX&quot;:&quot;center&quot;,&quot;originY&quot;:&quot;center&quot;,&quot;left&quot;:277.1074807371218,&quot;top&quot;:362.5,&quot;width&quot;:412.21,&quot;height&quot;:3,&quot;fill&quot;:null,&quot;stroke&quot;:&quot;rgba(0,204,255,0.4)&quot;,&quot;strokeWidth&quot;:14,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;round&quot;,&quot;strokeLineJoin&quot;:&quot;round&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;pathOffset&quot;:{&quot;x&quot;:277.1074807371218,&quot;y&quot;:362.5},&quot;path&quot;:[[&quot;M&quot;,482.5,364],[&quot;Q&quot;,482.5,364,483,364],[&quot;Q&quot;,483.5,364,478.75,364],[&quot;Q&quot;,474,364,471,364],[&quot;Q&quot;,468,364,458.5,363.5],[&quot;Q&quot;,449,363,442,363],[&quot;Q&quot;,435,363,430,363],[&quot;Q&quot;,425,363,422.5,363],[&quot;Q&quot;,420,363,415.5,363],[&quot;Q&quot;,411,363,409.5,363],[&quot;Q&quot;,408,363,404.5,363],[&quot;Q&quot;,401,363,399,363],[&quot;Q&quot;,397,363,390,362],[&quot;Q&quot;,383,361,379,361],[&quot;Q&quot;,375,361,372.5,361],[&quot;Q&quot;,370,361,366,361.5],[&quot;Q&quot;,362,362,360,362],[&quot;Q&quot;,358,362,354.5,362],[&quot;Q&quot;,351,362,346.5,362],[&quot;Q&quot;,342,362,340,362],[&quot;Q&quot;,338,362,331.5,362],[&quot;Q&quot;,325,362,322,362],[&quot;Q&quot;,319,362,316.5,362],[&quot;Q&quot;,314,362,311.5,362],[&quot;Q&quot;,309,362,308,362],[&quot;Q&quot;,307,362,303,362],[&quot;Q&quot;,299,362,291.5,362],[&quot;Q&quot;,284,362,275.5,362.5],[&quot;Q&quot;,267,363,260.5,363],[&quot;Q&quot;,254,363,233.5,363],[&quot;Q&quot;,213,363,204.5,363],[&quot;Q&quot;,196,363,191,363],[&quot;Q&quot;,186,363,183,363],[&quot;Q&quot;,180,363,172.5,363],[&quot;Q&quot;,165,363,162,363],[&quot;Q&quot;,159,363,156,363.5],[&quot;Q&quot;,153,364,148.5,364],[&quot;Q&quot;,144,364,142,364],[&quot;Q&quot;,140,364,139,364],[&quot;Q&quot;,138,364,135,363.5],[&quot;Q&quot;,132,363,131,363],[&quot;Q&quot;,130,363,127,363],[&quot;Q&quot;,124,363,117,362.5],[&quot;Q&quot;,110,362,106.5,362],[&quot;Q&quot;,103,362,100.5,362],[&quot;Q&quot;,98,362,97,362],[&quot;Q&quot;,96,362,84,363],[&quot;Q&quot;,72,364,72,363.5],[&quot;Q&quot;,72,363,71.5,363],[&quot;L&quot;,71,363]]}],&quot;backgroundImage&quot;:{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:0,&quot;top&quot;:0,&quot;width&quot;:609,&quot;height&quot;:788,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/mockup/mockData/Scan2a.jpeg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]}}" data-view-only="true" data-background-image="mockData/Scan2a.jpeg"></div>
+            <input id="fabric-output" name="fabric-data" type="hidden">
+        </div>
+    </div>
+</div>
+<script src="../js/jquery.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/fabric.min.js"></script>
+<script src="../js/validator.min.js"></script>
+<script src="../js/jqx-all.js"></script>
+<script src="../js/EventEmitter.min.js"></script>
+<script src="../js/qfq.debug.js"></script>
+<script src="../javascript/src/Plugins/qfq.fabric.js"></script>
+<script type="text/javascript">
+    $(function () {
+        var qfqPage = new QfqNS.QfqPage({
+            tabsId: 'myTabs',
+            formId: 'myForm',
+            submitTo: 'api/' + $("#submitTo").val(),
+            deleteUrl: 'api/' + $("#deleteUrl").val(),
+            fileUploadTo: 'api/' + $("#uploadTo").val(),
+            fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
+        });
+        QfqNS.Log.level = 0;
+        // Just for mockup, init() function called from new QfqNS.Plugin class maybe.
+        var qfqFabric = new QfqNS.Fabric();
+        qfqFabric.initialize($(".fabric"));
+    });
+</script>
+</body>
+</html>
\ No newline at end of file