melaniehoff/doppelcamyandex.js

## doppelcamyandex.js
var request = require('request');
var cheerio = require('cheerio');

var base_url = 'https://yandex.ru/images/search?rpt=imageview&img_url=';
var re = /img_url=(.*?)&rpt=/;


var url = 'http://107.170.164.22:3000/chino1448317021600.jpg';

get_similar(url, finished);

function finished(imgs) {
  console.log(imgs);
}


function get_similar(source_url, cb) {
  request.get(base_url+encodeURIComponent(source_url)), function(error, response, body){
    //request.get(base_url+source_url, function(error, response, body){
    if (error) {
      console.error(error);
      cb([]);
      return false;
    }

    console.log(base_url+source_url);

    var out = [];

    var $ = cheerio.load(body);

    var links = $('.similar__link').each(function(i, el) {
      var href = $(el).attr('href');
      var matches = re.exec(href);
      if (matches.length == 2) {
        var img_url = decodeURIComponent(matches[1]);
        out.push(img_url);
      }
    });

    cb(out);

  });
}


// get_similar("http://artdelicorp.com/img/goya.jpg",
//     function(out) {
//       console.log(out);
//   });


module.exports.get_similar = get_similar;

// use like this:
// get_similar('http://i.imgur.com/qkHA0Ja.jpg', function(data){
//   console.log(data);
// });

## p5_webcam_sketch.js
var playing = false;
var button;
var capture;
var canv;
var img;

var showLoading = false;
var loadingIcon;


function buttonPressed() {

  var imageData = canv.elt.toDataURL();

  var blobBin = atob(imageData.split(',')[1]);
  var array = [];
  for (var i = 0; i < blobBin.length; i++) {
    array.push(blobBin.charCodeAt(i));
  }
  var imageFile = new Blob([new Uint8Array(array)], {
    type: 'image/png'
  });

  var formData = new FormData();
  formData.append('userPhoto', imageFile);

  $.ajax({
    //url: "http://107.170.164.22/api/photo",
    url: "http://doppel.camera/api/photo",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    enctype: 'multipart/form-data',
    success: gotNewImage
  });


  // pause the webcam
  capture.pause();
  showLoading = true;


}

function gotNewImage(images) {

  var w, h;
  var firstImage = createImg(images[0]);
  firstImage.position(0,0);
  firstImage.size(width,height);

}


function setup() {
  canv = createCanvas(windowWidth, windowHeight);

  capture = createCapture(VIDEO);
  capture.size(640, 480);
  //capture.position(398, 203);
  capture.hide();
  background(0);


  // Create a DIV in P5 using the CSS stylesheet in index.html
  myLoadingDiv = createDiv(' ');
  myLoadingDiv.class('loadingIcon');


}
//android video initiate
function touchStarted(){
  capture.play();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0);
}

function draw() {


  if (img) {

    showLoading = false;

    // to remove the captured image
    background(0);

  } else {
    // show the captured image from the webcam
    image(capture, width/2-capture.width/2, height/2-capture.height/2);
  }


  // get the position of the button
  var size = 50;
  var posx = width/2;
  var posy = height/2+capture.height/2 + size/2 + 25;
  var innerColor = color(255);
  // get the distance between mouseXY and the button
  var distance = dist(mouseX, mouseY, posx, posy);
  if (distance < size/2 && mouseIsPressed ) {
    buttonPressed();
    innerColor = color(100);
  }

  // draw outer first
  noStroke();
  fill(255);
  ellipse(posx, posy, size, size);
  // draw inner
  stroke(0);
  strokeWeight(2);
  fill( innerColor );
  ellipse(posx, posy, size*0.8, size*0.8);


  if (showLoading == true) {
    myLoadingDiv.style("display", "block");
  } else {
    myLoadingDiv.style("display", "none");
  }


}


## p5_webcam_sketch_index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DOPPELCAM</title>
    <script src="libraries/p5.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style>


    body {
      padding: 0; margin: 0;
      }

    canvas {
      vertical-align: top;
      width: 100%;
    }


    /* Loading Icon Style */

    .loadingIcon {
      width: 500px;
      height: 200px;
      position: absolute;
      top: 40%;
      left:45.5%;
      display: hidden;
      background: url("assets/loadingDots.gif") no-repeat;
    }


    </style>


  </head>
  <body>

  </body>
