How can I add lines on gauge (and make them look better)?

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Thu May 11, 2017 9:24 pm

OK... So... We use dial gauges all over the place and I'm finally ready to make them look better!

This is what they look like now:
dial1.png
dial1.png (22.93 KiB) Viewed 23517 times
Not great, right?

This one sure looks a lot nicer, doesn't it?
dial2.png
dial2.png (55.17 KiB) Viewed 23521 times
I'm fine with how the red bands come out but I would like things to look a little more finished and I like having that blue band (just a visual cue of kind of how things should be) _behind_ the needle (well, and triangular).

Or, if you prefer, man... Our implementation of this is awful. Can you help out?

TIA!

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Thu May 11, 2017 9:26 pm

To be clear, the first gauge is our implementation of the circular gauge. The second image is something we've done in another language on another platform with other tools. It would sure be nice if we could get our first gauge to look closer to that. Thx!

Christopher
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by Christopher » Fri May 12, 2017 9:11 am

Hello!
dx0ddyu wrote:To be clear, the first gauge is our implementation of the circular gauge. The second image is something we've done in another language on another platform with other tools. It would sure be nice if we could get our first gauge to look closer to that. Thx!
Okay - using the following code:

Code: Select all

    CircularGauge gauge;
    private void InitializeChart()
    {
      gauge = new CircularGauge(tChart1.Chart);
      gauge.FillSampleValues();
      gauge.NumericGauge.Visible = true;

      gauge.BeforeDrawHand += Gauge_BeforeDrawHand;
    }

    private void DrawSlice(Graphics3D g)
    {
      Func<double, int> CalcValue = (value) =>
      {
        Func<double> CalcStartAngle = () =>
        {
          double tmp = 360 - gauge.TotalAngle;
          tmp = (tmp / 2.0) + gauge.RotationAngle;
          return tmp;
        };

        double IRange = gauge.Maximum - gauge.Minimum;
        double IAngleInc = gauge.TotalAngle / IRange;

        double result = value - gauge.Minimum;
        result *= IAngleInc;
        result += CalcStartAngle();
        return Utils.Round(result + 90);
      };

      Rectangle rect = gauge.CircleRect;
      Point center = new Point(gauge.CircleXCenter, gauge.CircleYCenter);
      int angle = CalcValue(gauge.Value);

      List<Point> polygon = new List<Point>();
      polygon.Add(center);

      int start = angle - 10;
      int end = angle + 10;

      for (int i = start; i < end; i++)
      {
        polygon.Add(PointDouble.Round(g.PointFromCircle(rect, i, 0, true)));
      }

      polygon.Add(center);
      g.Brush.Color = Color.Cyan;
      g.Brush.Transparency = 60;
      g.Polygon(polygon.ToArray());
    }

    private void Gauge_BeforeDrawHand(object sender, Graphics3D g)
    {
      DrawSlice(g);
    }
I obtain this:
TChart636301841198994365.png
TChart636301841198994365.png (71.39 KiB) Viewed 23502 times
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Fri May 12, 2017 12:29 pm

Ah. Hmm. OK. Thx - I'll give that a shot.

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Tue May 16, 2017 9:16 pm

;) OK... Um. Hi! I'm stuck. I hate computers :)

So... My installation is somehow hosed. When I'm editing in VisualStudio 2015 it doesn't save all of the values and some it saves incorrectly (with deprecated code). OK, OK, I get it. I have the wrong version of the designer. So, uh, where does the designer live and how do I affect any change in that? I've deleted all references to TeeCharts, deleted it from the Toolbox, carefully added references to the DLL I want, added that DLL to the Toolbox... Lots of closing and reopening of VS in there, too, of course.

Now, when I use the visual editor I can turn off the red and green lines, for example. Only the changes do not appear in the designer.vb file and, of course, when I reopen the control the lines are back.

Some things persist. Some things don't. It's kind of annoying, really.

Anyway... Thoughts??? Suggestions???

