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

[dx0ddyu]

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 (22.93 KiB) Viewed 25084 times

Not great, right?

This one sure looks a lot nicer, doesn't it?

dial2.png (55.17 KiB) Viewed 25088 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]

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]

Hello!

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 (71.39 KiB) Viewed 25069 times

[dx0ddyu]

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

[dx0ddyu]

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 (246.56 KiB) Viewed 25004 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]

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 (44.78 KiB) Viewed 25004 times

is this near what you're looking for?

[dx0ddyu]

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

[dx0ddyu]

Well, we're closer.

gauge.png (8.39 KiB) Viewed 24990 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 (8.83 KiB) Viewed 24993 times

Anyway, if I just resize the ticks (see code) then weird things happen...

gauge3.png (97.64 KiB) Viewed 24991 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]

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.

[dx0ddyu]

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]

Spiralled Sorry! Found that one on my own. Oof

[Christopher]

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?

[dx0ddyu]

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]

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