staticFabric.html 12.3 KB
Newer Older
bbaer's avatar
bbaer committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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">
bbaer's avatar
bbaer committed
41
42
43
44
45
            <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>
bbaer's avatar
bbaer committed
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
        </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>