?
Solved

Draw the needle on a Speedo depending on a value

Posted on 2005-03-10
5
Medium Priority
?
1,330 Views
Last Modified: 2008-01-16
I have a web page which at the moment displays speedos ( Tachograph ) images to show KPI results.
The images are manually created at the moment.

I want to create a control that uses the base image of the tacho's face but draws the needle on dynamically depending on the value passed into the class. My problems are thus...

1. How can I draw the needle/line on an existing picture

2. How can i plot the positions for the line so that shows the correct value (% of target) and stays within the disk of the tacho's face.

Cheers
Jon
0
Comment
Question by:jonvaughan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 18

Accepted Solution

by:
testn earned 750 total points
ID: 13513604
0
 
LVL 10

Author Comment

by:jonvaughan
ID: 13513910
testn,

Thanks for the reply.
The first link is good - although it is for WinForms rather than WebForms and for some reason it was black on black which made it difficult to see.
The second link the example didn't work but it is not a bad idea.

I was hoping thought that we could do something a bit simpler - I dont' need to change the Tacho once it is on the page so a simple static image that is generated server side should be enough .....
0
 
LVL 3

Assisted Solution

by:brckoslav
brckoslav earned 750 total points
ID: 13516190
0
 
LVL 10

Author Comment

by:jonvaughan
ID: 13540382
thanks brckoslav  - ill try to give this a go in the next few days.
0
 
LVL 10

Author Comment

by:jonvaughan
ID: 13552140
Between these links and a bit of messing around i got to it in the end - thanks !!
For the record i will paste in my prototype below .....

I have one aspx that presents the page.
The image for the speedo graph is created by a second aspx page which the first calls.

namespace WebKPITacho
{
      /// <summary>
      /// Summary description for KPI.
      /// </summary>
      public class KPI : System.Web.UI.Page
      {
            private void Page_Load(object sender, System.EventArgs e)
            {
                  // Put user code to initialize the page here
                  Response.Write("This is the KPI for Sales <p/>");
                  Response.Write("<img src='KPITacho.aspx?actual=99&actualText=Sales&budget=100&budgetText=Budget'/>");
            }

            #region Web Form Designer generated code
            override protected void OnInit(EventArgs e)
            {
                  //
                  // CODEGEN: This call is required by the ASP.NET Web Form Designer.
                  //
                  InitializeComponent();
                  base.OnInit(e);
            }
            
            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {    
                  this.Load += new System.EventHandler(this.Page_Load);
            }
            #endregion
      }
}


namespace WebKPITacho
{
      /// <summary>
      /// Summary description for WebForm1.
      /// </summary>
      public class WebForm1 : System.Web.UI.Page
      {
      
            private void Page_Load(object sender, System.EventArgs e)
            {
                  
                  
                  System.Drawing.Image image = this.GetTacho();
                  MemoryStream memStream = new MemoryStream();
                  Response.ContentType="image/jpeg";
                  image.Save(memStream, System.Drawing.Imaging.ImageFormat.Gif);
                  memStream.WriteTo(Response.OutputStream);
                  
            }

            #region Web Form Designer generated code
            override protected void OnInit(EventArgs e)
            {
                  //
                  // CODEGEN: This call is required by the ASP.NET Web Form Designer.
                  //
                  InitializeComponent();
                  base.OnInit(e);
            }
            
            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {    
                  this.Load += new System.EventHandler(this.Page_Load);

            }
            #endregion

            private System.Drawing.Image GetTacho()
            {
                  double actual = double.Parse(Request.Params["actual"]);
                  string actualText = Request.Params["actualText"];
                  double budget = double.Parse(Request.Params["budget"]);
                  string budgetText = Request.Params["budgetText"];

                  
                  // Create a graphics object for drawing.
                  Bitmap image = new Bitmap(350,350);      
                  Graphics g = Graphics.FromImage(image);
                  g.SmoothingMode = SmoothingMode.AntiAlias;
                  //Create Font to use
                  string familyName = "Tahoma";
                  Font font = new Font(familyName, 10);

     
              // set background
                  g.FillRectangle(new SolidBrush(Color.White),0,0,350,350);
                  //g.FillEllipse(new SolidBrush(Color.Blue),20,20,260,260);
                  g.DrawEllipse(new Pen(System.Drawing.Color.Blue,2),50,50,250,250);
      
      
//                  int width = 300 ;
//                  int height = 300;
                  double radius = 150;
                  Point start = new Point(175,175);
                  
                  
                  // Draw Lines
 
                  Point budfinish = getFinishPoint(radius, this.getAngle(1,1));
                  Point actfinish = getFinishPoint(radius, this.getAngle(budget,actual));

                  Pen p = new Pen(System.Drawing.Color.Red,5);
                  p.EndCap = LineCap.ArrowAnchor;
                  p.StartCap = LineCap.RoundAnchor;
                  g.DrawLine(p,start,budfinish);
                  p.Color = Color.Blue;
                  g.DrawLine(p,start,actfinish);

                  g.DrawString(budgetText + budget.ToString(), font, new SolidBrush(Color.Black), (budfinish.X), (budfinish.Y + 10), StringFormat.GenericDefault);
                  g.DrawString(actualText + actual.ToString(), font, new SolidBrush(Color.Black), (actfinish.X), (actfinish.Y - 10), StringFormat.GenericDefault);

                  g.Dispose();
                  return image ;

            }
            private double getAngle(double part, double max)
            {
                  return (max / part * 360) - 90;
            }

            private Point getFinishPoint(double radius, double angle)
            {
                  int x = Convert.ToInt32( 175 + (radius * Math.Cos(angle * (Math.PI / 180))));
                  int y = Convert.ToInt32( 175 + (radius * Math.Sin(angle * (Math.PI / 180))));
                  return new Point(x,y);
            }

            
      }
}
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes a simple method to resize a control at runtime.  It includes ready-to-use source code and a complete sample demonstration application.  We'll also talk about C# Extension Methods. Introduction In one of my applications…
This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question