Update index.html

CanvasTool/templates/index.html

@@ -7,13 +7,14 @@
     <body onwheel="changesize(event);" onmousemove="mousecoordinates(event);">
         <script src="/static/index.js"></script>
         <div id="container" onmouseenter="reset();" style="width: 100%;height: 100%;">
-            
-            <img id="sourceimg" src={{byte_im}} width={{w}} height={{h}} style="visibility: hidden;" style="position: fixed;"/>
-            <canvas id="source" width={{w}} height={{h}} onclick="drawenable();" onmousemove="draw();" ></canvas>
+            <div id="canvascontainer">
+                <img id="sourceimg" src={{byte_im}} width={{w}} height={{h}} style="visibility: hidden;" style="position: fixed;"/>
+                <canvas id="source" width={{w}} height={{h}} onclick="drawenable();" onmousemove="draw();" ></canvas>
+            </div>            
             <div id="moveimglistner" style="position: absolute; width: 100%;height: 100%;top: 0%;left: 0%;" onclick="moveimg(); " onmousemove="grabselector();"></div>
             <div id="selector" onmousemove="selector();" onclick="snapshot();"></div>
             <div id="settings">
-                <div id="moveimg" onclick="moveimgenable();"><p class="txt">Move Image</p></div>
+                <div id="moveimg" onclick="moveimgenablefirst();"><p class="txt">Move Image</p></div>
                 <p id="label" style="position: absolute;top: 30%;left: 34%;">Box Size: </p>
                 <input type="text" id="selectorsize" onchange="changeselectorsize();" size="4">
                 <div id="saveexit" onclick="savejson()"><p class="txt">Save and Exit</p></div>
@@ -26,7 +27,19 @@
                 <input id="clr" type="color" size="3">
                 <input id="inprange" type="range" min="0" max="255" step="1">
                 <div id="lockbox" onclick="lockbox();"><p class="txt">Lock Box To Image</p></div>
+                <div id="lockleft" onclick="lockleft();"><p class="txt">Left</p></div>
+                <div id="lockright" onclick="lockright();"><p class="txt">Right</p></div>
+                <div id="lockbottom" onclick="lockbottom();"><p class="txt">Bottom</p></div>
+                <div id="locktop" onclick="locktop();"><p class="txt">Top</p></div>
                 <div id="resetimg" onclick="resetimg();"><p class="txt">Reset Image</p></div>
+                <label for="openimgadd" id="uploadanotherimg"><p class="icontxt">+</p></label>
+                <input id="openimgadd" type="file">
+                
+            </div>
+            <div id="settings2">
+                <div id="moveimg1"  onclick="moveimgenable();"><p class="txt">Move Image</p></div>
+                <div id="done" onclick="compimage();"><p class="txt">Done</p></div>
+                <label for="openimgadd" id="uploadanotherimg"><p class="icontxt">+</p></label>
             </div>
             <div id="uploadcontainer">
                 <label for="openimg" class="uploadstyle">