build file structure

waynexia · Nov 17, 2018 · e8bada8 · e8bada8
1 parent eb466f9
commit e8bada8
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 68 deletions.
diff --git a/index.css → assets/common.css b/index.css → assets/common.css
@@ -1,5 +1,6 @@
 h1{
     text-align: center;
+    letter-spacing: 0.3em;
 }
 
 .button{
@@ -29,22 +30,9 @@ h1{
     background-color: rgb(14, 230, 219);
 }
 
-
-.img-container{
-    /*width:;
-    height:200px;
-    left:0;
-    top:0;
-    z-index:-1;*/
-    text-align: center;
-    margin: 10px;
-}
-
-.image{
-    max-width:100%;
-    max-height:100%;
-}
-
-#setting{
-    text-align: center;
-}
+footer{
+    bottom: 3%;
+    left:50%;
+    position: absolute;
+    transform: translate(-50%,-50%);
+}
diff --git a/assets/fromInage.css b/assets/fromInage.css
@@ -0,0 +1,18 @@
+.img-container{
+    /*width:;
+    height:200px;
+    left:0;
+    top:0;
+    z-index:-1;*/
+    text-align: center;
+    margin: 10px;
+}
+
+.image{
+    max-width:100%;
+    max-height:100%;
+}
+
+#setting{
+    text-align: center;
+}
diff --git a/h5range.css → assets/h5range.css b/h5range.css → assets/h5range.css
diff --git a/assets/index.css b/assets/index.css
@@ -0,0 +1,7 @@
+.sections{
+    top:50%;
+    left: 50%;
+    position: absolute;
+    text-align: center;
+    transform: translate(-50%,-50%);
+}
diff --git a/html/fromImage.html b/html/fromImage.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Scatter</title>
+</head>
+<link href="../assets/fromInage.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/h5range.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/common.css" rel="stylesheet" type="text/css"/>
+<body onresize="resize()">
+  <h1>Scatter</h1>
+
+  <div id="setting">
+    <input class="button" id="img_input" type="file" onchange="newImage(this)" accept="image/*"/>
+      <label for="img_input">选择图片</label>
+    <input type="button" id="hide" class="button" value="hide image" onclick="document.getElementById('image').style.display='none';">
+      <label for="hide">隐</label>
+    <input type="button" id="show" class="button" value="show image" onclick="document.getElementById('image').style.display='';">
+      <label for="show">显</label>
+
+    <button class="button" id="save" onclick="saveImage()"></button>
+      <label for="save">保存</label>
+
+    <div class = "setWidth">
+      <input type="range" name="width" min="1" max="100" value="1" onchange="aboutWidth('set',this.value)">
+      调整宽度
+    </div>
+    <div class = "setLength">
+      <input type="range" name="length" min="1" max="100" value="1" onchange="aboutLength('set',this.value)">
+      调整长度
+    </div>
+    <div class = "setSpeed">
+      <input type="range" name="length" min="3" max="20" value="3" onchange="setSpeed(this.value)">
+      调整速度
+    </div>
+  </div>
+
+  <div class="img-container">
+    <img class="image" id="image" onload="load()" />
+  </div>
+  <div class="img-container" id="canvasContainer">
+    <canvas id="Canvas" class="image" ></canvas>
+  </div>
+  <p hidden><canvas id="img_output"></canvas></p>
+
+  <script>
+    // You can also require other files to run in this process 
+    require('./renderer.js')
+    require('./Canvas.js')
+    function load(){
+      //document.getElementById('image').style.display='none';
+      readimg();
+    }
+  </script>
+  <script type="text/javascript" src="../js/Canvas.js" ></script>
+  <script type="text/javascript" src="../js/readImage.js" ></script>
+
+</body>
+
+<footer>
+    <div class="links">
+        <p class="link" id="closeWindow">Close</p>
+    </div>
+
+    <script type="text/javascript" src="../js/window.js" ></script>
+</footer>
+
+</html> 
diff --git a/index.html b/index.html
@@ -1,60 +1,28 @@
 <!DOCTYPE html>
 <html>
 
