Super Duper All in one VisibilityConverter for #wpdev

On the 4th of July I blogged about simple visibility converters to toggle visibility. Of course I used two converters then.. one Visibility and another inverse aka Invisibility.

I also said that some clever people might tell me that its possible to do both in a single converter. Whilst that is true, no one did so apparently no one really reads or cares 😐 Coding4Fun toolkit has a converter than exposes Inverted property but my idea was to be able to use the same converter by pass a parameter.

So here’s what I did

 

public class VisibilityConverter : IValueConverter
{
    public enum Mode
    {
        Default,
        Inverted,
    }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Visibility returnVisibility = Visibility.Visible;
        Mode mode = Mode.Default;
        try
        {
            if(parameter != null)
                mode = (Mode)Enum.Parse(typeof(Mode), (string)parameter, true);
        }
        catch 
        {
            mode = Mode.Default;
        }

        if (value == null)
        {
            returnVisibility = Visibility.Collapsed;
        }
        else if(value is bool)
        {
            bool bVal = (bool)value;
            if (!bVal)
                returnVisibility = Visibility.Collapsed;
        }
        else if (value is string)
        {
            string itemVal = value as String;

            if (String.IsNullOrWhiteSpace(itemVal))
                returnVisibility = Visibility.Collapsed;
        }
        else if (value is IList)
        {
            IList objectList = value as IList;
            if (objectList == null || objectList.Count == 0)
                returnVisibility = Visibility.Collapsed;    
        }

