ปรับปรุง : 2548-02-12 ()

บทเรียน ONLINE : การเขียนภาษา PERL
[ การเขียน Graphic ในรูปแบบ GIF ]
การทำให้ perl แสดงผลแบบ graphic ได้ วิธีหนึ่ง คือ ใช้โปรแกรม fly ช่วย .. บทเรียนนี้ใช้ fly

  1. ข้อควรทราบ
  2. ตัวอย่างเขียน Graph ธรรมดา
  3. ตัวอย่างเขียน Graph ที่ใช้งานร่วมกับ GIF
  4. สรุปคำสั่งที่ใช้กับ FLY
  5. แบบฝึกหัด

ข้อควรทราบ
  1. การเขียนโปรแกรม perl เพื่อสร้างภาพ graphic นั้นไม่ยาก อย่างที่คิด แต่ที่ยากคือ จุดเริ่มต้นครับ ผมมีแผนประยุกต์โปรแกรมนี้ไปใช้ได้อีกสารพัด ไม่ว่าจะเป็น counter หรือ banner exchange หรือ สร้าง gif animation ให้ท่านแบบ online แต่ละอย่างก็ต้องใช้เวลา กันไปตามสมควร
  2. วิธีเรียกใช้ จะเรียกได้เหมือนภาพเลยครับ และยังเขียนโปรแกรมควบคุมฐานข้อมูลในแฟ้มนั้นได้อีก ตัวอย่างการเรียนคำสั่ง เช่น
      ตัวอย่างการเรียกใช้งาน
      <img src=/perl/plgraph01.pl border=0>
      <a href=/><img src=/perl/plgraph01.pl border=0></a>
  3. ภาพที่ได้จากบทเรียนนี้ จะเป็น .gif หรือการดึงภาพมาใช้ก็ใช้ .gif ผมยังไม่ได้ลองกับ .jpg เพราะฉนั้น บทเรียนนี้ใช้ได้กับ .gif ที่ hypermart แน่นอน ส่วนนอกเหนือจากนี้ยังไม่รู้ครับ
  4. สิ่งที่สำคัญที่สุด ที่จะทำให้ perl เขียนภาพ graphic ได้คือ ต้องใช้โปรแกรม fly ซึ่งมีคนเขียนขึ้นไว้ อ่านรายละเอียดเกี่ยวกับ fly ได้ที่ hypermart.net หรือ worldwidemart.com
  5. Server ที่ท่านใช้ให้บริการ fly หรือไม่ ถ้าไม่ก็หมดสิทธิ์ หรือไม่ก็ต้องไปหาโปรแกรมมา install ใน server เอง แต่ที่ hypermart.net สบายครับ มีให้บริการอยู่แล้วที่ /usr/local/bin/fly
  6. ถ้าจะเขียน graph อย่างง่าย ๆ ต้องกำหนดแฟ้มที่เตียมไว้รับคำสั่ง เรียกว่าแฟ้มชั่วคราว สิ่งที่เก็บในแฟ้มก็คือคำสั่งต่าง ๆ ที่ใช้เขียน graph ท่านจะแอบ view ดู source ของแฟ้มชั่วคราวก็ได้ ก็เป็นคำสั่งที่ท่านเขียนขึ้นนั่นหละ เช่น
      ตัวอย่างข้อมูลที่อยู่ในแฟ้ม tempfile.txt
      new
      size 256,256
      fill 1,1,255,255,255
      circle 128,128,180,0,0,0
      fill 128,128,255,255,0
      arc 128,128,120,120,0,180,0,0,0
      circle 96,96,10,0,0,0
      circle 160,96,10,0,0,0
      fill 96,96,0,0,0
      fill 160,96,0,0,0
      interlace
      
  7. ใน source โปรแกรมจะเห็นชื่อ thaiwebsearch อย่าลืมเปลี่ยนเป็นชื่อ user ของท่านนะครับ ส่วนคำว่า perl เป็นชื่อ directory ไม่สำคัญว่าท่านจะมีหรือไม่ ถ้าไม่มีก็ตัดออกด้วย
  8. ในตัวอย่างเรื่องการดึงแฟ้ม gif เพื่อพิมพ์ตัวเลขร่วมกับภาพที่สร้างขึ้น ท่านจะต้องมีแฟ้ม nwb0.gif ถึง nwb9.gif เก็บไว้ในห้อง perl (ผมยังหาคำสั่งเขียนอักษรตรง ๆ ใน graph ไม่เจอ ที่ใช้นี้ ใช้วิธีดึงจากแฟ้มที่มีภาพตัวอักษร มาแสดงเท่านั้น)
  9. ข้อมูลทั้งหมดอ้างอิงจาก hypermart แต่ข้างล่างนี้เป็นต้นตำรับแท้จริง
    http://martin.gleeson.com/fly/
