Is this possible to use a jQuery face-detection plugin (I'm using this)
to detect human faces in an immersive 360 panorama image (I've used krpano 1.19-pr5 (build 2016-05-24) tools (demo version) to build the panorama files and krpano html5 viewer for rendering. You can download the whole package from here)?
The face-detection plugin works fine with simple 2D images and HTML5 canvases. The krpano viewer also renders the target panorama tiles in a canvas. Below is the code for the html file that renders the panorama image in browser.
<!DOCTYPE html>
<html>
<head>
<title>krpano - test_pano_3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
#-ms-viewport { width:device-width; }
#media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
</head>
<body>
Try It
<script src="test_pano_3.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"test_pano_3.swf", xml:"test_pano_3.xml", target:"pano", html5:"prefer", mobilescale:1.0, passQueryParameters:true});
</script>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.facedetection.js"></script>
<script>
$(function () {
"use strict";
$('#try-it').click(function (e) {
e.preventDefault();
$('.face').remove();
var canvas = $("#krpanoSWFObject").find("canvas")[0];
$(canvas).faceDetection({
complete: function (faces) {
console.log(faces);
for (var i = 0; i < faces.length; i++) {
$('<div>', {
'class':'face',
'css': {
'position': 'absolute',
'left': faces[i].x * faces[i].scaleX + 'px',
'top': faces[i].y * faces[i].scaleY + 'px',
'width': faces[i].width * faces[i].scaleX + 'px',
'height': faces[i].height * faces[i].scaleY + 'px'
}
})
.insertAfter(this);
}
},
error:function (code, message) {
alert('Error: ' + message);
}
});
});
});
</script>
</body>
</html>
This:
var canvas = $("#krpanoSWFObject").find("canvas")[0];
should not work as find is not implemented in KRpano plugin. You should try this instead:
var canvas = $("#krpanoSWFObject canvas");
that returns the canvas element :)
Regards,
Related
I'm trying to change position and dimensions of the canvas but it's set as inline code with !important added, editing style attribute is instantly changed to original styling.
There is fullscreen option but it doesn't change anything for me: docs.
I've spend a lot of time trying to change it with no luck.
Simple example showing issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tsParticles</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #212121;
}
#tsparticles {
width: 200px;
height: 200px;
position: absolute;
}
</style>
</head>
<body>
<div id="tsparticles"></div>
<script
src="https://cdn.jsdelivr.net/npm/tsparticles-preset-bubbles#2/tsparticles.preset.bubbles.bundle.min.js"></script>
<script>
(async () => {
await loadBubblesPreset(tsParticles); // this is required only if you are not using the bundle script
await tsParticles.load("tsparticles", {
autoPlay: false, //works
// FullScreen: false, //nothing changes
FullScreen: { enable: false, zIndex: 99 }, ////nothing changes
preset: "bubbles",
});
})();
</script>
</body>
</html>
`
I've tried changing inline styling and find a way to set it in config. Version v1 was sized according to its parent. With version v2 I'm stuck and out of ideas.
The property for disabling the full screen options is fullScreen, not FullScreen. The options are case sensitive.
I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
w.focus();
w.print();
w.close();
HTML:
<body>
<img src='url1' />
<img src='url2' />
<img src='urln' />
</body>
This all works, the window pops up, and the print dialog is shown for the new page and prints all images fine. However, for some reason, some of images are printing, and instead the image alt message is printed.
There are lots of images, and they are dynamically generated on the server side (which takes about 1 second to load each).
What needs to be done to make sure all images are loaded and printed?
This happens in IE and Firefox that I've confirmed. I appreciate any help.
Try to use a JS library that detect when images have been loaded.
You can use it like this:
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
imagesLoaded(document.body, function() {
window.print();
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style type="text/css">
body, div, image{
text-align: center;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
var c = $("<canvas />");
c.get(0).width = $(this).get(0).naturalWidth;
c.get(0).height = $(this).get(0).naturalHeight;
var cxt = c.get(0).getContext("2d");
cxt.drawImage($(this).get(0), 0, 0);
var base64Code = c.get(0).toDataURL("image/png");
c.remove();
$("body").append($("<div/>").append($("<image/>").attr("src", base64Code)));
if($("body").find("image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Print Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<style type="text/css">
body, div, v\:image{
text-align: center;
margin: 0px;
padding: 0px;
}
div{
page-break-after:always;
}
v\:image{
behavior: url(#default#VML);
display: block;
width: 1078px;
height: 1527px;
}
</style>
<script type="text/javascript" src="/life/public/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = $("td:[id^='tdImg']", window.opener.document);
for(var i = 0; i < data.length; i++){
var image = $("<image/>");
image.load(data.length, function(event){
try{
$("body").append($("<div/>").append($("<v\:image/>").attr("src", $(this).attr("src"))));
if($("body").find("v\\:image").length == event.data){
window.print();
window.close();
}
}catch(e){
alert(e.message);
}finally{
$(this).unbind("error");
$(this).unbind("load");
$(this).remove();
}
});
image.attr("src", data.eq(i).attr("data-url"));
}
});
</script>
</head>
<body></body>
</html>
I have an image at the URL http://192.168.1.53/html/cam.jpg (from a Raspberry Pi) and this image is changing very fast (it is from a camera).
So I want to have some JavaScript on a website that will reload this image every second for example.
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pi Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<style>
img,body {
padding: 0px;
margin: 0px;
}
</style>
<img id="img" src="http://192.168.1.53/html/cam.jpg">
<img id="img1" src="http://192.168.1.53/html/cam.jpg">
<script src="script.js"></script>
</body>
</html>
And my script:
function update() {
window.alert("aa");
document.getElementById("img").src = "http://192.168.1.53/html/cam.jpg";
document.getElementById("img1").src = "http://192.168.1.53/html/cam.jpg";
setTimeout(update, 1000);
}
setTimeout(update, 1000);
alert is working, but the image is not changing :/ (I have 2 images (they are the same))
The problem is that the image src is not altered so the image is not reloaded.
You need to convince the browser that the image is new. A good trick is to append a timestamp to the url so that it is always considered new.
function update() {
var source = 'http://192.168.1.53/html/cam.jpg',
timestamp = (new Date()).getTime(),
newUrl = source + '?_=' + timestamp;
document.getElementById("img").src = newUrl;
document.getElementById("img1").src = newUrl;
setTimeout(update, 1000);
}
in specification of FFOS GP PEAK is written, that it's got qHD display (it is 960*540), but when I run JavaScript code:
console.log(screen.width)
console.log(screen.height)
I get 640*360. Is it JavaScript bug? Or anything else?
Thank you.
I believe the Peak has a device pixel ratio of 1.5, which would be 640x360 logical pixels.
You may want to have a look at css - what exactly is device pixel ratio
and Bug 838505
If I use the following HTML and JS this draws a square around the entire screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name = "viewport" content="user-scalable = no"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/background.css">
<title>Test</title>
<script type="text/javascript" src="js/loop.js"></script>
<style type="text/css">
*
{
border: 0px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body><canvas id="myCanvas"></canvas></body>
</html>
loop.js
//Main file for game logic
window.onload = init;
//Setup function to reset start location
function setup() {
canvas = document.getElementById('myCanvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
context = canvas.getContext('2d');
context.beginPath();
context.lineWidth="6";
context.strokeStyle="red";
context.rect(0,0,canvas.width,canvas.height);
context.stroke();
}
//Initialize game and event handlers
function init() {
setup();
}
I am trying to implement the scroll to top feature in my website: www.arrow-tvseries.com.
The "button" is seen on the website however it does not work properly, because when clicked its not scrolling to the top of the page. More over I would like that the "Scroll to top button" is visible when scrolled down, say half the page.
Here is the javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
HTML Code (Head Tag):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Arrow-TvSeries - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--back to top links-->
<link rel="stylesheet" type="text/css" href="back_to_top.css">
<script src="/scripts/back_to_top.js" type="text/javascript"></script>
<!--end of back to top links-->
<meta property="fb:admins" content="{793705343}"/>
<!--Google Analytics-->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40124321-1', 'arrow-tvseries.com');
ga('send', 'pageview');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Arrow Tv Show">
<meta name="keywords" content="arrow, tv show, amel, stephen amell, katie cassidy, oliver, oliver queen, queen">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
<!--IPAD setting-->
<meta name="viewport" content="width = 730, initial-scale=0.70, minimum-scale = 0.5, maximum-scale = 1.25"/>
</head>
CSS Code:
#backtotop {
cursor : pointer;
/*display : none;*/
margin : 0px 0px 0px 370px;
position : fixed;
bottom : 10px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter: alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 10000;
font-family: arial;
}
#backtotop:hover {
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}
Please feel free and let me know if you require further code or information.
Thanks
Try this and let me know if it is not working:
<!DOCTYPE html>
<html>
<head>
<style>
input.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
<script>
function scrollWindow()
{
window.scrollTo(0,0);
}
</script>
</head>
<body>
<br>
<input class="pos_fixed" type="button" onclick="scrollWindow()" value="Scroll" />
<br>
</body>
</html>
You can do the same thing with below code:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Try this. Hope it helps.
You could do something like this:
JSFiddle demo
$(window).scroll(function() {
// if you have scrolled down more than 200px
if($(this).scrollTop() > 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').bind('click', function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},800);
});
The problem is that your javascript file is actually written in HTML.
In your HTML head section, you should have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/back_to_top.js" type="text/javascript"></script>
Then your back_to_top.js should contain only the following:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 200) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});