Bokeh light Node Server

bokehServer.js

/*
	Bokeh light Node Server
    Original Code : https://github.com/arduino-libraries/ArduinoHttpClient/blob/master/examples/node_test_server/getPostPutDelete.js
	by Hayeon Hwang
*/

var express = require('express');			// include express.js
var app = express();						// a local instance of it
var bodyParser = require('body-parser');	// include body-parser
var WebSocketServer = require('ws').Server	// include Web Socket server
var inputData; 
var extractedColors;
var fs = require('fs'); 
var request = require('request');

var uploadedImageName;

//file upload
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

//get color 
const path = require('path')
const getColors = require('get-image-colors')
 

var download = function(uri, filename, callback){
  request.head('http://128.122.6.180:3001/image', function(err, res, body){
    request('http://128.122.6.180:3001/image').pipe(fs.createWriteStream(filename)).on('close', callback);
  });
};

app.set('view engine','ejs'); 

// you need a  body parser:
app.use(bodyParser.urlencoded({extended: false})); // for application/x-www-form-urlencoded

// this runs after the server successfully starts:
function serverStart() {
	var port = server.address().port;
	console.log('Server listening on port '+ port);
}

// //File upload
// app.post('/upload', upload.single('photo'), function (req, res) {
// 	// console.log(req.file);

// 	fs.renameSync(path.join(__dirname+"/uploads/",req.file.filename), path.join(__dirname+"/uploads/",req.file.originalname));
// 	res.send("uploaded: <img src ='" + req.file.originalname + "'>");
// 	// req.file is the uploaded file information
//   	// req.body will hold the other text fields
//   	uploadedImageName = path.join(__dirname+"/uploads/",req.file.originalname);

// 		  getColors(uploadedImageName).then(colors => {
// 		  // `colors` is an array of color objects 
// 		  console.log(colors.map(color => color.hex()));
// 		  extractedColors = colors.map(color => color.hex());

// 		})

// });
	
//input 
app.post("/ajax/send", function(req, res){
  var msg = req.body.msg;
  console.log(msg);
  // res.end("okay!");
});

//off
app.post("/ajax/off", function(req, res){
  var msg = req.body.msg;
  console.log("off");
  extractedColors =  "#000000,#000000,#000000,#000000,#000000";
});

//submit image 
app.post("/ajax/submitImg", upload.single('photo'), function(req, res){

 	fs.renameSync(path.join(__dirname+"/uploads/",req.file.filename), path.join(__dirname+"/uploads/",req.file.originalname));
	// res.send(req.file.originalname);

  	uploadedImageName = path.join(__dirname+"/uploads/",req.file.originalname);

	getColors(uploadedImageName).then(colors => {
		 // `colors` is an array of color objects 
		console.log(colors.map(color => color.hex()));
		extractedColors = colors.map(color => color.hex());

		res.send(req.file.originalname);

	})

});

app.post("/ajax/gettingColors", upload.single('photo'),function(req, res){

 	fs.renameSync(path.join(__dirname+"/uploads/",req.file.filename), path.join(__dirname+"/uploads/",req.file.originalname));
	// res.send(req.file.originalname);

  	uploadedImageName = path.join(__dirname+"/uploads/",req.file.originalname);

	getColors(uploadedImageName).then(colors => {
		 // `colors` is an array of color objects 
		// console.log(colors.map(color => color.hex()));
		extractedColors = colors.map(color => color.hex());

		res.send(extractedColors);

	})

});


// this is the POST handler:
app.all('/', function (request, response) {
	// console.log('Got a ' + request.method + ' request');
	// console.log(request.headers);
	if (request.method == 'GET') {
		// console.log(request.query);
	} else {
		console.log(request.body.msg);
		inputData = request.body.msg;
	}

	// send the response:
	// response.send('OK');
	response.render("index.ejs"); 
	response.end();
});

// start the server:
var server = app.listen(8080, serverStart);

// create a WebSocket server and attach it to the server
var wss = new WebSocketServer({server: server});

wss.on('connection', function connection(ws) {
	// new connection, add message listener
	ws.on('message', function incoming(message) {
		// received a message
		// console.log('received: %s', message);
		// echo it back
		// ws.send(message + "asdasd2");

		//********************************** Node.js -> Arduino WIFI 
		// if(extractedColors != null){
			console.log(extractedColors);
			ws.send(extractedColors[0]+","+extractedColors[1]+","+extractedColors[2]+","+extractedColors[3]+","+extractedColors[4]);

		// }

	});
});


app.use(express.static('public'));
app.use(express.static('uploads'));

index.ejs