</html>

## server01.js
var express         =       require("express");
var multer          =       require('multer');
var app             =       express();
var upload      =   multer({ dest: './uploads/'});
var spawn = require('child_process').spawn;
var yandex = require('./doppelcamyandex')

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

app.use(multer({ dest: './uploads/',
    rename: function (fieldname, filename) {
        return filename+Date.now();
    },
    onFileUploadStart: function (file) {
        console.log(file.originalname + ' is starting ...');
    },
    onFileUploadComplete: function (file) {
        console.log(file.fieldname + ' uploaded to  /' + file.name)

    }
}));

app.get('/old',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            console.log(err);
            return res.end("Error uploading file.");
        }
        var output = ''

        var uploadedUrl2 = 'http://107.170.164.22/'+res.req.files.userPhoto.name;
        var uploadedUrl1 = 'http://doppel.camera/'+res.req.files.userPhoto.name;
        console.log(uploadedUrl1);
        console.log(uploadedUrl2);
        //make the request to yandex
        //and then return the url of the yandex photo

        yandex.get_similar(uploadedUrl1, function(out) {
            res.json(out);
        });


        //console.log('before casper');
        // var casper = spawn('casperjs', ['doppelcam.js', uploadedUrl2])
        // casper.stdout.on('data', function(data){
        //     console.log('Output: ' + output);
        //     output += '' + data;
        //     //res.redirect('/'+res.req.files.userPhoto.name)
        // });
        // casper.stderr.on('data', function(data){
        //     console.log("error: ", data);
        // });

        // casper.on('close', function(){
        //     console.log('Finished: ' + output);
        //     res.send(output);
        // });
    });
});

app.listen(80,function(){
    console.log("Working on port 80");
});

## server01_index.html


<form id        =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "/api/photo"
     method    =  "post"
