How can we help you today?

Start a new topic
Discussions Wikitude SDK (Android, iOS, UWP) Wikitude SDK Questions or Problems

update imageResource in an Array

update imageResource in an Array
2 CommentsSorted by Oldest First

Hi,

I need to change my imageResource everytime a certain object is detected in my data function(commented in code). Is it possible to a certain methode like the one that is used to alter text in a label?

------------------------------------------------------------------------------------------------------------------------------------------------------

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="opmaak/opmaak.css">

<!-- Important: Let the viewport cover the whole screen -->

<meta name="viewport" content="target-densitydpi=device-dpi, width = 512, user-scalable = 0" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>KCE_AR</title>

<!-- Include ARchitect Library -->

<script src="architect://architect.js"></script>

<!-- Include jQuery Library -->

<script src="javaScript/jquery-1.9.1.min.js"></script>

<script>

<!-- Important: Create tracker -->

var trackerDataSetPath = "imageDatabase/KCE_IR_Image_DB.zip";

var tracker = new AR.Tracker(trackerDataSetPath);

<!-- Important: Create style for Array object -->

var styleToestel = {textColor : '#FFFFFF'};

var styleMeting = {textColor : '#0000ff'};

<!-- Important: Create Array object -->

var arrayToestel = new Array();

var toestel = new AR.Label("Loading...", 0.3, {style : styleToestel, offsetY: 2});

arrayToestel.push(toestel);

var meting = new AR.Label("Loading...", 0.5, {style : styleMeting, offsetY: 1});

arrayToestel.push(meting);

var bedrijf = new AR.Label("Loading...",  0.3, {style : styleToestel, offsetY: 0});

arrayToestel.push(bedrijf);

var imageResource = new AR.ImageResource("foto/test.png");

var image = new AR.ImageDrawable(imageResource, 3, {offsetY : 1, zOrder: -1});

arrayToestel.push(image);

<!-- Important: Create Trackable 2D objects -->

var ToMicrogolf = new AR.Trackable2DObject(tracker, "microgolf",{ drawables: { cam: arrayToestel }, onEnterFieldOfVision: microgolf()});

var ToVaatwasser = new AR.Trackable2DObject(tracker, "vaatwas",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: vaatwasser});

var ToSunnyIsland = new AR.Trackable2DObject(tracker, "sunnyisland",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: sunnyIsland});

var ToSunnyBoy = new AR.Trackable2DObject(tracker, "sunnyboy",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: sunnyBoy});

var ToKookplaat = new AR.Trackable2DObject(tracker, "kookplaat",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: kookplaat});

var ToBoiler = new AR.Trackable2DObject(tracker, "boiler",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: boiler});

var ToAco = new AR.Trackable2DObject(tracker, "aco",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: aco});

var ToAbb = new AR.Trackable2DObject(tracker, "abb",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: abb});

var ToDiepvries = new AR.Trackable2DObject(tracker, "diepvries",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: diepvriezer});

var ToWasmachine = new AR.Trackable2DObject(tracker, "wasmachine",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: wasmachine});

var ToDroogkast = new AR.Trackable2DObject(tracker, "droogkast",{ drawables: { cam: arrayToestel}, onEnterFieldOfVision: droogkast});

<!-- Important: Create variable for object detection -->

var detect = "";

<!-- Important: Functions Object detect  -->

function microgolf(){detect = "Microgolf"; data()}

function vaatwasser(){detect = "Vaatwasser"; data()}

function sunnyIsland(){detect = "Sunny Island"; data()}

function sunnyBoy(){detect = "Sunny Boy"; data()}

function kookplaat(){detect = "Kookplaat"; data()}

function boiler(){detect = "Boiler"; data()}

function aco(){detect = "ACO"; data()}

function abb(){detect = "ABB"; data()}

function diepvriezer(){detect = "Diepvriezer"; data()}

function wasmachine(){detect = "Wasmachine"; data()}

function droogkast(){detect = "Droogkast"; data()}

<!-- Important: Function update data -->

function data()

{toestel.text = detect;

setInterval(function(){$.getJSON('database.php', function(data) {

  meting.text = data + " kWh";});

              }, 1000);

bedrijf.text = "KCE - Thomas More Kempen";

//image.text = "foto/" + detect + ".png";  <<<<--------------------------------------- needs to alter image here with certain methode

}

</script>

</head>

<body>

</body>

</html>

 

Greetings,

Tim

Hi Timmy!

ImageResources paths are not meant to be changed at runtime. You may define a set of ImageResources and adjust the GeoObjects cam-drawables instead, using 
geoObject.drawables.addCamDrawable and geoObject.drawables.removeCamDrawable

Hope that helps,
Kind regards,
Andreas
 
Login or Signup to post a comment
More topics in Wikitude SDK Questions or Problems
See all 3876 topics
© 2023 Wikitude, a Qualcomm company