aboutsummaryrefslogtreecommitdiff
path: root/static/js/wpaint/test/dev.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/js/wpaint/test/dev.html')
-rw-r--r--static/js/wpaint/test/dev.html123
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