#myGauge {
-fxx-animated: YES;
-fxx-value-format:' ##0.0W';
}public class BasicRoundDailGauge extends AbstractLinearGauge<BasicRoundDailGauge>
This gauge is a simple semi-real round gauge, featuring an outer ring with shade effect, ticks with labels, a big textual version of the current indicated value and a long slender needle. The needle moves through an arc ranging from about 7 o’clock (min) clockwise to 5 o’clock (max).
The gauge supports the following CSS styleable properties:
-fxx-animated: is the gauge animated, YES or NO.
-fxx-value-format: a DecimalFormat pattern for rendering the label inside the needle
#myGauge {
-fxx-animated: YES;
-fxx-value-format:' ##0.0W';
}The gauge supports the following additional CSS styleable properties:
-fxx-tick-color: the color used to draw the ticks on the face plate
The gauge is able to draw in different colors, by specifying values for the following CSS selectors:
-fxx-backplate-color
-fxx-needle-color
-fxx-tick-color
-fxx-value-color
-fxx-knob-color
-fxx-tick-color
A few ready-to-use colors are available through colorscheme’s:
colorscheme-light
colorscheme-dark
colorscheme-green
colorscheme-red
final BasicArcGauge lBasicArcGauge = new BasicArcGauge();
lBasicArcGauge.getStyleClass().add("colorscheme-green");Note: these colorscheme’s co-exist with the segment’s colorscheme’s.
This gauge per default has percentage labels starting at 0%, stepping up 10% up to and including 100%. The labels collection holds a list of all labels and each of their respective values where they are rendered.
gauge.labels().clear(); // remove the default labels
labels().add(new AbsoluteLabel(33.0, "33%"));
labels().add(new AbsoluteLabel(66.0, "66%"));This gauge supports segments, which are colored parts of the arc rendered behind the ticks, over which the needle moves:
Segment styling can be set using CSS classes like "segment0", "segment1", … , the numeric suffix is the index of the segment in the segments list.
Another option is to specify an segment ID, which can then be used to style the segment in CSS.
The gauge’s css per default supports segment classes segment0 - segment9.
A shortcut is available through -fxx-segment0-color, …, which can be set in any styleclass (this is used in the colorschemes).
The CSS also contains a number of colorschemes, like "colorscheme-green-to-red-10" (for 10 segments) which can be activated by assigning the colorscheme class to the gauge.
If no segments are specified a single segment will automatically be drawn.
If segments are specified, the user is fully responsible for convering the whole range.
gauge.getStyleClass().add("colorscheme-green-to-red-10");
for (int i = 0; i < 10; i++) {
Segment lSegment = new PercentSegment(gauge, i10.0, (i+1)10.0);
gauge.segments().add(lSegment);
}Note: the colorscheme CSS must be manually loaded in the scene! See below. Note: these colorscheme’s co-exist with the needle’s colorscheme’s.
This gauge supports markers, which are tiny notches on the arc to mark special values:
Marker styling can be set using CSS classes like "marker0", "marker1", … , the numeric suffix is the index of the marker in the markers list.
Another option is to specify an marker ID, which can then be used to style the marker in CSS.
The gauge’s css per default supports marker classes marker0 - marker9.
A shortcut is available through -fxx-marker0-color, …, which can be set in any styleclass (this is used in the colorschemes).
for (int i = 0; i <= 20; i++) {
gauge.markers().add(new PercentMarker(gauge, i * 5.0));
}Markers can be custom shaped using a SVG shape:
.marker1 {
-fx-shape: 'M 0 0 L -3 -6 L 3 -6 Z';
}Note: Marker colors are also set in the colorschemes.
This gauge has six indicators positions: 0 up to and including 5, located around the knob. Indicators can be assigned to these position as follows:
gauge.indicators().add(new Indicator(0, "warning"));
gauge.indicators().add(new Indicator(1, "error"));This enables (but does not show!) the indicator at the corresponding locations, the example uses the two predefined indicators "error" and "warning". Indicators can be made visible by assigning "visible" to the corresponding -fxx-INDICATORID-indicator-visibility variable in CSS, like so:
-fxx-warning-indicator-visibility: visible;
-fxx-error-indicator-visibility: visible;It is possible to have indicators become visible based on the needle’s value, by means of the segments. Suppose the needle is over segment1, then a CSS class named "segment1-active" is added to the node. Using this CSS class an indicator can be made visible, for example:
.segment1-active {
-fxx-warning-indicator-visibility: visible;
}
.segment2-active {
-fxx-error-indicator-visibility: visible;
}Segments may overlap and can be transparent, there is a special "colorscheme-first-grey-rest-transparent-10" colorscheme. Segments could be setup solely to show indicators, for example segment1 could run from 50% to 100% and segment2 from 75% to 100%. If the needle is over segment2, both the warning and error indicator will be visible.
gauge.getStyleClass().add("colorscheme-first-grey-rest-transparent-10");
gauge.segments().add(new CompleteSegment(gauge));
gauge.segments().add(new PercentSegment(gauge, 50.0, 100.0, "warningSegment"));
gauge.segments().add(new PercentSegment(gauge, 75.0, 100.0, "errorSegment"));Given that the segements have id’s, you can also use active classes based on these id’s:
.segment-warningSegment-active {
-warning-indicator-visibility: visible;
}
.segment-errorSegment-active {
-error-indicator-visibility: visible;
}This should not be confused with the CSS rules based on the id of the segments (in the example: #warningSegment and #errorSegment).
Custom indicators can be created in CSS by defining a 100x100 SVG shape in CSS, with 0,0 being in the center, and assign an id to it. Similar to the default error indicator:.
.error-indicator {
visibility: -fxx-error-indicator-visibility;
-fx-background-color: -fxx-error-indicator-color;
-fx-shape: 'M-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0';
-fx-scale-shape: false;
}The CSS defines a number of default colorschemes for the segments, some of which already were shown in the examples. These can be loaded into a scene using:
scene.getStylesheets().add(LinearGauge.segmentColorschemeCSSPath());The numeric suffix denotes the number of segments the colorschema is for.
colorscheme-blue-to-red-5
colorscheme-red-to-blue-5
colorscheme-green-to-darkgreen-6
colorscheme-green-to-red-6
colorscheme-red-to-green-6
colorscheme-purple-to-red-6
colorscheme-blue-to-red-6
colorscheme-green-to-red-7
colorscheme-red-to-green-7
colorscheme-green-to-red-10
colorscheme-red-to-green-10
colorscheme-purple-to-cyan-10
colorscheme-first-grey-rest-transparent-10
This is a blatant but approved visual copy of Gerrit Grunwald’s Enzo RadialSteel (https://bitbucket.org/hansolo/enzo/src). Gerrit describes the Enzo library in his blog like this: all controls in that library are made for my personal demos and are not production ready. This JFXtras control is supposed to be production ready.
maxValue, minValue, valuecontextMenu, skinClassName, skin, tooltipbackground, border, cacheShape, centerShape, height, insets, maxHeight, maxWidth, minHeight, minWidth, opaqueInsets, padding, prefHeight, prefWidth, scaleShape, shape, snapToPixel, widthimpl_traversalEngine, needsLayoutaccessibleHelp, accessibleRoleDescription, accessibleRole, accessibleText, blendMode, boundsInLocal, boundsInParent, cacheHint, cache, clip, cursor, depthTest, disabled, disable, effectiveNodeOrientation, effect, eventDispatcher, focused, focusTraversable, hover, id, impl_showMnemonics, impl_treeVisible, inputMethodRequests, layoutBounds, layoutX, layoutY, localToParentTransform, localToSceneTransform, managed, mouseTransparent, nodeOrientation, onContextMenuRequested, onDragDetected, onDragDone, onDragDropped, onDragEntered, onDragExited, onDragOver, onInputMethodTextChanged, onKeyPressed, onKeyReleased, onKeyTyped, onMouseClicked, onMouseDragEntered, onMouseDragExited, onMouseDragged, onMouseDragOver, onMouseDragReleased, onMouseEntered, onMouseExited, onMouseMoved, onMousePressed, onMouseReleased, onRotate, onRotationFinished, onRotationStarted, onScrollFinished, onScroll, onScrollStarted, onSwipeDown, onSwipeLeft, onSwipeRight, onSwipeUp, onTouchMoved, onTouchPressed, onTouchReleased, onTouchStationary, onZoomFinished, onZoom, onZoomStarted, opacity, parent, pickOnBounds, pressed, rotate, rotationAxis, scaleX, scaleY, scaleZ, scene, style, translateX, translateY, translateZ, visibleUSE_COMPUTED_SIZE, USE_PREF_SIZEBASELINE_OFFSET_SAME_AS_HEIGHT| Constructor and Description |
|---|
BasicRoundDailGauge() |
| Modifier and Type | Method and Description |
|---|---|
Skin<?> |
createDefaultSkin() |
String |
getUserAgentStylesheet()
Return the path to the CSS file so things are setup right
|
getMaxValue, getMinValue, getValue, indicators, labels, markers, maxValueProperty, minValueProperty, segmentColorschemeCSSPath, segments, setMaxValue, setMinValue, setValue, valueProperty, withMaxValue, withMinValue, withValuecomputeMaxHeight, computeMaxWidth, computeMinHeight, computeMinWidth, computePrefHeight, computePrefWidth, contextMenuProperty, executeAccessibleAction, getBaselineOffset, getClassCssMetaData, getContextMenu, getControlCssMetaData, getCssMetaData, getSkin, getTooltip, impl_cssGetFocusTraversableInitialValue, impl_processCSS, isResizable, layoutChildren, queryAccessibleAttribute, setContextMenu, setSkin, setTooltip, skinClassNameProperty, skinProperty, tooltipPropertybackgroundProperty, borderProperty, cacheShapeProperty, centerShapeProperty, getBackground, getBorder, getHeight, getInsets, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpaqueInsets, getPadding, getPrefHeight, getPrefWidth, getShape, getWidth, heightProperty, impl_computeContains, impl_computeGeomBounds, impl_computeLayoutBounds, impl_createPeer, impl_notifyLayoutBoundsChanged, impl_pickNodeLocal, impl_updatePeer, insetsProperty, isCacheShape, isCenterShape, isScaleShape, isSnapToPixel, layoutInArea, layoutInArea, layoutInArea, layoutInArea, maxHeight, maxHeightProperty, maxWidth, maxWidthProperty, minHeight, minHeightProperty, minWidth, minWidthProperty, opaqueInsetsProperty, paddingProperty, positionInArea, positionInArea, prefHeight, prefHeightProperty, prefWidth, prefWidthProperty, resize, scaleShapeProperty, setBackground, setBorder, setCacheShape, setCenterShape, setHeight, setMaxHeight, setMaxSize, setMaxWidth, setMinHeight, setMinSize, setMinWidth, setOpaqueInsets, setPadding, setPrefHeight, setPrefSize, setPrefWidth, setScaleShape, setShape, setSnapToPixel, setWidth, shapeProperty, snappedBottomInset, snappedLeftInset, snappedRightInset, snappedTopInset, snapPosition, snapSize, snapSpace, snapToPixelProperty, widthPropertygetChildren, getChildrenUnmodifiable, getImpl_traversalEngine, getManagedChildren, getStylesheets, impl_getAllParentStylesheets, impl_processMXNode, impl_traversalEngineProperty, isNeedsLayout, layout, lookup, needsLayoutProperty, requestLayout, requestParentLayout, setImpl_traversalEngine, setNeedsLayout, updateBoundsaccessibleHelpProperty, accessibleRoleDescriptionProperty, accessibleRoleProperty, accessibleTextProperty, addEventFilter, addEventHandler, applyCss, autosize, blendModeProperty, boundsInLocalProperty, boundsInParentProperty, buildEventDispatchChain, cacheHintProperty, cacheProperty, clipProperty, computeAreaInScreen, contains, contains, containsBounds, cursorProperty, depthTestProperty, disabledProperty, disableProperty, effectiveNodeOrientationProperty, effectProperty, eventDispatcherProperty, fireEvent, focusedProperty, focusTraversableProperty, getAccessibleHelp, getAccessibleRole, getAccessibleRoleDescription, getAccessibleText, getBlendMode, getBoundsInLocal, getBoundsInParent, getCacheHint, getClip, getContentBias, getCursor, getDepthTest, getEffect, getEffectiveNodeOrientation, getEventDispatcher, getId, getInputMethodRequests, getLayoutBounds, getLayoutX, getLayoutY, getLocalToParentTransform, getLocalToSceneTransform, getNodeOrientation, getOnContextMenuRequested, getOnDragDetected, getOnDragDone, getOnDragDropped, getOnDragEntered, getOnDragExited, getOnDragOver, getOnInputMethodTextChanged, getOnKeyPressed, getOnKeyReleased, getOnKeyTyped, getOnMouseClicked, getOnMouseDragEntered, getOnMouseDragExited, getOnMouseDragged, getOnMouseDragOver, getOnMouseDragReleased, getOnMouseEntered, getOnMouseExited, getOnMouseMoved, getOnMousePressed, getOnMouseReleased, getOnRotate, getOnRotationFinished, getOnRotationStarted, getOnScroll, getOnScrollFinished, getOnScrollStarted, getOnSwipeDown, getOnSwipeLeft, getOnSwipeRight, getOnSwipeUp, getOnTouchMoved, getOnTouchPressed, getOnTouchReleased, getOnTouchStationary, getOnZoom, getOnZoomFinished, getOnZoomStarted, getOpacity, getParent, getProperties, getPseudoClassStates, getRotate, getRotationAxis, getScaleX, getScaleY, getScaleZ, getScene, getStyle, getStyleableParent, getStyleClass, getTransforms, getTranslateX, getTranslateY, getTranslateZ, getTypeSelector, getUserData, hasProperties, hoverProperty, idProperty, impl_clearDirty, impl_computeIntersects, impl_cssGetCursorInitialValue, impl_findStyles, impl_geomChanged, impl_getLeafTransform, impl_getMatchingStyles, impl_getPeer, impl_getPivotX, impl_getPivotY, impl_getPivotZ, impl_getStyleMap, impl_hasTransforms, impl_intersects, impl_intersectsBounds, impl_isDirty, impl_isDirtyEmpty, impl_isShowMnemonics, impl_isTreeVisible, impl_layoutBoundsChanged, impl_markDirty, impl_pickNode, impl_processCSS, impl_reapplyCSS, impl_setShowMnemonics, impl_setStyleMap, impl_showMnemonicsProperty, impl_syncPeer, impl_transformsChanged, impl_traverse, impl_treeVisibleProperty, inputMethodRequestsProperty, intersects, intersects, isCache, isDisable, isDisabled, isFocused, isFocusTraversable, isHover, isManaged, isMouseTransparent, isPickOnBounds, isPressed, isVisible, layoutBoundsProperty, layoutXProperty, layoutYProperty, localToParent, localToParent, localToParent, localToParent, localToParent, localToParentTransformProperty, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToScene, localToSceneTransformProperty, localToScreen, localToScreen, localToScreen, localToScreen, localToScreen, lookupAll, managedProperty, mouseTransparentProperty, nodeOrientationProperty, notifyAccessibleAttributeChanged, onContextMenuRequestedProperty, onDragDetectedProperty, onDragDoneProperty, onDragDroppedProperty, onDragEnteredProperty, onDragExitedProperty, onDragOverProperty, onInputMethodTextChangedProperty, onKeyPressedProperty, onKeyReleasedProperty, onKeyTypedProperty, onMouseClickedProperty, onMouseDragEnteredProperty, onMouseDragExitedProperty, onMouseDraggedProperty, onMouseDragOverProperty, onMouseDragReleasedProperty, onMouseEnteredProperty, onMouseExitedProperty, onMouseMovedProperty, onMousePressedProperty, onMouseReleasedProperty, onRotateProperty, onRotationFinishedProperty, onRotationStartedProperty, onScrollFinishedProperty, onScrollProperty, onScrollStartedProperty, onSwipeDownProperty, onSwipeLeftProperty, onSwipeRightProperty, onSwipeUpProperty, onTouchMovedProperty, onTouchPressedProperty, onTouchReleasedProperty, onTouchStationaryProperty, onZoomFinishedProperty, onZoomProperty, onZoomStartedProperty, opacityProperty, parentProperty, parentToLocal, parentToLocal, parentToLocal, parentToLocal, parentToLocal, pickOnBoundsProperty, pressedProperty, pseudoClassStateChanged, relocate, removeEventFilter, removeEventHandler, requestFocus, resizeRelocate, rotateProperty, rotationAxisProperty, scaleXProperty, scaleYProperty, scaleZProperty, sceneProperty, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, sceneToLocal, screenToLocal, screenToLocal, screenToLocal, setAccessibleHelp, setAccessibleRole, setAccessibleRoleDescription, setAccessibleText, setBlendMode, setCache, setCacheHint, setClip, setCursor, setDepthTest, setDisable, setDisabled, setEffect, setEventDispatcher, setEventHandler, setFocused, setFocusTraversable, setHover, setId, setInputMethodRequests, setLayoutX, setLayoutY, setManaged, setMouseTransparent, setNodeOrientation, setOnContextMenuRequested, setOnDragDetected, setOnDragDone, setOnDragDropped, setOnDragEntered, setOnDragExited, setOnDragOver, setOnInputMethodTextChanged, setOnKeyPressed, setOnKeyReleased, setOnKeyTyped, setOnMouseClicked, setOnMouseDragEntered, setOnMouseDragExited, setOnMouseDragged, setOnMouseDragOver, setOnMouseDragReleased, setOnMouseEntered, setOnMouseExited, setOnMouseMoved, setOnMousePressed, setOnMouseReleased, setOnRotate, setOnRotationFinished, setOnRotationStarted, setOnScroll, setOnScrollFinished, setOnScrollStarted, setOnSwipeDown, setOnSwipeLeft, setOnSwipeRight, setOnSwipeUp, setOnTouchMoved, setOnTouchPressed, setOnTouchReleased, setOnTouchStationary, setOnZoom, setOnZoomFinished, setOnZoomStarted, setOpacity, setPickOnBounds, setPressed, setRotate, setRotationAxis, setScaleX, setScaleY, setScaleZ, setStyle, setTranslateX, setTranslateY, setTranslateZ, setUserData, setVisible, snapshot, snapshot, startDragAndDrop, startFullDrag, styleProperty, toBack, toFront, toString, translateXProperty, translateYProperty, translateZProperty, usesMirroring, visiblePropertypublic String getUserAgentStylesheet()
Return the path to the CSS file so things are setup right
getUserAgentStylesheet in class AbstractLinearGauge<BasicRoundDailGauge>public Skin<?> createDefaultSkin()
createDefaultSkin in class AbstractLinearGauge<BasicRoundDailGauge>