I could just tell you want I want to do and you can give me the code but that's lame on my part. Still, I don't see any help documents on the gauges - all I can find is the API. Well, that doesn't tell me how to have major ticks at 90s and minors wherever it is that I want them. On a rosette, that is. Let's see... I'm sure I can pull up a bad example of what I'd like to do... OK. The attached would work, I guess. A few numbers, a dial, a target. No red or green. Value in the middle. Clean and simple - no gradients, high vis.
rosette.png
rosette.png (246.56 KiB) Viewed 23437 times
So... LOL. OK, how can you help me help myself get something close to this? Or, hey, just tell me how to do it, pretty please :)

TIA!

Christopher
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by Christopher » Wed May 17, 2017 12:25 pm

dx0ddyu wrote:Or, hey, just tell me how to do it, pretty please :)
Of course, it will be a pleasure. This following code:

Code: Select all

    CircularGauge gauge;
    private void InitializeChart()
    {
      tChart1.Header.Visible = false;
      gauge = new CircularGauge(tChart1.Chart);

      gauge.RedLine.Visible = false;
      gauge.GreenLine.Visible = false;

      gauge.FaceBrush.Gradient.Visible = false;
      gauge.FaceBrush.Color = Color.White;

      gauge.RotationAngle = 180;
      gauge.TotalAngle = 360;
      gauge.FillToSemiCircle = true;

      gauge.Maximum = 360;
      gauge.Axis.Increment = 45;
      gauge.Axis.MinorTicks.Visible = true;
      gauge.Axis.MinorTickCount = 7;
      gauge.Ticks.HorizSize = 1;

      gauge.Frame.OuterBand.Gradient.Visible = false;
      gauge.Frame.OuterBand.Color = Color.Black;
      gauge.Frame.MiddleBand.Gradient.Visible = false;
      gauge.Frame.MiddleBand.Color = Color.DarkGray;
      gauge.Frame.InnerBand.Gradient.Visible = false;
      gauge.Frame.InnerBand.Color = Color.LightGray;

      gauge.Hand.Gradient.Visible = false;
      gauge.Hand.Color = Color.Black;
      gauge.Hand.Shadow.Visible = false;

      gauge.Center.Gradient.StartColor = Color.LightGray;
      gauge.Center.Gradient.EndColor = Color.DarkGray;
      gauge.Center.Gradient.Style.Visible = true;
      gauge.Center.Gradient.Style.Direction = PathGradientMode.Radial;
      gauge.Center.Shadow.Visible = false;
      gauge.Value = 239.3;

      //gauge.Axis.Labels.Font.Size = 16; //<--this should work here: http://bugs.teechart.net/show_bug.cgi?id=1863
      //gauge.Axis.Labels.Font.Color = Color.Black;

      gauge.BeforeDrawValues += Gauge_BeforeDrawValues; //<-- this shouldn't be necessary
      gauge.AfterDrawValues += Gauge_AfterDrawValues;
      gauge.BeforeDrawHand += Gauge_BeforeDrawHand;
    }

    private void DrawSlice(Graphics3D g)
    {
      Func<double, int> CalcValue = (value) =>
      {
        Func<double> CalcStartAngle = () =>
        {
          double tmp = 360 - gauge.TotalAngle;
          tmp = (tmp / 2.0) + gauge.RotationAngle;
          return tmp;
        };

        double IRange = gauge.Maximum - gauge.Minimum;
        double IAngleInc = gauge.TotalAngle / IRange;

        double result = value - gauge.Minimum;
        result *= IAngleInc;
        result += CalcStartAngle();
        return Utils.Round(result + 90);
      };

      Rectangle rect = gauge.CircleRect;
      Point center = new Point(gauge.CircleXCenter, gauge.CircleYCenter);
      //int angle = CalcValue(gauge.Value);

      List<Point> polygon = new List<Point>();
      polygon.Add(center);

      int start = CalcValue(200); //angle - 10;
      int end = CalcValue(220); //angle + 10;

      for (int i = start; i < end; i++)
      {
        polygon.Add(PointDouble.Round(g.PointFromCircle(rect, i, 0, true)));
      }

      polygon.Add(center);
      g.Brush.Color = Color.Cyan;
      g.Brush.Transparency = 60;
      g.Polygon(polygon.ToArray());
    }

    private void Gauge_BeforeDrawHand(object sender, Graphics3D g)
    {
      DrawSlice(g);
    }

    private void Gauge_AfterDrawValues(object sender, Graphics3D g)
    {
      g.Font = gauge.Axis.Labels.Font;
      g.TextOut(gauge.CircleXCenter - 25, gauge.CircleYCenter + 40, gauge.Value.ToString(CultureInfo.InvariantCulture));
    }

    private void Gauge_BeforeDrawValues(object sender, Graphics3D g)
    {
      gauge.Axis.Labels.Font.Size = 16;
      gauge.Axis.Labels.Font.Color = Color.Black;
    }