        if (mode == Mode.Inverted)
            return returnVisibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
        else
            return returnVisibility;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

and how do I use it ? well this is how

<TextBlock Text="{Binding Review}" Visibility="{Binding Review, Converter={StaticResource VisibilityConverter}}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"/>
<TextBlock Text="(rating only)" Visibility="{Binding Review, Converter={StaticResource VisibilityConverter}, ConverterParameter=Inverted}" Foreground="{StaticResource PhoneSubtleBrush}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2"/>

I could pass Default parameter or just leave it out and it defaults to normal behaviour. If I however pass Inverted parameter to the converter, it inverts the behaviour. Bingo.

Now waiting for the next clever people to tell me that I am using parameter designed for something else 🙂

Advertisement

LongListSelector and scroll to top #wpdev

I pulled out my Marauder’s Map, tapped my wand and said “I solemnly swear I’m up to no good”. Bang Visual Studio opens up and I am back to playing with Cineworld app. I know a few users hate my ever so frequent updates but I use the app and I need change 🙂

so I recently got to putting a DatePicker and LongListSelector for being able to “Show by date” film listings. It all worked – well mostly worked until I realised that LongListSelector was scrolled all the way to the bottom. I wonder why..

Of course there is no SelectedIndex I could magically set so did a quick search on the net.. StackOverflow usually has all the answers to “the life, the universe and everything else” but it didn’t really have one for this question.

There was a note saying use UpdateLayout and then ScrollTo and setting it to ItemSource’s first child did the trick for WP8 but not for WP7.

var dataLetter = cd.GetGroupForDate(userSelection); // get the grouped list of films

FilmsForSelectedDate.Clear(); // clear the bound observable collection

foreach (var entry in dataLetter)
    FilmsForSelectedDate.Add(entry);

lstShowByDate.UpdateLayout(); // call updatelayout

if (FilmsForSelectedDate.Count != 0)
    lstShowByDate.ScrollTo(FilmsForSelectedDate[0]); // set scroll to first group in the list

The problem I realised was that the first group in the LLS had zero items i.e. it was not being shown. This affected WP7 toolkit LongListSelector but not the native WP8 LongListSelector

var dataLetter = cd.GetGroupForDate(userSelection);

FilmsForSelectedDate.Clear();

foreach (var entry in dataLetter)
    FilmsForSelectedDate.Add(entry);

lstShowByDate.UpdateLayout();

if (FilmsForSelectedDate.Count != 0)
    lstShowByDate.ScrollTo(FilmsForSelectedDate.First(g => g.HasItems));

So the solution as shown above is, find the group that has items and set scroll to that element.

Mischief managed!

PhotoViewer with pinch & zoom, pan and flick support

A while back after scouring the net and merging some code, I created PhotoViewer that is used in my cool camera app. It might not be perfect but it works acceptably. Here’s how it work in code.

Lets start with Xaml..

<Image x:Name="imgViewer"  Stretch="UniformToFill" Width="728" Height="480">
    <Image.RenderTransform>
        <ScaleTransform x:Name="scaleTrans" ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener Flick="GestureListener_Flick" 
            PinchStarted="GestureListener_PinchStart" 
            PinchDelta="GestureListener_PinchDelta" 
            PinchCompleted="GestureListener_PinchComplete"
            DragStarted="GestureListener_DragStart"
            DragDelta="GestureListener_DragDelta"
            DragCompleted="GestureListener_DragCompleted"
            Tap="GestureListener_Tap"
            DoubleTap="GestureListener_DoubleTap"/>
    </toolkit:GestureService.GestureListener>
</Image>

as you can see.. we start with Image and add a ScaleTransform. Next up with add GestureService from SL Toolkit. I am going to subscribe to some events. Here’s how the code behind looks

lets start by defining some data members

private readonly DispatcherTimer m_animationTimer = new DispatcherTimer() { Interval = TimeSpan.FromMilliseconds(10) };
private double m_friction = 0.99;
private Point m_scrollStartPoint;
private Point m_scrollTarget = new Point();
private double m_hvelocity;
private double m_vvelocity;
private double m_angle;
private double _cx, _cy;

Next up, set the Tick event in the constructor so we can do something on Tick of the DispatcherTimer.

m_animationTimer.Tick += new EventHandler(m_animationTimer_Tick);

Now the real code.. lets implement some of the event handlers

void m_animationTimer_Tick(object sender, EventArgs e)
{
    if (m_hvelocity < 0.1)
        m_hvelocity = 0;

    if (m_vvelocity < 0.1)
        m_vvelocity = 0;

    if (m_hvelocity == 0 && m_vvelocity == 0)
    {
        m_animationTimer.Stop();
        return;
    }

    if (m_angle > 0 && m_angle < 180)
        scaleTrans.CenterY -= m_vvelocity;
    else
        scaleTrans.CenterY += m_vvelocity;

    if(m_angle > 90 && m_angle < 270)
        scaleTrans.CenterX += m_hvelocity;
    else
        scaleTrans.CenterX -= m_hvelocity;
            
     m_hvelocity *= m_friction;
     m_vvelocity *= m_friction;

     if ((scaleTrans.CenterX <= 0 || scaleTrans.CenterX >= imgViewer.Width) || (scaleTrans.CenterY <= 0 || scaleTrans.CenterY >= imgViewer.Height))
     {
         if (scaleTrans.CenterX < 0)
             scaleTrans.CenterX = 0;

         if (scaleTrans.CenterX > imgViewer.Width)
             scaleTrans.CenterX = imgViewer.Width;

         if (scaleTrans.CenterY < 0)
             scaleTrans.CenterY = 0;

          if (scaleTrans.CenterY > imgViewer.Height)
              scaleTrans.CenterY = imgViewer.Height;

          m_animationTimer.Stop();
    }
}
        
private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
    m_angle = e.Angle;

    m_animationTimer.Stop();

    m_scrollStartPoint = e.GetPosition(this);
    m_scrollTarget.X = m_scrollStartPoint.X + e.HorizontalVelocity;
    m_scrollTarget.Y = m_scrollStartPoint.Y + e.VerticalVelocity;
                
    m_hvelocity = Math.Abs(e.HorizontalVelocity)/100;
    m_vvelocity = Math.Abs(e.VerticalVelocity)/100;
                                
    if (m_scrollTarget.X < 0) 
        m_scrollTarget.X = 0;