+<link href="assets/index.css" rel="stylesheet" type="text/css"/>
+<link href="assets/common.css" rel="stylesheet" type="text/css"/>
 <head>
   <meta charset="UTF-8">
   <title>Scatter</title>
-</head>
-<link href="index.css" rel="stylesheet" type="text/css"/>
-<link href="h5range.css" rel="stylesheet" type="text/css"/>
-<body onresize="resize()">
   <h1>Welcome to Scatter</h1>
-
-  <div id="setting">
-    <input class="button" id="img_input" type="file" onchange="newImage(this)" accept="image/*"/>
-      <label for="img_input">选择图片</label>
-    <input type="button" id="hide" class="button" value="hide image" onclick="document.getElementById('image').style.display='none';">
-      <label for="hide">隐</label>
-    <input type="button" id="show" class="button" value="show image" onclick="document.getElementById('image').style.display='';">
-      <label for="show">显</label>
-
-    <button class="button" id="save" onclick="saveImage()"></button>
-      <label for="save">保存</label>
-
-    <div class = "setWidth">
-      <input type="range" name="width" min="1" max="100" value="1" onchange="aboutWidth('set',this.value)">
-      调整宽度
-    </div>
-    <div class = "setLength">
-      <input type="range" name="length" min="1" max="100" value="1" onchange="aboutLength('set',this.value)">
-      调整长度
-    </div>
-    <div class = "setSpeed">
-      <input type="range" name="length" min="3" max="20" value="3" onchange="setSpeed(this.value)">
-      调整速度
+</head>
+<body >
+  <div class="sections">
+    <div class="start">
+      <input type="button" class="button" id="fromImageEntry" onclick="location.href='html/fromImage.html';">
+        <label for="fromImageEntry">从图片绘制</label>
     </div>
   </div>
+</body>
 
-  <div class="img-container">
-    <img class="image" id="image" onload="load()" />
-  </div>
-  <div class="img-container" id="canvasContainer">
-    <canvas id="Canvas" class="image" ></canvas>
+<footer>
+  <div class="links">
+    <p class="link" id="closeWindow">Close</p>
   </div>
-  <p hidden><canvas id="img_output"></canvas></p>
 
-  <script>
-    // You can also require other files to run in this process 
-    require('./renderer.js')
-    require('./Canvas.js')
-    function load(){
-      //document.getElementById('image').style.display='none';
-      readimg();
-    }
-  </script>
-  <script type="text/javascript" src="Canvas.js" ></script>
-  <script type="text/javascript" src="readImage.js" ></script>
-
-</body>
+  <script type="text/javascript" src="js/window.js" ></script>
+</footer>
 
 </html> 
diff --git a/Canvas.js → js/Canvas.js b/Canvas.js → js/Canvas.js
diff --git a/readImage.js → js/readImage.js b/readImage.js → js/readImage.js
@@ -1,4 +1,3 @@
-
 function newImage(image){
     var file = image.files[0];
 

diff --git a/js/window.js b/js/window.js
@@ -0,0 +1,6 @@
+const remote = require('electron').remote;
+
+document.getElementById("closeWindow").addEventListener("click", function (e) {
+    var window = remote.getCurrentWindow();
+    window.close();
+}); 
diff --git a/main.js b/main.js
@@ -3,11 +3,11 @@ const {app, BrowserWindow,Menu} = require('electron')
 let mainWindow
 
 function createWindow () {
-  mainWindow = new BrowserWindow({width: 1500, height: 900})
+  mainWindow = new BrowserWindow({width: 1500, height: 900,frame:false})
 
   mainWindow.loadFile('index.html')
 
-  //mainWindow.webContents.openDevTools()
+  mainWindow.webContents.openDevTools()
 
   mainWindow.on('closed', function () {
     mainWindow = null