Time Slider Widget Question

1722
4
Jump to solution
02-18-2014 09:06 AM
TimHayes
Regular Contributor
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.
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor
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).

View solution in original post

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor
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).

View solution in original post

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
Tim,

   Actually you can add LiveDragging with a simple Skin Change. Do you work with the source code?
0 Kudos
TimHayes
Regular Contributor
Yes, I work with Source Code. What is your idea?
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
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>
0 Kudos