    if(m_scrollTarget.X > imgViewer.Width)
        m_scrollTarget.X = imgViewer.Width;

    if (m_scrollTarget.Y < 0)
        m_scrollTarget.Y = 0;

    if (m_scrollTarget.Y > imgViewer.Height)
        m_scrollTarget.Y = imgViewer.Height;

    m_animationTimer.Start();
}

private void GestureListener_PinchStart(object sender, PinchStartedGestureEventArgs e)
{
    Point p1 = e.GetPosition(imgViewer, 0);
    Point p2 = e.GetPosition(imgViewer, 1);

    scaleTrans.CenterX = (p1.X + ((p2.X - p1.X) / 2));
    scaleTrans.CenterY = (p1.Y + ((p2.Y - p1.Y) / 2));

    _cx = scaleTrans.ScaleX;
    _cy = scaleTrans.ScaleY;
}

private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e)
{         
    // Compute new scaling factors
    double cx = _cx * e.DistanceRatio;
    double cy = _cy * e.DistanceRatio;

    // If they're between 1.0 and 4.0, inclusive, apply them
    if (cx >= 1.0 && cx <= 4.0 && cy >= 1.0 && cy <= 4.0)
    {
        if ((cy - 1) < 0.1 && (cx - 1) < 0.1)
            cx = cy = 1;
            
        scaleTrans.ScaleX = cx;
        scaleTrans.ScaleY = cy;
    }
}

private void GestureListener_PinchComplete(object sender, PinchGestureEventArgs e)
{
}

private void GestureListener_DragStart(object sender, DragStartedGestureEventArgs e)
{
}

private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
    scaleTrans.CenterX = (scaleTrans.CenterX - e.HorizontalChange);
    scaleTrans.CenterY = (scaleTrans.CenterY - e.VerticalChange);

    if (scaleTrans.CenterX < 0)
        scaleTrans.CenterX = 0;
    else if (scaleTrans.CenterX > (imgViewer.Height * scaleTrans.ScaleX))
        scaleTrans.CenterX = imgViewer.Height * scaleTrans.ScaleX;

    if(scaleTrans.CenterY < 0)
        scaleTrans.CenterY = 0;
    else if (scaleTrans.CenterY > (imgViewer.Height * scaleTrans.ScaleY))
        scaleTrans.CenterY = imgViewer.Height * scaleTrans.ScaleY;
}

private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
{
    scaleTrans.CenterX = (scaleTrans.CenterX - e.HorizontalChange);
    scaleTrans.CenterY = (scaleTrans.CenterY - e.VerticalChange);

    if (scaleTrans.CenterX < 0)
        scaleTrans.CenterX = 0;
    else if (scaleTrans.CenterX > imgViewer.Width)
        scaleTrans.CenterX = imgViewer.Width;

    if (scaleTrans.CenterY < 0)
        scaleTrans.CenterY = 0;
    else if (scaleTrans.CenterY > (imgViewer.Height))
        scaleTrans.CenterY = imgViewer.Height;
}

private void GestureListener_DoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
    scaleTrans.ScaleX = scaleTrans.ScaleY = 1;
}

private void GestureListener_Tap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
    m_animationTimer.Stop();
    m_hvelocity = 0;
    m_vvelocity = 0;
}

High Performance Touch Interface #wpdev #wp7dev

Every now and again i come across developer questions like why is manipulation delta slow etc. Let me tell you why.

UIElement Silverlight for #windowsphone exposes a few events like

http://msdn.microsoft.com/en-us/library/system.windows.uielement(v=vs.95).aspx

	ManipulationCompleted	Occurs when a manipulation and inertia on the UIElement is complete.
	ManipulationDelta	Occurs when the input device changes position during a manipulation.
	ManipulationStarted	Occurs when an input device begins a manipulation on the UIElement.

These are high level touch interfaces and there is a significant overhead in reporting (and hence delay etc).

If you are say drawing on a bitmap or canvas, you dont want a min delta change before event is fired. For that lets look at low-level interface exposed in Silverlight.

