Webgazer used in eyetracking - javascript

I'm looking to hide the webgazer video feed using Javascript. The following code displays video feed and how to hide the video feed as my task is to give more space for displaying diagrams and text.
window.onload = function() {
webgazer.setRegression('ridge') /* currently must set regression and tracker */
.setTracker('clmtrackr')
.setGazeListener(gaze)
.begin()
.showPredictionPoints(true);
var width = 320;
var height = 240;
var topDist = '100px';
var leftDist = '400px';
var setup = function() {
var video = document.getElementById('webgazerVideoFeed');
video.style.display = 'block';
video.style.position = 'absolute';
video.style.top = topDist;
video.style.left = leftDist;
video.width = width;
video.height = height;
video.style.margin = '0px';
webgazer.params.imgWidth = width;
webgazer.params.imgHeight = height;
var overlay = document.createElement('canvas');
overlay.id = 'overlay';
overlay.style.position = 'absolute';
overlay.width = width;
overlay.height = height;
overlay.style.top = topDist;
overlay.style.left = leftDist;
overlay.style.margin = '0px';
document.body.appendChild(overlay);
var cl = webgazer.getTracker().clm;
function drawLoop() {
requestAnimFrame(drawLoop);
overlay.getContext('2d').clearRect(0, 0, width, height);
if (cl.getCurrentPosition()) {
cl.draw(overlay);
}
}
drawLoop();
};


I would first try a "hidden" Visibility through CSS Styles in the Video object's setup:
video.style.visibility = hidden;
Another option is to use Opacity to control transparency:
video.style.opacity = 0.0; //# range from min 0.0 (see-thru colors) up to 1.0 max (solid colors)
Finally you can try Z-Index for putting the Video object on a layer under everything:
(consider having a background fill via a screen-sized Div/Shape/Image, to hide the video behind it)
video.style.zIndex = -2; //# default layer level/index is 0

Related

I have a script to resize an image. Is there anyway to have it output 5 images?

doc = app.activeDocument;
// these are our values for the END RESULT width and height (in pixels) of our image
var fWidth = 1313;
var fHeight = 1750;
// do the resizing. if height > width (portrait-mode) resize based on height. otherwise, resize based on width
if (doc.height > doc.width) {
doc.resizeImage(null,UnitValue(fHeight,"px"),null,ResampleMethod.BICUBIC);
}
else {
doc.resizeImage(UnitValue(fWidth,"px"),null,null,ResampleMethod.BICUBIC);
}
// Makes the default background white
var white = new SolidColor();
white.rgb.hexValue = "FFFFFF";
app.backgroundColor = white;
// 2012, use it at your own risk;
#target photoshop
if (app.documents.length > 0) {
var myDocument = app.activeDocument;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PERCENT;
myDocument.resizeCanvas(myDocument.width + 40, myDocument.height + 40, AnchorPosition.MIDDLECENTER)
app.preferences.rulerUnits = originalRulerUnits;
};
// our web export options
var options = new ExportOptionsSaveForWeb();
options.quality = 70;
options.format = SaveDocumentType.JPEG;
options.optimized = true;
var newName = 'test'+doc.name+'.jpg';
doc.exportDocument(File(doc.path+'/'+newName),ExportType.SAVEFORWEB,options);
I want to be able to generate 5 images with 5 different sizes with the same script. Is it just as simple as repeating my code multiple times, or do i need to reset some variables in between?
When I try just duplicating my code and changing the output file name and the sizes, it does it but my canvas size doesn't reset and change based off the current image size. It just keeps getting bigger. Is there anyway to make the canvas size resize based on that current image size?
var sizes = [
{
width: 1531,
height: 1948
},
{
width: 1303,
height: 1954
},
{
width: 1066,
height: 1909
}
];
doc = app.activeDocument;
// looping through all the sizes
for (var i = 0; i < sizes.length; i++)
{
var cloneDoc = doc.duplicate(); // duplicates current document
resizeAndSave(sizes[i].width, sizes[i].height); // passes width and height of sizes to function with your code
cloneDoc.close(SaveOptions.DONOTSAVECHANGES); // closes the clone
activeDocument = doc; // making sure that foremost document is the original doc
}
function resizeAndSave(fWidth, fHeight)
{
//your code
// get a reference to the current (active) document and store it in a variable named "doc"
// these are our values for the END RESULT width and height (in pixels) of our image
//var fWidth = 1313;
//var fHeight = 1750;
// do the resizing. if height > width (portrait-mode) resize based on height. otherwise, resize based on width
activeDocument = doc;
if (doc.height > doc.width) {
doc.resizeImage(null,UnitValue(fHeight,"px"),null,ResampleMethod.BICUBIC);
}
else {
doc.resizeImage(UnitValue(fWidth,"px"),null,null,ResampleMethod.BICUBIC);
}
// Makes the default background white
var white = new SolidColor();
white.rgb.hexValue = "FFFFFF";
app.backgroundColor = white;
// 2012, use it at your own risk;
#target photoshop
if (app.documents.length > 0) {
var myDocument = app.activeDocument;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PERCENT;
myDocument.resizeCanvas(myDocument.width + 40, myDocument.height + 40, AnchorPosition.MIDDLECENTER)
app.preferences.rulerUnits = originalRulerUnits;
};
// our web export options
var options = new ExportOptionsSaveForWeb();
options.quality = 70;
options.format = SaveDocumentType.JPEG;
options.optimized = true;
var newName = 'test'+doc.name+'.jpg';
doc.exportDocument(File(doc.path+'/'+newName),ExportType.SAVEFORWEB,options);
};

You need to reset or clone your original document in the beginning of the each loop. I prefer cloning so I'd do something like this:
// creating array of sizes
var sizes = [
{
width: 313,
height: 750
},
{
width: 413,
height: 150
}, ];
// looping through all the sizes
for (var i = 0; i < sizes.length; i++)
{
var cloneDoc = doc.duplicate(); // duplicates current document
resizeAndSave(sizes[i].width, sizes[i].height); // passes width and height of sizes to function with your code
cloneDoc.close(SaveOptions.DONOTSAVECHANGES); // closes the clone
activeDocument = doc; // making sure that foremost document is the original doc
}
function resizeAndSave(fWidth, fHeight)
{
//your code
};

doc = app.activeDocument;
var savedState = app.activeDocument.activeHistoryState
// get a reference to the current (active) document and store it in a variable named "doc"
// these are our values for the END RESULT width and height (in pixels) of our image
var fWidth = 1155;
var fHeight = 1471;
// do the resizing. if height > width (portrait-mode) resize based on height. otherwise, resize based on width
activeDocument = doc;
if (doc.height > doc.width) {
doc.resizeImage(null,UnitValue(fHeight,"px"),null,ResampleMethod.BICUBIC);
}
else {
doc.resizeImage(UnitValue(fWidth,"px"),null,null,ResampleMethod.BICUBIC);
}
// Makes the default background white
var white = new SolidColor();
white.rgb.hexValue = "FFFFFF";
app.backgroundColor = white;
// 2012, use it at your own risk;
#target photoshop
if (app.documents.length > 0) {
activeDocument = doc;
var cwidth = 2000;
var cheight = 2000;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
doc.resizeCanvas(cwidth, cheight, AnchorPosition.MIDDLECENTER)
app.preferences.rulerUnits = originalRulerUnits;
};
// our web export options
var options = new ExportOptionsSaveForWeb();
options.quality = 70;
options.format = SaveDocumentType.JPEG;
options.optimized = true
var newName = 'MIR'+doc.name +'-22_28'+'.jpg';
doc.exportDocument(File(doc.path+'/'+newName),ExportType.SAVEFORWEB,options);
app.activeDocument.activeHistoryState = savedState
// these are our values for the END RESULT width and height (in pixels) of our image
var hWidth = 1141;
var hHeight = 1711;
// do the resizing. if height > width (portrait-mode) resize based on height. otherwise, resize based on width
activeDocument = doc;
if (doc.height > doc.width) {
doc.resizeImage(null,UnitValue(hHeight,"px"),null,ResampleMethod.BICUBIC);
}
else {
doc.resizeImage(UnitValue(hWidth,"px"),null,null,ResampleMethod.BICUBIC);
}
// Makes the default background white
var white = new SolidColor();
white.rgb.hexValue = "FFFFFF";
app.backgroundColor = white;
// 2012, use it at your own risk;
#target photoshop
if (app.documents.length > 0) {
activeDocument = doc;
var cwidth = 2000;
var cheight = 2000;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
doc.resizeCanvas(cwidth, cheight, AnchorPosition.MIDDLECENTER)
app.preferences.rulerUnits = originalRulerUnits;
};
// our web export options
var options = new ExportOptionsSaveForWeb();
options.quality = 70;
options.format = SaveDocumentType.JPEG;
options.optimized = true;
var newName = 'MIR'+doc.name+'-24_36'+'.jpg';
doc.exportDocument(File(doc.path+'/'+newName),ExportType.SAVEFORWEB,options);
app.activeDocument.activeHistoryState = savedState
// these are our values for the END RESULT width and height (in pixels) of our image
var fWidth = 1058;
var fHeight = 1897;
// do the resizing. if height > width (portrait-mode) resize based on height. otherwise, resize based on width
activeDocument = doc;
if (doc.height > doc.width) {
doc.resizeImage(null,UnitValue(fHeight,"px"),null,ResampleMethod.BICUBIC);
}
else {
doc.resizeImage(UnitValue(fWidth,"px"),null,null,ResampleMethod.BICUBIC);
}
// Makes the default background white
var white = new SolidColor();
white.rgb.hexValue = "FFFFFF";
app.backgroundColor = white;
// 2012, use it at your own risk;
#target photoshop
if (app.documents.length > 0) {
activeDocument = doc;
var cwidth = 2000;
var cheight = 2000;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
doc.resizeCanvas(cwidth, cheight, AnchorPosition.MIDDLECENTER)
app.preferences.rulerUnits = originalRulerUnits;
};
// our web export options
var options = new ExportOptionsSaveForWeb();
options.quality = 70;
options.format = SaveDocumentType.JPEG;
options.optimized = true;
var newName = 'MIR'+doc.name+'-24_43'+'.jpg';
doc.exportDocument(File(doc.path+'/'+newName),ExportType.SAVEFORWEB,options);
app.activeDocument.activeHistoryState = savedState
// these are our values for the END RESULT width and height (in pixels) of our image
var fWidth = 1360;
var fHeight = 1813;
// do the resizing. if height > width (portrait-mode) resize based on height. otherwise, resize based on width
activeDocument = doc;
if (doc.height > doc.width) {
doc.resizeImage(null,UnitValue(fHeight,"px"),null,ResampleMethod.BICUBIC);
}
else {
doc.resizeImage(UnitValue(fWidth,"px"),null,null,ResampleMethod.BICUBIC);
}
// Makes the default background white
var white = new SolidColor();
white.rgb.hexValue = "FFFFFF";
app.backgroundColor = white;
// 2012, use it at your own risk;
#target photoshop
if (app.documents.length > 0) {
activeDocument = doc;
var cwidth = 2000;
var cheight = 2000;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
doc.resizeCanvas(cwidth, cheight, AnchorPosition.MIDDLECENTER)
app.preferences.rulerUnits = originalRulerUnits;
};
// our web export options
var options = new ExportOptionsSaveForWeb();
options.quality = 70;
options.format = SaveDocumentType.JPEG;
options.optimized = true;
var newName = 'MIR'+doc.name+'-30_40'+'.jpg';
doc.exportDocument(File(doc.path+'/'+newName),ExportType.SAVEFORWEB,options);
app.activeDocument.activeHistoryState = savedState
// get a reference to the current (active) document and store it in a variable named "doc"

Node-Red Dashboard: Determine width and height of a group

In a NR dashboard I'm trying to determine the width and heigth of a widget group:
var groupWidth = document.getElementById('Home_Test2_cards').offsetWidth;
var groupHeight = document.getElementById('Home_Test2_cards').offsetHeight;
It works for groupWidth but not for groupHeight. I found some references that a div will not return its height when set to invisible but this is not the case here. Is there any way to determine the height?
Using jQuery:
Calling var groupHeight = $('#Home_Test2_cards').height(); works but still only returns 0.
Edit:
Browser Screenshot
Dashboard Template content:
<script>
(function(scope) {
scope.$watch('msg.payload', function(data) {
if (data !== undefined) {
imageObj.src=data;
}
});
}(scope));
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var groupWidth = document.getElementById('Home_Test2_cards').offsetWidth;
//var groupHeight = document.getElementById('Home_Test2_cards').offsetHeigth;
var groupHeight = $('#Home_Test2_cards').height();
console.log('Width:' + groupWidth);
console.log('Height:' + groupHeight);
var imageObj = new Image();
imageObj.onload= function() {
var wRatio = groupWidth / imageObj.width;
var hRatio = groupHeight / imageObj.height;
var ratio = Math.min(wRatio, hRatio);
context.drawImage(imageObj, 0, 0, canvas.width, canvas.height, 0, 0, imageObj.width*ratio, imageObj.height*ratio);
};
</script>
<canvas id="myCanvas"></canvas>
Based on the screenshot above I would expect the height to be 351.

The node-red Dashboard includes the JQuery library, so you should be able to use:
var groupWidth = $('#Home_Test2_cards').width;
var groupHeight = $('#Home_Test2_cards').height;

Turning off opacity on centered div

I am writing a box that appears in the center of a website. To do that I dynamically (js) create two elements - overlay that covers whole page and has 0.5 opacity to show some website, and a box that should have no opacity.
The problem is that both the overlay and the box are a bit transparent.
this.createOverlay = function () {
handler = document.createElement('div');
handler.style.display = 'hidden';
handler.style.width = '100%';
handler.style.height = '100%';
handler.style.top = 0;
handler.style.left = 0;
handler.style.position = 'absolute';
handler.style.background = 'black';
handler.style.color = "#aaaaaa";
handler.style.opacity = "0.5";
handler.style.filter = "alpha(opacity = 5)";
return this;
};
this.createCenteredBox = function (width, height, url) {
var data = JSON.parse(data);
handler = document.createElement('a');
handler.href = data.product_feed_deep_link;
handler.target = "_blank";
handler.style.display = "block";
handler.style.width = width + "px";
handler.style.height = height + "px";
handler.style.position = "absolute";
handler.style.color = "black";
handler.style.backgroundColor = "#ffffff";
handler.style.opacity = "1";
handler.style.top = "50%";
handler.style.left = "50%";
handler.style.marginTop = "-" + height / 2 + "px";
handler.style.marginLeft = "-" + width / 2 + "px";
handler.style.padding = "0 10px 10px 10px";
handler.style.borderRadius = "4px";
var div = document.createElement('div');
handler.appendChild(div);
return this;
};
This is the code, I can't turn off box'es opacity no matter if I set opacity to 1 on it, or opacity filter, or whatever.
How can I solve this?

Opacity isn't inherited (see here), however, all elements that reside inside (descendants) of that elements that the opacity property is applied to will be effected.
The best way to get around this is to use rgba.
handler.style.background = "rgba(0, 0, 0, .5)"; // RGB 0,0,0 is #000 (black).
//handler.style.opacity = "0.5";
//handler.style.filter = "alpha(opacity = 5)";
See 2nd and 3rd answer here as well

JS OnLoad Images Not Being Resized

So I am sure I am missing something small here. I wrote this awhile ago but I came back to it the other day to try and remember why I stopped working on it. Then I realized it's because when you load the page for the first time it doesn't resize the images in the image gallery container.
Then on page refresh the images resize themselves the way they are supposed to. Here is the code.
var ImageGallery = (function(){
/*
Load Images expects an array of URLS for your images, then
it returns an array of new images.
*/
function loadImages(urls){
var images = [];
for(i = 0; i < urls.length; i++){
var tempImage = new Image();
tempImage.src = urls[i];
tempImage.className = "slider-images";
var image = scaleImage(tempImage, 100,100);
//adds even listener to each image
image.addEventListener('click', function(){
addMainPicture(this);
}, false);
images.push(image);
}
var imageContainer = document.getElementById("image-container");
for(i = 0; i < images.length; i++){
imageContainer.appendChild(images[i]);
}
//add main picture
var temp = new Image();
temp.src = urls[0];
temp.className = "slider-images";
var tempMainImage = scaleImage(temp,350,350);
console.log(tempMainImage);
addMainPicture(tempMainImage);
}
/*
Adds the Main Picture. In here you can set the size you want the image
to be, and other styling for the image. Takes in the url for the image.
*/
function addMainPicture(image){
var mainPicture = document.getElementById("main-picture");
mainPicture.src = image.src;
//add styles
mainPicture.style.display = "block";
mainPicture.style.margin = "0px auto";
}
/*
Scales the image taken in to the maxWidth, and maxHeight
stated.Only scales down. Not up.
*/
function scaleImage(img, maxW, maxH){
var maxWidth = maxW,
maxHeight = maxH,
ratio = 0,
imgWidth = img.width,
imgHeight = img.height;
//check width
if(imgWidth > maxWidth){
ratio = maxWidth / imgWidth;
img.width = maxWidth;
img.height = imgHeight * ratio;
imgHeight = imgHeight * ratio;
imgWidth = imgWidth * ratio;
}
//check height
if(imgHeight > maxHeight){
ratio = maxHeight / imgHeight;
img.height = maxHeight;
img.width = maxWidth;
imgWidth = imgWidth * ratio;
}
return img;
}
/*
This runs it all.
*/
function init(){
var urls = ["http://placehold.it/400x400","http://placehold.it/400x400/FFF000","http://placehold.it/400x400/FF0000","http://placehold.it/400x400/0000FF"];
//load in urls for images
loadImages(urls);
var leftButton = document.getElementById("scroll-left"),
rightButton = document.getElementById("scroll-right");
leftButton.addEventListener('click', function(){
var imageContainer = document.getElementById("image-container");
var currentLeft = "";
//checks for NaN
if(imageContainer.style.left == ""){
currentLeft = 0;
}else{
currentLeft = parseInt(imageContainer.style.left);
}
var end = currentLeft + 300;
function frame(){
currentLeft+=5;
imageContainer.style.left = currentLeft+"px";
if(currentLeft == end)
clearInterval(id);
}
var id = setInterval(frame, 10);
}, false);
rightButton.addEventListener('click', function(){
var imageContainer = document.getElementById("image-container");
var currentLeft = "";
if(imageContainer.style.left == ""){
currentLeft = 0;
}else{
currentLeft = parseInt(imageContainer.style.left);
}
var end = currentLeft - 300;
function frame(){
currentLeft-=5;
imageContainer.style.left = currentLeft+"px";
if(currentLeft == end)
clearInterval(id);
}
var id = setInterval(frame, 10);
}, false);
}
return {
init: function(){
init();
}
}
}());
ImageGallery.init();
Sure I am missing something small here but would really like another set of eyes on it.
Here is the fiddle.

Use onLoad event for images. Because your images are not loaded and you need to load images first to scale them:-
tempImage.onload = function(){
scaleImage(this, 100,100);//here your scale code goes
}

You need to run ImageGallery.init(); once the document has loaded, with jQuery you would use:
$(function() {
ImageGallery.init();
});
Without jQuery, you can use
<body onload="ImageGallery.init();">

wrong image height in canvas

I have a canvas like this
<canvas id="canvas" width="600px" height="300px"></canvas>
Now I am trying to show image inside the canvas of some 260px width and height. But its showing the image full screened in canvas. What I am doing wrong?
img.onload = function(){
var im = this;
var imgWidth = im.width;
var imgHeight = im.height;
var imgScaledWidth = 0;
var imgScaledHeight = 0;
imgScaledHeight = self.conHeight - 40;
imgScaledWidth = imgScaledHeight * (imgWidth/imgHeight);
self.context.drawImage(this, 0,0,imgScaledWidth,imgScaledHeight);
}
Its showing like this

There's no reason why your code shouldn't be working based on what you've shown in the question. Here is an example based on the code you've given with some minor changes to account for not having a self variable.
<script>
var img = document.getElementById("image");
var c = document.getElementById("canvas");
var con = c.getContext("2d");
img.onload = function(){
var im = this;
var imgWidth = im.width;
var imgHeight = im.height;
var imgScaledWidth = 0;
var imgScaledHeight = 0;
var off=20;
imgScaledHeight = c.height - off;
imgScaledWidth = imgScaledHeight * (imgWidth/imgHeight);
con.drawImage(this, 0,0+(off/2),imgScaledWidth,imgScaledHeight);
}
</script>

You are stretching it. If you don't want to show the image stretched, just don't pass any size to drawImage:
self.context.drawImage(this, 0, 0);

Categories