<html>
  <head>
    <title>Bokeh Light</title>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <style type="text/css">

    h1 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 64px; font-weight: 700; line-height: 64px; margin: 0 0 0; padding: 20px 30px; text-align: center; text-transform: uppercase; }


    h2 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 48px; font-weight: 700; line-height: 48px; margin: 0 0 24px; padding: 0 30px; text-align: center; text-transform: uppercase; }


    p { color: #111; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; margin: 0 0 48px; text-align: center;}


    a { color: #990000; text-decoration: none; }


    a:hover { text-decoration: underline }


    .date { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; position: relative; text-align: center; z-index: 1; }


    .date:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }


    .author { color: #111; display: block; font-family: 'Open Sans', sans-serif; font-size: 16px; padding-bottom: 38px; position: relative; text-align: center; z-index: 1; }


    .author:before { border-top: 1px solid #111; content: ""; position: absolute; top: 12px; left: 0; width: 100%; z-index: -1; }


    .date span,

    .author span { background: #fdfdfd; padding: 0 10px; text-transform: uppercase; }


    .line { border-top: 1px solid #111; display: block; margin-top: 60px; padding-top: 50px; position: relative; }


    .read-more { -moz-border-radius: 50%; -moz-transition: all 0.2s ease-in-out; -webkit-border-radius: 50%; -webkit-transition: all 0.2s ease-in-out; background: #111; border-radius: 50%; border: 10px solid #fdfdfd; color: #fff; display: block; font-family: 'Open Sans', sans-serif; font-size: 14px; height: 80px; line-height: 80px; margin: -40px 0 0 -40px; position: absolute; bottom: 0px; left: 50%; text-align: center; text-transform: uppercase; width: 80px; }


    .read-more:hover { background: #990000; text-decoration: none; }

    .photoselect {
    color: #6496c8;
    background: rgba(0,0,0,0);
    border: solid 1px #000000;

    }
    #fileUploadForm{
    text-align: center;
    }

    .photoselect:hover,
    .photoselect.hover {
    border-color: #346392;
    color: #346392;
    }

    #theimage{
    display: block;
    margin-left: auto;
    margin-right: auto
    /*width:50%;*/
    }
    .colors{
    background-color: #323232;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 10px;

    }
    #colorSelect{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }


  </style>
  </head>

  <body>
 <p class="date"></p>
  <div class="container">
    <h1>Bokeh Light Generator</h1>

    <p>Find and Select colors for the Bokeh Light!</p>

  </div> 
    <form method="POST" action="/upload" enctype="multipart/form-data" id ="fileUploadForm">
      <input type="file" name="photo" class="photoselect" id="choosephoto"> 
      <input id="submitImgBtn" type="button" name="submitbutton" value="Submit" class="photoselect" />
      <br>
      <input id="offBtn" type="button" name="submitbutton" value="Submit" class="photoselect" />

 </form>
<div id="colorSelect">
 
  <p class="colors" id="c1"></p>
  <p class="colors" id="c2"></p>
  <p class="colors" id="c3"></p>
  <p class="colors" id="c4"></p>
  <p class="colors" id="c5"></p>

  <img src="" id="theimage">
        
           
</div>
 
<p class="date"></p>
<script type="text/javascript">
  $("#sendBtn").click(function() {
    var msg = $("#inputMsg").val();

    $.ajax({
      url: "/ajax/send",   
      method: "post",      
      data: {msg: msg},
      success: function(data) {   
      console.log("return data : " + data);
      }
    });
  })

 $("#onBtn").click(function() {

    $.ajax({
      url: "/ajax/on",       
      method: "post",      
      data: {msg: "on"},
      success: function(data) {   
        // console.log("return data : " + data);
      }
    });

  })

  $("#offBtn").click(function() {

    $.ajax({
      url: "/ajax/off",      
      method: "post",       
      data: {msg: "off"},
      success: function(data) {   
        console.log("return data : " + data);
      }
    });

  })

  $("#submitImgBtn").click(function() {

    var form = $('#fileUploadForm')[0];

    var formdata = new FormData(form);

    $.ajax({
      url: "/ajax/submitImg", 
      enctype: 'multipart/form-data',     
      method: "post",       
      data: formdata,
      processData: false,
      contentType: false,
      success: function(data) {   
      console.log("return data : " + data);
      $("#theimage").attr("src", data);
      }

    });


    $.ajax({
      url: "/ajax/gettingColors", 
      enctype: 'multipart/form-data',     
      method: "post",       
      data: formdata,
      processData: false,
      contentType: false,
      success: function(data) {   
      console.log("get color data : " + data);

      $("#c1").css("background-color",data[0]);
      $("#c2").css("background-color",data[1]);
      $("#c3").css("background-color",data[2]);
      $("#c4").css("background-color",data[3]);
      $("#c5").css("background-color",data[4]);

      }
    });

  })

</script>
  
</body>
</html>