http://msdn.microsoft.com/en-us/library/system.windows.input.touch(v=vs.95).aspx

FrameReported

Occurs when the input system promotes a Windows 7 touch message for Silverlight.

Touh.FrameReported is a low level method and has little overhead and is very very precise. Let me give you a code sample

Touch.FrameReported += Touch_FrameReported;

you can do above in Loaded event. Here’s the implementation of the Touch_FrameReported handler. WorkArea is Canvas in this. I have also used this in conjugation with WritableBitmap

private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
    try
    {
        // Determine if finger / mouse is down
        point = e.GetPrimaryTouchPoint(this.workArea);
        
        if (point.Position.X < 0 || point.Position.Y < 0)
        return;
        
        if (point.Position.X > this.workArea.Width || point.Position.Y > this.workArea.Height)
            return;
        
        if (this.lbLetter.SelectedIndex == -1)
            return;
        
        switch (point.Action)
        {
            case TouchAction.Down:
                draw = true;
                old_point = point;
                goto default;
        
            case TouchAction.Up:
                draw = false;
                break;
        
            default:
                Draw();
                break;
        }
    }
    catch
    {
        MessageBox.Show("Application encountered error processing last request.");
    }
}

I hope this is useful to #windowsphone developers out there.

Cool Camera #WP #WindowsPhone @CoolCameraWP

Cool Camera has been udpated to 1.9. I just finished uploading the new XAP to marketplace. So whats changed ?
Well not much 🙂 I have been busy with DIY at home so this is a bug fix / UX enhancement release

1) Portrait pictures with zoom were not correctly cropped. Fixed
2) Reduce album view so show only 8 but larger thumbnails
3) Metro UX enhancement in Media viewer based on Dave Crawford’s suggestions. Hide instead of disabling controls and ensure fonts are readable 🙂

I’ve also been testing my Alarm Clock app (supporting multiple alarms)

Navigate to selected Pivot Item #wpdev #wp7dev

I have come across a few instances where its desireable to navigate to a certain pivot item rather than landing on default and then finding your way around.

This is very easy. I tend to define some mechanism e.g. an enum for each pivot item. I create a static property (or you can choose whatever data passing mechanism you prefer). I set the property and navigate to pivot page and navigate to correct item.

Here’s how i do it. Itercept the OnNavigatedTo of the Pivot page and set the correct item as selected.

public enum PivotDef
{
   One,
   Two,
   Three,
   Four,
}

public static PivotDef SelectedPivot;

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
   switch (SelectedPivot)
   {
      case PivotDef.One:
         this.pvtControl.SelectedItem = this.pvt1;
         break;

      case PivotDef.Two:
         this.pvtControl.SelectedItem = this.pvt2;
         break;

      case PivotDef.Three:
         this.pvtControl.SelectedItem = this.pvt3;
         break;

      case PivotDef.Four:
         this.pvtControl.SelectedItem = this.pvt4;
         break;
   }

   base.OnNavigatedTo(e);
}

sample project is available from http://wp7pivottest.codeplex.com

Lighten Darken Skin tone in C# and Silverlight for #windowsphone #wpdev

I started Cool Camera as a stop gap application trying to figure my way around SatNav app (which started while i was answering some posts on AppHub forums). Current availble version stands at 1.6 and 1.7 is with Microsoft.

It has come a long way since 1.0 – which only supported: Taking pictures and a camera style HUD. The picture viewer was very basic. Just display the image in Image control. Since then i have * added support for filters, added video recording and playback, added album viewer. I have worked a bit more on image processing and i am a bit better at image processing.

The first set of filters were added to app thanks to René Schulte – http://kodierer.blogspot.co.uk/. I remember coming across http://picfx.codeplex.com a while back and it provided very handy way to creating and applying effects to WriteableBitmaps. I used the few supplied to get stared however before long i was asked if i could provide a way of making images darker. The most common scenario is when you use flash and the images are too white – especially faces. As i started, i remembered face detection post by Rene. http://channel9.msdn.com/coding4fun/articles/FaceLight–Silverlight-4-Real-Time-Face-Detection.

