GDI+

Farverigt sitemap

Jesper Jensen — Tue, 09 Jan 2007 15:43:00 GMT

Jeg fik stille udfordringen at lave et sitemap med thumbnails af de enkelte sider i et website ;-)

Da jeg er nørd, er den pragmatiske løsning med at grabbe alle sider i websitet med [Ctrl+Alt+Print Screen], ikke aktuel. Nej opgaven skriger på en dynamisk løsning - for hvad nu hvis indholdet skifter - så er der jo ikke andet at gøre end at starte Photoshop op og cutte/resize - hmmm.

Løsningen kunne være at lave en tabel med en masse IFrames der var scaleret med Zoom css-egenskaben - stadig pragmatisk, og hulens langsom i realiteten.

Nej - jeg valgte at gå på strandhugst i Windows.Forms namespacet. I .NET 2.0, er der blandt andet dukket en WebBrowser-kontrol op, og den er lige hvad vi har brug for. Specielt har jeg hæftet mig ved metoden: DrawToBitmap - den må kunne bruges. Så igang med at lave en testside der indeholder en TextBox, Button og en Image-kontrol. Click-eventen på knappen skal så tage den indtastede Url og bruge WebBrowser objektet til at downloade alt indholdet, og så skrive en Jpg-fil som Image-kontrollen så referere til. Simpelt - lidt.

Det første man lige skal bide mærke i, er at WebBrowser kontrollen ikke befinder sig i eet af standard webapplikations referencerne, men i System.Windows.Forms, så man skal lige indsætte en reference til dll'en i sit webprojekt først. Min code-behind endte op med at se sådan ud:

   18     WebBrowser wb;
   19     protected void Button1_Click(object sender, EventArgs e)
   20     {
   21         wb = new WebBrowser();
   22         wb.ScrollBarsEnabled = false;
   23         wb.Size = new System.Drawing.Size(1024, 768);
   24         wb.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(wb_DocumentCompleted);
   25         wb.Navigate(inpUrl.Text);
   26     }
   27 
   28     void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
   29     {
   30         Bitmap thumb = new Bitmap(102, 76);
   31         Bitmap bm = new Bitmap(1024, 768);
   32         wb.DrawToBitmap(bm, new Rectangle(0, 0, 1024, 768));
   33         string filename = string.Format("~/{0:N}.jpg", Guid.NewGuid());
   34 
   35         bm.Save(Server.MapPath(filename));
   36         Image1.ImageUrl = filename;
   37         bm.Dispose();
   38     }

Det virker dog ikke til min store overraskelse....!

Jeg får fejlmeddlelsen:

ActiveX control '8856f961-340a-11d0-a96b-00c04fd705a2' cannot be instantiated because the current thread is not in a single-threaded apartment.

Hvad går der galt? Jo - WebBrowser kontrollen er jo et com-objekt, der har fået en .NET wrapper, og som et sådan, er vi nød til at instantierer, Navigerer, gemme og destruerer i samme tråd. Som det fremgår af ovenstående kode, så er der hooket op på DocumentCompleteev-enten, som eksekveres i en anden tråd. Løsningen ligger i at putte al koden ind i en metode der eksekveres i en separat tråd.

For at vi kan være sikker på at WebBrowser objektet har downloadet al indholdet, er man i stedet for nød til at lave et loop der holder hovedtråden ind til Url'en er helt hentet. Med lidt omskrivning kom jeg frem til følgende funktionelle kode ;-)

   19     protected void Button1_Click(object sender, EventArgs e)
   20     {
   21         string filename = string.Format("~/TN/{0:N}.jpg", Guid.NewGuid());
   22         Thread thread = new Thread(new ParameterizedThreadStart(GetUrl));
   23         thread.SetApartmentState(ApartmentState.STA);
   24         thread.Start(Server.MapPath(filename));
   25         Image1.ImageUrl = filename;
   26     }
   27 
   28     private void GetUrl(object file)
   29     {
   30         try
   31         {
   32             WebBrowser wb = new WebBrowser();
   33             wb.ScrollBarsEnabled = false;
   34             wb.Size = new System.Drawing.Size(1024, 768);
   35             wb.Navigate(inpUrl.Text);
   36             //Vent til dokument er hentet
   37             while (wb.ReadyState != WebBrowserReadyState.Complete)
   38             {
   39                 System.Windows.Forms.Application.DoEvents();
   40             }
   41 
   42             Bitmap bm = new Bitmap(1024, 768);
   43             wb.DrawToBitmap(bm, new Rectangle(0, 0, 1024, 768));
   44             Bitmap thumb = ResizeBitmap(bm, 200, 150);
   45             thumb.Save(file.ToString(), ImageFormat.Jpeg);
   46         }
   47         catch (Exception e)
   48         {
   49             System.IO.StreamWriter y= System.IO.File.CreateText(file.ToString()+".txt");
   50             y.WriteLine(e.Message +Environment.NewLine+ e.Source); 
   51             y.Flush() ;
   52             y.Close();
   53         }
   54     }
   55 
   56     private Bitmap ResizeBitmap(System.Drawing.Image originalImage, int width, int height)
   57     {
   58         Bitmap result = new Bitmap(width, height);
   59 
   60         using (Graphics g = Graphics.FromImage(result))
   61             g.DrawImage(originalImage, 0, 0, width, height);
   62         return result;
   63     }

