Loading...
Menu

Learning By Sample: GDI+ using ASP .NET

p.

[* Learning By Sample : GDI+ using ASP .NET *]

*Table of Content *

Foreword ……………………………………………… 1

Learning By Sample ? …………………………… 1

Requirements ………………………………….. 3

Creating Line ………………………………………… 5

Creating Shapes …………………………………… 15

Text Rotation ……………………………………… 26

Gradient Color …………………………………….. 34

Creating Thumbnail ……………………………… 42

CAPTCHA …………………………………………… 56

[* Learning By Sample : GDI+ using ASP .NET *]

Foreword

Learning By Sample ?

Why the format using Learning By Sample

series ? Is it really different with other tutorials

out there ? Ehm, I already wrote three books (in

Indonesian) using this kind of format, and many

readers already contact me about how this

format really help them to learn from the

scratch. So, why in the world I’m not re-create

it in English format, right ? Eventhough actually,

it is similar with Hands On Lab series which

already famous in Microsoft site previously.

1

[* Learning By Sample : GDI+ using ASP .NET *]

All of my lesson also being designed as

short samples and short time exercise. Thus, I

hope that each of tutorial series would take only

at least 10-15 minutes maximum to learn. Why

keep it short ? Because many beginner (and

even expert) will find boring whenever they

must keep studying more than 15 minutes (but

you will never get bored when you online in

such time right ?).

Another reason is just because many of

samples in this series come up from my

lecturing task exercise. So, I just try to compile

all my lab exercises in order to keep it tidy and

also reusable for my students. That’s why you

will find many unsorted course material inside

2

[* Learning By Sample : GDI+ using ASP .NET *]

these series, however, just take a seat and enjoy

the ride !

Requirements

In this series, I try to give simple example

about GDI+. So what is GDI+ anyway ? GDI+ or

GraphicsDrawing Interface is merely part of

.NET Framework which entirely purposed in

manipulating graphics. However I’m not going

to make you understand complex theory about

this book. I just try to make you understand it

in very simple and stupid way.

All of my samples in this series use

Visual Web Developer 2010 Express edition

however you can also do it all using Visual

Studio. If you really want to follow this series,

3

[* Learning By Sample : GDI+ using ASP .NET *]

then you should aware that basic programming

knowledge is needed. You should also familiar

with ASP .NET especially for version 3.5 above.

FYI, I’m a VB guy, so please don’t

complaint if I use VB entirely in this series. But

nowadays, there’s no such useful things if we

argue about language differences, because I

just try to share something that I know. So, if

you don’t like VB and want to have another

tutorial with your own favourit language, then

I’d be happy to read it. Now, let’s get

started…….

4

[* Learning By Sample : GDI+ using ASP .NET *]

Creating Line

1. First, ensure that you already open Visual

Web Developer 2010 Express Edition

2. Create a newly blank website and give it a

name

3. Now, let’s create a new blank web page

5

[* Learning By Sample : GDI+ using ASP .NET *]

4. Next, put a text for labelling with a Textbox

and a Button. Also add an Image control

right below. Thus, the web page should be

look like this picture :

6

[* Learning By Sample : GDI+ using ASP .NET *]

5. Very simple right ? Then let’s go on to next

step. Just double click at the Button to go to

Code Editor, and type this code :

7

[* Learning By Sample : GDI+ using ASP .NET *]

6. Some errors showing ? Don’t worry, just type

this reference command at the top of your

code :

8

[* Learning By Sample : GDI+ using ASP .NET *]

7. So, what is really happen in those lines of

code ? Here is the explanation :

a. First, we must import reference of

System.Drawing at top of all code to

use GDI+

b. Then we must declare a Bitmap with

certain dimension (in this sample I

use 300× 300, but you can modify it

of course). Just assume that this

Bitmap is like your canvas which will

be ready to be painted later.

9

[* Learning By Sample : GDI+ using ASP .NET *]

c. Now take a look at Graphics variable

which took place from Bitmap object.

This Graphics object then being

cleared using White background

color.

d. Then using simple looping, we just

create Line object in Black color.

10

[* Learning By Sample : GDI+ using ASP .NET *]

e. Afterward, just save the result into a

temporary image file named as

test.png. This technique absolutely

not an efficient one, however, this is

just the beginning and I will show you

later the other technique in other

tutorial chapter.

11