I started with Rene’s YCbCr code and the first pass to detect whether color falls into skin tone range. The first pass for skin tone detection worked just fine, how search began on how to increase or decrease luminance of image. I came across HSLColor which had an ligthen / darken method but that did’t work so eventually, i used Lerp

public int[] Process(int[] inputPixels, int width, int height)
      {
          var resultPixels = new int[inputPixels.Length];

          // Threshold every pixel
          for (int i = 0; i < inputPixels.Length; i++)
          {
              int c = inputPixels[i];

              var ycbcr = YCbCrColor.FromArgbColori(c);
              if (ycbcr.Y >= LowerThreshold.Y && ycbcr.Y <= UpperThreshold.Y
               && ycbcr.Cb >= LowerThreshold.Cb && ycbcr.Cb <= UpperThreshold.Cb
               && ycbcr.Cr >= LowerThreshold.Cr && ycbcr.Cr <= UpperThreshold.Cr)
              {
                  // skin tone match 
                  System.Windows.Media.Color sc = System.Windows.Media.Color.FromArgb((byte)(c >> 24), (byte)(c >> 16), (byte)(c >> 8), (byte)c);

                  Microsoft.Xna.Framework.Color xc = new Microsoft.Xna.Framework.Color(sc.R, sc.G, sc.B, sc.A);
                  xc = Color.Lerp(xc, Color, Amout);

                  c = (255 << 24) | ((byte)(xc.R > 255 ? 255 : xc.R) << 16) | ((byte)(xc.G > 255 ? 255 : xc.G) << 8) | (byte)(xc.B > 255 ? 255 : xc.B);
              }
              
              resultPixels[i] = c;
          }

          return resultPixels;
      }

Now all you need to do is pass the amount to Lerp and the color. To Darken you pass Black, to lighten, you pass White.

Cool Camera 1.6 for #windowsphone #wp7 #wpdev #wp7dev

Cool Camera version 1.6 has been submitted to AppHub.
What are the changes ?

1. Two dynamic filters with live preview. The filters are HSL and YCbCr filters (Hue, Saturation &Luminance and Luma & Chroma components – blue & red).
2. Additional single color filter (Red only, Green only, Blue only and Yellow only). This keeps the single color and changes rest of image to grayscale.
3. Upload of videos and pictures to SkyDrive
4. Single album and media viewer for both Videos and Pictures.

Anyone interested in Upload to SkyDrive or filter codes ?

Been keeping busy with #windowsphone #wp7dev

Go a2b still in beta at version 0.5
I have been spending a bit of time on Cool Camera. Version 1.5 is going to be out soon. Version 1.6 is almost ready. I have to start localisation soon.
So far new features in 1.6 include
* HSL (Hue, Saturation and luminance) Dynamic filter
* YUV (Actually YCbCr) – Brightness, Blue and Red chroma dynamic filter
* Corrected preview of Pixelate & Hexagoneal pixelate
* Upload of photos and videos to SkyDrive
* Since album for both photos and videos.

I will post some code on SkyDrive soon

Go a2b progress #wp7 #windowsphone #wp7dev

Every couple of weeks i usually come back to Go a2b. I recently realised that it wasn’t tethering that was causing me to exceed my mobile data limits. It was the fact that they had not put me on the right package 🙂 So while commuting in the traing, i have started testing Go a2b again.

I got the course based map turning correctly. I was so happy that i submitted it for beta. Then last night i had an epiphany and i got the zoom issue sorted. Now you can zoom in and out without any issues. no image corruption / lag any more. However i screwed up the map rotation 😦 i guess i have to check it again and go for a drive later on.

I love windowsphone. Its almost been a year and this i guess is the biggest app. Currently support maps are Bing, OpenStreet, Osmarender and Google maps. I tried yahoo but i had issues, I am looking into Nokia maps.