Grafisk programmering av primitiver - Mälardalens högskola

Grafisk programmering av primitiver
genom att använda C# och WPF.
Examensarbete i Datorteknik
Utfört vid Asea Brown Boveri
Utfört av:
Patricia Öhlund, MDH
ABB, Asea Brown Boveri
Programmering av primitiver till 800xA produkten
Handledare: Björn Lindberg
MDH, Mälardalens Högskola
Examensarbete i Datateknik 15hp.
Handledare och Examiantor: Thomas Larsson

Grafisk programmering av primitiver genom att använda C# och
WPF.
Sammanfattning:
Uppgiften för detta examensarbete är att använda konstruktionen från den nya
grafiska motorn i 800xA systemet från ABB, genom att implementera byggstenar för
att få igång bildvisningar. Dessa byggstenar kallas grafiska primitiver.
Grafiska primitiver används i många program, bl.a. Office Excel.
Det system som arbetet kommer att utföras i är 800xA systemet, vilket är utvecklat av
ABB.
I detta system byggs produkter till kunder för försäljning, de beställer och ABB
tillverkar, men för att kunna bygga programmen som kunderna efterfrågar så måste
det finnas grafiska primitiver att använda.
ABB har fått en ny grafikmotor och de implementerar nu primitiver med C# istället för
Visual Basic som var det gamla systemets konstruktion.
Exempel på några primitiver är olika diagram: stapel och cirkel diagram, dessa
diagram kan kopplas samman med kommandon så att värden matas in automatiskt
och primitiverna kommer till rörelser med hjälp av dessa värden.
För varje nytt värde som blir inmatat ska diagrammet uppdateras automatiskt och rita
ut de nya diagrammen med de nya värdena.
Eftersom man kommer att använda sig av både C# och WPF så ska vi också gå
igenom vad dessa två språk är och hur de fungerar.
Graphical programming of primitives by using C# and WPF
Abstract:
The assigment of this thesis work is to use the construction from the new graphical
engine in 800xA base, by implementing building blocks to utilize the visualization.
These building blocks are named graphic primitives.
Graphical primitives are being used in a lot of products, an example is Office Excel.
The system where most of the work will be held is called 800xA and it is developed
by ABB. In this system, programs will be built for customers to ABB, but to be able to
create the program that the customers are asking for, the programmer needs to have
graphics primitives to use.
ABB recently received a new graphical engine and they now implement primitives
with C# instead of Visual Basic which was the old systems construction.
Examples on some primitives are different kinds of diagrams: staple and circle
diagram, these diagrams can be connected with each other by using commands, so
that the value will be fed in automatically.
For each new value entered, the diagram needs to update the values and draw the
new diagram.
The language that will be used is C# and WPF and because of this we will also go
deeper into the two languages and explain how they work.
ii

iii

Förord
Denna rapport skapades i samarbete med examensarbete på 15hp vid Mälardalens
Högskola (MDH), examensarbetet blev utfört vid Asea Brown Boveri (ABB).
Jag skulle vilja tacka min handledare vid ABB Björn Lindberg som hjälpte mig igenom
den praktiska delen av examensarbetet.
Jag skulle också vilja tacka min handledare och examinator vid MDH Thomas
Larsson som hjälpte mig med att skriva denna rapport.
iv

Innehållsförteckning
1 Inledning ............................................................................................................................ 1
1.1 Hur primitiver hjälper användare ....................................................................................... 1
1.2 Mål .......................................................................................................................................... 1
2 Bakgrund ............................................................................................................................ 2
2.1 ABB ......................................................................................................................................... 2
2.2 C# ............................................................................................................................................ 3
2.2.1 Historia .............................................................................................................................................. 3
2.3 WPF ........................................................................................................................................ 4
2.3.1 Visuals ............................................................................................................................................... 4
2.3.2 Verktyg .............................................................................................................................................. 5
2.3.2.1 DrawingVisual klassen: ............................................................................................................ 5
2.3.2.2 Viewport3DVisual klassen: ...................................................................................................... 5
2.3.2.3 ContainerVisual klassen: .......................................................................................................... 5
2.3.2.4 Drawing Content i Visual objekt. ............................................................................................. 6
2.3.2.5 DrawingContext klassen ........................................................................................................... 6
2.3.2.6 StreamGeometryContext class: ................................................................................................ 6
2.4 Program plattformar ............................................................................................................ 7
2.4.1 Visual Studio 2005 ............................................................................................................................ 7
2.4.2 Team Foundation Server ................................................................................................................... 7
2.4.3 800xA ................................................................................................................................................ 7
3 Primitiver .......................................................................................................................... 10
3.1 Primitiv tabell ...................................................................................................................... 10
3.2 Primitiv behov ...................................................................................................................... 12
3.2.1 Procentuell visning .......................................................................................................................... 12
3.2.2 Långa textsträngar ........................................................................................................................... 13
4 Applikationerna ................................................................................................................ 15
4.1 Pajdiagram primitiv ............................................................................................................ 15
4.1.1 Egenskaper ...................................................................................................................................... 15
4.1.2 Funktion .......................................................................................................................................... 16
4.1.3 Problem som uppstod under arbetets gång ...................................................................................... 17
4.2 Textrullning primitiv .......................................................................................................... 18
4.2.1 Egenskaper ...................................................................................................................................... 18
4.2.2 Funktion .......................................................................................................................................... 19
4.2.3 Problem som uppstod ...................................................................................................................... 20
4.3 Capability diagram primitiv ............................................................................................... 20
4.3.1 Egenskaper ...................................................................................................................................... 20
4.3.2 Tillverkning ..................................................................................................................................... 22
4.3.3 Exempel Bilder ................................................................................................................................ 23
4.3.4 Problem som uppstod ...................................................................................................................... 23
5 Ändringar och planerade ändringar av gjorda primitiver ............................................. 24
5.1 FlexiblePipe: ......................................................................................................................... 24
5.2 Paj Diagram: ........................................................................................................................ 25
5.3 Scrolling text: ....................................................................................................................... 26
6 Rapport skrivning till Företaget ...................................................................................... 27
7 Slutsatser .......................................................................................................................... 28
vi

Figurförteckning
Figur 2-1: 800xA system koppling. ........................................................................................... 8
Figur 2-2: 800xA systemet ....................................................................................................... 9
Figur 3-1: Blandande behållare. ............................................................................................. 12
Figur 4-1: Paj diagram ............................................................................................................ 16
Figur 4-2: ScrollingText. ......................................................................................................... 20
Figur 5-1: Flexible Pipe: före ändringen ................................................................................. 24
Figur 5-2: FlexiblePipe: Efter ändringen ................................................................................. 24
Figur 5-3: Flexible Pipe: ihopsatt ............................................................................................ 25
Figur 5-4: Pajdiagrammet före ändringen ............................................................................... 25
Figur 5-5: Pajdiagrammet med en mindre skuggning ............................................................ 25
Figur 5-6: Pajdiagrammet, full skuggning (badboll). ............................................................... 25
Figur 5-7: Pajdiagrammet efter ändringen av skuggningen ................................................... 26
vii

