page indicator loop

General
1

i followed this step…and got confused where do put settimeout func.
https://www.fusetools.com/community/forums/general/page

my code look like this…
my ux code

 <FileImageSource ux:Key="A" File="../Assets/a.jpg"/>
<FileImageSource ux:Key="B" File="../Assets/b.jpg"/>
<FileImageSource ux:Key="C" File="../Assets/c.jpg"/>
<FileImageSource ux:Key="D File="../Assets/d.jpg"/>

<Rectangle Color="#fff3" Height="190" CornerRadius="1.5">
    <PageControl ux:Name="nav">
    <Each Items="{changeImage}">
        <Page>
        <Image Source="{DataToResource img}" StretchMode="UniformToFill"/>
        <DropShadow/>
        </Page>
    </Each>
    </PageControl>
            <PageIndicator Dock="Bottom" Navigation="nav" Alignment="Center">
            <Rectangle ux:Template="Dot" Width="30" Height="30" Margin="10" Color="#fff">
        <ActivatingAnimation>
            <Scale Factor="1.3" />
        </ActivatingAnimation>
    </Rectangle>
</PageIndicator>
</Rectangle>

In my separate Js file

    var  changeImage= 
     [{ img: "A" },
        { img: "B" },
        { img: "C" },
        { img: "D" },];
 var Observable = require("FuseJS/Observable");
var x = Observable(1);
function increment() {
    x.value++;
    setTimeout(increment, 2000);
}
increment();
module.exports = {
    x: x
};
  module.exports = {
  changeImage:changeImage
 };

Got confused where to implement settimeout() func so that image inside rectangle rotate every 5 sec.

2

You’ve got the place for setTimeout() just right. There’s a lot of other things you confused though.

Here’s some code that does what you needed, loosely based on code snippets you were showing:

<App Background="#0006">
	<FileImageSource ux:Key="A" File="A.jpg"/>
	<FileImageSource ux:Key="B" File="B.jpg"/>
	<FileImageSource ux:Key="C" File="C.jpg"/>
	<FileImageSource ux:Key="D" File="D.jpg"/>

	<JavaScript>
	var Observable = require("FuseJS/Observable");
	var images = [
		{img: "A"},
		{img: "B"},
		{img: "C"},
		{img: "D"}
	];
	var x = Observable(0);

	function increment() {
		if (x.value < images.length - 1) {
			x.value++;
		} else {
			x.value = 0;
		}
		setTimeout(increment, 2000);
	}

	module.exports = {
		x: x,
		images: images,
		increment: increment
	};
	</JavaScript>

	<DockPanel>
	    <PageControl ux:Name="nav" ActiveIndex="{x}" Placed="{increment}">
		    <Each Items="{images}">
		        <Page>
		        	<Image Source="{DataToResource img}" StretchMode="UniformToFill"/>
		        </Page>
		    </Each>
	    </PageControl>
	    <PageIndicator Dock="Bottom" Navigation="nav" Alignment="Center">
	        <Rectangle ux:Template="Dot" Width="30" Height="30" Margin="10" Color="#fff">
		        <ActivatingAnimation>
		            <Scale Factor="1.3" />
		        </ActivatingAnimation>
		    </Rectangle>
		</PageIndicator>
	</DockPanel>
</App>
3

Thanks Uldis. Works perfectly.