How to Animate Gauges

25-24 Web User Interface Developers Guide for Oracle Application Development Framework Example 25–9 shows a sample SVG file used to specify custom shapes for the components of a gauge. Example 25–9 Sample SVG File Used for Gauge Custom Shapes ?xml version=1.0 encoding=UTF-8 standalone=no? svg xmlns:svg=http:www.w3.org2000svg xmlns=http:www.w3.org2000svg version=1.0 rect width=264.72726 height=179.18887 rx=8.2879562 ry=10.368411 x=152.76225 y=202.13995 style=fill:c83737;fill-opacity:1;stroke:none id=gaugeFrame rect width=263.09058 height=42.581127 rx=3.0565372 ry=3.414634 x=155.11697 y=392.35468 fill=c83737 id=lowerLabelFrame rect width=241.79999 height=120.13961 x=164.2415 y=215.94714 style=fill:ffeeaa id=plotAreaBounds rect width=74.516975 height=44.101883 rx=2.6630435 ry=3.5365853 x=247.883 y=325.4415 style=fill:ffd5d5;fill-opacity:1;stroke:none id=indicatorBase rect width=6.0830183 height=98.849045 rx=2.6630435 ry=2.2987804 x=282.86035 y=237.23772 style=fill:00aa00;fill-opacity:1;stroke:none id=indicator svg

25.6.2 How to Use a Custom Shapes File

After creating the SVG file to be used to specify the custom shapes for your gauge, set the customShapesPath attribute to point to the file. To specify a custom shapes file: 1. In the Structure window, right-click the dvt:gauge node and choose Go to Properties .

2. In the Appearance attributes category of the Property Inspector, for the

CustomShapesPath attribute, enter the path to the custom shapes file. For example, customShapesPath=pathcustomShapesFile.svg.

25.6.3 What You May Need to Know About Supported SVG Features

The custom shapes available to you support the following SVG features: upperLabelFrameTextBox For complex upperLabelFrame shapes, specifies a rectangle that can be set as the upperLabelFrameTextBox. This box determines the position of the topLabel within the upperLabelFrame. Table 25–2 Cont. Metadata IDs for Custom Shapes ID Description Using ADF Gauge Components 25-25 ■ Transformations ■ Paths ■ Basic shapes ■ Fill and stroke painting ■ Linear and radial gradients SVG features that are not supported by custom shapes in JDeveloper include: ■ Unit Identifiers: All coordinates and lengths should be specified without the unit identifiers, and are assumed to be in pixels. The parser does not support unit identifiers, because the size of certain units can vary based on the display used. For example, an inch may correspond to different numbers of pixels on different displays. The only exceptions to this are gradient coordinates, which can be specified as percentages. ■ Text: All text on the gauge is considered data, and should be specified through the tags or data binding. ■ Specifying Paint: The supported options are none, 6-digit hexadecimal, and a uri reference to a gradient. ■ Fill Properties: The fill-rule attribute is not supported. ■ Stroke Properties: The stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-disarray, and stroke-opacity attributes are not supported. ■ Linear Gradients and Radial Gradients: The gradientUnits, gradientTransform, spreadMethod, and xlink:href are not supported. Additionally, the r, fx, and fy attributes on the radial gradient are not supported. ■ Elliptical Arc Out-of-Range Parameters: If rx, ry, and x-axis-rot are too small such that there is no solution, the ellipse should be scaled uniformly until there is exactly one solution. The SVG parser will not support this. ■ General Error Conditions: The SVG input is expected to be well formed and without errors. The SVG parser will not perform any error checking or error recovery for incorrectly formed files, and it will stop parsing when it encounters an error in the file.

25.6.4 How to Set Custom Shapes Styles

In addition to the ability to specify custom shapes for gauges, there are a set of prebuilt custom shapes styles for use with the gauge components. The available styles are: ■ Rounded rectangle ■ Full circle ■ Beveled circle Figure 25–11 shows a dial gauge displayed with each of the custom shapes styles applied.