ChartDirector 6.0 (Perl Edition)

Round Meters with Readout

  

This example demonstrates round meters configured with a large pointer cap to display the meter value.

The pointer cap is the circular object at the center of the meter. In this example, using AngularMeter.setCap2, the pointer cap is set to an exceptionally large size so that it can act as a place to display text. The text is added using BaseChart.addText, centered at the meter center.

In one of the meters, the pointer is configured to be floating, which means the base of the pointer is not fixed at the meter center. The pointer looks like a triangle somewhere between the center and the perimeter, pointing to the meter value. This pointer is added using AngularMeter.addPointer2 with TriangularPointer2 just like a standard pointer, but with additional arguments to specify the radial position of the pointer base and tip, as well as the pointer width.

Source Code Listing

[Standalone Version] perldemo\roundmeterreadout.pl 
#!/usr/bin/perl

# In the sample code, the ChartDirector for Perl module is assumed to be in "../lib"
use File::Basename;
use lib (dirname($0)."/../lib") =~ /(.*)/;

use perlchartdir;

sub createChart
{
    my $chartIndex = shift;

    # The value to display on the meter
    my $value = 54;

    # The main color of the four meters in this example. The other colors and gradients are derived
    # from the main color.
    my $colorList = [0x0033dd, 0xaaaa00];
    my $mainColor = $colorList->[$chartIndex];

    #
    # In this example, we demonstrate how to parameterized by size, so that the chart size can be
    # changed by changing just one variable.
    #
    my $size = 300;

    # The radius of the entire meter, which is size / 2, minus 2 pixels for margin
    my $outerRadius = int($size / 2 - 2);

    # The radius of the meter scale
    my $scaleRadius = int($outerRadius * 92 / 100);

    # The radius of the color scale
    my $colorScaleRadius = int($scaleRadius * 43 / 100);

    # The width of the color scale
    my $colorScaleWidth = int($scaleRadius * 10 / 100);

    # Major tick length
    my $tickLength = int($scaleRadius * 10 / 100);

    # Major tick width
    my $tickWidth = int($scaleRadius * 1 / 100 + 1);

    # Label font size
    my $fontSize = int($scaleRadius * 13 / 100);

    # Radius of readout circle as a ratio to the scale radius
    my $readOutRadiusRatio = 0.333333333333;

    # Readout font size
    my $readOutFontSize = int($scaleRadius * 24 / 100);

    #
    # Create an angular meter based on the above parameters
    #

    # Create an AngularMeter object of the specified size. In this demo, we use black (0x000000) as
    # the background color. You can also use transparent or other colors.
    my $m = new AngularMeter($size, $size, 0x000000);

    # Set the default text and line colors to white (0xffffff)
    $m->setColor($perlchartdir::TextColor, 0xffffff);
    $m->setColor($perlchartdir::LineColor, 0xffffff);

    # Set meter center and scale radius, and set the scale angle from -180 to +90 degrees
    $m->setMeter($size / 2, $size / 2, $scaleRadius, -180, 90);

    # Background gradient with the mainColor at the center and become darker near the border
    my $bgGradient = [0, $mainColor, 0.5, $m->adjustBrightness($mainColor, 0.75), 1,
        $m->adjustBrightness($mainColor, 0.15)];

    # Fill the meter background with the background gradient
    $m->addRing(0, $outerRadius, $m->relativeRadialGradient($bgGradient, $outerRadius * 0.66));

    # Gradient for the neon backlight, with the main color at the scale radius fading to transparent
    my $neonGradient = [0.89, $perlchartdir::Transparent, 1, $mainColor, 1.07,
        $perlchartdir::Transparent];
    $m->addRing(int($scaleRadius * 85 / 100), $outerRadius, $m->relativeRadialGradient($neonGradient
        ));

    # The neon ring at the scale radius with width equal to 1/80 of the scale radius, creating using
    # a brighter version of the main color
    $m->addRing($scaleRadius, int($scaleRadius + $scaleRadius / 80), $m->adjustBrightness(
        $mainColor, 2));

    # Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
    $m->setScale(0, 100, 10, 5, 1);

    # Set the scale label style, tick length and tick width. The minor and micro tick lengths are
    # 80% and 60% of the major tick length, and their widths are around half of the major tick
    # width.
    $m->setLabelStyle("ariali.ttf", $fontSize);
    $m->setTickLength(-$tickLength, -int($tickLength * 80 / 100), -int($tickLength * 60 / 100));
    $m->setLineWidth(0, $tickWidth, int(($tickWidth + 1) / 2), int(($tickWidth + 1) / 2));

    # Demostrate different types of color scales and putting them at different positions.
    my $smoothColorScale = [0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100, 0xff0000];
    my $highColorScale = [70, $perlchartdir::Transparent, 100, 0xff0000];

    if ($chartIndex == 0) {
        # Add the smooth color scale
        $m->addColorScale($smoothColorScale, $colorScaleRadius, $colorScaleWidth);
        # Add a red (0xff0000) pointer
        $m->addPointer2($value, 0xff0000);
    } else {
        # Add the high color scale at the default position
        $m->addColorScale($highColorScale);
        # Add a red (0xff0000) triangular pointer starting from 40% and ending at 60% of scale
        # radius, with a width 6 times the default
        $m->addPointer2($value, 0xff0000, -1, $perlchartdir::TriangularPointer2, 0.4, 0.6, 6);
    }

    # Configure a large "pointer cap" to be used as the readout circle at the center. The cap border
    # width is set to 1.5% of the scale radius. The cap color is darker version of the main color.
    # The border color is a brighter version of the main color with 75% brightness gradient effect.
    $m->setCap2($perlchartdir::Transparent, $m->adjustBrightness($mainColor, 0.3),
        $m->adjustBrightness($mainColor, 1.5), 0.75, 0, $readOutRadiusRatio, 0.015);

    # Add value label at the center using a brighter version of the main color and Arial Italic font
    $m->addText($size / 2, $size / 2, $m->formatValue($value, "{value|0}"), "ariali.ttf",
        $readOutFontSize, $m->adjustBrightness($mainColor, 2.5), $perlchartdir::Center)->setMargin(0
        );

    # Add glare up to the scale radius
    $m->addGlare($scaleRadius);

    # Output the chart
    $m->makeChart("roundmeterreadout$chartIndex.png")
}

