diff options
| author |  bai
| 2019-03-29 02:14:43 +0000 |
|---|---|---|
| committer | bai
| 2019-03-29 02:14:43 +0000 |
| commit | 95dfe14528663923ca2a88ec928f1d8d9df2402b (patch) | |
| tree | 5bc88d1466957f1aa39043b056bde5c439648022 /static/js/wpaint/test/dev.html | |
| download | weabot-95dfe14528663923ca2a88ec928f1d8d9df2402b.tar.gz weabot-95dfe14528663923ca2a88ec928f1d8d9df2402b.tar.xz weabot-95dfe14528663923ca2a88ec928f1d8d9df2402b.zip | |
Init
Diffstat (limited to 'static/js/wpaint/test/dev.html')
| -rw-r--r-- | static/js/wpaint/test/dev.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/static/js/wpaint/test/dev.html b/static/js/wpaint/test/dev.html new file mode 100644 index 0000000..b9cd1bf --- /dev/null +++ b/static/js/wpaint/test/dev.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width" /> + + <title>Websanova :: wPaint</title> + + <link rel="icon" type="image/vnd.microsoft.icon" href="./demo/img/favicon.ico" /> + <script type="text/javascript" src="../lib/jquery.1.10.2.min.js"></script> +</head> +<body> + + <!-- jQuery UI --> + <script type="text/javascript" src="../lib/jquery.ui.core.1.10.3.min.js"></script> + <script type="text/javascript" src="../lib/jquery.ui.widget.1.10.3.min.js"></script> + <script type="text/javascript" src="../lib/jquery.ui.mouse.1.10.3.min.js"></script> + <script type="text/javascript" src="../lib/jquery.ui.draggable.1.10.3.min.js"></script> + + <!-- wColorPicker --> + <link rel="Stylesheet" type="text/css" href="../lib/wColorPicker.min.css" /> + <script type="text/javascript" src="../lib/wColorPicker.min.js"></script> + + <!-- wPaint --> + <link rel="Stylesheet" type="text/css" href="../src/wPaint.css" /> + <script type="text/javascript" src="../src/wPaint.utils.js"></script> + <script type="text/javascript" src="../src/wPaint.js"></script> + + <!-- wPaint main --> + <script type="text/javascript" src="../plugins/main/src/fillArea.min.js"></script> + <script type="text/javascript" src="../plugins/main/src/wPaint.menu.main.js"></script> + + <!-- wPaint text --> + <script type="text/javascript" src="../plugins/text/src/wPaint.menu.text.js"></script> + + <!-- wPaint shapes --> + <script type="text/javascript" src="../plugins/shapes/src/shapes.min.js"></script> + <script type="text/javascript" src="../plugins/shapes/src/wPaint.menu.main.shapes.js"></script> + + <!-- wPaint file --> + <script type="text/javascript" src="../plugins/file/src/wPaint.menu.main.file.js"></script> + + <div id="wPaint-demo1" style="position:relative; width:500px; height:200px; background-color:#7a7a7a; margin:70px auto 20px auto;"></div> + + <center style="margin-bottom: 50px;"> + <input type="button" value="toggle menu" onclick="console.log($('#wPaint-demo1').wPaint('menuOrientation')); $('#wPaint-demo1').wPaint('menuOrientation', $('#wPaint-demo1').wPaint('menuOrientation') === 'vertical' ? 'horizontal' : 'vertical');"/> + </center> + + <center id="wPaint-img"></center> + + <script type="text/javascript"> + var images = [ + '/test/uploads/wPaint.png', + ]; + + function saveImg(image) { + var _this = this; + + $.ajax({ + type: 'POST', + url: '/test/upload.php', + data: {image: image}, + success: function (resp) { + + // internal function for displaying status messages in the canvas + _this._displayStatus('Image saved successfully'); + + // doesn't have to be json, can be anything + // returned from server after upload as long + // as it contains the path to the image url + // or a base64 encoded png, either will work + resp = $.parseJSON(resp); + + // update images array / object or whatever + // is being used to keep track of the images + // can store path or base64 here (but path is better since it's much smaller) + images.push(resp.img); + + // do something with the image + $('#wPaint-img').append($('<img/>').attr('src', image)); + } + }); + } + + function loadImgBg () { + + // internal function for displaying background images modal + // where images is an array of images (base64 or url path) + // NOTE: that if you can't see the bg image changing it's probably + // becasue the foregroud image is not transparent. + this._showFileModal('bg', images); + } + + function loadImgFg () { + + // internal function for displaying foreground images modal + // where images is an array of images (base64 or url path) + this._showFileModal('fg', images); + } + + function createCallback(cbName) { + return function() { + if (console) { + console.log(cbName, arguments); + } + } + } + + // init wPaint + $('#wPaint-demo1').wPaint({ + menuOffsetLeft: -35, + menuOffsetTop: -50, + saveImg: saveImg, + loadImgBg: loadImgBg, + loadImgFg: loadImgFg, + onShapeDown: createCallback('onShapeDown'), + onShapeUp: createCallback('onShapeUp'), + onShapeMove: createCallback('onShapeDMove') + }); + </script> + +</body> +</html>
\ No newline at end of file |