I'm using Cesium and trying to have a button that changes the image whenever pressed. Cesium runs on javascript but whenever the variable changes that contains the name of the image file, the image does not change.
var iName = "HeatMap"; var count=1;
name=iName.concat(count.toString());
var viewer = new Cesium.CesiumWidget('cesiumContainer');
var layers = viewer.scene.imageryLayers;
//Cesium Active Window
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name.concat('.png')),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
opacity:.3
}));
function buttonPressCount()
{
name='HeatMap';
count=count+1;
name = name.concat(count.toString());
document.getElementById('counter').innerHTML = name;
}
the document.getElementById is just for debugging purposes so I know that the name actually changed.
It seems to me you should call something like
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name.concat('.png')),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
opacity:.3}));
in function buttonPressCount.
Related
javaScript Code:
function Productadd() {
var imageid = document.getElementById("pic1").src;
var textid = document.getElementById("text1").textContent;
localStorage.setItem("imagesrc", imageid);
localStorage.setItem("text", textid);
window.location.href = "E:/GOO%20WEB/medic-care/index3.html";
imageid = imageid.toString();
textid = textid.toString();
document.getElementById("image2").src = localStorage.getItem("imagesrc");
document.getElementById("text2").textContent = localStorage.getItem("textid");
}
You can not change an image on the next page that is loaded from the current page. The code only executes on the current page. So what you want to do is not possible.
You would need to have code running on the next page and trigger it somehow with localstorage, cookie, or a querystring parameter.
So I want to create my 1st project using JS HTLM and CSS, which will be like a drum website ...
when I click on an image it should make sound . So, All I know is making a button make sound by clicking on it not an actual image. If you have any idea what should I put in this YYY place ?
here's my JS file code :
PS : soundi is this image's class
var soundi = document.querySelectorAll(".soundi").length;
for (var i = 0; i < soundi ; i++) {
document.querySelectorAll(".soundi")[i].addEventListener("click", function () {
var clickDe = this.YYYY;
switch (clickDe) {
case "YYYY" :
var tom1 = new Audio('sounds/tom-1.mp3');
tom1.play();
break;
}
})
}
You could add an Id to each image and then register the event listeners like so:
function imageClicked(event) {
const imgId = event.target.id; // imgId is the name of the instrument => the name of the sound file without the extension
const soundFile = new Audio(`sounds/${imgId}.mp3`); // this way, you don't have to use a switch statement which can get very long and chaotic
soundFile.play();
}
document
.querySelectorAll(".soundi") // querySelectorAll returns all the images so no need to put it in a for loop
.forEach((img) => img.addEventListener("click", imageClicked));
You will obviously have to choose the image ids properly so that they match up with the file names.
I'm having a little problem with an JS script in InDesign. I want to place an empty rectangle when clicking on a button. The creation outsite the onClick()-function works fine, but when I copy the exact code inside the onClick, it doesn't work.
main();
function main()
{
app.scriptPreferences.userInteractionLevel = UserInteractionLevels.interactWithAll;
//Window
var dlg = new Window('dialog', "Window");
dlg.size = [250,150];
//Add button to window
var myButtonGroup = dlg.add ("group");
myButtonGroup.orientation = "column";
var search = myButtonGroup.add ("button", undefined, "Do!");
// Totally works fine
var doc = app.activeDocument;
var rect = doc.rectangles.add({geometricBounds : [0,0,32,100], fillColor : doc.swatches.item("None"), strokeColor : doc.swatches.item("None")});
//onClick event
search.onClick = function() {
alert("working");
//Alert is working, code below not
var doc = app.activeDocument;
var rect = doc.rectangles.add({geometricBounds : [0,0,32,100], fillColor : doc.swatches.item("None"), strokeColor : doc.swatches.item("None")});
}
dlg.show();
}
I'm new to Indesign JS programming, so please be indulgent :) I am using InDesign CC 2020 and Javascript.
Best regards
Alexander
Ok, it worked when I add #targetengine "session" and create a 'palette' instead of 'window'.
Why? Don't ask me haha!
Best regards
Alex
I was trying to add an image using p5 and ml5 In my website where user can train there own image and get the predicted output over webcam I tried implementing it by using
var addImage;
var mobilenet;
mobilenet = ml5.featureExtractor('MobileNet', modelReady);
classifier = mobilenet.classification(video,videoReady);
addImage = createButton('Insert');
addImage.mousePressed(function (){
classifier.addImage('Insert');
});
but for every image, I need to press the mouse button to insert I just want to make it something like this
**On mousePress()
function to add multiple image;
On mouseRelease()
stop;**
From this reference, this should work;
var addImage;
var mobilenet;
var drawImageInterval = null;
mobilenet = ml5.featureExtractor('MobileNet', modelReady);
classifier = mobilenet.classification(video,videoReady);
addImage = createButton('Insert');
addImage.mousePressed(function (){
if(mouseIsPressed && !drawImageInterval){
drawImageInterval = setInterval(function(){
classifier.addImage('Insert');
}, 1000);
} else {
clearInterval(drawImageInterval);
drawImageInterval = null;
}
});
JavaScript Noob here.
I want to show the dynamically changing image effect like this:
http://dotsignals.org/google_popup.php?cid=202
(if this webpage cannot show changing image, click on any camera at http://dotsignals.org)
I have examined the code, and have some questions:
1.The website uses setImage and refreshSetImage to initialize and refresh the image for a dynamically changing effect. What is the use of Math.random in here? I understand it is a way to differentiate images from different time at the same cam. But how does it works? How would the backend respond?
2.Related to the first question. What is the mechanism of the refreshSetImage? I didn't see any sign of requesting data from the server. Does it send a "GET"? How does it refresh the image?
function setImage(imageID){
var currentImage = imageID;
document.getElementById(currentImage).src ='http://207.251.86.238/cctv9.jpg'+'?math=';
refreshSetImage();
}
function refreshSetImage() {
document.images["myCam"].src = 'http://207.251.86.238/cctv9.jpg'+'?math='+Math.random();
setTimeout('refreshSetImage()',1000);
}
function ScaleSize(imageID) {
var elem = document.getElementById(imageID);
elem.style.width = 500;
elem.style.height = 300;
}
3.How is the backend designed?
4.Now I want to use these two functions in my own project. I want to add a parameter of camID in the setImage and refreshSetImage functions, so the src of the image will change to something like: 'http://..../'+camID+'.jpg'+'?math'. camID is a String that identifies different cameras. I changed it to:
function refreshSetImage(camID) {
document.images["myCam"].src = 'http://207.251.86.238/'+camID+'.jpg'+'?math='+Math.random();
setTimeout('refreshSetImage(camID)',1000);
}
function setImage(imageID,camID){
var currentImage = imageID;
document.getElementById(currentImage).src = 'http://207.251.86.238/'+camID+'.jpg'+'?math=';
refreshSetImage(camID);
}
and got an error :Uncaught ReferenceError: camID is not defined VM132:1. The image is not changing as well. I don't know what is the problem. What is VM132:1 ?
Thanks
check
function refreshSetImage(imageID,camID) {
currentImage = imageID;
url = 'http://207.251.86.238/'+camID+'.jpg'+'?math='+Math.random();
//document.getElementById(currentImage).src= url;
console.log(url);
}
$(document).ready(function(){
imageID = "imageID";
camID = "camID";
setInterval(function() {
refreshSetImage("imageID","camID");
}, 3000);
});
https://jsfiddle.net/Cuchu/vr1ftwg1/