createChart(0);
createChart(1);

[CGI Version] perldemo_cgi\roundmeterreadout.pl 
#!/usr/bin/perl

# In the sample code, the ChartDirector for Perl module is assumed to be in "../lib"
use File::Basename;
use lib (dirname($0)."/../lib") =~ /(.*)/;

use perlchartdir;

# Get HTTP query parameters
use CGI;
my $query = new CGI;

# This script can draw different charts depending on the chartIndex
$chartIndex = int($query->param("img"));

# The value to display on the meter
my $value = 54;

# The main color of the four meters in this example. The other colors and gradients are derived from
# the main color.
my $colorList = [0x0033dd, 0xaaaa00];
my $mainColor = $colorList->[$chartIndex];

#
# In this example, we demonstrate how to parameterized by size, so that the chart size can be
# changed by changing just one variable.
#
my $size = 300;

# The radius of the entire meter, which is size / 2, minus 2 pixels for margin
my $outerRadius = int($size / 2 - 2);

# The radius of the meter scale
my $scaleRadius = int($outerRadius * 92 / 100);

# The radius of the color scale
my $colorScaleRadius = int($scaleRadius * 43 / 100);

# The width of the color scale
my $colorScaleWidth = int($scaleRadius * 10 / 100);

# Major tick length
my $tickLength = int($scaleRadius * 10 / 100);

# Major tick width
my $tickWidth = int($scaleRadius * 1 / 100 + 1);

# Label font size
my $fontSize = int($scaleRadius * 13 / 100);

# Radius of readout circle as a ratio to the scale radius
my $readOutRadiusRatio = 0.333333333333;

