×

Discussion Board

Results 1 to 8 of 8
  1. #1
    Registered User
    Join Date
    Oct 2011
    Posts
    30

    How to implement the slider control just like the camera app in lumia 1020

    Hi,all could any give me some tips that how to implement the slider control looks like the following :


    Thanks !

  2. #2
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,764

    Re: How to implement the slider control just like the camera app in lumia 1020

    I can not get the image, even if I open the link separately.

  3. #3
    Nokia Developer Moderator
    Join Date
    Feb 2011
    Location
    Portugal
    Posts
    968

    Re: How to implement the slider control just like the camera app in lumia 1020

    Quote Originally Posted by wizard_hu_ View Post
    I can not get the image, even if I open the link separately.
    I can see the image Wizard. Its basically the Lumia 1020 viewfinder with the manual controls.

    Small2 I'm not sure how the viewfinder was implemented. This can be something done in C++ using XNA or it can be XAML. In either case we are looking at a layer on top of the viewfinder, with a transparency and a slider that is rounded instead of a straight line. I would guess this will require you to play with blend to do a custom slider control. The slidr controls seems to be composed of 2 objects. A line that indicates a path, and that is variable in curvature if you pay attention, and the slider itself that is a rounded image with an icon in it.

  4. #4
    Super Contributor
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    580

    Re: How to implement the slider control just like the camera app in lumia 1020

    Quote Originally Posted by wizard_hu_ View Post
    I can not get the image, even if I open the link separately.
    I see the image - it's a screen grab from the Nokia Lumia 1020 launch event showing the Nokia Pro Camera app with All the toggles/sliders visible.

    Small2 - how do you think you would implement it? what have you tried?

  5. #5
    Registered User
    Join Date
    Oct 2011
    Posts
    30

    Re: How to implement the slider control just like the camera app in lumia 1020

    Quote Originally Posted by theothernt View Post
    I see the image - it's a screen grab from the Nokia Lumia 1020 launch event showing the Nokia Pro Camera app with All the toggles/sliders visible.

    Small2 - how do you think you would implement it? what have you tried?
    well, I had tried before, and here was my demo project on my skydrive : http://sdrv.ms/1bE6Scd
    There were several bugs.
    Note: change the LayoutRoot like this :
    Code:
    <Grid x:Name="LayoutRoot" Background="Transparent"
              VerticalAlignment="Center"
              HorizontalAlignment="Center">
            
            <TextBlock x:Name="tbk" Text="Sample Data"/>
            
            <Ellipse Width="250" Height="250" Stroke="Brown" StrokeThickness="5" Margin="20">
                <Ellipse.Clip>
                    <RectangleGeometry Rect="125,0,125,250"/>
                </Ellipse.Clip>
            </Ellipse>
                <Image Source="/assets/CuteBall.png" Width="50" Height="50" CacheMode="BitmapCache"
                   VerticalAlignment="Top" ManipulationDelta="Image_ManipulationDelta_1"
                       ManipulationCompleted="Image_ManipulationCompleted_1">
                <Image.RenderTransform>
                    <RotateTransform CenterY="150" CenterX="25" Angle="30" x:Name="rotate"/>
                </Image.RenderTransform>
            </Image>
            
            <!--Commneted, caurse dose not work well-->
            <!--<local:CircuclarSlider Width="320" Height="320">
                <local:CircuclarSlider.DragContent>
                    <Image Source="/assets/CuteBall.png" Width="50" Height="50" />
                </local:CircuclarSlider.DragContent>
            </local:CircuclarSlider>-->
        </Grid>
    and here was a better one, but it was take so much space:
    xaml:
    Code:
       <Grid x:Name="ContentPanel" Grid.Row="1">
                <Canvas Name="canvas" Background="Green" >
                    <Ellipse Canvas.Top="370" Width="480" Height="480" 
                             Fill="LightBlue" Stroke="Orange" 
                             VerticalAlignment="Bottom" StrokeThickness="5" 
                             ManipulationStarted="canvas_ManipulationStarted" 
                             ManipulationDelta="canvas_ManipulationDelta"/>
                    <Ellipse Width="20" Name="circle" Height="20" 
                             Fill="Red" HorizontalAlignment="Left" 
                             VerticalAlignment="Bottom" Margin="0,0,0,-10" />
                </Canvas>
    CodeBehind:
    Code:
     public MainPage()
            {
                InitializeComponent();
    
                compositeTransform = new CompositeTransform();
                circle.RenderTransform = compositeTransform;
            }
    
            private void canvas_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
            {
                double x = e.ManipulationOrigin.X;
                //note: the number of 600 was the acturalheight of the canvas
                double y =600 - Math.Sqrt(240 * 240 - (Math.Ceiling(x) - 240) * (Math.Ceiling(x) - 240));
    
    
                circle.SetValue(Canvas.LeftProperty, x);
    
                circle.SetValue(Canvas.TopProperty, y);
    
            }
    
            private void canvas_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
            {
                double x = e.ManipulationOrigin.X;
                double y = 600 - Math.Sqrt(240 * 240 - (Math.Ceiling(x) - 240) * (Math.Ceiling(x) - 240)) ;
    
    
                circle.SetValue(Canvas.LeftProperty, Math.Ceiling(x));
    
                circle.SetValue(Canvas.TopProperty, Math.Ceiling(y));
            }
    Last edited by small2; 2013-07-16 at 02:29. Reason: add a better one

  6. #6
    Registered User
    Join Date
    Oct 2011
    Posts
    30

    Re: How to implement the slider control just like the camera app in lumia 1020

    Quote Originally Posted by wizard_hu_ View Post
    I can not get the image, even if I open the link separately.
    Oh ,may be it was blocked by the GFW, how about this one?


    and here was the link: http://www.youtech.it/var/ezwebin_si...mia1020_02.jpg

  7. #7
    Registered User
    Join Date
    Oct 2011
    Posts
    30

    Re: How to implement the slider control just like the camera app in lumia 1020

    Quote Originally Posted by joaocardoso View Post
    I can see the image Wizard. Its basically the Lumia 1020 viewfinder with the manual controls.

    Small2 I'm not sure how the viewfinder was implemented. This can be something done in C++ using XNA or it can be XAML. In either case we are looking at a layer on top of the viewfinder, with a transparency and a slider that is rounded instead of a straight line. I would guess this will require you to play with blend to do a custom slider control. The slidr controls seems to be composed of 2 objects. A line that indicates a path, and that is variable in curvature if you pay attention, and the slider itself that is a rounded image with an icon in it.
    I don't think it was a smart idea that "blend" the in-build slider control actually.

  8. #8
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,764

    Re: How to implement the slider control just like the camera app in lumia 1020

    Oh, thanks. Actually now I also see the original image too.
    For the maths part: Pythagoras can bring you pretty far, it should work well as long as the visible arc is shorter than the radius. When it is not, you may want to calculate with angles, atan is exactly the function which is usually present in computing environments, and atan(y/x) can give you the angle you need (where x and y starts from the middle of the circle, just like in the Pythagorean case).

Similar Threads

  1. Slider Control How To?
    By ardsrk in forum Symbian User Interface
    Replies: 1
    Last Post: 2011-02-16, 13:44
  2. Need of Slider Control in Container Screen
    By jameskittu in forum Symbian
    Replies: 3
    Last Post: 2010-03-19, 11:45
  3. Slider control not changing value
    By netproyectos in forum Symbian User Interface
    Replies: 0
    Last Post: 2006-09-19, 09:53
  4. Slider Control
    By asvindh in forum Symbian
    Replies: 2
    Last Post: 2006-05-18, 12:08

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×