1 Inledning
Den här rapporten kommer att handla om ett grafiskt examensarbete som finns
tillgängligt för alla som har produktlicensen till 800xA som ABB har tillverkat.
Primitiver till produkten är något som är nödvändigt och dessa primitiver får inte
konsumera för mycket resurser.
Grafisk programmering kan göras i både 2D, 2.5D och 3D.
2D kan uppfattas som ”platt och tråkig” men den är väldigt nyttig och tar oftast minst
resurser när den blir programmerad. 2D används bäst till att visa text och värden [1].
2.5D är en blandning av 2D och 3D, även kallad pseudo-3D, det används först och
främst för spel och blev en revolution 1976 när det första pseudo-3D spelet skapades
av Atari.
3D kan ses från alla håll, allting ändras med kameravinkelns ändring.
3D används bäst i första persons perspektiv, eller om man ska presentera någon
form av vetenskap, exempelvis en kropps olika delar, hjärtat, hjärnan.
Något man måste tänka på är dock att 3D innehåller mycket mer information och
kommer att ta mer resurser för att exekvera.
Eftersom företagets kunder har maskiner som redan pressas till max så vill man att
programvaran tar så lite resurser som möjligt. På grund av detta ska man tillverka
primitiver så enkelt som möjligt, men det innebär inte att man helt ska utesluta 3D.
Alla primitiver som tillverkas för 800xA systemet här i ABB är bildade ur C# och WPF
med hjälp av plattformen Visual Studio och alla tillverkade primitiver finns tillgängliga
till alla anställda inom ABB genom Team Foundation servrar.
1.1 Hur primitiver hjälper användare
Primitiver behövs för att hjälpa en programmerare att tillverka själva produkten som
en kund har beställt. Desto mer primitiver det finns desto snabbare kan en
programmerare arbeta för att få upp den information som kunden vill ha. I vissa fall
kommer en programmerare att specifikt beställa delar till den beställda produkten
från en annan avdelning inom ABB, så programmeraren själv kan koncentrera sig på
sitt arbete.
1.2 Mål
ABB behöver fler primitiver till sitt 800xA system. De behöver bland annat en primitiv
som kan visa användaren procentuellt vilka av de inkommande värdena som är de
högsta, en primitiv som kan visa långa textsträngar och en primitiv som var beställd
av en kund.
Diskussioner uppstod om hur dessa primitiver skulle byggas upp och fungera.
Med den procentuella visningen undrade man om en tabell i enkel form, stolpdiagram
eller ett pajdiagram skulle vara det bästa sättet att visualisera procenten
För den långa textsträngen blev det frågor angående sättet att visa texten så att den
endast ska synas inom ett mindre område.
Det primära målet var att lära sig mer om C# och WPF programmering med Visuals,
att lära sig och förstå hur det fungerar, dessutom att förstå hur visualisering av
primitiver uppfattas av människor och tillverka dessa på bästa möjliga sätt [13].
1

2 Bakgrund
Bakgrund och historia om de verktyg och plattformar som användes för att få
examensarbetet färdigställt.
2.1 ABB
ABB står för Asea Brown Boveri [2], och har bildats från två olika företag Asea och
Brown Boveri. Aseas historia sträcker sig till 1883 och Brown Boveris börjar vid 1891.
Huvudkontoret hamnade efter sammanslagningen i Zürich, Schweiz och företaget
ägdes till hälften av Asea och hälften av Brown Boveri. Den nya storkoncernen, som
började verksamheten den 5’e januari 1988, fick hela 100 miljarder kronor i
omsättning och 160 000 anställda över hela världen.
Sen dess har ABB växt, nu finns ABB i över 100 länder över hela världen, endast i
Sverige finns ABB i över 20 orter.
ABB är indelade i fem områden:
• Power Products
• Power Systems
• Automation Products
• Process Automation
• Robotics
De tillverkar kraftnät med transformatorer, ställverk, övervakningssystem,
processtyrning och industrirobotar.
I över hundra år har ABB (och dåvarande Asea) genom långsiktig forskning och
utveckling tagit fram teknik, produkter och tjänster som underlättar för alla i
samhället.
2

2.2 C#
C# (uttalas C Sharp) [4] språket sägs kombinera de bästa egenskaperna från både
C++, C och Java. Det utvecklades av Microsoft till deras .NET plattform och det är
specifikt tillverkat för Microsofts egna operativsystem.
C# versionen 3.0 blev utsläppt november 2007, som en del av .NET Framework 3.5
Att kunna koppla ihop WPF med C# blev möjligt i .NET 3.0. [5]
Här kommer lite kod exempel hur C# kodning kan se ut:
public class HelloWorld
{
public static void Main(string[] args)
{
Console.WriteLine("Hello, World!");
Console.WriteLine("You entered the following {0} command line arguments:",
args.Length );
for (int i=0; i < args.Length; i++)
{
Console.WriteLine("{0}", args[i]);
}
}
}
2.2.1 Historia
I januari 1999 bildade Anders Hejlsberg en grupp för att bygga ett nytt
programmeringsspråk, som vid tillfället blev kallat för ”Cool”. När .NET blev publicerat
för allmänheten i juli 2000 så blev programspråkets namn ändrat till just C#.
Anders Hejilsberg har även arbetat med utveckling av:
• Visual J++
• Borland Delphi
• Turbo Pascal
Han har sagt i intervjuer att de flesta stora programmeringsspråken (C++, java,
Delphi och smalltalk) utgjorde grundprincipen av CLR (Common Language Runtime),
vilket i sin tur utgjorde designen av C# programmeringsspråket. Många påstår att C#
har sina rötter från andra programmeringsspråk.
3

2.3 WPF
WPF, Windows Presentation Foundation, ingår i .NET 3.0 och den kommer
förinstallerad i Windows Vista Operativsystemet. Den finns också för Windows XP
SP2 och Windows Server 2003 för nedladdning. [6, 7, 8]
Den är direkt kopplad till XAML (Extensible Application Markup Language, uttalas
Zammel), XAML fungerar på ett liknande sätt som CSS till HTML programmering.
WPF består av en sammanhängande programmeringsmodell som håller isär
användargränssnitt och affärslogik.
Ett WPF program kan köras både fristående eller i en webbläsare. WPF integrerar
UI, 2D och 3D ritningar, dokument, avancerad typografi, vektorgrafik, rastergrafik,
animation, datakommunikation, ljud och video.
WPF är tänkt att bli nästa generations grafik API för Windows applikationer på
skrivbordet. Följande är några av Microsofts egna produkter eller tredje part
applikationer som är skrivna i WPF:
• Microsoft Expression Design
• Microsoft Expression Blend
• Yahoo! Messenger
Ett antal nyhetstidningar genom skrivbordet:
• New York Times reader
• Forbes.com reader
• Seattle Post-Intelligencer reader
• Daily Mail eReader
• Denounce RSS reader och Podcast Lyssnare
• Jyllands Posten JP2
2.3.1 Visuals
I Visuals finns den abstrakta klassen UIElement, som är basklassen till
FrameworkElement. UIElement har en lågnivåstruktur för att rita någonting på
skärmen.
Visual objektet är ett WPF objekt, vars primära uppgift är att ge renderingshjälp och
UI kontroller, så som knappar och text boxar, Visual klassen hjälper till med följande
delar:
• Output visning: Rendering av kvarstående och seriell ritning av innehållet i
en Visual.
• Transformationer: Genomför transformationer i en Visual.
• Klippning: Ger tillgång till klippning av en Visual
• Hit Test: Bestämmer om en geometri finns inom en gräns för en Visual
• Bounding box beräkningar: Bestämmer den bundna rektangeln av en
Visual.
DrawingComplex tillåter dig att populera en Visual med visuellt innehåll. När du
använder dig av en DrawingContext ritnings objekt, kommer du att lagra en serie av
renderingsdata som blir använt av ett grafiksystem, man ritar alltså inte på skärmen i
real tid.
4

