#myGauge {
-fxx-animated: YES;
-fxx-value-format:' ##0.0W';
}public class SimpleMetroArcGauge extends AbstractLinearGauge<SimpleMetroArcGauge>
This gauge is a simple flat possibly colorful (Microsoft Metro style) arc shaped gauge. The needle ranges 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';
}This gauge supports segments, which are colored parts of the arc 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.
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';
}This gauge has two indicators positions: 0 and 1, located at the bottom between the ends of the arc. 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 SimpleGauge (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 |
|---|
SimpleMetroArcGauge() |
| 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<SimpleMetroArcGauge>public Skin<?> createDefaultSkin()
createDefaultSkin in class AbstractLinearGauge<SimpleMetroArcGauge>