gives me the following:
TChart636306213485973759.png
TChart636306213485973759.png (44.78 KiB) Viewed 23437 times
is this near what you're looking for?
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Wed May 17, 2017 1:25 pm

Well, that is perfect enough that I can make it what I want, yes. Thank you!!!!

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Wed May 17, 2017 7:07 pm

Well, we're closer.
gauge.png
gauge.png (8.39 KiB) Viewed 23423 times
I guess I'd like the ticks to resize, too, frankly. And to be different, of course. "Of course" because the customer always wants more, right? Anyway, in the visual editor the ticks seem to always end up as binaries in resources. The ones I have right now are hollow circles and hollow rectangles. Not exactly what I'm looking for!

We did this one in another lifetime... But we manually drew all of those ticks. I guess... It doesn't really feel like I should be drawing those manually.
Anyway, that looked like this.
gauge2.png
gauge2.png (8.83 KiB) Viewed 23426 times

Anyway, if I just resize the ticks (see code) then weird things happen...
gauge3.png
gauge3.png (97.64 KiB) Viewed 23424 times
This image is large because you can't see the weirdness when it's small...



Code: Select all

   Private Sub InitializeChart()
        TChart1.Header.Visible = False
        gauge = New CircularGauge(TChart1.Chart)

        gauge.RedLine.Visible = False
        gauge.GreenLine.Visible = False

        gauge.FaceBrush.Gradient.Visible = False
        gauge.FaceBrush.Color = Color.White

        gauge.RotationAngle = 180
        gauge.RotateLabels = False
        gauge.TotalAngle = 360
        gauge.FillToSemiCircle = True

        gauge.Maximum = 360
        gauge.Axis.Increment = 30
        gauge.Axis.MinorTicks.Visible = True
        gauge.Axis.MinorTickCount = 2

        gauge.Frame.Circled = True
        gauge.Frame.FrameElementPercents = New Double() {0R, 0R, 100.0R}
        gauge.Frame.Width = 2

        gauge.Hand.Gradient.Visible = False
        gauge.Hand.Color = Color.Red
        gauge.Hand.Transparency = 40
        gauge.Hand.Shadow.Visible = False

        gauge.HandOffsets.Clear()
        gauge.HandOffsets.Add(0)

        gauge.Center.HorizSize = 5
        gauge.Center.Gradient.Style.Visible = False
        gauge.Center.Shadow.Visible = False
        gauge.Center.VertSize = 5

        gauge.Value = 181.2
    End Sub