ตัวอย่างอักษร ท่านจะ copy ไปใช้ก็ไม่ว่ากัน (ภาพโปรงใสนะครับ)
ซึ่งเลขแต่ละตัวในแต่ละชุดเป็นภาพเดียวกัน แต่ใช้พื้นของ table ต่างกันเท่านั้น
nwb0.gif nwb1.gif nwb2.gif nwb3.gif nwb4.gif nwb5.gif nwb6.gif nwb7.gif nwb8.gif nwb9.gif

ตัวอย่างเขียน Graph ธรรมดา
คงไม่ต้องอธิบายอะไรมาก เพราะตัวคำสั่งมีไม่กี่คำสั่ง และก็ดูง่ายมาก เอาเป็นว่าดูผลลัพธ์เทียบกับคำสั่ง ก็จะเข้าใจเองครับ
ในการเขียน graph จริง ๆ แล้วเป็นหน้าที่ของ fly ซึ่งพัฒนาด้วยภาษา C ท่านอาจไปหา download มาดูว่าเขาเขียนกันอย่างไรก็ได้ครับ แต่ใน perl เองมีหน้าที่เพียงส่งคำสั่ง สั้น ๆ และ properties เพื่อทำให้สร้างสิ่งที่สั่งนั้นขึ้นมาเท่านั้นเอง จึงไม่ใช้เรื่องลึกซึ้งอะไร เพียงแต่เราไม่รู้เท่านั้นเอง ขณะนี้ ผมรู้ ท่านรู้ ก็นำไปใช้ให้เกิดประโยชน์กันเถอะ
หรือจะกำหนดขนาดให้กับภาพก็ทำได้

http://www.thaiall.com/perl/plgraph01.pl
    #!/usr/local/bin/perl
    $flyprog = "/usr/local/bin/fly -q";
    $outfile = "/data1/hm/thaiwebsearch/perl/tempfile.txt";
    open(FLY,">$outfile") || die "Can't Open In File For FLY Commands: $!\n";
    print FLY "new\n";
    print FLY "size 256,256\n";
    print FLY "fill 1,1,255,255,255\n";
    print FLY "circle 128,128,180,0,0,0\n";
    print FLY "fill 128,128,255,255,0\n";
    print FLY "arc 128,128,120,120,0,180,0,0,0\n";
    print FLY "circle 96,96,10,0,0,0\n";
    print FLY "circle 160,96,10,0,0,0\n";
    print FLY "fill 96,96,0,0,0\n";
    print FLY "fill 160,96,0,0,0\n";
    print FLY "interlace\n";
    close(FLY);
    $output = `$flyprog -i $outfile`;
    print "Content-type: image/gif\n\n";
    print "$output";
    

ตัวอย่างเขียน Graph ที่ใช้งานร่วมกับ GIF
การจะนำโปรแกรมนี้ไปเขียนได้สำเร็จ ท่านจะต้องมีแฟ้มอยู่ 10 แฟ้มคือ nwb0.gif nwb1.gif ถึง nwb9.gif โดยท่านแอบเปิดแฟ้มพวกนี้ได้ที่ http://www.thaiall.com/perl/nwb9.gif เป็นต้น แต่อาจมองไม่เห็นนะครับ ถ้าพื้นขาว เพราะเป็นภาพ gif โปร่งใสครับ
ในกรณีที่ท่านใช้ใน server ของท่านที่ไม่ใช่ hypermart ท่านจะต้องไป copy โปรแกรม fly ซึ่งหารายละเอียดเกี่ยวกับโปรแกรมนี้ได้ที่ http://www.unimelb.edu.au/fly/fly.html ซึ่งแหล่งอ้างอิงเกี่ยวกับ fly และเป็นผู้พัฒนา fly สำหรับ server เกือบทุกรุ่น
ภาพที่สร้างขึ้นมานี้ สามารถทำให้เป็นภาพโปร่งใสได้เพียงกำหนด ตัวแปร $tp ให้เป็นสีที่ท่านไม่เอา ก็เป็นอันเรียบร้อยแล้วครับ แค่นี้คำสั่ง transparent ก็จะใช้ตัวแปร $tp ส่งให้ fly ยกเลิกการแสดงสีที่กำหนด .. เท่านี้เอง
หรือจะกำหนดขนาดให้กับภาพก็ทำได้

