Informationsvisualisering Informationsvisualisering och WIMP-gr gränssnitt Gustav Taxén gustavt@nada.kth.se Presentera abstrakt data så att den kan förstås Beskriva ett fenomen Få översikt Hitta trender och avvikelser Öka förståelsen Jämföra helhet och detaljer 2D1640 Grafik och Interaktionsprogrammering VT 2006 Informationsvisualisering Informationsvisualisering enligt Schneiderman 1. Översikt 2. Zooma och filtrera 3. Detaljer om användaren ndaren så önskar http://www.edwardtufte.com/tufte/minard Charles Joseph Minard: Napoleons marsch mot Moskva 1812 (publ. 1861). 1D: Linjär data 1D: Linjär data Text, källkod, listor,, etc. Hitta, räkna,, se vilka delar av data som har ett särskilt attribut,, se en del av data med alla sina tillhörande attribut,, etc. Teckensnitt, färg, storlek, översiktstyp, scrollningsmöjligheter jligheter, markeringar, urval, etc. 1
1D: Linjär data 2D: Kartor, översikter,, etc. Kartor, sidlayout, grafer,, 2D-punktmoln, etc. Varje enhet har ofta ett antal attribut kopplade till sig. Hitta närliggande enheter, enheter som är del av andra enheter, hitta vägar mellan enheter,, etc. 2D: Kartor, översikter,, etc. 3D: Föremål, modeller,, etc. Molekyler, människokroppen, byggnader, föremål med volym,, etc. Relationer till andra föremål, formförst rståelse, etc. Position, orientering, hantera att delar skyms av andra delar (occlusion), landmarks, perspektiv, genomskinlighet, färgkodning,, etc. http://maps.google.com 3D: Föremål, modeller,, etc. 3D: Föremål, modeller,, etc. http://field.hypermart.net/ 2
Tidsdata Tidsdata - Gantt-diagram Data med start- och sluttid, tidsaxlar, projekthantering, historiska översikter,, etc. Se överlappande intervall, hitta enheter som inträffar före,, under eller efter en given tidpunkt,, etc. http://www.me.umn.edu/courses/me4054/assignments/gantt.html Tidsdata - PERT-karta Tidsdata http://gates.comm.virginia.edu/rrn2n/teaching/gantt.htm Flerdimensionell data Flerdimensionell data Ofta har poster i en databas många olika attribut (eller dimensioner) som står i olika förhållande till varandra. Hitta mönster, kluster, korrelation mellan två dimensioner, hitta "hål",", hitta enskilda poster som hamnar utanför ett normalintervall,, etc. 3
Flerdimensionell data Flerdimensionell data Flerdimensionell data Flerdimensionell data http://www.spotfire.com Träd och hierarkier Träd och hierarkier Samlingar där varje enhet har en förälderenhet; varje enhet (och relationen mellan två enheter) kan ha olika attribut. Hur många nivåer finns i trädet det? Hur många "barn" har en enhet? Hur "långt" är det mellan två enheter?? etc. 4
Träd och hierarkier Nätverk Varje enhet kan stå i relation till många andra enheter. Kortaste "vägen" mellan två enheter,, se kluster, hitta avvikelser,, etc. Det är svårt att visualisera stora nätverk (med många enheter). Nätverk Nätverk http://acg.media.mit.edu/people/fry/valence/index.html Att ljuga med statistik Att ljuga med statistik http://www.math.yorku.ca/scs/gallery/ http://www.math.yorku.ca/scs/gallery/ 5
Att ljuga med statistik Att drunkna i specialeffekter http://www.math.yorku.ca/scs/gallery/ http://www.math.yorku.ca/scs/gallery/ WIMP Window Icon Menu Pointing device http://en.wikipedia.org/wiki/history_of_the_graphical_user_interface Douglas Engelbart, 1968: The Augmentation Of Human Intellect Project. http://en.wikipedia.org/wiki/xerox_alto http://www.digibarn.com/collections/ software/alto/index.html http://www.thocp.net/ hardware/xerox_star.htm http://en.wikipedia.org/wiki/ History_of_the_graphical_user_interface Xerox Alto, 1972. Xerox Star, 1981. 6
http://en.wikipedia.org/ wiki/apple_macintosh http://en.wikipedia.org/wiki/ History_of_the_graphical_user_interface Apple Macintosh, 1984: Desktop-metafor (men bara en applikation åt gången). http://www.guidebookgallery.org/screenshots/win101 Microsoft Windows 1.0, 1985: Kooperativ multitasking. Hoppa mellan DOS-program (ett aktivt åt gången). http://www.guidebookgallery.org/screenshots/win203 Microsoft Windows 2.0, 1987: Köra mer än ett DOS-program parallellt. http://www.guidebookgallery.org/screenshots/win30 Microsoft Windows 3.0, 1990: Bättre minneshantering. http://en.wikipedia.org/wiki/history_of_microsoft_windows Microsoft Windows 3.1, 1992: TrueType-teckensnitt, mindre revideringar av gränssnittet, TCP/IP. http://www.guidebookgallery.org/screenshots/winnt31 Microsoft Windows NT, 1992 (Beta): Helt ny kärna, multitasking, skyddat minne, driverproblem. 7
http://en.wikipedia.org/wiki/history_of_microsoft_windows Microsoft Windows 95, 1995: "Gömde" MS-DOS (så att inte konkurrerande varianter kunde användas). http://en.wikipedia.org/wiki/history_of_microsoft_windows Microsoft Windows 2000, 2000: Uppgradering av NT med användargränssnitt från 95/98. http://en.wikipedia.org/wiki/history_of_microsoft_windows Microsoft Windows XP, 2001: Integration av 95/98/ME och kärnan från NT/2000. Några andra WIMP-system GEM Desktop (PC, Atari, m.fl.),.), 1984. X Window System (Unix), mitten av 80-talet. DESQview (PC), 1985. Workbench (Commodore Amiga), 1985. GEOS (PC, Commodore 64/128), 1986. OS/2 (PC), 1988. NeXTstep (NeXT, PC), 1989. MacOS 5-9,, 1988-1999. 1999. BeOS (BeBox,, PC), 1991. MacOS X,, 1999. http://www.nada.kth.se/cvap/gvmdi/ http://www.kidpad.org/ 8
http://www.pdc.kth.se/projects/vr-cube/ http://www.activewin.com/reviews/software/apps/dragon/ http://www.hasbro.com/furby/ http://www.gamershell.com/pc/warcraft_2/screenshots.html?id=4 The Sims 2, http://www.thesims.com/ http://www.gamershell.com/pc/rise_of_nations/screenshots.html?id=52 9
http://www.mobygames.com/game/dos/secret-of-monkey-island/ screenshots/gameshotid,3164/ http://www.gamershell.com/pc/the_sims_2/screenshots.html?id=150 http://www.neoseeker.com/articles/games/reviews/escapemonkeyisland/3.html http://www.gamershell.com/pc/half_life_2/screenshots.html?id=152 http://www.gamershell.com/pc/doom_3/screenshots.html?id=124 http://media.xbox360.ign.com/media/736/736204/img_2790262.html 10
http://ps2.gamezone.com/gamesell/screens/s22349.htm http://www.gamershell.com/xbox360/fight_night_round_3/screenshots.html?id=95 Lite mer om Java/Swing Gränssnitt i Java (och( de flesta andra GUI-system) är hierarkiska. Man börjar med en s.k. Top Level Container, och lägger till komponenter i den. Vissa komponenter är också containers och kan innehålla andra komponenter. Man specificerar dimensioner och position för varje komponent explicit eller via s.k. Layout Managers. http://www.1up.com/do/newsstory?cid=3143782 Separable Model Architecture Varje komponent hanterar view/control. Själva utritningen är delegerad till ett s.k. UI object (för( att man ska kunna ändra look- and-feel, t.ex.)..). Varje komponent har en modell kopplad till sig. Separable Model Architecture De flesta komponenters modell har enbart att göra med själva gränssnittet (t.ex. om en checkbutton är nedtryckt eller ej). Vissa komponenters innehåll kan dock bara definieras av applikationen (t.ex. innehållet i en lista). Några faller mitt emellan (t.ex.. sliders). Man ersätter en modell genom att subklassa defaultmodellen och sedan anropa setmodel() på komponenten. 11
Containers, Controls och Displays Top Level Containers: : Applet, Dialog, Frame. General-Purpose Containers: : Panel, Scroll Pane, Split Pane, Tabbed Pane, Tool Bar. Special-Purpose Containers: : Internal frame, Layered Pane, Root Pane. Basic Controls: : Buttons, Lists, Menus, etc. Uneditable Info Displays: : Label, Progress Bar, Tool Tip. Interactive Displays of Highly Formatted Information: : File Chooser, Color Chooser, etc. Top Level Containers Varje komponent kan bara befinna sig på en plats i hierarkin. Varje Top Level Component har en Content Pane som innehåller hierarkin. Man kan lägga till en menu bar (menyrad) ovanför sin content pane. General Purpose Containers Special Purpose Containers Basic Controls Uneditable Info Displays 12
Formatted Info Displays Layout Managers Det är oftast en nackdel att specificera position och dimension för komponenter explicit. Om användaren ndaren t.ex. ändrar fönstrets storlek kommer inte storleken på komponenterna att hänga med. Layout managers hjälper en att räknakna ut positioner och dimensioner dynamiskt! Man kan skapa egna layout managers. Händelsehantering public class Beeper implements ActionListener { // where initialization occurs: // create the button first, then: button.addactionlistener(this); public void actionperformed(actionevent e) { // Make a beep sound GUI-byggare Ofta integrerade med en IDE,, Integrated Development Environment GUI:er består oftast av widgets, samt kod som skickar meddelanden mellan dessa GUI-byggare byggare: : "rita" rita" gränssnittet nssnittet, kod som skapar widgets och deras layout genereras automatiskt! Sedan lägger man till händelselyssnare etc. själv lv, ofta via någon form av property inspector. Några GUI-byggare byggare: Visual Studio.NET Forms Designer, www.microsoft.com Borland C++ Builder, www.borland.com QT Designer, www.trolltech.com NetBeans, www.netbeans.org Olika plug-ins för Eclipse, www.eclipse.org Men det finns många, många fler! 13
Java-labben Vi bygger ett enkelt Swing-gränssnitt på några sekunder i NetBeans. Demo på "halvfärdigt" ritprogram: ~250 rader kod, någon timmes arbete. (Källkod på separat papper och i kurskatalogen.) Huvudklasser i demot Application - själva ritfönstret Pen - klass som implementerar penna- verktyget CurveTool - placeholderklass som är tänkt att implementera ett kurv-verktyg verktyg Transparency - hjälpklass (mer senare) Huvudidé Dubbelbuffrad ritarea Två dialogrutor med "properties" för verktygen Lista som innehåller ett antal GeneralShape Rita ut verktygen på sina platser Rita ut varje GeneralShape Penna-verktyget verktyget: när musknapp ner lägg till ny GeneralShape; vid drag lägg till nästa punkt med lineto() (). Pennan Ladda en bild som ikon. Använd nd Transparency-klassen för att sätta vit färg som transparent. Kom ihåg vilken färg pennan har. Använd nd Swings JColorChooser i en dialogruta för att sätta pennans färg. public class Application extends JFrame implements ChangeListener, WindowListener, MouseListener, MouseMotionListener { private JDialog curvedialog; private JDialog pendialog; private JColorChooser colorchooser; private Pen pen; private CurveTool ct; private Image image = null; private Graphics img = null; private GeneralPath currentpath; private ArrayList paths; private ArrayList pathcolors; public Application() { super("application"); setlayout(new GridLayout(1, 1)); addwindowlistener(this); addmouselistener(this); addmousemotionlistener(this); Bakre buffer och dess Graphics. Den GeneralPath som ritas nu. Alla GeneralPaths och deras färger. Behövs för JColorChooser, anropas när användaren valt ny färg. 14
pendialog = new JDialog(this, "Pen tool properties"); pendialog.setsize(300, 300); pendialog.setlayout(new BorderLayout()); colorchooser = new JColorChooser(); colorchooser.getselectionmodel().addchangelistener(this); pendialog.add(colorchooser, BorderLayout.CENTER); pendialog.setvisible(true); curvedialog = new JDialog(this, "Curve tool properties"); curvedialog.setsize(200, 200); curvedialog.setvisible(true); curvedialog.setlayout(new GridLayout(1, 1)); pen = new Pen(); pen.setposition(100, 100); pen.setcolor(colorchooser.getcolor()); ct = new CurveTool(); ct.setposition(110, 110); paths = new ArrayList(); pathcolors = new ArrayList(); // end constructor public void statechanged(changeevent e) { Color newcolor = colorchooser.getcolor(); pen.setcolor(newcolor); public void paint(graphics g) { super.paint(g); Graphics2D g2 = (Graphics2D)getImGraphics(); g2.setcolor(color.white); g2.fillrect( 0, 0, getwidth(), getheight() ); pen.draw(g2); ct.draw(g2) for (int i = 0; i < paths.size(); i++) { g2.setcolor((color)pathcolors.get(i)); g2.draw((generalpath)paths.get(i)); g.drawimage(image, 0, 0, this); Anropas när ny färg väljs i vår JColorChooser. Hämta bakre bufferns Graphics och rensa den. Rita verktygen. Rita alla General- Paths som hör till pennaverktyget. Visa bakre buffern. public void mousepressed(mouseevent e) { if (currentpath == null) { currentpath = new GeneralPath(); paths.add(currentpath); pathcolors.add(pen.getcolor()); currentpath.moveto(e.getx(), e.gety()); När en musknapp trycks ned, kolla om vi ritar. Om nej, lägg till en ny GeneralPath och flytta första punkten i den till markörens position. public void mousedragged(mouseevent e) { pen.setposition(e.getx(), e.gety()); repaint(); if (currentpath!= null) { currentpath.lineto(e.getx(), e.gety()); När användaren drar musen med knapp nedtryckt, flytta pennan till markörens position. Om vi också ritar, lägg till ett linjesegment i aktuell GeneralPath. public void mousereleased(mouseevent e) { if (currentpath!= null) { currentpath = null; När musknappen släpps, kolla om vi ritar. Om ja, nollställ currentpath. public void mousemoved(mouseevent e) { pen.setposition(e.getx(), e.gety()); repaint(); När användaren flyttar musen utan knapp nedtryckt, flytta pennan till markörens position. protected Graphics getimgraphics() { if (image == null) { Dimension dim = getsize(); image = createimage(dim.width, dim.height); img = image.getgraphics(); return img; public static void main(string[] args) { Application app = new Application(); app.setvisible(true); app.setsize(600, 600); // end class Application Om vi inte har någon bakre buffer, skapa den. Returnera den. Skapa applikationsfönstret och gör det synligt. class Pen implements ImageObserver { public Pen() { ImageIcon iic = new ImageIcon("c:/pen.gif"); img = Transparency.makeColorTransparent( iic.getimage(), new Color(0).white); x = 0; y = 0; public void draw(graphics2d graphics) { graphics.drawimage(img, AffineTransform.getTranslateInstance(x, y), this); public boolean imageupdate(image img, ) { return true; private Color col; // Current color private float x; // On-screen position private float y; // On-screen position private Image img; // Image representation Läs in en bildfil. Använd hjälpklassen Transparency för att skapa en ny bild från filen där vita pixlar är genomskinliga. Rita ut bilden (metoden kräver en ImageObserver). Enda metoden i ImageObserver, vi bryr oss inte om den, så returnera true. 15
Todo Transparency-klassen har en klassmetod som tar en bild som input och returnerar en ny bild. Den nya bilden har ett inbyggt filter som gör att alla pixlar som har "genomskinlig" färg inte ritas ut. Om du vill veta exakt hur det hela funkar, läs dokumentationen för RGBImageFilter. Implementera kurv-verktyget verktyget (eller något annat verktyg) och dess dialogbox. Se till att det går att välja mellan verktygen. Se till att pennan ritar vid pennspetsen och inte vid musmarkören ren. Gör musmarkören ren osynlig vid behov: : se klassen Cursor och metoden setcursor() i JFrame. Fler fönster ("views") samtidigt. Flera instanser av varje verktyg. Snygga till gränssnittet nssnittet: Menyrad: gör en egen ContentPane istället llet. Lägg ev. dialoger som JInternalFrames. 16