[...]
    Private Sub Gauge_AfterDrawValues(sender As Object, g As Graphics3D) Handles gauge.AfterDrawValues
        Dim gaugeValue As String = gauge.Value.ToString(CultureInfo.InvariantCulture)
        Dim r As Integer = Math.Min(Me.Width, Me.Height)

        g.Font = gauge.Axis.Labels.Font

        Dim strLength As SizeF = g.MeasureString(g.Font, gaugeValue)

        g.TextOut(CInt(gauge.CircleXCenter - (strLength.Width / 2)), CInt(gauge.CircleYCenter + CInt(0.5 * gauge.YRadius) - strLength.Height), gaugeValue)

        gauge.Center.HorizSize = CInt(Math.Max(r * 0.03, 5))
        gauge.Center.VertSize = CInt(Math.Max(r * 0.03, 5))
        gauge.Hand.HorizSize = CInt(Math.Max(r * 0.015, 3))

        If gauge.Hand.HorizSize >= 3 Then
            gauge.Hand.Style = Steema.TeeChart.Styles.GaugePointerStyles.Hand
        Else
            gauge.Hand.Style = Steema.TeeChart.Styles.HandStyle.Line
        End If

        gauge.Ticks.VertSize = gauge.Center.HorizSize
        gauge.MinorTicks.VertSize = CInt(gauge.Center.HorizSize / 3)
    End Sub

    Private Sub Gauge_BeforeDrawValues(sender As Object, g As Graphics3D) Handles gauge.BeforeDrawValues
        Dim size As Double = Math.Min(TChart1.Width, TChart1.Height)
        gauge.Axis.Labels.Font.Size = CInt(Math.Min(size / 22, 48))
        gauge.Axis.Labels.Font.Color = Color.Black
    End Sub

Christopher
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by Christopher » Thu May 18, 2017 4:33 pm

dx0ddyu wrote: I guess I'd like the ticks to resize, too, frankly. And to be different, of course. "Of course" because the customer always wants more, right? Anyway, in the visual editor the ticks seem to always end up as binaries in resources. The ones I have right now are hollow circles and hollow rectangles. Not exactly what I'm looking for!
Okay. The current CircularGauge Ticks and MinorTicks are of the type GaugeSeriesPointer, which is derived from SeriesPointer and are basically a range of 2D shapes based on rectangles and ellipses. This was a design decision made when this series was written, and was a style more fashionable then than it seems to be now. I have added your request for an enhancement to this area to our issue-tracking software with id=1866 - in the meantime, to obtain Ticks and MinorTicks which are not based on SeriesPointer then they will have to be drawn manually.
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Thu May 18, 2017 7:55 pm

OK, well, I do already have the code for the ticks. I was just hoping for a higher level function!

Speaking of which... Do you have a style for these red and green lines that's uniform in width? I can't seem to find a way to do that. I don't really care for the changing width and, as in one of the pix I attached, I'd like red at both ends of the scale. These are industrial gauges - you want to stay in a range and near the target. Make sense?

Also... Where do I learn about any of this? All I can seem to find, again, is the API... Or I can keep asking you!

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Thu May 18, 2017 8:06 pm

Spiralled :) Sorry! Found that one on my own. Oof :)

Christopher
Guru
Posts: 1603
Joined: Fri Nov 15, 2002 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by Christopher » Fri May 19, 2017 8:11 am

dx0ddyu wrote:Also... Where do I learn about any of this? All I can seem to find, again, is the API... Or I can keep asking you!
Yes, do please continue to use these forums for whatever help you need - this is exactly what they are for! Is there anything else I can help you with in the area of Circular Gauges?
Best Regards,
Christopher Ireland / Development & Support
Steema Software
Avinguda Montilivi 33, 17003 Girona, Catalonia
Tel: 34 972 218 797
http://www.steema.com
Instructions - How to post in this forum

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Fri May 19, 2017 2:26 pm

Well... For my redLine... What percentage of gauge.CircleHeight do I need to use for .HorizSize if I want my redLine to extend to the frame? Because if I use a fixed HorizSize of, say, 15 then the redLine extends outside of the frame when the CircleHeight is 150.

Although, hey, I'll probably just screw around with things and figure that out in the next 5 minutes :) But I would like my redLine to have a fixed proportional size.

dx0ddyu
Newbie
Newbie
Posts: 10
Joined: Thu Oct 13, 2016 12:00 am

Re: How can I add lines on gauge (and make them look better)?

Post by dx0ddyu » Fri May 19, 2017 2:36 pm

Well, Cint(circleHeight/15)-2 is probably as good as we can get it. Unless you have an automated method!

Post Reply