http://www.thaiall.com/perl/plgraph01.pl
    #!/usr/local/bin/perl
    $flyprog = "/usr/local/bin/fly -q";
    $outfile = "/data1/hm/thaiwebsearch/perl/tempfile.txt";
    $tp = "0,255,255";
    $textdisplay = "123456789";
    $num = $length = length($textdisplay);
    $insert_height = 5;
    $width = "24";
    while ($num > 0) {
       $CHAR{$num} = chop($textdisplay);
       $num--;
    }
    unlink($outfile);
    open(FLY,">$outfile") || die "Can't Open In File For FLY Commands: $!\n";
    print FLY "new\n";
    print FLY "size 256,256\n";
    print FLY "fill 1,1,0,0,255\n";
    print FLY "circle 128,128,180,0,0,0\n";
    print FLY "fill 128,128,255,255,0\n";
    print FLY "arc 128,128,120,120,0,180,0,0,0\n";
    print FLY "circle 96,96,10,0,0,0\n";
    print FLY "circle 160,96,10,0,0,0\n";
    print FLY "fill 96,96,0,0,0\n";
    print FLY "fill 160,96,0,0,0\n";
    $j = 1;
    while ($j <= $length) {
       print FLY "copy $insert_width,$insert_height,-1,-1,-1,-1,/data1/hm/thaiwebsearch/perl/nwb$CHAR{$j}\.gif\n";
       $insert_width = ($insert_width + $width);
       $j++;
    }
    print FLY "transparent $tp\n";
    print FLY "interlace\n";
    close(FLY);
    $output = `$flyprog -i $outfile`;
    print "Content-type: image/gif\n\n";
    print "$output";
    

สรุปคำสั่งที่ใช้กับ FLY

- ข้อมูลนี้ได้จาก http://martin.gleeson.com/fly/using.html
- Copyright ฉ 1994-2000 Martin Gleeson and The University of Melbourne. (Martin Gleeson, martin@gleeson.com)
- Created: 21 June 1995
- Last modified: 13 June 2000

fly: Documentation: Using fly
    Table of Contents
  1. Invoking fly.
  2. The command file.
  3. Directives and explanations.
  4. Comments.