Thats it - metoden virker, og skal blot integreres i min sitemap. Bemærk i øvrigt at ASP processen skal havde rettigheder til at browse på de requestede sider, for ellers får koden timeout.

Code on...

Drag'n drop med GDI+

Jesper Jensen — Tue, 07 Feb 2006 22:28:00 GMT

Der er, i min igangværende applikation, opstået et behov for en PictureBox med lidt ekstra funktionalitet. Jeg har bl.a. behov for at kunne træskke rundt med dele af det aktuelle billede (Bitmap). Jeg arbejdede hele dagen med en ide om at trække rundt med en UserControl, og gentegen billedet så snart MouseUp-hændelsen indtraf.

Jeg fik det faktisk til at virke, men det flikkede grelt på skærmen, når opløsningen var høj.. Ikke lige det min kunde ønskede sig (tror jeg). Så var det jeg kom til at spekulerer lidt på at overtage styringen af alt tegenarbejdet. Følgende kode er skrevet nødtørftigt på min dårlige hjemme pc, så ikke for hår med kritikken - jeg poster mest koden for at kunne få adgang til den i morgen...eller en anden dag jeg skal lave d'n d. Bemærk at jeg kastede en skalering ind i gøjemøget (comboBox1), bare for at gøre det helt umuligt....

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            boxes = new Rectangle[]{
                new Rectangle(100, 200, 100, 50),
                new Rectangle(100, 100, 100, 50),
                new Rectangle(100, 0, 100, 50),
                new Rectangle(0, 200, 100, 50),
                new Rectangle(0, 100, 100, 50),
                new Rectangle(0, 0, 100, 50)
                };
            comboBox1.DataSource = zooms;
        }

private Rectangle[] boxes;
        private Brush dragBrush = new SolidBrush(Color.FromArgb(80, Color.Red));
        private float[] zooms = new float[] {2f, 1f, 0.5f, 0.25f}; 
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            float scaling = (float)comboBox1.SelectedItem;
            Graphics g = e.Graphics;
            g.ScaleTransform(scaling, scaling);
            for (int i = 0; i < boxes.Length; i++)
            {
                if (i != selectedBox)
                {
                    g.FillRectangle(Brushes.Yellow, boxes[i]);
                    g.DrawRectangle(Pens.Blue, boxes[i]);
                }
            }
            if (isDragging)
            {
                g.FillRectangle(dragBrush, dragBox);
            }
        }

private bool isDragging = false;
        private Point mouseDelta;
        private Rectangle dragBox;
        private int selectedBox;

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            Point sp = screenToModel(e.Location);
            for (int i = boxes.Length - 1;i>-1 ; i--)
            {
                if (boxes[i].Contains(sp))
                {
                    dragBox = new Rectangle(boxes[i].Location, boxes[i].Size);
                    isDragging = true;
                    mouseDelta = new Point((sp.X - boxes[i].X), (sp.Y - boxes[i].Y));
                    pictureBox1.Invalidate();
                    selectedBox = i;
                    break;
                }
            }
        }

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                Point sp = screenToModel(e.Location);
                sp.X -= mouseDelta.X;
                sp.Y -= mouseDelta.Y;
                dragBox.Location = sp;
                pictureBox1.Invalidate();
            }
        }

private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                isDragging = false;
                boxes[selectedBox].Location = dragBox.Location;
                selectedBox = -1;
                pictureBox1.Invalidate();
            }
        }

private Point screenToModel(Point mouseLocation)
        {
            float scaling = (float)comboBox1.SelectedItem;
            float x = mouseLocation.X / scaling;
            float y = mouseLocation.Y / scaling;
            return new Point((int)x, (int)y);            
        }

private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            pictureBox1.Invalidate();
        }
    }
}

I al sin enkelthed kan man splitte Drag'n drop kode op i følgende bestanddele:

Eventhandler til håndtering af Paint - tegner alle bestanddele i kontrollen
Håndtering af MouseDown skal sætte en global indikator for at der nu 'trækkes', samtidig skal der dannes et pladsholder område
Håndtering af MouseMove skal i tilfælde af at der 'trækkes': opdaterer pladsholderens lokation
Håndtering af MouseUp skal i tilfælde af at der 'trækkes': ændre status til 'der trækkes ikke' og opdaterer den 'trukne' bestanddel
Invalider kontrollen og gennemtving Paint i de to sidste EventHandere

