PonDad/index.ejs

## index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title><%= title %></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
        <h1 class="text-center h2"><%=title %></h1>
    </header>
    <article class="text-center">
      <button class="btn btn-default" id="shutter">Shutter</button>
      <a class="btn btn-default" role="button" href="/preview">Preview</a>

    </article>
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="/javascripts/main.js"></script>
  </body>
</html>

## index.js
//expressの使用許可
var express = require('express');
var router = express.Router();
//node-cloud-vision-apiの使用許可
var vision = require('node-cloud-vision-api');
//ファイルシステムの使用許可
var fs = require('fs');

//ホーム画面index.ejsの表示
router.get('/', function(req, res, next) {
  res.render('index', { title: 'PonVision β' });
});

//シヤッターボタンクリック時の処理
router.get('/shutter', function (req, res) {
  console.log(req.query);
  var id = req.query.id;

var raspistill = spawn('raspistill', [ '-o' , './public/images/raspi.jpg']);

raspistill.stdout.on('data', function (data) {
  console.log('stdout: ' + data);
});

raspistill.stderr.on('data', function (data) {
  console.log('stderr: ' + data);
});

raspistill.on('close', function (code) {
  console.log('child process exited with code ' + code);

  //node-cloud-vision-api使用
  var image = "./public/images/raspi.jpg";

    vision.init({auth: 'YOUR_API_KEY'})

    var req = new vision.Request({
      image: new vision.Image(image),
      features: [
        new vision.Feature('FACE_DETECTION', 2),
        new vision.Feature('LABEL_DETECTION', 10),
      ]
    })

    vision.annotate(req).then((res) => {
      //JSON整形
      var obj = JSON.stringify(res.responses, null , "\t")
      console.log(obj);
      //JSONをファイルに書き出す
      fs.writeFile('./public/javascripts/vision.json', obj);
    }, (e) => {
      console.log('Error: ', e)
    })
  //node-cloud-vision-api終わり

});

});


//プレビュー画面preview.ejsの表示
router.get('/preview', function(req, res, next) {
  res.render('preview', { title: 'PonVision β' });
});

module.exports = router;

## main.js
$("#shutter").click(function() {
        $.get("http://192.168.0.10:3000/shutter", { id: 'shutter' } );
    });

## preview.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title><%= title %></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
        <h1 class="text-center h2"><%=title %></h1>
    </header>
    <article class="text-center">
      <img class="img-responsive" src="/images/raspi.jpg">
      <br>
      <!-- JSONファイルはiframeで書き出してます-->
　　　<iframe src="/javascripts/vision.json" class="well"></iframe>
      <br>
      <a class="btn btn-default" href="/" role="button">Back</a>
    </article>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </body>
</html>

## style.css
body {
  margin: 0 auto;
  max-width: 640px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

article{
  margin: 20px 0;
}

a {
  color: #00B7FF;
}

iframe{
  width: 100%;
  height: 480px;
  border-radius: 4px;
  margin-bottom: 20px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type"
	content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
	<title><%= title %></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel='stylesheet' href='/stylesheets/style.css' />
	</head>
	<body>
	<header>
	<h1 class="text-center h2"><%=title %></h1>
	</header>
	<article class="text-center">
	<button class="btn btn-default" id="shutter">Shutter</button>
	<a class="btn btn-default" role="button" href="/preview">Preview</a>

	</article>
	<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
	<script src="/javascripts/main.js"></script>
	</body>
	</html>
	//expressの使用許可
	var express = require('express');
	var router = express.Router();
	//node-cloud-vision-apiの使用許可
	var vision = require('node-cloud-vision-api');
	//ファイルシステムの使用許可
	var fs = require('fs');

	//ホーム画面index.ejsの表示
	router.get('/', function(req, res, next) {
	res.render('index', { title: 'PonVision β' });
	});

	//シヤッターボタンクリック時の処理
	router.get('/shutter', function (req, res) {
	console.log(req.query);
	var id = req.query.id;

	var raspistill = spawn('raspistill', [ '-o' , './public/images/raspi.jpg']);

	raspistill.stdout.on('data', function (data) {
	console.log('stdout: ' + data);
	});

	raspistill.stderr.on('data', function (data) {
	console.log('stderr: ' + data);
	});

	raspistill.on('close', function (code) {
	console.log('child process exited with code ' + code);

	//node-cloud-vision-api使用
	var image = "./public/images/raspi.jpg";

	vision.init({auth: 'YOUR_API_KEY'})

	var req = new vision.Request({
	image: new vision.Image(image),
	features: [
	new vision.Feature('FACE_DETECTION', 2),
	new vision.Feature('LABEL_DETECTION', 10),
	]
	})

	vision.annotate(req).then((res) => {
	//JSON整形
	var obj = JSON.stringify(res.responses, null , "\t")
	console.log(obj);
	//JSONをファイルに書き出す
	fs.writeFile('./public/javascripts/vision.json', obj);
	}, (e) => {
	console.log('Error: ', e)
	})
	//node-cloud-vision-api終わり

	});

	});


	//プレビュー画面preview.ejsの表示
	router.get('/preview', function(req, res, next) {
	res.render('preview', { title: 'PonVision β' });
	});

	module.exports = router;
	$("#shutter").click(function() {
	$.get("http://192.168.0.10:3000/shutter", { id: 'shutter' } );
	});
	body {
	margin: 0 auto;
	max-width: 640px;
	font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
	}

	article{
	margin: 20px 0;
	}

	a {
	color: #00B7FF;
	}

	iframe{
	width: 100%;
	height: 480px;
	border-radius: 4px;
	margin-bottom: 20px;
	}