# Readout font size
my $readOutFontSize = int($scaleRadius * 24 / 100);

#
# Create an angular meter based on the above parameters
#

# Create an AngularMeter object of the specified size. In this demo, we use black (0x000000) as the
# background color. You can also use transparent or other colors.
my $m = new AngularMeter($size, $size, 0x000000);

# Set the default text and line colors to white (0xffffff)
$m->setColor($perlchartdir::TextColor, 0xffffff);
$m->setColor($perlchartdir::LineColor, 0xffffff);

# Set meter center and scale radius, and set the scale angle from -180 to +90 degrees
$m->setMeter($size / 2, $size / 2, $scaleRadius, -180, 90);

# Background gradient with the mainColor at the center and become darker near the border
my $bgGradient = [0, $mainColor, 0.5, $m->adjustBrightness($mainColor, 0.75), 1,
    $m->adjustBrightness($mainColor, 0.15)];

# Fill the meter background with the background gradient
$m->addRing(0, $outerRadius, $m->relativeRadialGradient($bgGradient, $outerRadius * 0.66));

# Gradient for the neon backlight, with the main color at the scale radius fading to transparent
my $neonGradient = [0.89, $perlchartdir::Transparent, 1, $mainColor, 1.07,
    $perlchartdir::Transparent];
$m->addRing(int($scaleRadius * 85 / 100), $outerRadius, $m->relativeRadialGradient($neonGradient));

# The neon ring at the scale radius with width equal to 1/80 of the scale radius, creating using a
# brighter version of the main color
$m->addRing($scaleRadius, int($scaleRadius + $scaleRadius / 80), $m->adjustBrightness($mainColor, 2)
    );

# Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
$m->setScale(0, 100, 10, 5, 1);

# Set the scale label style, tick length and tick width. The minor and micro tick lengths are 80%
# and 60% of the major tick length, and their widths are around half of the major tick width.
$m->setLabelStyle("ariali.ttf", $fontSize);
$m->setTickLength(-$tickLength, -int($tickLength * 80 / 100), -int($tickLength * 60 / 100));
$m->setLineWidth(0, $tickWidth, int(($tickWidth + 1) / 2), int(($tickWidth + 1) / 2));

# Demostrate different types of color scales and putting them at different positions.
my $smoothColorScale = [0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100, 0xff0000];
my $highColorScale = [70, $perlchartdir::Transparent, 100, 0xff0000];

if ($chartIndex == 0) {
    # Add the smooth color scale
    $m->addColorScale($smoothColorScale, $colorScaleRadius, $colorScaleWidth);
    # Add a red (0xff0000) pointer
    $m->addPointer2($value, 0xff0000);
} else {
    # Add the high color scale at the default position
    $m->addColorScale($highColorScale);
    # Add a red (0xff0000) triangular pointer starting from 40% and ending at 60% of scale radius,
    # with a width 6 times the default
    $m->addPointer2($value, 0xff0000, -1, $perlchartdir::TriangularPointer2, 0.4, 0.6, 6);
}

# Configure a large "pointer cap" to be used as the readout circle at the center. The cap border
# width is set to 1.5% of the scale radius. The cap color is darker version of the main color. The
# border color is a brighter version of the main color with 75% brightness gradient effect.
$m->setCap2($perlchartdir::Transparent, $m->adjustBrightness($mainColor, 0.3), $m->adjustBrightness(
    $mainColor, 1.5), 0.75, 0, $readOutRadiusRatio, 0.015);

# Add value label at the center using a brighter version of the main color and Arial Italic font
$m->addText($size / 2, $size / 2, $m->formatValue($value, "{value|0}"), "ariali.ttf",
    $readOutFontSize, $m->adjustBrightness($mainColor, 2.5), $perlchartdir::Center)->setMargin(0);

# Add glare up to the scale radius
$m->addGlare($scaleRadius);

# Output the chart
binmode(STDOUT);
print "Content-type: image/png\n\n";
print $m->makeChart2($perlchartdir::PNG);

© 2017 Advanced Software Engineering Limited. All rights reserved.