Ovenstående kode skal forbedres i Paint-handleren, så den kun gentegner de boxe der er blevet invalideret, og MouseMove & MouseUp skal kun invaliderer det område der er berørt af flytningen (noget med at tracke deltaMouseMove) - det gør jeg i morgen...

Code on

Opdatering 8. februar 2006

Det viste sig at det var fremgangsmåden jeg skulle gå efter. Det kører helt glat og flimmerløst (selv uden optimeret invalidering). Det er åbenbart forbundet med overordentligt meget overhead at bruge CustomControl som pladsholder i min drag'n drop kontrol. Her er et sd af mit seneste resultat (den røde box er den jeg 'slæber' rundt med, men på dumpet ses musemarkøren ikke - mærkeligt).

Progressbar i DataGridView (.NET 2.0)

Jesper Jensen — Thu, 17 Nov 2005 12:24:00 GMT

Jeg arbejder på en opgave, hvor jeg skal præsenterer data i en DataGrid, og hvor een af kolonnerne er en værdi som er udtryk for et forbrug i procent (0-100), som kunden gerne vil havde udtrykt som en vandret søjle (Progressbar). Hvordan kan man så lige få det til at ske? Som altid, så har jeg luret lidt på en anden løsning, for at få en idee til løsningen af mit problem. Hjemmesiden WindowsForms.net har en række færdige applikationer, som man kan downloade og bruge til inspiration. Een af applikationerne er TaskVision - og ud fra screendump, kan jeg se at det er nogenlunde det resultat jeg vil havde.

Desværre er TaskVision skrevt til .NET 1.1, og desværre bruger den DataGrid til præsentationen. Af een eller anden grund er DataGrid ikke længere en del af VS.NET's værktøjskasse. Den er blevet udskiftet med et nyt medlem af familien: DataGridView. Dette nye medlem har ikke en TableStyle kollektion, og man kan derfor ikke bruge samme fremgangsmåde som i TaskVision - jeg kunne jo ikke finde på at kode mod DataGrid, når den nu er blevet sat ud i kulden (er der nogen der ved hvorfor?), så min løsning kommer til at tage udgangspunkt i DataGridView.

Desværre er der ikke mulighed for at vælge en kolonnetype (ColumnType) af ProgressBar eller lignende - kun TextBox, Link, Button, CheckBox ListBox og Image. Vi er altså nød til selv at tegen søjlen...

Heldigvis er der en lang række events i DataGridView, som man kan hooke op på, og det ser ud til at CellPainting er et godt sted at starte - den indtræder for hver celle, når den skal tegnes. Eventhandleren som man laver til denne håndtering, modtager 2 parametre: object og DataGridViewCellPaintingEventArgs. Den sidste er selvfølgelig den mest interessante. Man skal huske at man, ved at overtage tegningen af en celle, kommer til at stå for alt det grafiske i det clip, som dækkes af cellen - både rammer og baggrund. Jeg ønsker kun at tegne en søjle, så det er ret smart at event argumentet har en metode: PaintBackground, som netop tegner ramme og baggrund - man skal så ikke ud i at tegne streger og så videre.

e.PaintBackground(e.CellBounds,true);

Den sidste boolske parameter angiver om man ønsker at tegne valgte celler med standard baggrundsfarve, eller om man vil tegne med selected-style. Ud over denne metode, har man selvfølgelig også adgang til et Graphics objekt, og det er hermed meget nemt at tegne geometriske former så som boxe og streger:

e.Graphics.FillRectangle(
new SolidBrush(Color.Green), 
e.CellBounds.X, 
e.CellBounds.Y + 4, 
Convert.ToInt32((percentage * (float)(e.CellBounds.Width-1f))), 
e.CellBounds.Height - 8);
e.Graphics.DrawString((percentage * 100).ToString() + "%", e.CellStyle.Font, Brushes.Black, e.CellBounds.X + 6, e.CellBounds.Y + 4);

Koden skulle være selvforklarende - jeg tegner en box med den procentvise længde, og skriver værdien som en streng ovenpå. Den komplette handler ser således ud:

Man skal, som det fremgår af koden, lige huske at checke for to ting inden man tegner: Er det den rigtige kolonne (her er det "Perc" jeg checker på), og at man befinder sig i en række og ikke i en kolonneoverskrift (e.RowIndex>=0). Læg også mærke til at jeg sætter e.Handled, for at markerer at jeg har sørget for tegningen - det skal DataGridView springe over...
Det er hvad der skal til for a lave en kolonne med et søjlediagram - man kan selvfølgelig lave alle mulige fede ting, så som at udfylde søjlen med bitmap eller andre effekter. Man har alt fra GDI+ til sin rådighed via Graphics objektet.

Code on...