Smart Component 10
Green slope values.
Green slope values combines the staggered placement logic of the downhill-arrow grid with the same golfer-facing degree conversion used by the slope heatmap. CADDIE.100 privately interpolates the putting-surface field, resolves artifact-aligned sample points, converts grade to degrees, and returns only rounded display strings and final pixels.
Usage
Add the green slope values to a graphic.
Include the component in the initial mount call, reconcile it through view.setSmartComponents, or append it with view.addSmartComponent. Types may repeat. Give repeated instances stable id values to style, show, hide, move, reset, or remove one instance independently. The selected Smart Component type, instance ID, render receipt, and protected selection options such as yardages, grid spacing, coverage, measured origin, buffer distance, detail, limits, or targets are sent to the overlay service. Marker-image origins, images, presentation styles, supported labels, and movement remain local.
const view = await caddie.mount(container, graphicRequest, [{
type: "green-slope-values",
density: "medium",
precision: "whole",
showDegreeSymbol: true,
style: {
labelSize: 18,
labelColor: "#142622E8",
labelOutlineColor: "#FFFFFFE8",
labelOutlineWidth: 3,
labelFontWeight: 500,
opacity: 1,
},
}]);
view.setSmartComponentStyle({
type: "green-slope-values",
style: { labelColor: "rgba(7, 17, 13, 0.9)", labelOutlineColor: "#FFFFFFFF" },
});Defaults
Built-in presentation.
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "green-slope-values" | Required | Requests rounded slope labels for a Hole or Green graphic. |
| id | string | Automatic | Optional stable 1–64 character instance ID using letters, numbers, underscores, or hyphens. Use IDs to independently control repeated Smart Components of the same type. |
| density | "light" | "medium" | "high" | "medium" | Controls staggered protected sample spacing. |
| precision | "whole" | "tenths" | "whole" | Rounds displayed slope degrees to the nearest whole number or one decimal place. |
| showDegreeSymbol | boolean | true | Appends ° to each displayed value. |
| style.labelSize | number | 18 | Positive whole-number label size in image pixels with no upper limit. |
| style.labelColor | GraphicColor | "#142622" | Label fill, including shared RGBA hex and rgba() formats. |
| style.labelOutlineColor | GraphicColor | "rgba(255, 255, 255, 0.94)" | Label stroke, including shared RGBA hex and rgba() formats. |
| style.labelOutlineWidth | number | 3 | Centered text-stroke width from 0 through 16 image pixels. |
| style.labelFontWeight | number | 500 | Numeric font weight from 100 through 900. |
| style.labelLetterSpacing | number | 0 | Additional letter spacing from 0 through 20 image pixels. |
| style.opacity | number | 1 | Local drawing opacity from 0.05 through 1. |
Behavior
Important implementation details.
- The component uses atan(grade / 100) to match the Green slope heatmap's degree scale.
- Only final artifact pixels and rounded visible strings leave the service; the source slope grid, derivatives, boundary, coordinates, and transforms stay private.
- RGBA label fill and outline colors remain local presentation settings and can be changed without another protected placement request.