Question about widget development

AyakoSUZUKI · ‎02-26-2018

I am trying to create a customized timeslider widget to visualize temporal data.

I was able to show the data on the map and the data changes by the timeslider.

However, the tick does not move when I use setTimeout() to show animated visualization.

The data includes fields which indicate temporal, so I filter features using layer.definitionExpression.

Timeslider is created by using input element. When I move the tick in the element, change event fires and features are filtered.

I also add animation by using setTimeout. I was able to show animation, but when I use animation, the tick deos not move. And this is the issue I am facing to.

I attached source code (I deleted some codes, which refer the service I use).

I am new to TypeScript and widget development.

So I could miss something basic, but it would be greate if I can get any infromation about the issue.

AyakoSUZUKI · ‎02-27-2018

Hi Munachiso,

Yes, I increment this.currInterval, because value attribute in input element refers to this.currInterval.

I was able to move the tick when I directly access to the DOM to change the value.

The snippet below is what I did.

this.domNode.childNodes[0].value = this.currInterval;‍

However, I don't think this is a correct way to change input.value since it uses JSX.

I believe that changing input.value should be done via referred variable (this.currInterval in this situation).

In fact, I found the solution.

It seems that the issue is render method is not called by changing this.currInterval.

And it is necessary to add @renderable() to make property renderable.

So what I need is adding the decorator to the property like this;

@property()
@renderable()
currInterval: number = 0;‍‍‍

You can check about information in the documentation for widget development.

Widget development | ArcGIS API for JavaScript 4.6

View solution in original post

MunachisoOgbuchiekwe · ‎02-27-2018

Hello Ayako,

Looking at your code, it seems that you may be incrementing the wrong value. Assuming the playTimeSlider() is the function that does the animation, you might want to use this.value instead of this.currInterval and see if that works. Here is how I would do it in JavaScript, you can convert it to TypeScript and it should work the same way.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
    
     <div class="slidecontainer">
  <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
</div>
     <div>
          <p id="count"></p>
     </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JavaScript

var count = document.getElementById("count");
var slider = document.getElementById("myRange");

count.innerHTML = slider.value;

slider.addEventListener("input",function(e){
     console.log(e);
     count.innerHTML = e.target.value;
});

var interval = setInterval(function(){
          slider.value++;
          console.log(slider.value);
          count.innerHTML = slider.value;
     },30000);


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AyakoSUZUKI · ‎02-27-2018