Creating an advanced HUD

Question

I'm making an interface for the AR Drone Quadcopter in WPF.

I neen some stuff on my HUD to make it usable.

One of the more advanced controls on the HUD is the artificial horizon, which tells the pilot the craft's current alignment to the horizon.

I have these 3 PNGs

The background

outliner 1

outliner 3

The first image I will move (The current pitch of the craft) and rotate (The current roll of the craft).

I will put the second image over the first, this one will only rotate around the center axis, it has ticks at certain degrees which will visualize the craft's roll even more.

The last one I will put on top of the second, this image just a visual improver.

Then I want to mask first image so that you only see whats inside the circle in image 2.

Last but not least I want to add a textblock to it and display the current altitude

The result will look something like this

Result

I know how to rotate and move the image, but how do I place the images on top of each other, and how do I mask the first image?

edit: Thanks to Ben I've gotten this far:

Rotate no translate

But I also need to translate the image Y position (The pitch of the aircraft)

With translate

When I add the translate transform I also translate the Clip (Mask) how can I translate the image without moving the mask?

you mind sharing the code? :) thanks! – Jayson Ragasa Oct 31 '13 at 00:41 — Jayson Ragasa, Oct 31 '13 at 00:41
Its basicly the code you see in my answer below – Anders Oct 31 '13 at 07:22 — Anders, Oct 31 '13 at 07:22

Ben · Accepted Answer · 2011-05-28T12:29:33.030

4

A little sample that how you can use DrawingGroups and a ClipGeometry inside it.

<Grid>
  <Image Source="Images\Background.jpg" />

  <Image>
    <Image.Source>
      <DrawingImage>
        <DrawingImage.Drawing>
          <DrawingGroup>
            <DrawingGroup>
              <!-- You can rotate a DrawingGroup -->
              <DrawingGroup.Transform>
                <RotateTransform Angle="-15" CenterX="50" CenterY="50" />
              </DrawingGroup.Transform>

              <ImageDrawing ImageSource="Images\last.png" Rect="0,0,100,100" />
              <DrawingGroup.ClipGeometry>
                <EllipseGeometry Center="50,50" RadiusX="25" RadiusY="25" />
              </DrawingGroup.ClipGeometry>
            </DrawingGroup>

            <DrawingGroup>
              <ImageDrawing ImageSource="Images\middle.png" Rect="0,0,100,100" />
              <ImageDrawing ImageSource="Images\outer.png" Rect="0,0,100,100" />
            </DrawingGroup>
          </DrawingGroup>
        </DrawingImage.Drawing>
      </DrawingImage>
    </Image.Source>
  </Image>
</Grid>

edited May 28 '11 at 12:29

answered May 28 '11 at 12:03

Ben

1,023
9
10

Cool, so last.png is the first image at layer 0, the one that I will rotate? Looks like the entire thing will rotate with that code? Will have to try it out later tonight.. thanks! – Anders May 29 '11 at 10:04
Yes, in that DrawingGroup there are only one image('last.png'). We apply a clipping geometry(a circle in this case) and a transorm on this group. Then we render the two other image on top of this group. (You can remove the DrawingGroup that contains the two image if you want.) And i suggest that you should use a binding on the RotateTransorm's Angle. – Ben May 29 '11 at 10:18
Yeah, I see it now. I missed that it was in a seperate group.. Will try this tonight if i find time and get back to you.. Thanks for all your help! – Anders May 29 '11 at 11:54
Works great right away, gotta love WPF :D But one problem.. I also need to translate the BG.. But then i also translate the mask, anyway of solving that? – Anders May 29 '11 at 20:47
Sorry, but i don't really understand. – Ben May 29 '11 at 20:58

score 0 · Answer 2 · answered May 30 '11 at 09:36

I was tired last night :D To get the background to rotate and translate but not the Clipping was just to put the background in a sub group to the clipping group... Now it works!

    <Image Width="240" Height="240">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup>
                        <DrawingGroup>
                            <DrawingGroup>
                                <DrawingGroup.Transform>
                                    <TransformGroup>
                                        <RotateTransform Angle="-15" CenterX="120" CenterY="120" />
                                        <TranslateTransform Y="-20" />
                                    </TransformGroup>
                                </DrawingGroup.Transform>

                                <ImageDrawing ImageSource="Images\pNxVK.png" Rect="0,0,240,240" />
                            </DrawingGroup>

                            <DrawingGroup.ClipGeometry>
                                <EllipseGeometry Center="120,120" RadiusX="60" RadiusY="60">
                                </EllipseGeometry>
                            </DrawingGroup.ClipGeometry>
                        </DrawingGroup>

                        <DrawingGroup>
                            <ImageDrawing ImageSource="Images\zUr8D.png" Rect="0,0,240,240" />
                            <ImageDrawing ImageSource="Images\XPZW9.png" Rect="0,0,240,240" />
                        </DrawingGroup>
                    </DrawingGroup>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>

Creating an advanced HUD

2 Answers2