Vi tänker oss ett äldre spel i formatet ”Mario Brothers”, där sidrullning förekommer. I
situationer som detta, om spelet är implementerat med WPF, kan det finnas upp till
tusen ritningar samtidigt på skärmen. Det är på grund av detta problem som det finns
en speciell Visualklass, en subklass som lättar upp renderingen av rörelserna. Den
kallas för DrawingVisuals och istället för DrawingComplex blir DrawingVisuals
snabbare med större applikationer.
2.3.2 Verktyg
Visual är använt som en publikabstraktklass som måste uppstå från dess
underklasser. Följande illustration visar hierarkin av en Visual objekt som är
exponerad i WPF: [9]
2.3.2.1 DrawingVisual klassen:
[8] DrawingVisual är en lättviktig ritningsklass som används för att rendera former,
bilder, eller text. Denna klass anses lättviktig på grund av att den inte ger någon
layout eller någon form av händelseaktivering, vilket förbättrar dess prestanda. Av
denna anledning blir bakgrundsritningar och clipartbilder perfekta
användningsområden för DrawingVisuals.
Några egenskaper DrawingVisual har:
• Drawing: Får in en ritning av ett DrawingVisual objekt
• Opacity: sätter genomskinlighetsgraden på ContainerVisual, 0 = genomskinlig.
• VisualClip: får eller sätter en klippregion av Visual som ett Geometrivärde.
• VisualTransform: får eller sätter ett Transformationsvärde för en Visual
2.3.2.2 Viewport3DVisual klassen:
viewport3DVisual ger en bro mellan 2D Visual och Visual3D objekt. Visual3D
klassen är basklassen för all form av 3D visualisering. Viewport3DVisual måste få
in ett kameravärde och ett Viewportvärde. Kameran tillåter dig att se området i
2D.
2.3.2.3 ContainerVisual klassen:
ContainerVisual används som en container för att samla ihop Visual objekt.
DrawVisual klassen kommer från ContainerVisual klassen och tillåter den att
samla ihop en grupp av Visual objekt.
5

2.3.2.4 Drawing Content i Visual objekt.
Ett Visual objekt lagrar dess renderingsdata som en vektor, med en grafisk
instruktionslista. Varje del av instruktionens lista representerar en viss grafisk
datagrupp och associerade resurser i ett numrerat format.
2.3.2.5 DrawingContext klassen
En DrawingContext klass [10] används på liknande sätt som DrawingVisual,
för varje figur man skapar kommer renderingsinformationen att lagras för
utritning.
Några medlemmar som finns i DrawingContext klassen är:
• DrawDrawing: Ritar ut det specifikt lagrade ritningsobjektet.
• DrawGeometry: Ritar ut den specifika Geometrylagringen genom att använda en
Pensel eller penna.
• DrawGlyphRun: Ritar ut en specifikt lagrad text.
• DrawImage: Ritar ut en bild inom en region som är specificerad av en Rect
(rektangel)
• DrawLine: Ritar ut en rak linje mellan två punkter med en penna.
• DrawRectangle: Ritar ut en rektangel.
• DrawRoundedRectangle: Ritar ut en rundad rectangle i hörnen.
• DrawText: Ritar ut en formatterad text på en specifik plats.
• DrawVideo: Ritar ut en video inom en spefik region.
• Pop: Poppar den sista masken, klippet, effekten eller transformationen som har
blivit pushad till drawingContext.
• PushClip: Pushar den sista specifika klipp regionen in i drawingContext
• pushEffect, PushGuidelineSet, PushOpacity, PushOpacityMask och
PushTransform används på alla sätt och kan alla bli poppade av Pop.
2.3.2.6 StreamGeometryContext class:
En StreamGeometry är ett enklare alternativ till PathGeometry för att tillverka
geometriska figurer. Man ska använda en streamGeometry när man behöver
beskriva en complexgeometri men inte vill att den ska kunna ta hand om en speciell
databindning, animationer eller ändringar. På grund av dess effektivitet, är
streamGeometry klassen ett bra val för att beskriva figurer.
Några medlemmar från StreamGeometryContext:
• ArcTo: Ritar ut en ark till en specifik punkt.
• BeginFigure: Specifiserar startpunkten för en ny figur.
• LineTo: Ritar ut en rak linje till en specifik punkt.
• PolyBezierTo: Ritar ut en eller fler kopplade Beizerkurvor.
• PolyLineTo: Ritar ut en eller fler kopplade raka linjer
6