>
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
</form>
	var request = require('request');
	var cheerio = require('cheerio');

	var base_url = 'https://yandex.ru/images/search?rpt=imageview&img_url=';
	var re = /img_url=(.*?)&rpt=/;


	var url = 'http://107.170.164.22:3000/chino1448317021600.jpg';

	get_similar(url, finished);

	function finished(imgs) {
	console.log(imgs);
	}


	function get_similar(source_url, cb) {
	request.get(base_url+encodeURIComponent(source_url)), function(error, response, body){
	//request.get(base_url+source_url, function(error, response, body){
	if (error) {
	console.error(error);
	cb([]);
	return false;
	}

	console.log(base_url+source_url);

	var out = [];

	var $ = cheerio.load(body);

	var links = $('.similar__link').each(function(i, el) {
	var href = $(el).attr('href');
	var matches = re.exec(href);
	if (matches.length == 2) {
	var img_url = decodeURIComponent(matches[1]);
	out.push(img_url);
	}
	});

	cb(out);

	});
	}





	// get_similar("http://artdelicorp.com/img/goya.jpg",
	// function(out) {
	// console.log(out);
	// });



	module.exports.get_similar = get_similar;

	// use like this:
	// get_similar('http://i.imgur.com/qkHA0Ja.jpg', function(data){
	// console.log(data);
	// });
	var playing = false;
	var button;
	var capture;
	var canv;
	var img;

	var showLoading = false;
	var loadingIcon;


	function buttonPressed() {

	var imageData = canv.elt.toDataURL();

	var blobBin = atob(imageData.split(',')[1]);
	var array = [];
	for (var i = 0; i < blobBin.length; i++) {
	array.push(blobBin.charCodeAt(i));
	}
	var imageFile = new Blob([new Uint8Array(array)], {
	type: 'image/png'
	});

	var formData = new FormData();
	formData.append('userPhoto', imageFile);

	$.ajax({
	//url: "http://107.170.164.22/api/photo",
	url: "http://doppel.camera/api/photo",
	type: "POST",
	data: formData,
	processData: false,
	contentType: false,
	enctype: 'multipart/form-data',
	success: gotNewImage
	});



	// pause the webcam
	capture.pause();
	showLoading = true;




	}

	function gotNewImage(images) {

	var w, h;
	var firstImage = createImg(images[0]);
	firstImage.position(0,0);
	firstImage.size(width,height);

	}


	function setup() {
	canv = createCanvas(windowWidth, windowHeight);

	capture = createCapture(VIDEO);
	capture.size(640, 480);
	//capture.position(398, 203);
	capture.hide();
	background(0);


	// Create a DIV in P5 using the CSS stylesheet in index.html
	myLoadingDiv = createDiv(' ');
	myLoadingDiv.class('loadingIcon');


	}
	//android video initiate
	function touchStarted(){
	capture.play();
	}

	function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
	background(0);
	}

	function draw() {




	if (img) {

	showLoading = false;

	// to remove the captured image
	background(0);

	} else {
	// show the captured image from the webcam
	image(capture, width/2-capture.width/2, height/2-capture.height/2);
	}


	// get the position of the button
	var size = 50;
	var posx = width/2;
	var posy = height/2+capture.height/2 + size/2 + 25;
	var innerColor = color(255);
	// get the distance between mouseXY and the button
	var distance = dist(mouseX, mouseY, posx, posy);
	if (distance < size/2 && mouseIsPressed ) {
	buttonPressed();
	innerColor = color(100);
	}

	// draw outer first
	noStroke();
	fill(255);
	ellipse(posx, posy, size, size);
	// draw inner
	stroke(0);
	strokeWeight(2);
	fill( innerColor );
	ellipse(posx, posy, size0.8, size0.8);



	if (showLoading == true) {
	myLoadingDiv.style("display", "block");
	} else {
	myLoadingDiv.style("display", "none");
	}






	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>DOPPELCAM</title>
	<script src="libraries/p5.js" type="text/javascript"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

	<script src="libraries/p5.dom.js" type="text/javascript"></script>
	<script src="libraries/p5.sound.js" type="text/javascript"></script>

	<script src="sketch.js" type="text/javascript"></script>

	<style>


	body {
	padding: 0; margin: 0;
	}

	canvas {
	vertical-align: top;
	width: 100%;
	}


	/* Loading Icon Style */

	.loadingIcon {
	width: 500px;
	height: 200px;
	position: absolute;
	top: 40%;
	left:45.5%;
	display: hidden;
	background: url("assets/loadingDots.gif") no-repeat;
	}


	</style>


	</head>
	<body>

	</body>
	</html>
	var express = require("express");
	var multer = require('multer');
	var app = express();
	var upload = multer({ dest: './uploads/'});
	var spawn = require('child_process').spawn;
	var yandex = require('./doppelcamyandex')

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

	app.use(multer({ dest: './uploads/',
	rename: function (fieldname, filename) {
	return filename+Date.now();
	},
	onFileUploadStart: function (file) {
	console.log(file.originalname + ' is starting ...');
	},
	onFileUploadComplete: function (file) {
	console.log(file.fieldname + ' uploaded to /' + file.name)

	}
	}));

	app.get('/old',function(req,res){
	res.sendFile(__dirname + "/index.html");
	});

	app.post('/api/photo',function(req,res){
	upload(req,res,function(err) {
	if(err) {
	console.log(err);
	return res.end("Error uploading file.");
	}
	var output = ''

	var uploadedUrl2 = 'http://107.170.164.22/'+res.req.files.userPhoto.name;
	var uploadedUrl1 = 'http://doppel.camera/'+res.req.files.userPhoto.name;
	console.log(uploadedUrl1);
	console.log(uploadedUrl2);
	//make the request to yandex
	//and then return the url of the yandex photo

	yandex.get_similar(uploadedUrl1, function(out) {
	res.json(out);
	});


	//console.log('before casper');
	// var casper = spawn('casperjs', ['doppelcam.js', uploadedUrl2])
	// casper.stdout.on('data', function(data){
	// console.log('Output: ' + output);
	// output += '' + data;
	// //res.redirect('/'+res.req.files.userPhoto.name)
	// });
	// casper.stderr.on('data', function(data){
	// console.log("error: ", data);
	// });

	// casper.on('close', function(){
	// console.log('Finished: ' + output);
	// res.send(output);
	// });
	});
	});

	app.listen(80,function(){
	console.log("Working on port 80");
	});


	<form id = "uploadForm"
	enctype = "multipart/form-data"
	action = "/api/photo"
	method = "post"
	>
	<input type="file" name="userPhoto" />
	<input type="submit" value="Upload Image" name="submit">
	</form>