[* Learning By Sample : GDI+ using ASP .NET *]

f. So, we already got the result, then

just display it into Image control.

g. Also don’t forget to dispose all the

previos declared object, thus we can

execute this web page over and over

again.

12

[* Learning By Sample : GDI+ using ASP .NET *]

8. Now, let’s execute this simple web page,

just press Ctrl+F5 and see what happen :

13

[* Learning By Sample : GDI+ using ASP .NET *]

14

[* Learning By Sample : GDI+ using ASP .NET *]

Creating Shapes

1. Now, let’s create a new blank web page

2. Then put a RadioButtonList control into our

newly created web page.

15

[* Learning By Sample : GDI+ using ASP .NET *]

3. RadioButtonList control should contains

many items of Option button inside it. There

are many ways to set those items, however

in this sample we just set it using naïve ways

which can be obtained by clicking its Smart

Tag and choose menu Edit Items. Later just

fill in three options inside it : Square, Circle

and Polygon. These options are shapes type

which will be created in next steps.

16

[* Learning By Sample : GDI+ using ASP .NET *]

4. Now, put a Button below the RadioButtonList

and set its Text property into Create Shapes.

17

[* Learning By Sample : GDI+ using ASP .NET *]

5. Last step in design mode is placing an Image

control underneath the Button

18

[* Learning By Sample : GDI+ using ASP .NET *]

6. Now, let’s turn out into Code Editor and type

our first line of code at the top :

7. Go back to Design mode and double click at

Button, then let’s type the core process of

this web pages :

19

[* Learning By Sample : GDI+ using ASP .NET *]

8. So, want an explanation for what happen in

the code ? Here we go :

a. First, we create a canvas from Bitmap

object as a square in size of 300

pixels (surely you can modify it based

on your requirement) and we make

this canvas available at Graphics

mode.

20

[* Learning By Sample : GDI+ using ASP .NET *]

b. Then we must detect which option is

chosen by user. If user click at first

option, then we draw a black

rectangle, and a black circle if user

put his option at second option.

c. The last option should have a

polygon drawn in web page. When

you draw a polygon, first thing that

21

[* Learning By Sample : GDI+ using ASP .NET *]

you must do is defining point

coordinat which will be assumed as

point array. I am an awful person in

math, thus the polygon result in this

sample is not a good one. If you want

to create a better polygon than you

should design it more carefully.

d. Afterward just save the result in a

temporary image file and display it

using Image control.

22

[* Learning By Sample : GDI+ using ASP .NET *]

e. Oh, also don’t forget to dispose all

the objects thus we can reuse again

and again.

9. Very simple right ? Now execute the web

page and here is some screenshot sample

from this simple web page :

23

[* Learning By Sample : GDI+ using ASP .NET *]

24

[* Learning By Sample : GDI+ using ASP .NET *]

25

[* Learning By Sample : GDI+ using ASP .NET *]

Text Rotation

1. In newly created web page, insert new table

which has 3 rows and 2 columns, by clicking

menu Table  Insert Table and in available

dialog box set its rows and columns value :

2. Type some text just for descriptive reason in

first columns :

26

[* Learning By Sample : GDI+ using ASP .NET *]

3. Then put a Textbox at first row in second

column :

4. Next step is placing a RadioButtonList at

second row in second column, then click at

its Smart Tag in order to choose sub menu

Edit Items. Afterward, create four new items

which will represent rotation degree for

upcoming text, also set its Repeat Direction

27

[* Learning By Sample : GDI+ using ASP .NET *]

property into Horizontal value, thus it will

stretch right for all its item :

28

[* Learning By Sample : GDI+ using ASP .NET *]

5. Now, focus on last row of the tabel, at first

column, put a Button inside it and at second

column put an Image control.

6. Let’s move on to the code editor, just double

click at the Button and type this code :

29

[* Learning By Sample : GDI+ using ASP .NET *]

7. Don’t forget to put reference code at the top

of your code :

8. Ok, I give you some simple explanation

here:

a. Just like previous chapter, we must

create a temporer “canvas” first :

30

[* Learning By Sample : GDI+ using ASP .NET *]

b. Then we prepare the rotation process

in this lines :

c. And the simple thing for drawing text

using GDI+ :

31

[* Learning By Sample : GDI+ using ASP .NET *]

d. Next step ? Surely we have to save it

in temporary image file and display it

in Image control

e. Of course, never forget to dispose all

