2020-1-capstone-design2 / 2016104137

Go to a project
Toggle navigation Toggle navigation pinning
김예미
44f63a3c 2 parents a986f129 f462be36

Merge branch 'master' of ssh://khuhub.khu.ac.kr:12959/2020-1-capstone-design2/2016104137

Expand all
Inline Side-by-side
Showing 51 changed files with 1815 additions and 8 deletions
......@@ -4,10 +4,8 @@
<component name="GradleSettings">
<option name="linkedExternalProjectsSettings">
<GradleProjectSettings>
<compositeConfiguration>
<compositeBuild compositeDefinitionSource="SCRIPT" />
</compositeConfiguration>
<option name="delegatedBuild" value="false" />
<option name="testRunner" value="PLATFORM" />
<option name="distributionType" value="DEFAULT_WRAPPED" />
<option name="externalProjectPath" value="$PROJECT_DIR$" />
<option name="modules">
......@@ -17,7 +15,6 @@
</set>
</option>
<option name="resolveModulePerSourceSet" value="false" />
<option name="testRunner" value="PLATFORM" />
</GradleProjectSettings>
</option>
</component>
......
.content{
width :100%;
height :100%;
}
.win_top{
width :100%;
height :10%;
float:left;
}
#title{
width :68%;
height :10%;
float:left;
}
#title img{
height: 80px;
width : auto;
margin-left : 20px;
float:left;
}
#title img:hover{
opacity:0.6;
}
#selected-date{
font-size: 10px;
float:left;
font-weight: bold;
margin-top : -10px;
margin-left:17px;
border-bottom: 1px solid #4e73df;
}
#selected-file{
font-size: 10px;
float:left;
font-weight: bold;
margin-top : -10px;
margin-left:70px;
border-bottom: 1px solid #4e73df;
}
#date{
width:28%;
height :15%;
float:left;
vertical-align: middle;
}
p.float_left{
float:left;
}
.results{
width :98%;
height :85%;
position:absolute;
bottom:10px;
left:10px;
text-align: center;
float:left;
border :2px dashed #4e73df;
overflow-y:auto;
}
.photo{
width : 240px;
height : 300px;
border :1px solid #4e73df;
color:black;
float : left;
margin : 5px;
}
.top{
width:240px;
height:240px;
}
.top img{
width:100%;
height:100%;
object-fit:contain;
}
.bottom{
width:240px;
height:60px;
}
.name{
width : 200px;
height:60px;
float : left;
}
.check{
width : 40px;
height:60px;
float : left;
}
.check input{
width:20px;
height :20px;
margin-top:20px;
margin-right:10px;
border: 2px solid #bcbcbc;
}
.check input:checked{
background-color: #4e73df;
}
#start_date{
border: 1px solid #4e73df;
background-color: white;
line-height: 1;
font-size: 17px;
width: 200px;
height :50px;
padding:10px 15px;
display: block;
box-sizing: border-box;
border-radius: 60px;
color: dimgray;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left: 10px;
}
#end_date{
border: 1px solid #4e73df;
background-color: white;
line-height: 1;
font-size: 17px;
width: 200px;
height :50px;
padding:10px 15px;
display: block;
box-sizing: border-box;
border-radius: 60px;
color: dimgray;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left: 10px;
}
#select{
border: 1px solid #4e73df;
background-color: #4e73df;
line-height: 1;
font-size: 17px;
width: 135px;
height :50px;
padding:10px 15px;
display: block;
box-sizing: border-box;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left: 10px;
}
#select:hover{
background-color: white;
color: #4e73df;
}
#submit{
border: 1px solid #4e73df;
background-color: #4e73df;
line-height: 1;
font-size: 17px;
width: 100px;
height :50px;
padding:10px 15px;
display: block;
box-sizing: border-box;
border-radius: 60px;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left: 10px;
}
#submit:hover{
background-color: white;
color: #4e73df;
}
#save_photo{
border: 1px solid #4e73df;
background-color: #4e73df;
line-height: 1;
font-size: 17px;
width: 135px;
height :50px;
padding:10px 15px;
display: block;
box-sizing: border-box;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left: 10px;
visibility: visible;
}
#save_photo:hover{
background-color: white;
color: #4e73df;
}
#closeBtn {
border: 1px solid #4e73df;
background-color: #4e73df;
line-height: 1;
font-size: 25px;
width: 50px;
height :50px;
padding:10px 15px;
display: block;
box-sizing: border-box;
border-radius: 60px;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left: 5px;
}
#closeBtn:hover{
background-color: white;
color: #4e73df;
}
.content{
width :100%;
height :100%;
}
.win_top{
width :100%;
height :10%;
float:left;
}
#title{
width :68%;
height :10%;
float:left;
}
#title img{
height: 80px;
width : auto;
margin-left : 20px;
float:left;
}
#title img:hover{
opacity :0.6;
}
#date{
width:28%;
height :15%;
float:left;
vertical-align: middle;
}
p.float_left{
float:left;
}
.results{
width :98%;
height :85%;
position:absolute;
bottom:10px;
left:10px;
text-align: center;
float:left;
overflow-y:auto;
border : 2px solid #4e73df
}
#image{
float: left;
filter:blur(5px);
margin:5px;
}
#image:hover{
opacity: 0.8;
}
#detect{
border: 1px solid dimgray;
background-color: dimgray;
line-height: 1;
font-size: 17px;
width: 200px;
height :40px;
padding:10px 15px;
display: block;
box-sizing: border-box;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: absolute;
top:4%;
right:5%;
z-index: 1;
margin-top: 10px;
}
#detect:hover{
background-color: white;
color: dimgray;
}
\ No newline at end of file
.all{
width :100%;
height :100%;
}
.top{
width :100%;
height :10%;
float:left;
}
.title{
width :70%;
height :10%;
float:left;
}
.title img{
height: 80px;
width : auto;
margin-left : 20px;
float:left;
}.title img:hover{
opacity:0.6;
}
.content{
width :100%;
height :90%;
}
p.float_left{
float:left;
}
#explanation{
width:35%;
height:27.5%;
position: absolute;
right: 2%;
bottom: 55%;
text-align: center;
}
#explanation h1{
margin-top:12%;
color:dimgray;
}
#map {
width:35%;
height:50%;
clear:both;
border:solid 1px #4e73df;
position: absolute;
right: 2%;
bottom: 3%;
}
#main{
width:58%;
height:78%;
border:solid 5px #4e73df;
position: absolute;
left: 2%;
bottom : 3%;
overflow-y:auto;
background-color: #7FB2F0;
}
.p{
width:295px;
height:295px;
float : left;
margin :1px;
background-color: #4e73df;
}
.p img{
width:100%;
height:100%;
object-fit:contain;
}
.ex{
width: 147.5px;
height:147.5px;
float : left;
margin :0.5px;
background-color: #4e73df;
}
.ex img{
width:100%;
height:100%;
object-fit:contain;
}
\ No newline at end of file
.all{
width :100%;
height :100%;
}
.top{
width :100%;
height :15%;
float:left;
}
.title{
width :80%;
height :10%;
float:left;
}
.title img{
height: 80px;
width : auto;
margin-left : 20px;
float:left;
}
.title img:hover{
opacity:0.6;
}
#btn_area{
width:20%;
height :15%;
float:left;
vertical-align: middle;
}
#start{
border: 1px solid #4e73df;
background-color: #4e73df;
line-height: 1;
font-size: 17px;
width: 150px;
height :40px;
padding:10px 15px;
display: block;
box-sizing: border-box;
border-radius: 60px;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-top: -5px;
}
#next{
border: 1px solid #4e73df;
background-color: #4e73df;
line-height: 1;
font-size: 14px;
width: 150px;
height :40px;
padding:10px 15px;
display: block;
box-sizing: border-box;
border-radius: 60px;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
visibility: hidden;
margin-top: -5px;
}
#start:hover{
background-color: white;
color: #4e73df;
}
p.float_left{
float:left;
}
.chart_cont{
position:absolute;
height:79%;
width:27%;
left : 3%;
bottom :5%;
overflow-y: auto;
float:left;
border:2px solid #4e73df;
}
.chart-container{
position: relative;
height:600px;
width:280px;
}
#content{
width :65%;
height :79%;
position: absolute;
right : 3%;
bottom:5%;
overflow-y: auto;
float:left;
border:2px solid #4e73df;
}
.photo {
width: 300px;
height: 220px;
margin : 5px;
float:left;
border:1px dashed #4e73df;
}
.p_title{
width: 300px;
height: 20px;
float:left;
text-align: center;
}
.p_title p{
font-size : 13px;
color: black;
font-weight: bold;
margin-top: -0.5px;
}
.image{
height : 200px;
width : 200px;
text-align: center;
float:left;
}
.image img{
width:100%;
height:100%;
object-fit:contain;
}
.keyword{
width :99%;
height: 15%;
float:left;
text-align: center;
}
.k_content{
width :99%;
height: 85%;
float:left;
text-align: center;
overflow-y: auto;
}
.keyword_photo{
float:left;
border:1px dashed #4e73df;
height : 200px;
width : 200px;
text-align: center;
margin : 10px;
}
.keyword_photo img{
width:100%;
height:100%;
object-fit:contain;
}
.labels{
width :100px;
height : 200px;
float :left;
vertical-align: middle;
}
.labels p{
font-size : 10px;
margin-top: -0.2px;
margin-bottom: -0.2px;
margin-left :2px;
color: navy;
}
\ No newline at end of file
.div_root{
width:100%;
height:100%;
margin:0px;
}
.div_top{
width:100%;
height:20%;
float:left;
}
.div_top img{
margin-left: 20px;
height:120px;
float:left;
}
.div_top img:hover{
opacity: 0.6;
}
.div_content{
width : 100%;
height: 80%;
float:left;
}
.div_con_block{
width:80%;
height:25%;
float:left;
margin-left: 50px;
}
.div_con_block p{
margin-left : 30px;
margin-top: -10px;
color : dimgray;
}
.div_con_block img{
padding :20px;
height : 100px;
}
.div_con_block img:hover{
opacity: 0.5;
}
.fa-chevron-left{
margin-top: 10px;
margin-left :5px;
margin-right : 5px;
color: dimgray;
}
.fa-chevron-left:hover{
opacity: 0.5;
}
.float_left{
float :left;
}
#image{
font-size: 15px;
height :30px;
width : 300px;
float: left;
margin:20px;
border: 1px solid dimgray;
background-color: dimgray;
}
.all{
width :100%;
height :100%;
}
.top{
width :100%;
height :15%;
float:left;
}
#title{
width :60%;
height :15%;
float:left;
}
#title img{
height: 100px;
width : auto;
margin-left : 20px;
float:left;
}#title img:hover{
opacity: 0.6;
}
#btn_area{
width:40%;
height :15%;
float:left;
vertical-align: middle;
}
#start{
border: 1px solid dimgray;
background-color: dimgray;
line-height: 1;
font-size: 17px;
width: 150px;
height :40px;
padding:10px 15px;
display: block;
box-sizing: border-box;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left : 20px;
}
#start:hover{
background-color: white;
color: dimgray;
}
button.p_btn{
border: 1px solid dimgray;
background-color: dimgray;
line-height: 1;
font-size: 17px;
width: 50px;
height :50px;
padding:10px 15px;
display: block;
box-sizing: border-box;
color: white;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
button.p_btn:hover{
background-color: white;
color: dimgray;
}
#date{
border: 1px solid dimgray;
background-color: white;
line-height: 1;
font-size: 17px;
width: 200px;
height :40px;
padding:10px 15px;
display: block;
box-sizing: border-box;
border-radius: 60px;
color: dimgray;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
margin-left: 10px;
}
p.float_left{
float:left;
}
p.float_right{
float:right;
}
#content{
width :90%;
height :80%;
overflow-y: auto;
position: absolute;
left : 5%;
bottom:5%;
background-color: #FFFFFF;
}
/* -----------------------------------------------
* Timeline
* --------------------------------------------- */
.main-timeline{
font-family: 'Roboto Condensed', sans-serif;
position: relative;
}
.main-timeline:after{
content: '';
display: block;
clear: both;
}
.main-timeline:before{
content: '';
height: 100%;
width: 7px;
border-left: 7px dashed #999;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 0;
}
.main-timeline .timeline{
width: 45%;
padding: 0 0 0 40px;
margin: 0 0 0 20px;
float: right;
position: relative;
}
.main-timeline .timeline:after{
content: '';
background-color: #6044F0;
height: 35px;
width: 40px;
position: absolute;
left: 0;
top: 60px;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.main-timeline .timeline-content{
color: #555;
text-align: center;
padding: 35px 40px 35px;
display: block;
position: relative;
z-index: 1;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-content:before,
.main-timeline .timeline-content:after{
content: '';
background-color: #fff;
border-radius: 50px 0;
box-shadow: 0 0 10px -3px rgba(0,0,0,0.5);
position: absolute;
left: 10px;
bottom: 10px;
right: 0;
top: 0;
z-index: -1;
}
.main-timeline .timeline-content:after{
background-color: transparent;
box-shadow: none;
border: 2px solid #6044F0;
left: 0;
bottom: 0;
right: 10px;
top: 10px;
}
.main-timeline .timeline-icon{
color: #fff;
background-color: #000;
font-size: 25px;
text-align: center;
line-height: 50px;
height: 50px;
width: 50px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.main-timeline .title{
color: #6044F0;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 5px;
}
.main-timeline .description{
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
margin: 0 0 0 10px;
}
.main-timeline .timeline:nth-child(even){
float: left;
padding: 0 40px 0 0;
margin: 0 20px 0 0;
}
.main-timeline .timeline:nth-child(even):after{
transform: rotateY(180deg);
left: auto;
right: 0;
}
.main-timeline .timeline:nth-child(even) .timeline-content:before,
.main-timeline .timeline:nth-child(even) .timeline-content:after{
border-radius: 0 50px;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
left: auto;
right: 0;
}
.main-timeline .timeline:nth-child(4n+2):after{ background-color: #FF3754; }
.main-timeline .timeline:nth-child(4n+2) .timeline-content:after{ border-color: #FF3754; }
.main-timeline .timeline:nth-child(4n+2) .title{ color: #FF3754; }
.main-timeline .timeline:nth-child(4n+3):after{ background-color: #01C1E1; }
.main-timeline .timeline:nth-child(4n+3) .timeline-content:after{ border-color: #01C1E1; }
.main-timeline .timeline:nth-child(4n+3) .title{ color: #01C1E1; }
.main-timeline .timeline:nth-child(4n+4):after{ background-color: #10B175; }
.main-timeline .timeline:nth-child(4n+4) .timeline-content:after{ border-color: #10B175; }
.main-timeline .timeline:nth-child(4n+4) .title{ color: #10B175; }
@media screen and (max-width:767px){
.main-timeline:before{ display: none; }
.main-timeline .timeline,
.main-timeline .timeline:nth-child(even){
width: 100%;
padding: 0 0 35px 0;
margin: 0;
}
.main-timeline .timeline:last-child{ padding: 0; }
.main-timeline .timeline:after,
.main-timeline .timeline:nth-child(even):after{
transform: translateX(-50%) rotate(-90deg);
left: 50%;
top: auto;
bottom: 0;
}
.main-timeline .timeline:last-child:after{ display: none; }
}
@media screen and (max-width:576px){
.main-timeline .title{ font-size: 18px; }
}
p.text-right{
text-align: right;
}
.shadow-textarea textarea.form-control::placeholder {
font-weight: 300;
}
.shadow-textarea textarea.form-control {
padding-left: 0.8rem;
padding-right: 0.8rem;
width:80%;
margin-top: 10px;
margin-left:5px;
}
.fa-chevron-left{
margin-left :5px;
margin-right : 5px;
color: dimgray;
}
.fa-chevron-left:hover{
opacity: 0.5;
}
\ No newline at end of file
const { app, BrowserWindow, ipcMain } = require('electron')
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const path = require('path')
const url = require('url')
const vision = require('@google-cloud/vision');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
......@@ -52,6 +53,153 @@ app.on('activate', ()=>{
ipcMain.on("device-name", (e, arg) => {
win.webContents.send("device", arg);
});
//photos taken in selected dates
ipcMain.on("photo", (e, arg) => {
win.webContents.send("select_result", arg);
});
//open-file-dialog
ipcMain.on('open-file-dialog', async (event) => {
const result = await dialog.showOpenDialog({
properties: ['openFile', 'openDirectory']
})
win.webContents.send('selected-directory',result);
})
//console 출력
ipcMain.on('print', (e, arg)=>{
console.log(arg);
})
//internet connect 확인
/**
* const check = require('check-internet-connected');
const config = {
timeout : 5000,
retries : 3,
domain : 'apple.com'
}
check(config)
.then(()=>{
console.log("Connection available");
}).catch((err)=>{
console.log("No connection", err);
});
*/
//이미지 라벨
var label_result = new Array();
ipcMain.on('image_labels', async (event, list) =>{
label_result = [];
await Promise.all(list.map(async (element)=>{
var path = new String();
path = element.path;
var num = path.indexOf("DCIM");
var folder_path = new String();
folder_path = "./photos/" + path.substring(num);
await quickstart(folder_path, element.display_name);
}))
//라벨 검출 결과 전송
win.webContents.send('labels_result',label_result);
console.log(label_result.length);
})
async function quickstart(path, name) {
const client = new vision.ImageAnnotatorClient();
// Performs label detection on the image file
const [result] = await client.labelDetection(path);
const labels = result.labelAnnotations;
path = '../.'+path;
var content = {path : path, name : name, labels : labels}
label_result.push(content);
}
\ No newline at end of file
//detext unsafe image
let detect_result = new Array();
ipcMain.on("detect", async (e, result)=>{
detect_result = [];
await Promise.all(result.map(async (element)=>{
var path = new String();
path = element.path;
var num = path.indexOf("DCIM");
var folder_path = new String();
folder_path = "./photos/" + path.substring(num);
await detect(folder_path, element.display_name);
}))
win.webContents.send('detect_result', detect_result);
console.log("detect_success");
});
async function detect(path, name){
//const vision = require('@google-cloud/vision');
// Creates a client
const client = new vision.ImageAnnotatorClient();
// Performs safe search detection on the local file
const [result] = await client.safeSearchDetection(path);
const detections = result.safeSearchAnnotation;
var adult_sum = 0;
var racy_sum = 0;
if(detections.adult == "VERY_LIKELY"){
adult_sum = 100;
}
else if(detections.adult == "LIKELY"){
adult_sum = 80;
}
else if(detections.adult == "POSSIBLE"){
adult_sum = 60;
}
else if(detections.adult == "UNLIKELY"){
adult_sum = 40;
}
else if(detections.adult == "VERY_UNLIKELY"){
adult_sum = 20;
}
else{
adult_sum = 0;
}
if(detections.racy == "VERY_LIKELY"){
racy_sum = 100;
}
else if(detections.racy == "LIKELY"){
racy_sum = 80;
}
else if(detections.racy == "POSSIBLE"){
racy_sum = 60;
}
else if(detections.racy == "UNLIKELY"){
racy_sum = 40;
}
else if(detections.racy == "VERY_UNLIKELY"){
racy_sum = 20;
}
else{
racy_sum = 0;
}
var score = (adult_sum + racy_sum) / 2;
path = '../.'+path;
if(score>=60){
var content = {path : path, name : name, score : score};
detect_result.push(content);
}
}
ipcMain.on('open-error-dialog', (event) => {
dialog.showErrorBox('detected unsafe contents', '당신의 휴대폰에서 유해한 사진을 발견했습니다!')
})
//이전에 사용한 photos 폴더 삭제
var rimraf = require("rimraf");
rimraf("./photos", function(){console.log("")});
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -12,12 +12,15 @@
"electron": "^8.2.0"
},
"dependencies": {
"@google-cloud/vision": "^2.0.0",
"appium-adb": "^7.27.1",
"chart.js": "^2.9.3",
"jQuery": "^1.7.4",
"jquery": "^3.5.0",
"mysql": "^2.18.1",
"node-adb": "^0.1.6",
"python-shell": "^2.0.0",
"rimraf": "^3.0.2",
"socket.io": "^2.3.0"
}
}
......
......@@ -32,12 +32,12 @@
</div>
<div id ="menu">
<div id="btn_group">
<button id="btn" onclick="location.href='menu5.html'">menu5</button>
<button id="btn" onclick="location.href='photo_classification/photo_main.html'">menu5</button>
</div>
</div>
<div id ="menu">
<div id="btn_group">
<button id="btn" onclick="location.href='menu6.html'">menu6</button>
<button id="btn" onclick="location.href='timeline.html'">menu6</button>
</div>
</div>
</div>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<sc>, initial-scale=1.0">
<link rel="Stylesheet" href="../../assets/css/p_date.css">
<title>Photo classification by date</title>
</head>
<body>
<div class="content">
<div class="win_top">
<div id="title">
<img src="../../assets/img/photo_date.png" onclick="history.go(-1)" class="float_left" title="Back to photo menu">
</div>
<div id="date">
<p class="float_left"><button id="select">Select date</button></p>
<p class="float_left"><button id="save_photo">Save photo</button></p>
<p class="float_left" id="selected-date"></p>
<p class="float_left" id="selected-file"></p>
</div>
</div>
<div class="results" id="r">
<h1 style="margin-top:300px; color:dimgray">날짜를 선택해 해당 기간동안의 사진을 확인하세요</h1>
</div>
</div>
<script type="text/javascript">
const { ipcRenderer } = require("electron");
const { BrowserWindow } = require("electron").remote;
var exec = require('child_process').exec, child;
const btn = document.getElementById("select");
const saveBtn = document.getElementById("save_photo");
btn.addEventListener("click", () => {
win = new BrowserWindow({
width: 630,
height: 100,
frame: false,
alwaysOnTop: true,
webPreferences: {
nodeIntegration: true
}
});
//win.webContents.openDevTools();
win.on("close", () => {
win = null;
});
win.loadFile("./src/photo_classification/select_date.html");
win.show();
});
saveBtn.addEventListener("click", () =>{
var checkbox = document.getElementsByName('save');
ipcRenderer.send('open-file-dialog');
})
ipcRenderer.on('selected-directory', (event, path) => {
var parent_dir = new String();
var num = __dirname.indexOf("src");
parent_dir = __dirname.substring(0, num);
if(!path.canceled){
var checkbox = document.getElementsByName('save');
checkbox.forEach(element => {
if(element.checked){
var loc = element.value.indexOf("photos");
var imgpath = new String();
imgpath = parent_dir+element.value.substring(loc).replace(/\//g,'\\').replace(/#%&!/g, " ");
var command = 'copy "'+imgpath+'" '+path.filePaths[0];
//document.getElementById('selected-file').innerHTML = command;
exec(command, (error, stdout, stderr)=>{
if(!error){
document.getElementById('selected-file').innerHTML = "saved!";
}
});
}
})
}
})
let result;
ipcRenderer.on("select_result", (e, arg) => {
result = arg.result;
document.getElementById('selected-date').innerHTML = arg.start + " - " +arg.end;
print_photo();
});
function print_photo(){
const results = document.getElementById('r');
var myHTML = '';
for(var i = 0; i< result.length; i++){
var path = new String();
path = result[i].path;
var num = path.indexOf("DCIM");
var folder_path = new String();
folder_path = "../../photos/"+ path.substring(num);
myHTML += '<div class="photo"><div class="top"><img id="p" src="'+folder_path
+'"></div><div class="bottom"><div class="name"><p id="title">'+result[i].display_name+'</p></div>';
var replacement = folder_path.replace(/ /g, "#%&!");
myHTML +="<div class='check'><input type='checkbox' name='save' value="+replacement+"></div></div></div>"
}
results.innerHTML = myHTML;
saveBtn.style.visibility = "visible";
};
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<sc>, initial-scale=1.0">
<script src="https://kit.fontawesome.com/e6f667a852.js" crossorigin="anonymous"></script>
<link rel="Stylesheet" href="../../assets/css/p_detect.css">
<title></title>
</head>
<body>
<div class="content">
<div class="win_top">
<div id="title">
<img src="../../assets/img/Detect unsafe Image.png" onclick="history.go(-1)" class="float_left" title="Back to photo menu">
</div>
<div id="date">
<p class="float_left"><button id="detect">Start</button></p>
</div>
</div>
<div class="results" id="r">
<h1 style="margin-top:300px; color:dimgray">유해한 컨텐츠를 검사해 보세요</h1>
</div>
</div>
</body>
<script src="p_detect.js"></script>
</html>
\ No newline at end of file
var exec = require('child_process').exec, child;
const { ipcRenderer } = require("electron");
const dd = document.getElementById('detect');
const r = document.getElementById('r');
var mysql = require('mysql');
var connection = mysql.createConnection({
user:'root',
password:'1234',
database : 'dataextraction'
})
dd.addEventListener("click", ()=>{
connection.connect();
connection.query('SELECT * FROM photo', function(error, results, fields){
if(error){
}
else{
r.innerHTML = '<i class="fas fa-spinner fa-3x fa-spin" style="color:dimgray; position: absolute; bottom:47%; right:47%;"></i>';
ipcRenderer.send("detect", results);
}
});
});
ipcRenderer.on('detect_result', (e, detect_result)=>{
if(detect_result.length >0){
r.style.border ="2px solid red";
var myhtml = "<h1 style='font-size:1.5em'>유해 컨텐츠 "+detect_result.length+" 개 발견</h1>";
detect_result.forEach(element => {
myhtml+="<img src='"+element.path+"' id='image' onclick='showImage()' title='"+element.path+"'width=300px height=300px>";
});
r.innerHTML = myhtml;
ipcRenderer.send('open-error-dialog')
}
else{
r.innerHTML = "<h1 style='margin-top:300px; color:dimgray'>유해 컨텐츠 없음</h1>";
}
});
function showImage(){
var image = document.getElementById('image');
var url=image.getAttribute('src');
var imgWin = window.open(url,url, "width=500px, height=500px");
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<sc>, initial-scale=1.0">
<link rel="Stylesheet" href="../../assets/css/p_loc.css">
<title>Photo classification by location</title>
<style></style>
</head>
<body>
<div class='all'>
<div class='top'>
<div class='title'>
<img src="../../assets/img/photo_loc.png" onclick="history.go(-1)" class="float_left" title="Back to photo menu">
</div>
</div>
<div class='content'>
<div id="main">
<h1 style="margin-top:250px; color:dimgray; text-align: center;">지도의 마크를 클릭해 해당 사진과 인근 위치에서 찍힌 사진을 확인하세요.</h1>
</div>
<div id="explanation">
</div>
<div id="map"></div>
</div>
</div>
<script type=text/javascript>
var mysql = require('mysql');
//mysql 연동
var connection = mysql.createConnection({
user:'root',
password:'1234',
database : 'dataextraction'
})
connection.connect();
var list;
function initMap() {
connection.query('SELECT * FROM photo where latitude is not null', function(error, results, fields){
if(error){
}
else{
list = results;
var first_p = {lat: Number(list[0].latitude), lng: Number(list[0].longitude)};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: first_p
});
list.forEach(element => {
var latlng = {lat : Number(element.latitude), lng : Number(element.longitude)};
var time = new Date(Number(element.date_added)*1000);
var path = new String();
path = element.path;
var num = path.indexOf("DCIM");
var folder_path = new String();
folder_path = "../../photos/" + path.substring(num);
var address = new String();
var geocoder = new google.maps.Geocoder;
geocoder.geocode({'location' : latlng}, function(results, status){
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: element.display_name
});
if(status == 'OK'){
if(results[0]){
address = results[0].formatted_address;
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+element.title+'</h1>'+
'<div id="bodyContent">'+
'<p><b>'+element.display_name+'</b></p><p><b>'+time+'</b </p><p>'+
results[0].formatted_address+'</p></div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
marker.addListener('click', function() {
infowindow.open(map, marker);
p_group(element);
});
}
else{
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+element.title+'</h1>'+
'<div id="bodyContent">'+
'<p><b>'+element.display_name+'</b></p><p><b>'+time+'</b </p><p>('+
latlng.lat+','+latlng.lng+'</p></div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
marker.addListener('click', function() {
infowindow.open(map, marker);
p_group(element);
});
}
}
else{
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+element.title+'</h1>'+
'<div id="bodyContent">'+
'<p><b>'+element.display_name+'</b></p><p><b>'+time+'</b </p><p>('+
latlng.lat+','+latlng.lng+')</p></div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
marker.addListener('click', function() {
infowindow.open(map, marker);
p_group(element);
});
}
});
});
}
})
}
function p_group(photo){
const main = document.getElementById('main');
var path = new String();
path = photo.path;
var num = path.indexOf("DCIM");
var folder_path = new String();
folder_path = "../../photos/" + path.substring(num);
var myHTML = '';
myHTML += '<div class="p"><img src="'+folder_path+'"></div>';
list.forEach(element=>{
if(element.title != photo.title){
var hor = photo.latitude - Number(element.latitude);
hor *=111;
var ver = photo.longitude - Number(element.longitude);
ver *=88;
if(((hor*hor) + (ver*ver))<=25){
main.innerHTML = "<p>Bye</p>"
var path2 = new String();
path2 = element.path;
var num2 = path2.indexOf("DCIM");
var folder_path2 = new String();
folder_path2 = "../../photos/" + path2.substring(num2);
myHTML += '<div class="ex"><img id="ex" src="'+folder_path2+'"></div>';
}
}
});
main.innerHTML = myHTML;
document.getElementById('explanation').innerHTML = "<h1>[ "+photo.display_name+" ]</h1><h1>5km 인근 사진 모음</h1>"
}
</script>
<script async defer
src="http://maps.google.com/maps/api/js?key=API_KEY&callback=initMap&sensor=true">
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<sc>, initial-scale=1.0">
<link rel="Stylesheet" href="../../assets/css/p_ml.css">
<script src="https://kit.fontawesome.com/e6f667a852.js" crossorigin="anonymous"></script>
<title>Photo Analysis by Google vision api</title>
</head>
<body>
<div class="all">
<div class="top">
<div class="title">
<img src="../../assets/img/analysis.png" onclick="history.go(-1)" class="float_left" title="Back to photo menu">
</div>
<div id="btn_area">
<p ><button id="start">Start Analysis</button></p>
<p ><button id="next">Back to all photos</button></p>
</div>
</div>
<div class ="chart_cont">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
<div id="content">
<h1 style="margin-top:250px; color:dimgray; text-align: center;">"Start Analysis" 버튼을 눌러 사진 분석을 시작하세요</h1>
<h2 style="color:dimgray; text-align: center;">(시간이 다소 소요될 수 있습니다)</h2>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="p_ml.js"></script>
</body>
</html>
\ No newline at end of file
const { ipcRenderer } = require("electron");
const { BrowserWindow } = require("electron").remote;
const content = document.getElementById('content');
const btn = document.getElementById('start');
const next = document.getElementById('next');
const Chart = require("chart.js");
const ctx = document.getElementById("chart").getContext('2d');;
var list_length = new Array();
let l_list = new Array();
let p_list = new Array();
var mysql = require('mysql');
var list;
//mysql 연동
var connection = mysql.createConnection({
user:'root',
password:'1234',
database : 'dataextraction'
})
connection.connect();
btn.addEventListener("click", ()=>{
content.innerHTML = '<i class="fas fa-spinner fa-3x fa-spin" style="color:dimgray; position: absolute; bottom:45%; right:45%;"></i>';
connection.query("SELECT * FROM photo" , function(error, results, fields){
if(error){
}
else{
list = results;
ipcRenderer.send('image_labels', list );
}
});
})
var label_name = Array();
var photo_list = Array();
var label_result = Array();
ipcRenderer.on("labels_result", (e, result) => {
var myHTML = '';
label_result = result;
result.forEach(element=>{
myHTML +="<div class='photo'><div class='p_title'><p>"+element.name+"</p></div>"
myHTML += '<div class="image"><img src="'+element.path+'"></div><div class ="labels">';
element.labels.forEach(label=>{
myHTML+='<p> #'+label.description+'</p>';
find_labellist(label.description, element.path);
});
myHTML+='</div></div>';
})
content.innerHTML = myHTML;
make_chart();
});
function find_labellist(label, path){
var idx = label_name.indexOf(label);
if(idx == -1){
label_name.push(label);
photo_list.push([path.toString()]);
}
else{
photo_list[idx].push(path.toString());
}
}
function make_chart(){
for(var i =0; i< photo_list.length; i++){
for(var j = i+1; j <photo_list.length; j++){
if(photo_list[j].length > photo_list[i].length){
var tmp = Array();
tmp = photo_list[i];
photo_list[i] = photo_list[j];
photo_list[j] = tmp;
var str = String();
str = label_name[i];
label_name[i] = label_name[j];
label_name[j] = str;
}
}
}
l_list = label_name;
p_list = photo_list;
myHTML = String();
photo_list.forEach(element => {
list_length.push(element.length);
});
var mychart = new Chart(ctx,{
type: 'horizontalBar',
data :{
labels : label_name.slice(0, 20),
datasets:[{
label : "nums of images",
data : list_length.slice(0, 20),
borderSkipped:'top',
borderWidth :1,
borderColor : '#FCE2A9',
backgroundColor:'#FCE2A9',
hoverBorderWidth: 2,
barPercentage: 0.8,
categoryPercentage:1,
}],
},
options:{
maintainAspectRatio: false,
title: {
display: true,
text: 'PHOTO KEYWORD'
},
scales: {
xAxes: [{
stacked: true,
gridLines:{
offsetGridLines :true,
},
ticks:{
beginAtZero :true
}
}],
yAxes: [{
ticks :{
fontSize : 10
},
stacked: true,
}]
},
tooltips: {
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
borderColor : '#FCE2A9',
backgroundColor:'#FCE2A9',
};
},
labelTextColor: function(tooltipItem, chart) {
return '#FFFFFF';
}
}
},
onClick : function(e){
var activePoints = mychart.getElementsAtEvent(e);
var idx= activePoints[0]._index;
var myHTML = '<div class="keyword"><h1>#'+label_name[idx]+'</h1></div><div class="k_content">';
photo_list[idx].forEach(photo=>{
myHTML += '<div class="keyword_photo"><img src="'+photo+'"></div>';
});
myHTML+="</div>"
document.getElementById("next").style.visibility = "visible";
content.style.overflowY = "hidden";
content.innerHTML = myHTML;
},
layout:{
padding:{
left:0,
right:0,
top:10,
bottom:0,
}
}
}
})
}
next.addEventListener("click", ()=>{
var myHTML = '';
label_result.forEach(element=>{
myHTML +="<div class='photo'><div class='p_title'><p>"+element.name+"</p></div>"
myHTML += '<div class="image"><img src="'+element.path+'"></div><div class ="labels">';
element.labels.forEach(label=>{
myHTML+='<p> #'+label.description+'</p>';
});
myHTML+='</div></div>';
})
content.innerHTML = myHTML;
document.getElementById("next").style.visibility = "hidden";
content.style.overflowY = "auto";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<sc>, initial-scale=1.0">
<link rel="Stylesheet" href="../../assets/css/photo_main.css">
<title>Photo</title>
</head>
<body>
<div class="div_root">
<div class="div_top">
<img src="../../assets/img/Photo.png" onclick="history.go(-1)" title="Back to main menu">
</div>
<div class="div_content">
<div class="div_con_block">
<img src="../../assets/img/photo_date.png" onclick="location.href='p_date.html'" title="날짜로 사진 분류">
</div>
<div class="div_con_block">
<img src="../../assets/img/photo_loc.png" onclick="location.href='p_loc.html'" title="위치로 사진 분류">
</div>
<div class="div_con_block">
<img src="../../assets/img/analysis.png" onclick="location.href='p_ml.html'" title="사진 분석(이미지 키워드 추출)">
</div>
<div class="div_con_block">
<img src="../../assets/img/Detect unsafe Image.png" onclick="location.href='p_detect.html'" title="유해한 이미지 감지">
</div>
</div>
</div>
<script src="photo_main.js"></script>
</body>
</html>
\ No newline at end of file
const {exec} = require('child_process');
const { ipcRenderer } = require("electron");
var fs = require('fs');
var mysql = require('mysql');
//mysql 연동
var connection = mysql.createConnection({
user:'root',
password:'1234',
database : 'dataextraction'
})
var testFolder = './';
fs.readdir(testFolder, function(error, filelist){
const index = filelist.indexOf("photos");
if(index == -1){
photo_extract();
}
else{
ipcRenderer.send("print", "already pulled");
}
})
function photo_extract(){
connection.connect();
connection.query('SELECT path FROM photo', function(error, results, fields){
if(error){
}
if(results.length>0){
var path = new String();
path = results[0].path;
var num = path.indexOf("DCIM");
folder_path = path.substring(0, num+4);
//var folder_path = "/storage/emulated/0/DCIM"; //test용 path
exec("adb pull "+folder_path+" ./photos", (error, stdout, stderr)=>{
if(error){
ipcRenderer.send("print", "휴대폰이 연결되어 있는지 확인");
}
else{
ipcRenderer.send("print", "succes");
}
});
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta name="viewport" content="width=device-width, initial-scale=1, script-src 'self' 'unsafe-inline'" />
<link rel="Stylesheet" media="all" type="text/css" href="bower_components/jquery-mobile-bower/css/jquery.mobile-1.4.5.css" />
<link rel="Stylesheet" href="../../assets/css/p_date.css">
<style type="text/css" media="all">
body { cursor: default; }
</style>
</head>
<body>
<div class="date">
<p class="float_left"><input type="date" id="start_date" ></p>
<p class="float_left"><input type="date" id="end_date" ></p>
<p class="float_left"><button id="submit">Submit</button></p>
<p class="float_left"><button id="closeBtn">X</button></p>
</div>
<script src="select_date.js"></script>
</body>
</html>
\ No newline at end of file
const {remote, ipcRenderer} = require("electron");
const closeBtn = document.getElementById("closeBtn");
closeBtn.addEventListener("click", () => {
let window = remote.getCurrentWindow();
window.close();
});
var mysql = require('mysql');
//mysql 연동
var connection = mysql.createConnection({
user:'root',
password:'1234',
database : 'dataextraction'
})
connection.connect();
//최대 선택 가능 날짜 설정
var today = new Date();
document.getElementById("start_date").max = today.toISOString().substring(0, 10);
document.getElementById("end_date").max = today.toISOString().substring(0, 10);
const btn = document.getElementById("submit");
btn.addEventListener("click", () => {
var start_date = new String(document.getElementById("start_date").value);
var end_date = new String(document.getElementById("end_date").value);
var st = new Date(start_date);
var et = new Date(end_date);
st.setHours(st.getHours() - 9);
et.setHours(et.getHours() + 15);
et.setMilliseconds(et.getMilliseconds() -1);
var sTimestamp =st.getTime();
var eTimestamp =et.getTime();
connection.query('SELECT * FROM photo WHERE date_added > "'+sTimestamp+'" AND date_added <= "'+eTimestamp+'" ORDER BY date_added', function(error, results, fields){
if(error){
}
else{
var arg={
result : results,
start : start_date,
end : end_date
}
ipcRenderer.send(
"photo",
arg
);
let window = remote.getCurrentWindow();
window.close();
}
} )
});
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<sc>, initial-scale=1.0">
<link rel="Stylesheet" href="../assets/css/timeline.css">
<script src="https://kit.fontawesome.com/e6f667a852.js" crossorigin="anonymous"></script>
<title>TimeLine</title>
</head>
<body>
<div class="all">
<div class="top">
<div id="title">
<img src="../assets/img/TimeLine.png" onclick="history.go(-1)" class="float_left" title="Back to main menu">
</div>
<div id="btn_area">
<p class="float_left"><input type="date" id="date" ></p>
<p class="float_left"><button id="start">타임라인 생성</button></p>
</div>
</div>
<div id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-timeline" id="main">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="timeline.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed. Click to expand it.