1. Invoking fly Note that the command line arguments for v1.1 and later are different from v1.0 and earlier. The standard manner used to invoke fly is: fly -i <input file> -o <output file> You can omit the input file, and fly takes its directives from stdin, and if you omit the output file, the output goes to stdout. Using the -q switch sets fly to quiet mode - no on-screen reporting. A quick reference to directives may be seen by using the -h switch.
2. The command file The command file uses a number of directives. It must start with one of the following lines: existing /path/to/file.gif if modifying an existing image, OR new size x,y for creating a new image of width x pixels, height y pixels. After the initial command, any of the commands below may be used. To create more than one image from a command file, use the directive end, followed by either existing /path/to/file.gif name <filename.gif> if modifying an existing image, OR new size x,y name <filename.gif> for creating a new image. Note: All x,y values are in pixels measured from the top left of the image. For a 256x256 image, top left is 0,0 and bottom right is 255,255. All x1,y1,x2,y2 pairs must specify the top left and bottom right of the shape, where appropriate. All RGB colour values are in integer format, not hexadecimal. Arc sweeps are clockwise.
3. Directives & explanations line x1,y1,x2,y2,R,G,B Creates a line from coordinates x1,y1 to coordinates x2,y2 of colour R,G,B. dline x1,y1,x2,y2,R,G,B Creates a dashed line from coordinates x1,y1 to coordinates x2,y2 of colour R,G,B. rect x1,y1,x2,y2,R,G,B Creates a rectangle from coordinates x1,y1 to coordinates x2,y2 with edging of colour R,G,B. frect x1,y1,x2,y2,R,G,B Creates a filled rectangle from coordinates x1,y1 to coordinates x2,y2 filled with colour R,G,B. square x1,y1,s,R,G,B Creates a square qith the top left corner at coordinates x1,y1, with side s in length, with edge of colour R,G,B. fsquare x1,y1,s,R,G,B Creates a square qith the top left corner at coordinates x1,y1, with side s in length, filled with colour R,G,B. poly R,G,B,x1,y1...,xn,yn Creates a polygon (has to be closed) through the points x1,y1 to x2,y2 to ... to xn,yn, of colour R,G,B. Note that the colour values appear before the coordinates in this directive. fpoly R,G,B,x1,y1...,xn,yn Creates a polygon (has to be closed) through the points x1,y1 to x2,y2 to ... to xn,yn, filled with colour R,G,B. Note that the colour values appear before the coordinates in this directive. arc x1,y1,w,h,start,finish,R,G,B Creates an arc of colour R,G,B centered at coordinates x1,y1, of width w and height h, starting at start degrees and finishing at finish degrees. ellipse x1,y1,w,h,R,G,B Creates an ellipse of colour R,G,B centered at coordinates x1,y1, of width w and height h. fcircle x1,y1,d,R,G,B Creates a circle centered at coordinates x1,y1, of diameter d, filled with colour R,G,B. circle x1,y1,d,R,G,B Creates a circle of colour R,G,B centered at coordinates x1,y1, of diameter d. fill x,y,R,G,B Flood fills with the colour R,G,B from the coordinates x,y to the edge of the area of the original color of x,y. filltoborder x,y,R1,G1,B1,R2,B2,G2 Flood fills with colour R2,G2,B2 from x,y to the border of colour R1,G1,B1. string R,G,B,x,y,<size>,<string> Writes a string starting at x,y (in the colour R,G,B), of font size <size>, where size can be one of tiny (5x8), small (6x12), medium (7x13, bold), large (8x16) or giant (9x15, bold). stringup R,G,B,x,y,<size>,<string> Writes a string vertically starting at x,y (in the colour R,G,B), of font size <size>, where size can be one of tiny, small, medium, large or giant. The string will go up from the coordinates supplied. copy x,y,x1,y1,x2,y2,[source-filename.gif|`command`] Copies region x1,y1 - x2,y2 of source-filename.gif or the GIF output of command to the coordinates x,y of the image being created/modified. If x1,y1,x2,y2 are all -1, copy the entire image. copyresized x1,y1,x2,y2,dx1,dy1,dx2,dy2,[source-filename.gif|`command`] Copies region x1,y1 - x2,y2 of source-filename.gif or the GIF output of command to the area dx1,dy1 - dx2,dy2 of the image being created/modified, resizing the image to fit. If x1,y1,x2,y2 are all -1, copy the entire image. getpixel x,y Gets the colour index of the point at x,y. setpixel x,y,R,G,B Sets the point at x,y to the colour R,G,B. colourchange R1,G1,B1,R2,G2,B2 Changes all pixels of colour R1,G1,B1 to R2,G2,B2. setbrush filename.gif Sets the current "brush" to filename.gif. Subsequent directives of line, dline, rect, poly and arc will use the selected "brush" to draw their lines, until a call of killbrush. killbrush Turns off the brush selection. Calls to line, dline, rect, poly and arc will then use the standard single-pixel width brush. settile filename.gif Sets the current "tile" to filename.gif. Subsequent directives of fill, and fpoly will use the selected "tile" as a fill pattern, until a call of killtile. killtile Turns off the tile selection. Calls to fill, filltoborder and fpoly will then use the specified colour for fills. setstyle R1,G1,B1, R2, G2, B2, ..., Rn,Gn,Bn Various line calls can use a style, specified by one or more colour settings for each pixel, that is repeated for the length of the "line". All subsequent directives of line, dline, rect, poly and arc will use the selected "style" to draw their lines, until a call of killstyle. killstyle Turns off the style selection. Calls to line, dline, rect, poly and arc will then use the standard single-pixel width brush. transparent R,G,B Makes the colour R,G,B the transparent colour. sizex Returns the width of the image in pixels. sizey Returns the height of the image in pixels. rotate deg Rotates the GIF image deg degrees clockwise, where deg is 90, 180 or 270. interlace Makes the image output by fly an interlaced GIF.
4. Comments in the command file At any point in the command file, you can insert a comment line starting with "#". Example: new size 256,256 # # start with a background fill fill 1,1,255,255,255 # # then a circle in the middle circle 128,128,180,0,0,0 # etc.

แบบฝึกหัด
    ให้ทำตามโจทย์ต่อไปนี้
  1. ให้เขียน graph ตามที่ผมได้เขียนนี้
  2. ให้วาดการ์ตูนอย่างง่าย ๆ ด้วยตัวท่านเอง
  3. ให้เรียกแฟ้มที่ท่านสร้างขึ้นมาแสดงผล โดยอ้างอิงกับตัวแปรที่ส่งเข้าไป
ผู้สนับสนุน + ผู้สนับสนุน
+ รับผู้สนับสนุน

แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยโยนก
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : yourname@thaiall.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223