the objects….

9. Are you done yet ? Just execute the web page

and see the result :

32

[* Learning By Sample : GDI+ using ASP .NET *]

33

[* Learning By Sample : GDI+ using ASP .NET *]

Gradient Color

1. In newly created web page, insert new table

which has 3 rows and 2 columns, by clicking

menu Table  Insert Table and in available

dialog box set its rows and columns value :

2. Then type descriptive text in first and

second row at first column

34

[* Learning By Sample : GDI+ using ASP .NET *]

3. Later put two DropDownList in each rows at

second column :

4. Next, put a Button in last row at first column

and set its Text property just like this

following picture :

35

[* Learning By Sample : GDI+ using ASP .NET *]

5. Last step in design mode is placing an Image

control just right after Button :

6. Double click at any empty space in Design

mode and we should be redirect in to

Page_Load event, and type this codes :

36

[* Learning By Sample : GDI+ using ASP .NET *]

a. First thing first, in this part of code

we declare Color enumeration. As you

should know that there are

KnownColor enumeration in Color

classes at .NET Framework.

b. Then why we should start it at

number 27 ? It just because the first

color until color number 27 merely

contains known color from client

desktop theme. It also happen in last

37

[* Learning By Sample : GDI+ using ASP .NET *]

8 known color, thus we do the

looping from 27 until last 8 only.

c. And the rest is easy, we just put all

the color’s array into available

DropDownList

7. Now let’s turn again into Code Editor by

double clicking the only available Button and

start typing this lines of code :

8. Some typo errors shown ? Don’t worry, just

add this line at top of Code Editor :

38

[* Learning By Sample : GDI+ using ASP .NET *]

9. Want some explanations for what the Button

do ? Here it go :

a. First, we create the “canvas” for our

next gradient brush

b. Next we create the “core” gradient

brush with Horizontal Linear mode,

you can also modify it using other

mode such as Diagonal or Vertical

39

[* Learning By Sample : GDI+ using ASP .NET *]

c. In following part, we create a virtual

rectangle to hold the gradient sample

d. Afterward, just save it in temporary

image file and display it in Image

control

e. Of course, never forget to dispose all

the object

40

[* Learning By Sample : GDI+ using ASP .NET *]

10. Okay then, let’s execute this web page and

see the result :

11. What do you think ? Too easy ? Well, have

fun to try it and we will create another

simple and astonishing sample in next

chapter…..

41

[* Learning By Sample : GDI+ using ASP .NET *]

Creating Thumbnail

1. In newly created web page, insert new table

which has 3 rows and 2 columns, by clicking

menu Table  Insert Table and in available

dialog box set its rows and columns value :

42

[* Learning By Sample : GDI+ using ASP .NET *]

2. Type some text just for descriptive reason in

first column and a FileUpload control in

second column, both of the at first row :

3. In second row of the table, put a Button in

first column and an Image control in second

column. Set the width and height property

of the Image control, both with the same

size which is 50px. This Image control will

be used as thumbnail container later.

43

[* Learning By Sample : GDI+ using ASP .NET *]

4. In third row, put a Listbox for it first second

and another Image control in next column.

In this second Image control set the width

and height property to 300px, since that this

control will be the container of the real

image.

44

[* Learning By Sample : GDI+ using ASP .NET *]

5. And int the last row, put a Label control and

set its Text property to none. This Label will

45

[* Learning By Sample : GDI+ using ASP .NET *]

be the container of some explanation text

later.

6. Now, let’s type some code for the Button,

here it is :

46

[* Learning By Sample : GDI+ using ASP .NET *]

7. Still getting some typo errors ? Don’t worry,

just add this function and procedure below

it :

47

[* Learning By Sample : GDI+ using ASP .NET *]

8. Another error warning ? Then add this

snippet at the top of Code editor :

9. Then back to Design mode, set the only

available Listbox to an autopostback

behavior. Then double click it to type the

code inside :

48

[* Learning By Sample : GDI+ using ASP .NET *]

10. The final step in the code editor is create a

Page_Load event which contains this code :

11. And the last step is creating a folder which

will hold all the uploaded images. Just go to

Solution explorer and right click in order to

49

[* Learning By Sample : GDI+ using ASP .NET *]

choose New folder and name it as images

folder.

12. Now, before you execute the web page, here

is some explanations for you :

a. At first, we need two references : first

