Time Slider Widget Question

TimHayes — Tue, 18 Feb 2014 17:06:33 GMT

Is there a way to allow the user to manually use the Time Slider. Currently, it appears to be set to automatic, hit the play button and it goes. I am looking for a way for the user to use it like the Basemap Fader. One aerial photo fades into another.

Re: Time Slider Widget Question

RobertScheitlin__GISP — Tue, 18 Feb 2014 17:21:19 GMT

Tim,

You can just grab the slider and start dragging. But you have to release the slider thumb before the map update is done (liveDragging).

Re: Time Slider Widget Question

RobertScheitlin__GISP — Tue, 18 Feb 2014 17:23:13 GMT

Tim,

Actually you can add LiveDragging with a simple Skin Change. Do you work with the source code?

Re: Time Slider Widget Question

TimHayes — Tue, 18 Feb 2014 18:31:43 GMT

Yes, I work with Source Code. What is your idea?

Re: Time Slider Widget Question

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:50:47 GMT

Tim,

It is a simple mod. In the TimeWidget set the skinClass on the TimeSlider component to this modified skin:

<?xml version="1.0" encoding="utf-8"?>
<!--
    Copyright (c) 2010 ESRI

    All rights reserved under the copyright laws of the United States
    and applicable international laws, treaties, and conventions.

    You may freely redistribute and use this sample code, with or
    without modification, provided you include the original copyright
    notice and use restrictions.

    See use restrictions in use_restrictions.txt.
-->
<!---
    The default skin class for the TimeSlider component.
    <p><b>Since:</b> ArcGIS API for Flex 2.0</p>
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <!-- host component -->
    <fx:Metadata>
        /**
         * A strongly typed property that references the component to which this skin is applied.
         */
        [HostComponent("com.esri.ags.components.TimeSlider")]
    </fx:Metadata>

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"/>
    </s:layout>

    <fx:Declarations>
        <!--- @private -->
        <mx:DateFormatter id="dateFormatter" formatString="{resourceManager.getString('ESRIMessages', 'timeSliderDateFormatString')}"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            private function dataTipFormatter(value:Number):String
            {
                return dateFormatter.format(hostComponent.timeStops[value]);
            }
        ]]>
    </fx:Script>

    <!--
         <s:Button id="playButton"
         enabled.disabled="false"
         label="{resourceManager.getString('ESRIMessages','timeSliderPlay')}"/>

         <s:Button id="pauseButton"
         enabled.disabled="false"
         label="{resourceManager.getString('ESRIMessages','timeSliderPause')}"/>
    -->

    <!--- ToggleButton to toggle between play pause modes. -->
    <s:ToggleButton id="playPauseButton"
                    enabled.disabled="false"
                    skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin"/>

    <!--- The HSlider control to select a time stop by moving the slider thumb(s) between the end points of the slider track. -->
    <mx:HSlider id="slider"
                width="100%" liveDragging="true"
                dataTipFormatFunction="dataTipFormatter"
                enabled.disabled="false"
                showDataTip="{hostComponent.timeStops != null}"
                showTrackHighlight="{!(hostComponent.thumbCount == 1 &amp;&amp; hostComponent.singleThumbAsTimeInstant)}"
                tickInterval="1"/>

    <!--- Button to go to the previous time stop. -->
    <s:Button id="previousButton"
              enabled.disabled="false"
              skinClass="com.esri.ags.skins.TimeSliderPreviousButtonSkin"/>

    <!--- Button to go to the next time stop. -->
    <s:Button id="nextButton"
              enabled.disabled="false"
              skinClass="com.esri.ags.skins.TimeSliderNextButtonSkin"/>

</s:Skin>

topic Re: Time Slider Widget Question in ArcGIS Viewer for Flex Questions

Time Slider Widget Question

Re: Time Slider Widget Question

Re: Time Slider Widget Question

Re: Time Slider Widget Question

Re: Time Slider Widget Question