Painting II in Mono Winforms

In this part of the IronPython Mono Winforms tutorial, we will continue with painting.

Donut

In the following example we create an complex shape by rotating a bunch of ellipses.

donut.py
#!/usr/bin/ipy

import clr

clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Drawing import Size, Color, SolidBrush, Pen

class IForm(Form):

    def __init__(self):
        self.Text = 'Donut'
        self.Size = Size(350, 300)

        self.Paint += self.OnPaint
        self.CenterToScreen()

    def OnPaint(self, event):

        g = event.Graphics
        pen = Pen(Color.Gray, 1)
        
        size = self.ClientSize
        g.TranslateTransform(size.Width/2, size.Height/2)
        g.DrawEllipse(pen, -125, -125, 250, 250)
        
        for i in range(0, 36):
            g.DrawEllipse(pen, 0, 0, 120, 50)
            g.RotateTransform(10)
            
        g.Dispose()

Application.Run(IForm())

We draw five lines on the form. Each line has different DashStyle.

 size = self.ClientSize
 g.TranslateTransform(size.Width/2, size.Height/2)
 g.DrawEllipse(pen, -125, -125, 250, 250)

We draw a circle in the middle of the form.

 for i in range(0, 36):
     g.DrawEllipse(pen, 0, 0, 120, 50)
     g.RotateTransform(10)

We draw 36 ellipses, each rotated by 10 degree after the last one. Thus getting the donut object.

Transparent rectangles

Transparency is the quality of being able to see through a material. The easiest way to understand transparency is to imagine a piece of glass or water. Technically, the rays of light can go through the glass and this way we can see objects behind the glass.

In computer graphics, we can achieve transparency effects using alpha compositing. Alpha compositing is the process of combining an image with a background to create the appearance of partial transparency. The composition process uses an alpha channel. (wikipedia.org, answers.com)

transparentrectangles.py
#!/usr/bin/ipy

import clr

clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Drawing import Size, Color, SolidBrush

class IForm(Form):

    def __init__(self):
        self.Text = 'Transparent rectangles'
        self.Size = Size(590, 110)

        self.Paint += self.OnPaint
        
        self.CenterToScreen()


    def OnPaint(self, event):

        g = event.Graphics

        for i in range(1, 11):
            color = Color.FromArgb(i*25, 0, 0, 255)
            brush = SolidBrush(color)
            g.FillRectangle(brush, 50*i, 20, 40, 40)
            

Application.Run(IForm())

In the example we will draw ten rectangles with different levels of transparency.

 color = Color.FromArgb(i*25, 0, 0, 255)

This line creates a color object. The first value is the alpha transparency.

 brush = SolidBrush(color)

We create a brush from the color.

 g.FillRectangle(brush, 50*i, 20, 40, 40)

We draw a rectangle.

Grayscale image

The following example creates a grayscale image.

grayscale.py
#!/usr/bin/ipy

import clr
import sys

clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Drawing import Size, Rectangle
from System.Drawing import Bitmap, Color

class IForm(Form):

    def __init__(self):
        self.Text = 'Grayscale'
        self.Size = Size(290, 150)

        self.Paint += self.OnPaint

        self.rotunda = self.loadImage()
        self.gs = self.grayScale(self.rotunda.Clone())

        self.CenterToScreen()

    def loadImage(self):
        try:
            rotunda = Bitmap("rotunda.jpg")
            return rotunda
        except Exception, e:
            print e.msg
            sys.exit(1)

    def grayScale(self, image):
        
        w = image.Width
        h = image.Height

        for i in range(w):
            for j in range(h):
                c = image.GetPixel(i, j)
                lum = 0.299*c.R + 0.587*c.G + 0.114*c.B
                image.SetPixel(i, j, Color.FromArgb(lum, lum, lum))
          
        return image


    def OnPaint(self, event):

        g = event.Graphics

        r1 = Rectangle(15, 15, self.rotunda.Width, self.rotunda.Height)
        g.DrawImage(self.rotunda, r1)

        r2 = Rectangle(150, 15, self.gs.Width, self.gs.Height)
        g.DrawImage(self.gs, r2)
        
        g.Dispose()

Application.Run(IForm())

We have two images in our example. A color and a grayscale one.

 self.rotunda = self.loadImage()

The loadImage() method loads a bitmap from the current working directory of the disk.

 self.gs = self.grayScale(self.rotunda.Clone())

The grayScale() method makes a grayscale image from a color image. We give a copy of the rotunda image as a parameter to this method.

 c = image.GetPixel(i, j)

We get all pixels from the image.

 lum = 0.299*c.R + 0.587*c.G + 0.114*c.B

This equation calculates a luminocity for a grayscale image. If we scale the the red, green and blue parts of the color with these factors, the human eye sees the image as gray.

 image.SetPixel(i, j, Color.FromArgb(lum, lum, lum))

We modify the pixel.

Gradients

In computer graphics, gradient is a smooth blending of shades from light to dark or from one color to another. In 2D drawing programs and paint programs, gradients are used to create colorful backgrounds and special effects as well as to simulate lights and shadows. (answers.com)

gradients.py
#!/usr/bin/ipy

import clr

clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Drawing import Size, Color, Point
from System.Drawing.Drawing2D import LinearGradientBrush

class IForm(Form):

    def __init__(self):
        self.Text = 'Gradients'
        self.Size = Size(350, 350)
        self.Paint += self.OnPaint

        self.CenterToScreen()

    def OnPaint(self, event):

        g = event.Graphics

        pt1 = Point(5, 5)
        pt2 = Point(25, 25)
        lg =  LinearGradientBrush(pt1, pt2, Color.Red, Color.Black)
        g.FillRectangle(lg, 20, 20, 300, 40)

        pt1 = Point(5, 25)
        pt2 = Point(20, 2)
        lg = LinearGradientBrush(pt1, pt2, Color.Yellow, Color.Black)
        g.FillRectangle(lg, 20, 80, 300, 40)

        pt1 = Point(5, 25)
        pt2 = Point(2, 2)
        lg = LinearGradientBrush(pt1, pt2, Color.Green, Color.Black)
        g.FillRectangle(lg, 20, 140, 300, 40)

        pt1 = Point(25, 25)
        pt2 = Point(15, 25)
        lg =  LinearGradientBrush(pt1, pt2, Color.Blue, Color.Black)
        g.FillRectangle(lg, 20, 200, 300, 40)

        pt1 = Point(0, 10)
        pt2 = Point(0, 20)
        lg = LinearGradientBrush(pt1, pt2, Color.Orange, Color.Black)
        g.FillRectangle(lg, 20, 260, 300, 40)

        lg.Dispose()
        g.Dispose()


Application.Run(IForm())

We draw five rectangles which are filled with different linear gradients.

 pt1 = Point(5, 5)
 pt2 = Point(25, 25)

These two are the controlling points of the linear gradient brush.

 lg =  LinearGradientBrush(pt1, pt2, Color.Red, Color.Black)

We create the LinearGradientBrush object. We use two controlling points and two blending colors.

Waiting

In this examle, we use transparency effect to create a waiting demo. We will draw 8 lines that will gradually fade out creating an illusion, that a line is moving. Such effects are often used to inform users, that a lengthy task is going on behind the scenes. An example is streaming video over the internet.

waiting.py
#!/usr/bin/ipy

import clr

clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, Timer
from System.Drawing import Size, Color, SolidBrush, Pen
from System.Drawing.Drawing2D import SmoothingMode, LineCap
from System.ComponentModel import Container


trs =  (
    ( 0, 35, 70, 100, 150, 180, 210, 250 ),
    ( 250, 0, 35, 70, 100, 150, 180, 210  ),
    ( 210, 250, 0, 35, 70, 100, 150, 180  ),
    ( 180, 210, 250, 0, 35, 70, 100, 150 ),
    ( 150, 180, 210, 250, 0, 35, 70, 100 ),
    ( 100, 150, 180, 210, 250, 0, 35, 70 ),
    ( 70, 100, 150, 180, 210, 250, 0, 35 ),
    ( 35, 70, 100, 150, 180, 210, 250, 0 )
)


class IForm(Form):

    def __init__(self):
        self.Text = 'Waiting'
        self.Size = Size(250, 150)

        self.Paint += self.OnPaint

        self.count = 0
        
        self.timer = Timer(Container())
        self.timer.Enabled = True
        self.timer.Interval = 80
        self.timer.Tick += self.OnTick

        self.CenterToScreen()

    
    def OnTick(self, sender, event):
        self.count = self.count + 1
        self.Refresh()

    def OnPaint(self, event):

        g = event.Graphics
        g.SmoothingMode = SmoothingMode.AntiAlias
        
        size = self.ClientSize
        g.TranslateTransform(size.Width/2, size.Height/2)
        
        for i in range(0, 8):
            color = Color.FromArgb(trs[self.count%8][i], 30, 30, 30)
            pen = Pen(color, 3)
            pen.StartCap = LineCap.Round
            pen.EndCap = LineCap.Round
            g.DrawLine(pen, 0, -10, 0, -40)
            g.RotateTransform(45)
            
        pen.Dispose()    
        g.Dispose()
        

Application.Run(IForm())

We draw eight lines with eight different alpha values.

 self.timer = Timer(Container())
 self.timer.Enabled = True
 self.timer.Interval = 80
 self.timer.Tick += self.On

We use Timer to create animation.

trs =  (
    ( 0, 35, 70, 100, 150, 180, 210, 250 ),
    ...
)

This is a two dimensional collectino of transparency values used in this demo. There are 8 rows, each for one state. Each of the 8 lines will continuosly use these values.

 pen = Pen(color, 3)
 pen.StartCap = LineCap.Round
 pen.EndCap = LineCap.Round

We make the lines a bit thicker, so that they are better visible. We draw the lines with rouded caps.

 color = Color.FromArgb(trs[self.count%8][i], 30, 30, 30)

Here we define the transparency value for a line.

 g.DrawLine(pen, 0, -10, 0, -40)
 g.RotateTransform(45)

We draw 8 lines. They are roteted clockwise.

In this chapter of the IronPython Winforms tutorial, we did some more advanced painting in Mono Winforms library.

Home ‡ Contents ‡ Top of Page