From e8bada8476c308b5e97b6cb672c9568d1ab4f6cc Mon Sep 17 00:00:00 2001
From: wayne <i@waynest.com>
Date: Sat, 17 Nov 2018 13:48:23 +0800
Subject: [PATCH] build file structure
---
index.css => assets/common.css | 26 ++++--------
assets/fromInage.css | 18 ++++++++
h5range.css => assets/h5range.css | 0
assets/index.css | 7 ++++
html/fromImage.html | 69 +++++++++++++++++++++++++++++++
index.html | 60 +++++++--------------------
Canvas.js => js/Canvas.js | 0
readImage.js => js/readImage.js | 1 -
js/window.js | 6 +++
main.js | 4 +-
10 files changed, 123 insertions(+), 68 deletions(-)
rename index.css => assets/common.css (69%)
create mode 100644 assets/fromInage.css
rename h5range.css => assets/h5range.css (100%)
create mode 100644 assets/index.css
create mode 100644 html/fromImage.html
rename Canvas.js => js/Canvas.js (100%)
rename readImage.js => js/readImage.js (99%)
create mode 100644 js/window.js
diff --git a/index.css b/assets/common.css
similarity index 69%
rename from index.css
rename to assets/common.css
index a75b53f..d4a4c30 100644
--- a/index.css
+++ b/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%);
+}
\ No newline at end of file
diff --git a/assets/fromInage.css b/assets/fromInage.css
new file mode 100644
index 0000000..dcfcc34
--- /dev/null
+++ 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 b/assets/h5range.css
similarity index 100%
rename from h5range.css
rename to assets/h5range.css
diff --git a/assets/index.css b/assets/index.css
new file mode 100644
index 0000000..5c2fc36
--- /dev/null
+++ b/assets/index.css
@@ -0,0 +1,7 @@
+.sections{
+ top:50%;
+ left: 50%;
+ position: absolute;
+ text-align: center;
+ transform: translate(-50%,-50%);
+}
\ No newline at end of file
diff --git a/html/fromImage.html b/html/fromImage.html
new file mode 100644
index 0000000..5c402f9
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/index.html b/index.html
index 4080732..60f0251 100644
--- 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>
\ No newline at end of file
diff --git a/Canvas.js b/js/Canvas.js
similarity index 100%
rename from Canvas.js
rename to js/Canvas.js
diff --git a/readImage.js b/js/readImage.js
similarity index 99%
rename from readImage.js
rename to js/readImage.js
index 8b100fd..ce64a41 100644
--- a/readImage.js
+++ b/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
new file mode 100644
index 0000000..3d7250f
--- /dev/null
+++ 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();
+});
\ No newline at end of file
diff --git a/main.js b/main.js
index 7b0abb2..cddfc6c 100644
--- 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