2.4 Program plattformar
Följande program användes för att framställa 800xA primitiverna.
2.4.1 Visual Studio 2005
Visual Studio är tillverkad av Microsoft [11], det är den huvudsakliga IDE’n (Integrated
Development Environment) från Microsoft. Den kan användas till att tillverka konsol och
GUI (Graphical User Inerface) applikationer, tillsammans med Windows-forms
applikationer, webbsidor, webbapplikationer och webbservice.
Visual Studio har bland annat en egen debugger, man kan designa sina egna GUI
applikationer, webbdesignare, klassdesignare och databasschemadesigner.
Visual Studio förstår följande programmerings språk:
• C/C++ via Visual C++
• VB.NET via Visual Basic.NET
• C# via Visual C#
• F#
• Python
• Ruby
• XML/XSLT
• HTML/XHTML
• JavaScript
• CSS
För tillfället finns Visual Studio 2008 och 2005 Professional Editions, tillsammans
med språkversionerna (Visual Basic, C++, C#, J#) av Visual Studio 2005 för gratis
nedladdning via Microsofts DreamSpark program för studenter.
2.4.2 Team Foundation Server
En snabb genomgång av vad Team Foundation Server (även förkortat TFS)[12] är
och hur den fungerar.
TFS är tillverkad av Microsoft, för att samla data, lagra, rapportera och hitta projekt.
Den är till för att tillverka flertalet projekt och det finns flera versioner av den, bland
annat som en ensamstående mjukvara eller med en serverplattform för Visual Studio
Team System (VSTS). TFS hanterar med andra ord projekt som klienter sparar
undan, dessa projekt blir tillgängliga för de som har tillgång till nätverket.
2.4.3 800xA
800xA systemet är en produkt som ABB säljer till kunder där varje kund får köpa en
eller flera licenser beroende på hur stort deras företag är.
Systemet fungerar på följande sätt inom ABB:
Ett 800xA systeminstallation består av datorer och utrustning som kommunicerar
med varandra över olika typer av kommunikation och nätverk, som illustreras bra i
följande figur.
7

Figur 2-1: 800xA system koppling.
Klientens nätverk används för att kommunicera mellan servrar och arbetsstationer.
Servrarna kör en mjukvara som ger systemet tillgång till funktionaliteter.
Arbetsstationerna kör en mjukvara som ger olika former av användarinteraktioner.
För mindre system, servrar och arbetsstationer, kan mjukvaran komma att bli
installerade och körda på en och samma maskin.
Kontrollnätverket är ett lokalt nätverk (LAN) som har en hög prestanda och pålitlig
kommunikation med förutbestämda responstider i realtid. Den används till att koppla
upp kontrollerna mot serverarna. Kontrollerna är som noder som kör en kontrollerad
mjukvara.
Fältbussar används för att koppla samman utrustning, så som I/O moduler, smarta
sensorer och aktiveringsdelar. När den kopplar ihop alla dessa I/O moduler till
systemet kommer det att gå via några kontroller så som indikeras i Figur 2-1, eller
kopplas direkt till en server.
Klientens/Serverns nätverk kan bli kopplad till en ”Plant Network” så som ett kontor
eller ett samlat nätverk, via någon form av nätverkets utrustning.
Ett tusental I/O-enheter sitter och mäter värden från de sensorer och delar den har
tillgång till, dessa värden kommer att passera upp till kontrollerna.
Kontrollerna kommer att styra I/O-enheterna efter begäran, exempelvis om elden
börjar slockna så gasar programmet på lite till för att hålla igång den.
Dessa kontroller går sedan till operatörer, där skärmar visar alla värden som bildas
och en person vid en operatorskärm kan själv styra kontrollerna för sänkning eller
ökning av värdena i I/O-enheterna.
Huvudpersonerna har även de tillgångar till all statistik, som exempel:
8

Hur mycket tillverkades?
Hur har det fungerat?
Hur har det sett ut?
Om det finns flera byggnader i eller utanför landet kan alltihop kopplas ihop med ett
större nätverk och information kan enkelt skickas mellan de olika parterna.
Det område som tillverkar primitiver är även det område som gör programmen till
operatörerna, så att operatörerna ser alla nödvändiga värden som bildas i I/O som
kontrollerna plockar upp.
Det är dessa primitiver som kommer att visa hur saker och ting fungerar och de kan
kopplas ihop med varningssignaler och alarm om något värde börjar glida åt fel håll
och de åtgärder den har blivit programmerad att göra inte hjälper.
Simulatorprogrammet kommer att testas noggrant innan det anländer till kunden.
Många av dessa program är stora och mycket komplicerade och allt måste fungera
bra i simulatorn innan de skickas till kunden, det är det som testarna arbetar med.
Figur 2-2: 800xA systemet
9

3 Primitiver
En grafikprimitiv kan vara en stor variation av grafiska delar. En liten text är en
primitiv för sig. Rektangel, cirkel, trianglar är också de primitiver.
Primitiver kan vara väldigt komplicerade och det är dessa som tar tid att tillverka.
Med komplicerade primitiver menas sådana primitiver som har många funktioner och
metoder. Det är också dessa som behöver en stor dokumentation om hur de fungerar
för att andra ska kunna förstå vad som behöver göras för att använda den på rätt
sätt.
3.1 Primitiv tabell
De primitiver som används just nu i 800xA systemet kommer nedanför, denna lista
kommer att öka allt eftersom de tillverkar fler och eftersom 800xA uppdateras
dagligen så kommer det absolut att ändras, lista: 2008-04-19:
Arc Ritar ut en del av en cirkel, kan
ändra avståndet mellan start och
stop.
Bar Visar värderna som placeras,
horisontellt.
CapabilityDiagram (min) Capability diagram, kommer att
finnas inne i systemet senare.
Chord Ritar ut en del av en cirkel som är
ifylld eller transparent.
Cone Ritar ut en kon
Curve Klicka och den ritar ut kurvor, som
kan ha olika böjningar
Ellipse Ritar ut en ellips
ErrorIndicator Man kan välja vilken grad av fel det
har blivit – om något.
FilledPath Ritar en fylld stig
FlexiblePipe (ändrade i) Flexibelt rör, den följer med där man
klickar, ritar automatiskt ut hörnen.
10

GroupBox Grupperar arbetena.
HScale En skala horisontellt.
Image Kan placera en bild inuti, denna är
tom.
Pie Ritar ut en paj form, kan bestämma
start och stopp
PieChart Ritar ut ett paj diagram
Pipe Ritar ut en del av ett rör.
Polygon Ritar ut en polygon där man klickar
PolyLine Ritar ut raka linjer där man klickar
RadarChart Ritar ut ett radardiagram, följer ett
antal värden när de ändras i detta
diagram
RangeBar Ritar ut en bar, farlig nivå, ok nivå,
välj färger.
ScrollingText ( min) Ritar ut en rullande text, välj håll och
typ av rullning.
Text Ritar ut en text.
Trend Ritar ut en trend, många olika
värden som kan följa trenden.
Denna är tom.
Triangle / Rektangel Ritar ut en triangel eller en rektangel
11

VScale
12
Ritar ut en vertikal skala, man kan
ändra dess värden och antal pinnar
som man har mellan skalorna bland
annat.
XYGraph/ XYPlot Ritar ut en XY graf eller XY
punktgraf. Dessa är tomma
XYZGraph Ritar ut en 3D graf.
Följande bild är ett exempel på hur man kan placera ut olika delar tillsammans och
skapa en produkt:
Figur 3-1: Blandande behållare.
3.2 Primitiv behov
ABB behöver fler primitiver till sitt 800xA system, de behöver bland annat en primitiv
som kan visa användaren procentuellt vilka av de inkommande värden som var de
högsta, en primitiv som kan visa långa textsträngar på ett mindre område och en
primitiv som skulle användas till ett olja och gasföretag som är kund hos ABB, för
utveckling av kundens produkt.
3.2.1 Procentuell visning
För procentuell visning kan en enkel tabell fungera alldeles utmärkt för syftet. Om
man dessutom tar och kalkylerar ut det högsta procentuella värdet kan man få
tabellen att måla ut det högsta värdet i en definierad färg. På detta sätt kan man lätt
med hjälp av en färg följa det högsta värdet, något som ABB var ute efter. Däremot

ville inte ABB se endast det högsta värdet tydligt, utan alla värden skulle kunna ses
enkelt.
Resultatet blir antagligen en väldigt multifärgad tabell eller en utan färg och då blir
det genast svårare att uppfatta de rätta procentvärdena, dessutom är det inte visuellt
bra att rita upp en tabell som kommer att få många och olika värden inmatade.
Ett pajdiagram bygger på just procentvärden, den ritar ut värdena beroende på hur
stor procent av cirkeln de använder. Men hur är det med ett stolpdiagram, kan man
använda sig av ett stolpdiagram för att visa procentuella värden?
Ett stolpdiagram fungerar på liknande sätt som ett pajdiagram. Vilket av dem som
lämpar sig bäst att användas beror helt på vilken information man vill visa. Ett
stolpdiagram är mycket bättre på att visa skillnader och jämföra olika värden,
exempelvis hur många bilar som har sålts detta år jämfört med de senaste 10 åren.
Något man ska tänka på är att inte använda sig av pseudo-3D diagram, eftersom det
blir mycket svårare att läsa av innehållet, ett 2D diagram är mycket mer lättläst. Om
en kund efterfrågar ett specifikt detaljerat diagram med pseudo-3D och kommentarer,
visa dem då varför det inte fungerar bra. Förklara vad som blir effektivast, ge kunden
valmöjligheter, tillverka båda delarna, en med pseudo-3D och en 2D, be kunden att
ge värdet i pseudo-3D, ta sen fram din 2D och ge ett exaktare värde. [14]
I detta fall ville ABB visa procentvärdena på ett effektivt sätt. Då återstår
pajdiagrammet som på ett effektivt sätt kan visa de procentuella värden som uppstår.
Något som gör det hela ännu lättare att visualisera är om man färgar varje värde med
olika färger och låter procentsiffrorna ligga innanför själva cirkeln eller ”flyga” smått
ovanför. Att ha värdena staplade på sidan om pajen skulle ta bort fokus på själva
diagrammet.
Det val vi gjorde var ha procentvärdena utanför cirkeln men tillräckligt nära för att inte
tappa fokus från själva pajdiagrammet. Nya värden kommer att matas in snabbare än
varje sekund och då måste man kunna hålla ögonen på informationen på ett smidigt
sätt.
Om vi hade valt att ha procenttexten inuti varje pajdel i pajdiagrammet skulle det ha
blivit problematiskt om ett värde hade varit litet i jämförelse med de andra värdena.
Var skulle texten hamna? All information ska kunna vara tillgänglig när som helst så
det är inte möjligt att ta bort ett värde bara på grund av att det är litet.
En annan idé var att sortera pajdiagrammet i storlek, så att det största värdet alltid är
på en speciell placering, men genom forskning kom vi fram till att om man vill sortera
värdena efter storlek ska man satsa på en punktgraf istället.
3.2.2 Långa textsträngar
De stora diskussionerna inom detta område handlade om hur vi skulle visualisera en
lång text inom ett mindre område. Vilket av dessa alternativ skulle vara bäst att ha?
13

Ett litet textområde där texten delade sig i flertalet bitar för att passa textområdets
storlek, där textområdet skulle visa första delen av själva texten 10-30 sekunder
innan den fortsatte till nästa del och så vidare hela vägen till slutet av textsträngen.
Eller skulle det vara bättre att använda en rullande text som rullar igenom textområdet
som man kan kontrollera.
Låt oss ta en titt på texten som delade sig, vi kallar den för klipp-och-klistra texten för
tillfället. En klipp-och-klistra text skulle troligen bli svår att konstruera pga. det faktum
att man inte kommer att veta var någonstans man ska klippa av själva texten, om
texten inte innehåller något tecken som kan visa primitiven att vid detta tecken ska
det klippas.
En rullande text blir lättare i detta avseende men då måste man animera texten.
Något som skulle vara bra till en rullande text skulle vara att kunna kontrollera
rullningen på ett effektivt sätt, så som val av hur rullningen ska gå till, var ska den
börja och var ska den sluta, dess hastighet och dess utseende.
14

4 Applikationerna
Dessa är de färdigställda primitiverna som blev tillverkade under examensarbetet i
ABB.
4.1 Pajdiagram primitiv
Ett Pajdiagram är en stängd figur, skapad genom ett antal pajdelar som blir skapade
genom två raka linjer och en del av en cirkel mellan dem.
4.1.1 Egenskaper
Följande är en tabell med alla egenskaper som ett pajdiagram har:
NAME TYPE DEFAULT DESCRIPTION
Font LogicalFont
15
“Font( “Ariel”, 14,
Regular,
DemiBold)”
Visible BOOLEAN True
Height FLOAT 300
Width FLOAT 300
Teckensnitt för att
använda i all text i paj
diagrammet.
Bestämmer om den är
synlig i programmet
eller ej.
Höjden på själva
primitiven
Bredden på själva
primitiven
Name STRING “PieChart1” Namnet på primitiven
Pen Pen “Navy, 1”
EngineeringUnit STRING “”
ShadeLength INTEGER 0
PresentationMode
Shade
ShowText
ShowLines
Transform
ENUM
UnitType
ENUM
ShowShade
ENUM
ShowText
ENUM
ShowLines
TRANSFORM
Type
XPos, YPos FLOAT
En penna för att rita ut
pajen och linjerna.
EngineeringUnit är till
för att spåra värdena
Möjliggör ändringar av
storleken på
shadningen
Percentage Sätter presentationen.
Show3D
ShowText
NoLines
Center of the
display area
Aktiverar shadning,
eller slår av den
Aktiverar text, eller slår
av den
Aktiverar linjerna, eller
slår av dem
Möjliggör animationer
så som skalning,
flyttning och rotationer.
Positionen av
primitivens area,
placering uppe i
vänstra hörnet.

Rotation
ROTATION
Type
PieSpokeXColor BRUSH
16
0
“Red” (the first
10 colors is
default defined)
PieSpokeXCurrentValue DOUBLE 10
PieSpokeXNumberOfDecimals INTEGER 1
Rotations vinkel,
center av den
definierade arean är
axis av rotationen.
En pensel för att färga
varje pajdel.
Värdet på den
specifika pajdelen.
Antal decimaler på
värdena.
4.1.2 Funktion
Börja med att först välja hur många värden som kommer att bli inmatade i själva
diagrammet. Ge sedan värdena varsitt värde, automatiskt kommer pajen ändra form
för att passa de nya värdena.
Man kan aktivera ”utritning av linjer” till siffrorna och siffrorna kan visas som både
procent och det nuvarande inmatade värdet. Man kan också ta bort texten och vara
helt utan siffror.
EngineeringUnit möjliggör en ändring av värdena, så att man kan förlänga siffrorna
med valfri sträng: cm, m, km, cl, liter, och så vidare. Detta visas i det nedre vänstra
pajdiagrammet i Figur 4-1.
Om skuggningen avaktiveras blir den 2D, annars så ritas en skuggning ut längst ut
på cirkelns kant som ger den en falsk 3D-aktig figur.
Exempel Bilder:
Figur 4-1: Paj diagram
PieChart:
Utritade med:
• Linjer.
• Olika färger.
• Olika värden.
• Visning av procent.
• Visning av värden.
• Med skuggning.
• Utan skuggning.
• Engineering Unit

4.1.3 Problem som uppstod under arbetets gång
Några problem som uppstod var bland annat på vilket sätt man skulle måla ut pajen. I
den första omgången gjordes en enkel cirkel med linjer som rörde sig efter
inkommande värden. Det upptäcktes dock snabbt att valet att ha olika färger för varje
pajdel inte skulle fungera med denna utritning och att det skulle bli lättare att
visualisera varje pajdel i diagrammet om varje del fick olika färger.
Istället ändrades det till att rita ut två raka linjer och lägga en ark mellan dessa två
linjer.
Koden:
streamContext.BeginFigure(p0, true, true);
streamContext.LineTo(p1, true, true);
streamContext.ArcTo(p2, arcSize, 0, rotateAngle > 180,
SweepDirection.Clockwise, true, true);
streamContext.LineTo(p0, true, true);
Man måste börja med att tala om var startpunkten är och detta gör man med
”BeginFigure”.
”BeginFigure”: denna metod vill få in punkten där figuren ska börja ritas (p0).
Nu är det dags att börja rita, vi ropar på funktionen ”LineTo” från
StreamGeometryComplex klassen.
”LineTo” vill ha punkten dit linjen ska gå, den har början från ”BeginFigure” redan
och nu fortsätter den till punkt 1 (p1)
Arken, ”ArcTo” fungerar på följande sätt:
”ArcTo” ritar ut en del av en cirkel. Men det finns många sätt att rita ut en böjd kurva
mellan två linjer och därför begär den många inparametrar innan den vet exakt hur
kurvan kommer se ut.
”ArcTo” vill veta till vilken punkt den ska rital. Den har ju startpunkten från punkt 1, så
då ger vi den punkt 2 (p2).
Nu vill ”ArcTo” veta hur stor radie på cirkeln det ska vara, detta är ”arcSize” i koden.
”ArcTo” vill veta om det finns någon rotationsvinkel, vilket det i detta fall inte finns. Vi
matar in 0. ”ArcTo” vill också veta om den ska rita ut den stora kurvan mellan de två
punkterna eller den lilla kurvan, i detta fall beror det på hur stor själva pajen är. Det är
därför vi jämför med 180 grader, om den går längre än 180 kommer den att
returneras ”True”, vilket innebär att den ritar den stora kurvan, annars ritas den
mindre kurvan mellan punkterna.
Den femte parametern gäller åt vilket den ska rita kurvan, ”clockwise” eller
”counterClockwise”.
Dessa är de viktiga parametrarna som man måste ordna innan det blir dags för själva
utritningen av ”ArcTo”. När väl denna har blivit utritad får man inte glömma att peka
tillbaka till startpunkten med ”LineTo” igen (p0)
Nu tar vi en titt på en enda pajdel så att man lättare förstår vad som händer.
LineTo
P1
P0
LineTo
ArcTo
P2
1: BeginFigure skapar startpunkten p0
2: LineTo ritar ut en linje till nästa punkt p1
3: ArcTo ritar ut arken till den sista punkten p2
4: LineTo ritar ut den sista sträckan tillbaka till
startpunkten.
17

När den har blivit utritad på detta sätt kommer pajdelen att rotera hela sin vinkel, dit
den andra linjen finns och sen ritas nästa del ut. På så sätt bildas pajen och det med
hjälp av ”push-transform” som ordnar rotationen för den färdiga delen.
4.2 Textrullning primitiv
Rullande textprimitiven används för att visa en rullande text i ett grafikfönster. Den
kan rulla in från grafikfönstret och ut med olika egenskaper.
4.2.1 Egenskaper
Följande är en tabell med alla egenskaper som rullande text har:
NAME TYPE DEFAULT DESCRIPTION
Name STRING “ScrollingText1” Namnet på primitiven
Visible BOOLEAN True
18
Bestämmer om den är
synlig i programmet eller ej.
Height FLOAT 96 Höjden på själva primitiven
Width FLOAT 96
XPos, YPos FLOAT
Transform
TRANSFORM
Type
Center of the display
area
Line Pen Pen(RGB(0,255,0),1)
FillColor BRUSH RGB(64,64,64)
Rotation ROTATION Type 0
Frame3DEffect
ENUM
Frame3DEffect
RAISED
FrameColor COLOR RGB (200,200,200)
FrameColor2 COLOR RGB (127,127,127)
Bredden på själva
primitiven
Positionen av primitivens
area, placering uppe i
vänstra hörnet.
Möjliggör animationer så
som skalning, flyttning och
rotationer.
Penna som ritar ut linjerna
runt primitiven
Bakgrunds färg till
primitiven
Rotations vinkel, center av
den definierade arean är
axis av rotationen.
Kontrollerar ramens
placering i djup.
Färg för att använda till den
högra sedan av primitiven.
Färg för att använda på
vänster sida av primitiven.
FrameWidth INTEGER 3 Bredden på ramen.
Font FONT Tahoma
Text STRING “ScrollingText”
TextColor COLOR RGB(0,255,0)
Teckensnitt för att visa
texten.
Själva texten som ska
visas i arean.
Färg för att ändra textens
färg som visas inne i
primitiven.

ScrollSpeed INTEGER 2
ScrollOption
Direction
FadingShade
ENUM
ScrollOption
ENUM
ScrollDirection
ENUM
FadingShade
19
StartToEnd
Left
Both
Sätter hastigheten på
rullningen.
Den bestämmer på vilket
sätt texten ska rulla.
Bestämmer åt vilket håll
texten ska rulla.
Bestämmer hur
skuggningen ska visas.
4.2.2 Funktion
Den rullande texten blir animerad med hjälp av en klocka som är inbyggd i 800xA
systemet, med varje ”tick” flyttar sig bilden ett antal pixlar åt valt håll beroende på
hastigheten.
De extra funktionerna som finns är hur rullningen ska börja och sluta.
• ”StartToEnd” innebär att rullningen startar från första bokstaven och rullar till
andra sidan av textområdet, den rullar hela vägen till den sista bokstaven. När
den sista bokstaven når slutkanten av textområdet så börjar texten om igen.
• ”StartToStart” innebär att rullningen startar från första bokstaven och rullar till
andra sidan av textområdet, men när den första bokstaven når textkanten av
textområdet börjar texten om omgående.
• ”AtOnce” innebär att rullningen startar från första bokstaven och rullar till andra
sidan av textområdet, men på vägen till textkanten av textområdet kommer en
ny text att starta upp så fort den sista bokstaven har lämnat startkanten. På
detta sätt får man en flytande rullande text med inga stopp i, som inte visar
några tomma områden i textrullningen.
FadingShade bestämmer var skuggningen ska ske, den gör så att texten försvinner
på ett finare sätt längst ut vid slutet och/eller början av textområdet.
”Both” menas att båda sidorna har skuggningen aktiverad.
Eftersom 800xA systemet ska finnas tillgängligt i de länder som läser från vänster till
höger också så måste man även kunna välja vilket håll rullningen ska åka mot.

Exempel Bild:
Figur 4-2: ScrollingText.
20
Rullande Text:
• Här ser man alla val, ink. olika
färger.
• Skuggning av/på.
• olika inställningar på rullningen
(Pilarna visar vilket håll texten rör sig).
4.2.3 Problem som uppstod
Ett större problem som uppstod, om man körde med längre meningar när man hade
”StartToStart” som val, var att text två började skriva över den första texten som
redan rullade. Det fanns alltså ingen kontroll som kontrollerade att det inte fanns
någon text där redan.
Detta problem fixades genom att ändra ”StartToStart” till att automatiskt ändras till
”AtOnce” när textsträngen är så pass lång att den sträcker sig hela vägen mellan
textområdet. På detta sätt började texten om när den sista biten hade lämnat
startkanten.
4.3 Capability diagram primitiv
Capability Diagrammet är en början av ett diagramprogram åt en kund till ABB som
håller på med mätningar av gas och olja. Diagrammets uppgift är att visa när en
generator börjar närma sig ett farligt värde. När operatören ser detta måste denna
person göra åtgärder för att hindra att generatorn överstiger den farliga gränsen.
Diagrammet kommer att ha tillgång till en rad olika värden som blir resultatet av ett
utritat kryss, det är detta kryss som inte får vara i närheten av den farliga zonen av
grafen (Figur 4-4, mörkblå färg). Om detta inträffar och de åtgärder som programmet
blivit programmerad att vidta i nödlägen inte ändrar riktning, måste operatören genast
ta till egna åtgärder för att förhindra generators nuvarande kurs. Det är på grund av
detta som man senare kommer att programmera in alarm som gör det lättare för
operatören att upptäcka att ett problem är på gång att uppstå.
4.3.1 Egenskaper
Tabell av alla egenskaper för Capability Diagrammet
NAME TYPE DEFAULT DESCRIPTION
Name STRING "CapabilityDiagram1" Namnet för primitiven
Visible BOOLEAN True
Bestämmer om den är
synlig i programmet eller ej.

Height FLOAT 96 Höjden på själva primitiven
Width FLOAT 96
XPos, YPos FLOAT
Transform
TRANSFORM
Type
Center of the display
area
Back Color COLOR “DarkGray”
Ligh tColor COLOR RGB(172,183,253)
Dark Color COLOR RGB(53,0,213)
TransferZone
Color
COLOR RGB(255,128,128)
Line Pen Pen(White, 1.)
21
Bredden på själva
primitiven
Positionen av primitivens
area, placering uppe i
vänstra hörnet.
Möjliggör animationer så
som skalning, flyttning och
rotationer.
Färg som används för att
rita ut bakgrundsfärgen.
Färg som används för att
rita ut den ljusazonen
(brazonen)
Färg som används för att
rita ut den mörka zonen (
farligazonen).
Färg som används för att
rita ut själva
Transferzonen.
Penna som ritar ut linjen
runt primitiven och som
också ritar ut kryssen.
Operator Limit FLOAT 0 En operator gräns
PFLagMin DOUBLE 0.2 Lutningen på Lag Sidan
PFLeadMin DOUBLE -0.2 Lutningen på Lead Sidan.
PMAX FLOAT 50 Värdet på PMAX
PMIN FLOAT 2 Värdet på PMIN
PN FLOAT 41 Värdet på PN
PQScaleMax FLOAT 65 Värdet på PQScaleMax
Q0 FLOAT -40 Värdet på Q0
Q1 FLOAT -25 Värdet på Q1
Q2 FLOAT 50 Värdet på Q2
QMAX FLOAT 60 Värdet på QMAX
QMIN FLOAT -28 Värdet på QMIN
QP0 FLOAT -35 Värdet på QP0
QPN FLOAT -20 Värdet på QPN
Scale Lines DashDotPen
DashDotPen(White,
0.5, Dash, Flat,
Miter)
Show Dots ENUM ShowDots ShowDots Sätter utritning av kryssen.

Show Lines ENUM ShowLines ShowLines Sätter utritning av linjerna.
TransferZone
Enable
BOOLEAN False
TransfZoneLimH FLOAT 10
TransfZoneLimL FLOAT 15
Rotation ROTATION Type 0
22
Sätter på/av visningen av
”Transferzone”
Höga nivån på
”Transferzone”
Låga nivån på
”Transferzone”.
Rotationsvinkel, center av
den definierade arean är
axis av rotationen.
4.3.2 Tillverkning
Capability Diagrammet är tillverkad med tre olika stora cirklar, tre olika trianglar och
en rektangel. Tillsammans bildar de ett mönster som blir ritade i två olika färger i den
farliga zonen och den ofarliga zonen (se Figur 4-4), det finns även en aktivering av
en markör med färgen rosa/orange som visar var krysset befinner sig horizontellt,
denna del kommer att bli programmerad att röra sig efter själva krysset.
Nedanför följer en figur av den första skissen av hur diagrammet skulle se ut, på
grund av att detta är en produkt till en kund till ABB så har namnen på funktionerna
och beskrivningarna tagits bort från alla metoder av hemlighetsstämplingssyfte.
Figur 4-3: Capability Diagrammet
Capability Diagram
Diagram designen
som skulle tillverkas.
Det röda området är
det område som är
den ofarligazonen.
Utanför den röda
linjen är den
farligazonen.

4.3.3 Exempel Bilder
Figur 4-4: Capability Diagrammet exempelFigur
23
Capability Diagram:
• Den farligazonen (mörkblå)
• Den ofarligazonen (ljusblå)
• Den rosa/orange delen är den
del som kommer ritas ut
beroende var krysset befinner
sig.
• Linjerna.
• Kryssen.
4.3.4 Problem som uppstod
Det tillverkade diagrammet är endast en primitiv, det är inte den färdiga produkten.
En programmerare kommer att sitta med detta och lägga till alla säkerhets funktioner
samt krysset som ska följa värdena som blir inmatade till diagrammet. En form av
gradbeteckning ska också skapas vilket kommer att visa var värdena horisontellt och
vertikalt ligger. Eftersom det redan finns en gradbeteckningsskalnings primitiv i
800xA kommer dessa att användas för att bygga upp det färdiga diagrammet.

5 Ändringar och planerade ändringar av gjorda primitiver
Ändringar som kommer eller har skett under examensperioden.
5.1 FlexiblePipe:
FlexiblePipe är en primitiv vars funktion är att rita ut ett rör, som kan kopplas samman
med varandra och med andra primitiver.
Ett problem som skulle ändras var att när två rör skulle kopplas samman så fanns det
inget bra sätt att utföra detta på.
Så här såg det ut förut vid ihopkoppling:
Figur 5-1: Flexible Pipe: före ändringen
Flexible Pipe:
Med denna bild ser man att
ihopkopplingen inte ser så bra ut.
Det händer att man inte ens drar rören
ända fram till målet när man gör
simulatorerna och då blir det ett stort
mellanrum mellan de båda figurerna.
Figur 6-2 visar den nya ändrade delen.
Det ser konstigt ut när långa rör skulle kopplas samman. För att få rör att kopplas
samman finare behövdes en extra metod, den var redan skapad men däremot inte
implementerad. Metoden gick ut på att tillverka en triangel längst ut på röret, med
denna triangel kunde man koppla ihop rör på ett effektivare sätt.
Triangeln kunde man aktivera när man ville.
Figur 5-2: FlexiblePipe: Efter ändringen
FlexiblePipe:
Här ser man hur den nya triangeln blivit
aktiverad.
24

Och i en sammansatt bild ser det ut på följande sätt:
Figur 5-3: Flexible Pipe: ihopsatt
25
FlexiblePipe:
Här ser man hur triangeln ser
mycket bättre ihopkopplat.
En 45 graders vinkling var
inte möjlig att koppla ihop
förut så att den såg bra ut.
Dock fungerar den nya
triangeln utan problem med
detta.
5.2 Paj Diagram:
Pajdiagrammet blev ändrat från vad som såg ut som en badboll till en mer plattare
skuggning.
Så här såg diagrammet ut innan ändringen:
Figur 5-4: Pajdiagrammet före ändringen
Figur 5-5: Pajdiagrammet med en mindre
skuggning
Figur 5-6: Pajdiagrammet, full skuggning (badboll).

Skuggningen av pajdiagrammet gjordes på följande sätt:
En transparent färg placerades i mitten som sakta övergår mot en svart färg med ett
mindre genomskinlighetsvärde. Sedan placerades en ljuskälla, för att ge illustrationen
av att den är rund. Det finns även en mindre mörkare ”linje” längst ner på höger sida
av diagrammet som skapar lite extra känsla av rundhet (se Figur 5-6).
När många värden blev inmatade i diagrammet såg det dock ut som en stor badboll
och följande ändringar infördes för att rätta till badbollsproblemet.
• Man tog bort ljuspunkten som fanns för att skapa illustrationen av att den var
rund.
• Man ändrade tillfället då den transparanta delen började gå över mot mörk
färg, så att den aktiveras snabbare men under en mindre sträcka. Detta
placerades vid den yttre omkretsen istället för att börja omgående från
centrum av diagrammet.
• Den svarta mörkläggningen längst till höger togs bort för att återigen minska
synvillan av att den var rund.
På detta sätt ser nu det nya diagrammet mycket mer plattare ut:
Figur 5-7: Pajdiagrammet efter ändringen av skuggningen
5.3 Scrolling text:
Den rullande texten har inte blivit ändrad ännu, men det diskuterades att det skulle
vara rolig att införa en metod för att stoppa rullningen av texten och att möjligtvis
lägga till pilar (knappar) på vardera sida som kontrollerar åt vilket håll texten rullar
utan att börja om från början. På så sätt kan man backa och läsa något igen om man
råkade missa texten.
En tredje sak som kan vara intressant att göra är att lägga till en vattenskuggning, så
att den text och textområde som visas kommer att skuggas, som en reflektion på
vatten/glas.
Detta är bara förslag och inget har blivit sagt att det ska göras, dessutom kan detta
göras utanför primitiven, med hjälp av primitivknapparna som redan finns tillgängliga.
26

6 Rapport skrivning till Företaget
Dokumentation var nödvändigt att göra för varje primitiv man tillverkade. Det skulle
skrivas två rapporter för varje primitiv som blev tillverkad, en CTTD rapport och en
DOF rapport.
CTTD rapporten är den delen som testarna kommer att utföra, de går igenom varje
steg som finns i rapporten och kryssar av att den fungerar som den ska. Rapporten
har ofta många bilder och många ändringar och sist i rapporten finns ett
kommentarsfält där testpersonerna kan skriva vad som uppträdde konstigt.
Om ett fel upptäcks av ett inskickat testdokument så kommer rapporten skickas
tillbaka med anteckningar och kommentarer om vad som gick fel.
En rapport kan bli lång om primitiven är stor och det finns många metoder att gå
igenom, det kan ta ett tag för testarna att försäkra sig om att primitiven fungerar
perfekt innan den blir aktiverad för global användning till alla som har licensen till
800xA systemet.
DOF rapporten handlar mer om själva primitiven, hur den fungerar, vilka funktioner
och egenskaper primitiven har och hur varje funktion fungerar.
Rapporten har ett fåtal exempelbilder av hur primitiven kan se ut med olika funktioner
aktiverade.
27

7 Slutsatser
Den visuella effekten som skapar de illusioner som vi människor behöver för att läsa
diagram på ett positivt och enkelt sätt är det som är det viktigaste när man skapar
primitiver. Man vill inte få en tabell med alltför många värden på grund av det blir
svårläst och svårt för det mänskliga ögat att uppfatta vad som är vad på en kortare
tid.
En rullande textremsa har en förmåga att plocka upp uppmärksamheten från
användaren, att titta lite närmare på vad det står, men för mycket information eller
blinkningar på texten kan upplevas som besvärande. Därför måste man vara försiktig
med vad som visas i det rullande fältet och dessutom förstå att irritationsfaktorer kan
leda till misstag.
Eftersom en rullande text oftast får uppmärksamhet är det bäst att de inte används
vid vägar, eller inom platser där användaren måste ha full uppmärksamhet på andra
områden. I dessa fall borde det andra systemet passa bättre, där man låter en del av
texten vara synlig några sekunder innan nästa del av texten dyker upp. Den måste
däremot vara förståelig och inte skapa frågor, om man inte skulle hinna läsa båda
delarna.
Det faktum att färgen spelar en sådan står roll i visualiseringen gör att man måste
tänka efter vad som är bra och dålig färgsättning. Ett pajdiagram utan färg blir genast
mycket mer svårtolkat än ett med färg. Det blir då färgen som talar om vilket värde
det är, samtidigt som texten hjälper till att fastställa det korrekta värdet.
Att ha en funktion som kan ta bort texten fixar till problemet med rörighet, samma sak
som gäller i en tabell eller graf, för mycket information gör det rörigt.
Men nu är det användare själva som kan bestämma hur de vill att pajdiagrammet ska
fungera för just dem och välja vilka delar de vill ha aktiverade.
28

Referenser
[1] * 2D: http://en.wikipedia.org/wiki/2D_computer_graphics ;
* 2.5D: http://en.wikipedia.org/wiki/2.5D ;
* 3D: http://en.wikipedia.org/wiki/3D
2008-06-13
[2] ABB hemsida: http://www.abb.se : 2008-06-13
[4] Programming Microsoft Windows with C#, Charles Petzold : ISBN: 0-7356-1370-2
2001-12-18
[5] .NET Framework:
http://en.wikipedia.org/wiki/.NET_Framework_3.0#.NET_Framework_3.0 :
2008-05-27
[6] Windows Presentation Foundation Unleashed,
Adam Nathan, ISBN: 0-672-32891-7 : 2007
[7] Applications = code + Markup, a guide to the Microsoft Windows Presentation
Foundation, Charles Petzold ISBN 10: 0-7356-1957-3
[8] Foundation of WPF, an introduction to Windows Presentation Foundation,
Laurence Moroney – ISBN: 1-59059-782-6 : 2006-11
[9] WPF Graphic rendering overview:
http://msdn2.microsoft.com/en-us/library/ms748373.aspx : 2008-04-24
[10]
http://msdn2.microsoft.com/enus/library/system.windows.media.drawingvisual_members.aspx
: 2008-05-27
[11] Proffersional Visual Studio 2005 Team System.
David, Tony, Gunvaldson, Bowen, Coad, Jefford, ISBN: 0-7645-8436-7
[12] Team Foundation Server: http://en.wikipedia.org/wiki/Team_Foundation_Server :
2008-04-24
[13] Information Visualization:
Robert Spence - ISBN: 0-201-59626-1 : 2000
[14] Creating more effective graphs
Robbins, Naomi B. – ISBN: 047127402X : 2004-12
29