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);
}
Related
I'm working on a webpage and I require some help with the JavaScript.
The site should be able to load a full-screen image that changes depending on the time and date.
To be exact there are weekday shows and weekend shows and this page is required to project the show's poster depending on what time and day it is.
My current code looks like this;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="images/4.png">
</body>
</html>
CSS
body {
background-image:linear-gradient(white, dimgray);
}
img {
border-radius: 4px;
padding: 5px;
width: 2560px;
height: 720px;
object-fit: fill;
}
Javascript
setInterval(function() {
var date = new Date();
var img = document.getElementById('Kiss100');
if (date.getHours() < 12) {
if( img.src.indexOf('Kiss') < 0 ) {
img.src = 'images/3.jpeg'
}
} else {
if( img.src.indexOf('Kiss100') < 0 ) {
img.src = 'images/1.jpeg'
}
}
},60000);
As you can see I tried setting a specific resolution in CSS but I want it to change depending on the platform. Also, in the JavaScript I wanted it to be more specific but I got stuck.
Thanks in advance.
Instead of img.src.indexOf('Kiss') < 0, try - if (!img).
Use the Conditional (ternary) operator to get rid of if-else.
Finally, if you want a full-screen image, give it full width and auto height.
Below is a working snippet. You should see that according to the condition the image will be updated after 5 seconds.
(I tried random images, you can use your own.)
setInterval(function () {
var imgEl = document.getElementById('Kiss100');
if (!imgEl) return;
var date = new Date();
imgEl.src = date.getHours() < 12
? 'https://source.unsplash.com/user/c_v_r/100×100'
: 'https://www.kasandbox.org/programming-images/avatars/cs-hopper-happy.png'
}, 5000);
body {
background-image:linear-gradient(white, dimgray);
}
img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>IMAGE LOOP!</title>
</head>
<body>
<script type="text/javascript" src="app.js" ></script>
<img id='Kiss100' src="https://www.gstatic.com/webp/gallery3/1.sm.png">
</body>
</html>
Hey I have done the code to show the iframe google doc form in my website but as there is no any countdown shown or text that will elaborate that how many seconds are left there.
Here's the code:
<script>
// function to set the source (src) of the iframe...
function myframe(){
var frame = document.getElementById("iframe").src = "google form link";
}
// call the function 3 seconds (3000 milliseconds) after page load...
setTimeout(myframe, 10000);
</script>
<iframe id="iframe" src="" height="2350px" width="100%"></iframe>
Somebody help me out and add the line which can elaborate that Please Wait... Sec Left!
I did try to show a google form in my website but there is no text or css designed to elaborate that how much time will take as there should be text that says 10 seconds left and the 9 8 7 6 5 4 3 2 1 and then showed the iframe google form.
Like this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span id="countdown"
>Please, wait. <label id="seconds"></label>s left.</span
>
<iframe
id="iframe"
src=""
style="display: none"
height="2350px"
width="100%"
></iframe>
<script>
let secondsToWait = 10;
document.getElementById("iframe").src =
"https://jsonplaceholder.typicode.com/";
const intervalId = setInterval(() => {
document.getElementById("seconds").innerHTML = secondsToWait--;
if (secondsToWait == 0) {
clearInterval(intervalId);
document.getElementById("iframe").style.display = "block";
document.getElementById("countdown").style.display = "none";
}
}, 1000);
</script>
</body>
</html>
Here's my problem:
I am new to Javascript and I am trying to make my image change on click.
It's a simple counter game that does a 2 frame animation of squidward hitting the dab.
So far I have got the counter to work but I cannot get the image to change on click as well. Also, it's going to have to change back to the original image so that it can be clicked and counted again.
<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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<button onclick="dabMan()"><img src="./squid-dab1.gif"> .
</button>
<br><br>
How many dabs??
<input type="text" id="text">
</div>
<script src="./script.js"></script>
</body>
</html>
var dabcount = 0;
function dabMan() {
dabcount = dabcount + 1
document.getElementById('text').value = dabcount;
console.log("dabMan", dabMan)
document.getElementById("./squid-dab1.gif") .src = "./squid-dab2.gif";
console.log("changeimage", dabMan)
}
instead of using the "onclick(){}" attribute in your html, write an event listener in js. Assuming your image tag is like this:
<img src='./squid-dab1.gif' id='myImage'>
Note: Javascript needs to know how to find your image... Hence the ID
Your javascript code should look like this:
<script>
var image = document.getElementById('myImage');
image.addEventListener('click', function(){
changeImage();
});
function changeImage(){
image.src = './squid-dab2.gif';
}
</script>
That will make it so that when you click the image, it will change. If you wanted a button to do that, simply create a button with the id "myImage" instead like so:
<button id='myImage'>Click me to change the picture</button>
I know this question is asked frequently but I can not copy a code. I want the image to change after a time. I think I made a lot of wrong coding errors. Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image=document.getElementById("image");
function volgendefoto() {
if (images==0) {
image.src="foto2";
}
if (images==1) {
image.src="foto2";
}
if (images==3) {
image.src="foto1";
}
}
function timer(){
setInterval(volgendefoto, 3000);
}
var images= [], x = -1;
image[0]="foto1.jpg";
image[1]="foto2.jpg";
image[2]="foto3.jpg";
</script>
</body>
</html>
Thanks in advance for help,
Jasper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<img id="image" src="foto1.jpg">
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 3000);
</script>
</body>
</html>
You're not creating your interval, timer is never executed. Here's one that will loop your pictures, assuming that your first image is images is the one preloaded (eg: images[0] === image.src on page load) :
const image=document.getElementById("image");
let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;
function volgendefoto() {
i<images.length?i+=1:i=0;
image.src=images[i];
}
setInterval(volgendefoto, 3000);
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,