Eto wish (ImageView and ColorPicker)

Serengeti (Rhino WIP) Developer
1

Hi @curtisw,

recently i’ve reported here that i cannot import from some dll files to use methods from System.Windows.Media and System.Windows namespaces required to style Eto controls in Rhino 8.

I’ve then found your post here which mentions the command SetDotNetRuntime which seems to fix the issue once set to NetFramework. But it requires a restart of Rhino 8 and probably changes other defaults. So i would like to find a solution for my problem which works ‘out of the box’, preferrably crossplatform.

I am coding an image viewer in Eto which is capable to display high res images with transparent background:

grafik
grafik1026×1083 325 KB

the problem is, the checkerboard. It is applied to an Eto.Forms.Scrollable like this:

self.scrollable.ControlObject.Background = self.CreateTileDrawingBrush()

the brush used is created with this function:

def CreateTileDrawingBrush(self):
    drawing_brush = Media.DrawingBrush()
    drawing_brush.TileMode = Media.TileMode.Tile
    drawing_brush.Stretch = Media.Stretch.None
    drawing_brush.AlignmentX = Media.AlignmentX.Left
    drawing_brush.AlignmentY = Media.AlignmentY.Top
    drawing_brush.Viewport = Rect(0,0,16,16)
    drawing_brush.ViewportUnits = Media.BrushMappingMode.Absolute
    drawing_1 = Media.GeometryDrawing()
    drawing_1.Brush = Media.Brushes.LightGray
    group_1 = Media.GeometryGroup()
    rect_top_left = Media.RectangleGeometry(Rect(0,0,8,8))
    rect_bottom_right = Media.RectangleGeometry(Rect(8,8,16,16))
    group_1.Children.Add(rect_top_left)
    group_1.Children.Add(rect_bottom_right)
    drawing_1.Geometry = group_1
    drawing_2 = Media.GeometryDrawing()
    drawing_2.Brush = Media.Brushes.White
    group_2 = Media.GeometryGroup()
    rect_top_right = Media.RectangleGeometry(Rect(8,0,16,8))
    rect_bottom_left = Media.RectangleGeometry(Rect(0,8,8,16))
    group_2.Children.Add(rect_top_right)
    group_2.Children.Add(rect_bottom_left)
    drawing_2.Geometry = group_2
    drawing_group = Media.DrawingGroup()
    drawing_group.Children.Add(drawing_1)
    drawing_group.Children.Add(drawing_2)
    drawing_brush.Drawing = drawing_group
    return drawing_brush

I wonder if Eto could provide a build in way to display such a checkerboard behind controls to indicate transparency ? For the ColorPicker control this would be useful if the color has transparency. Eg. below shows two ColorPicker controls, the upper one uses plain red (255,0,0) and the lower one is also plain red but with 50% transparency.

grafik

It would be great if the control shows a checkerboard background to indicate the transparency.

Same goes for an ImageView in case the ImageView.Image contains transparent pixels. Could this be added to Eto, maybe as a property of the control or just as i’ve shown it using some kind of build in DrawingBrush i could assign on my own ?

thanks,
c.

2

What about instead of using a checkerboard pattern directly as a background for the controls, you could
1.create an Eto.Drawing.Bitmap with the checkerboard pattern
2.draw this bitmap on a custom control derived from the Eto.Forms.Drawable control.
3.place your ImageView or ColorPicker control on top of this custom control
4.change opacity of the colorpicker based on the transparency set by the user.

That way you’d see a checkerboard background behind the controls when the user changes the transparency levels

3

Hi @farouk.serragedine,

i’ve tried step 1 and 2. The problem with creating a new Bitmap from my Bitmap with a checkerboard background is that with images larger than 8K it takes a while and i need to finally save the image without the checkerboard. The dialog currently is build from a Scrollable which contains an ImageView which contains the image. The Scrollable is required to pan the image when it is larger than the dialog. The checkerboard used as background brush of the Scrollable needs to stay static (with the same size and position) which means, it does not move when the image is panned. It looks like this:

ImageViewer

For a ColorPicker this could work. But how would you do this so both controls are stacked on each other ? With a PixelLayout ?

I only see how to change the Control.BackgroundColor to a Color but not to a Drawable. Imho, this could all be made easier. The ColorPicker should by default display a checkerboard when a transparent color is chosen. I admit, for the ImageView, it is a special case which needs to be handled differently by me probably by using the Drawable. I’ll try this by now.

thanks,
c.