for GDI+ (Drawing) and second for

the file operation (IO). File operation

reference is needed for Listbox which

50

[* Learning By Sample : GDI+ using ASP .NET *]

display all the thumbnail images in

images folder.

b. Then we also need some basic

variables to declare the IO operation

c. So, what happen when we click the

Button ?

i. First, of course the uploading

process happen

51

[* Learning By Sample : GDI+ using ASP .NET *]

ii. Next, we create a thumbnail

from the uploaded image

using

GetThumbnailImage

method. We create a 100 × 100

pixel thumbnail for any

uploaded image (you can also

do calculation in order to keep

the image thumbnail looks

proportional), and then save it

with adding prefix thumb. As

you can see, that method need

a dummy function which

52

[* Learning By Sample : GDI+ using ASP .NET *]

return true value, so we create

that dummy function….

iii. Then, the IsiList procedure

being called in order to refresh

the content of Listbox. FYI,

IsiList is an Indonesian phrase

which means fill the list. In this

procedure we just grab all the

53

[* Learning By Sample : GDI+ using ASP .NET *]

contents in images folder and

display

it

in

Listbox.

Remember that this procedure

being executed two times, in

Button click and in Page load.

d. Finally, when we already have some

images uploaded, Listbox should

have some contents. Then when user

click at one of those contents, we just

display the thumbnail version in first

Image control, and the real one in

54

[* Learning By Sample : GDI+ using ASP .NET *]

second Image control. I also add an

description of how the thumbnail

help us in reducing bandwidth of user

by display the real size of image and

compare it with the thumbnail size.

13. Got something in the explanation ? Or still

confuse ? Maybe executing the web page will

give you some enlightment …..

55

[* Learning By Sample : GDI+ using ASP .NET *]

CAPTCHA

1. Now, let’s create a new blank web page, in

this sample we will have two web pages. One

page is merely a blank web page which is

contain a procedure of Page_Load that will

generate captcha. Another web page will

have simple test for capturing Captcha

random value in order to prove that the

picture of Captcha has already succeeded.

2. Next for the blank web page, named it as

Captcha.aspx (you can also renamed it later

as you wish of course). Then, just double

click at its blank page, and type this code in

Page_Load event.

56

[* Learning By Sample : GDI+ using ASP .NET *]

3. And surely don’t forget to put GDI+

reference at the top of your code

4. So, what’s really happen in that code ? Here

is the explanation :

57

[* Learning By Sample : GDI+ using ASP .NET *]

a. At first, we must create a Bitmap

object and fill it with gold coloring

noise. If you want to have another

glittering background, then just do

experiment in this step with your own

favourite colour :

b. Then create four random uppercase

letter which will be drawn using black

colour at the Graphics object.

Remember that uppercase letter is

started from ASCII character set

58

[* Learning By Sample : GDI+ using ASP .NET *]

number 65, thus if you want to have

more variety for your Captcha, just

change the number inside the

looping.

c. Afterward, we create the graphics

using stream output so it doesn’t

need any physical storage in its

process. This stream output will be

captured by the other web page. And

for the matching section in next

created web page, we use Session in

59

[* Learning By Sample : GDI+ using ASP .NET *]

order to take the random letters into

it.

5. Now let’s create the demo web page. Just

insert a new table inside it with 3 rows and

2 columns.

6. Put a simple text and a Textbox in second

row

60

[* Learning By Sample : GDI+ using ASP .NET *]

7. Then put a Button and an empty text Label

in last row. The label will hold the message

after user clicking the Button.

8. Now put your cursor at first row in second

column, then change your view into Source

mode, and you will be headed into certain

section of table data, so let’s type this small

code :

61

[* Learning By Sample : GDI+ using ASP .NET *]

9. And the last step, we just double click the

Button and type this testing Captcha

snippet:

10. Is it done yet ? Oh yes it is. So simple, so

small. Now, let’s try to execute this web

page :

62

[* Learning By Sample : GDI+ using ASP .NET *]

63

[* Learning By Sample : GDI+ using ASP .NET *]

See You in Another Series….

64


Learning By Sample: GDI+ using ASP .NET

  • ISBN: 9786027273818
  • Author: Seribu Bintang
  • Published: 2017-08-11 04:20:18
  • Words: 3378
Learning By Sample: GDI+ using ASP .NET Learning By Sample: GDI+ using ASP .NET