Question

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.

Figure: Donut

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 colour object. The first value is the alpha transparency.

brush = SolidBrush(color)

We create a brush from the colour.

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

We draw a rectangle.

Figure: Transparent rectangles

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 colour 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 colour 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 colour with these factors, the human eye sees the image as gray.

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

We modify the pixel.

Figure: Grayscale image

Gradients

In computer graphics, gradient is a smooth blending of shades from light to dark or from one colour 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 colours.

Figure: Gradients

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 rotated clockwise.

Figure: Waiting

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