Configure Webpack dev server for standalone JS development.
--- a/README.md Mon Feb 06 11:50:20 2017 +0100
+++ b/README.md Mon Feb 06 12:10:13 2017 +0100
@@ -39,6 +39,14 @@
```
If `JS_DEV_MODE` is set to `True`, the Webpack dev server should be started.
+- To serve the annotator on a standalone page using Webpack dev server
+
+```
+npm run standalone
+```
+
+Go to `http://localhost:8001/webpack-dev-server/`. The page will reload by itself when the JS/CSS code is changed.
+
#### Django project setup
- Copy iconolab/src/settings/dev.py.tmpl into iconolab/src/settings/dev.py, adapt content to configuration
--- a/package.json Mon Feb 06 11:50:20 2017 +0100
+++ b/package.json Mon Feb 06 12:10:13 2017 +0100
@@ -6,7 +6,8 @@
"scripts": {
"start": "webpack --progress --colors --watch",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
- "watch": "webpack-dev-server"
+ "watch": "webpack-dev-server",
+ "standalone": "webpack-dev-server --content-base src_js/iconolab-bundle/"
},
"dependencies": {
"bootstrap": "^3.3.6",
Binary file src_js/iconolab-bundle/img/image.jpg has changed
Binary file src_js/iconolab-bundle/img/main-image.jpg has changed
Binary file src_js/iconolab-bundle/img/small-image.jpg has changed
--- a/src_js/iconolab-bundle/index.html Mon Feb 06 11:50:20 2017 +0100
+++ b/src_js/iconolab-bundle/index.html Mon Feb 06 12:10:13 2017 +0100
@@ -3,12 +3,86 @@
<head>
<meta charset="utf-8">
<title>iconolab-bundle</title>
+ <link rel="stylesheet" href="/static/iconolab/css/iconolab.css">
+ <style>
+ body {
+ margin-top: 40px;
+ }
+ </style>
</head>
<body>
- <div id="AppContainer">
- <cutout></cutout>
- <typeahead></typeahead>
- </div>
- <script src="dist/iconolab.js"></script>
+ <div class="container">
+ <div id="drawing-zone" class="row">
+ <div v-show='!formView' style="display:none" class="editor-wrapper col-md-12">
+ <div class="col-md-12 no-padding">
+ <p @click="cancel" class="pull-right btn btn-default btn-sm"><i class="fa fa-close"></i> Annuler</p>
+ </div>
+ <div class='col-md-2'>
+ <ul class="form-drawing-wrapper list-inline">
+ <p class='form-drawing pullright'><strong>Type de dessin</strong></p>
+ <li @click="setDrawingMode('RECT')" v-bind:class="{ 'selected': isRect }" class='pull-md-right drawingModeBtn'>Rect.</li>
+ <li @click="setDrawingMode('FREE')" v-bind:class="{ 'selected': !isRect }" class='pull-md-right drawingModeBtn'>Libre</li>
+ </ul>
+
+ <zoomview ref="zoomview" :image-url="'img/small-image.jpg'" :image-width="100" :image-height="100">
+ </zoomview>
+
+ <ul class='form-drawing-wrapper list-inline'>
+ <p class='form-drawing pullright'><strong>Actions</strong></p>
+ <li @click="clear" class='pull-md-right drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li>
+ <li id="confirm-fragment-button" @click="showForm" class='pull-md-right drawingModeBtn infos info'><i class='fa fa-plus'></i> Valider</li>
+ </ul>
+ </div>
+ <div class="col-md-10">
+ <div ref="image" id="iconolab-image-wrapper">
+ <svg class="cut-canvas" width="850" height="850">
+ <image class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/main-image.jpg" x="0" y="0"
+ width="6208" height="4688"></image>
+ <path class="image-path" d=""></path>
+ </svg>
+ </div>
+ </div>
+ </div>
+ <div v-show="formView" class="col-md-12">
+ <div class="col-md-6">
+ <div class="small-image-wrapper" style="position: relative">
+ <svg ref="smallSvgWrapper" width="477" height="360" version="1.1">
+ <image ref="smallImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/image.jpg" x="0" y="0" width="477" height="360"></image>
+ <defs>
+ <mask id="smallImage">
+ <rect x="0" y="0" width="477" height="360" fill="white"/>
+ <g v-bind:transform="transformMatrix">
+ <path ref="currentPath" v-bind:d="fragmentPath"></path>
+ </g>
+ </mask>
+ </defs>
+ <g v-show="!displayMask" v-bind:transform="transformMatrix">
+ <path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
+ </g>
+ <rect v-show="displayMask" ref="smallMask" x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="477" height="360"></rect>
+ </svg>
+ <svg style="display:none" ref="zoomSvg" width="477" height="360" version="1.1">
+ <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/image.jpg" x="0" y="0" preserveAspectRatio="none" width="477" height="360"></image>
+ <g v-bind:transform="transformMatrix">
+ <path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
+ </g>
+ </svg>
+ </div>
+ <ul class="list-inline list-unstyled">
+ <li @click="showEditor" class="showPointer btn btn-default btn-sm"> <i class='fa fa-edit'></i> Sélectionner le détail</li>
+ <li v-show="!displayMask" @click="highLightZone" class="showPointer show-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Afficher la zone</li>
+ <li v-show="displayMask" @click="highLightZone" class="showPointer hide-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Masquer la zone</li>
+ <li class="zoom-link btn btn-default btn-sm" v-if="canZoom" @click="zoom('in')"><i class="fa fa-zoom-in"></i>Zoomer</li>
+ <li class="zoom-link btn btn-default btn-sm" v-if="!canZoom" @click="zoom('out')"><i class="fa fa-zoom-out"></i>Dezoomer</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <script src="/static/iconolab/js/iconolab.js"></script>
+ <script>
+ iconolab.Cutout.init();
+ </script>
</body>
</html>
