jfxtras.labs.internal.scene.control.gauge.linear.BasicRoundDailGauge.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of jfxtras-labs Show documentation
Show all versions of jfxtras-labs Show documentation
Experimental components for JavaFX 2
@import "_segment.css"
.BasicRoundDailGauge {
/* These are the variables with their default values (colors), special combinations can be set by assigning one of the colorschemes */
-fxx-backplate-color: #f0f0f0;
-fxx-needle-color: #F8907D;
-fxx-tick-color: black;
-fxx-value-color: #101010;
-fxx-knob-color: grey;
-fxx-segment0-color: #f61319;
-fxx-segment1-color: #f3351f;
-fxx-segment2-color: #f65821;
-fxx-segment3-color: #f18c23;
-fxx-segment4-color: #f3a429;
-fxx-segment5-color: #fccb2e;
-fxx-segment6-color: #f2de31;
-fxx-segment7-color: #d4ea35;
-fxx-segment8-color: #aacc2a;
-fxx-segment9-color: #97b329;
-fxx-marker0-color: -fxx-tick-color;
-fxx-marker1-color: -fxx-tick-color;
-fxx-marker2-color: -fxx-tick-color;
-fxx-marker3-color: -fxx-tick-color;
-fxx-marker4-color: -fxx-tick-color;
-fxx-marker5-color: -fxx-tick-color;
-fxx-marker6-color: -fxx-tick-color;
-fxx-marker7-color: -fxx-tick-color;
-fxx-marker8-color: -fxx-tick-color;
-fxx-marker9-color: -fxx-tick-color;
/* predefined indicators */
-fxx-error-indicator-visibility: hidden;
-fxx-error-indicator-color: red;
-fxx-warning-indicator-visibility: hidden;
-fxx-warning-indicator-color: orange;
}
.BasicRoundDailGauge .backplate {
-fx-fill: -fxx-backplate-color;
}
.BasicRoundDailGauge .tick {
}
.BasicRoundDailGauge .value {
-fx-fill: -fxx-value-color;
-fx-font-size: 36px;
-fx-font-weight: bold;
}
.BasicRoundDailGauge .needle-standard {
-fx-background-color : derive(-fxx-needle-color, -30%),
linear-gradient(to left,
derive(-fxx-needle-color, 15%) 0%,
derive(-fxx-needle-color, -15%) 100%);
-fx-background-insets: 0, 1;
-fx-background-radius: 0em;
-fx-padding: 0;
-fx-stroke: transparent;
-fx-scale-shape: false;
-fx-shape: "M -4 0 L 4 0 L 1 95 L -1 95 Z";
}
.BasicRoundDailGauge .knob {
-fx-background-color : linear-gradient(to bottom,
derive(-fxx-knob-color, 80%) 0%,
derive(-fxx-knob-color, 40%) 52%,
derive(-fxx-knob-color, 0%) 100%),
linear-gradient(to bottom,
derive(-fxx-knob-color, 70%) 0%,
derive(-fxx-knob-color, 30%) 45%,
derive(-fxx-knob-color, 0%) 100%);
-fx-background-insets: 0, 2;
-fx-background-radius: 0em;
-fx-scale-shape : false;
-fx-shape : "M 0 100 C 0 44.7708 44.7708 0 100 0 C 155.2292 0 200 44.7708 200 100 C 200 155.2292 155.2292 200 100 200 C 44.7708 200 0 155.2292 0 100 Z";
}
.BasicRoundDailGauge .outerring {
-fx-fill: transparent;
-fx-stroke: linear-gradient(to bottom,
rgb(204,204,204) 0%,
rgb(133,133,133) 26%,
rgb(84,84,84) 100%);
}
.BasicRoundDailGauge .innerring {
-fx-fill: transparent;
-fx-stroke: linear-gradient(to bottom,
rgb(71,72,72) 0%,
rgb(110,106,107) 50%,
rgb(186,185,187) 100%);
}
.BasicRoundDailGauge .GlassPlatePane {
-fx-effect: dropshadow(two-pass-box, rgba(0, 0, 0, 0.3), 30, 0.3, 0, 10);
}
/***************************************************************************************************************
/* predefined indicators http://www.w3.org/TR/SVG/paths.html */
/* drawing circles in SVG: http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334 */
.BasicRoundDailGauge .error-indicator {
visibility: -fxx-error-indicator-visibility;
-fx-background-color: -fxx-error-indicator-color;
-fx-shape: 'M 50, 50 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0';
-fx-scale-shape: false;
}
.BasicRoundDailGauge .warning-indicator {
visibility: -fxx-warning-indicator-visibility;
-fx-background-color: -fxx-warning-indicator-color;
-fx-shape: 'M 10 100 L 90 100 S 100 100 95 90 L 55 15 S 50 10 45 15 L 5 90 S 0 100 10 100 Z';
-fx-scale-shape: false;
}
/***************************************************************************************************************
* This are the actual classes being assigned to the segments, they use the variables to obtain their color.
*/
.BasicRoundDailGauge .segment {
-fx-stroke: #888888;
-fx-fill: #888888;
}
.BasicRoundDailGauge .segment0 {
-fx-stroke: -fxx-segment0-color;
-fx-fill: -fxx-segment0-color;
}
.BasicRoundDailGauge .segment1 {
-fx-stroke: -fxx-segment1-color;
-fx-fill: -fxx-segment1-color;
}
.BasicRoundDailGauge .segment2 {
-fx-stroke: -fxx-segment2-color;
-fx-fill: -fxx-segment2-color;
}
.BasicRoundDailGauge .segment3 {
-fx-stroke: -fxx-segment3-color;
-fx-fill: -fxx-segment3-color;
}
.BasicRoundDailGauge .segment4 {
-fx-stroke: -fxx-segment4-color;
-fx-fill: -fxx-segment4-color;
}
.BasicRoundDailGauge .segment5 {
-fx-stroke: -fxx-segment5-color;
-fx-fill: -fxx-segment5-color;
}
.BasicRoundDailGauge .segment6 {
-fx-stroke: -fxx-segment6-color;
-fx-fill: -fxx-segment6-color;
}
.BasicRoundDailGauge .segment7 {
-fx-stroke: -fxx-segment7-color;
-fx-fill: -fxx-segment7-color;
}
.BasicRoundDailGauge .segment8 {
-fx-stroke: -fxx-segment8-color;
-fx-fill: -fxx-segment8-color;
}
.BasicRoundDailGauge .segment9 {
-fx-stroke: -fxx-segment9-color;
-fx-fill: -fxx-segment9-color;
}
/**
* The segment-active class can be used to modify an segment that is under the needle (this can be more than if the segments are setup in such a way).
*/
.BasicRoundDailGauge .segment-active {
}
/**
* The segmentX-active are assigned corresponding to the segment that is under the needle (this can be more than if the segments are setup in such a way).
* This is the place to associate an indicator with a segment, by adding one of these line to the appropriate class:
* -fxx-error-indicator-visibility: visible;
* -fxx-warning-indicator-visibility: visible;
* Interesting is it to have transparent segments, while not visible, these can become active and show an indicator.
.BasicRoundDailGauge .segment0-active {
}
.BasicRoundDailGauge .segment1-active {
}
.BasicRoundDailGauge .segment2-active {
}
.BasicRoundDailGauge .segment3-active {
}
.BasicRoundDailGauge .segment4-active {
}
.BasicRoundDailGauge .segment5-active {
}
.BasicRoundDailGauge .segment6-active {
}
.BasicRoundDailGauge .segment7-active {
}
.BasicRoundDailGauge .segment8-active {
}
.BasicRoundDailGauge .segment9-active {
}
*/
/***************************************************************************************************************
* This are the actual classes being assigned to the marker, they use the variables to obtain their color.
*/
.BasicRoundDailGauge .marker {
-fx-background-color: -fxx-tick-color;
-fx-shape: 'M 0 0 L -3 -6 L 3 -6 Z';
-fx-scale-shape: false;
}
.BasicRoundDailGauge .marker0 {
-fx-background-color: -fxx-marker0-color;
}
.BasicRoundDailGauge .marker1 {
-fx-background-color: -fxx-marker1-color;
}
.BasicRoundDailGauge .marker2 {
-fx-background-color: -fxx-marker2-color;
}
.BasicRoundDailGauge .marker3 {
-fx-background-color: -fxx-marker3-color;
}
.BasicRoundDailGauge .marker4 {
-fx-background-color: -fxx-marker4-color;
}
.BasicRoundDailGauge .marker5 {
-fx-background-color: -fxx-marker5-color;
}
.BasicRoundDailGauge .marker6 {
-fx-background-color: -fxx-marker6-color;
}
.BasicRoundDailGauge .marker7 {
-fx-background-color: -fxx-marker7-color;
}
.BasicRoundDailGauge .marker8 {
-fx-background-color: -fxx-marker8-color;
}
.BasicRoundDailGauge .marker9 {
-fx-background-color: -fxx-marker9-color;
}
/***************************************************************************************************************
* Color schemes, these assign different values to the variables.
*/
.colorscheme-light {
-fxx-backplate-color: #f0f0f0;
-fxx-needle-color: #F8907D;
-fxx-tick-color: black;
-fxx-value-color: #101010;
}
.colorscheme-dark {
-fxx-backplate-color: #2f2f2f;
-fxx-needle-color: #F8907D;
-fxx-tick-color: white;
-fxx-value-color: #F0F0F0;
}
.colorscheme-green {
-fxx-backplate-color: #46934E;
-fxx-needle-color: white;
-fxx-knob-color: #b0b0b0;
-fxx-tick-color: #e0e0e0;
-fxx-value-color: #e0e0e0;
}
.colorscheme-red {
-fxx-backplate-color: #AF0000;
-fxx-needle-color: white;
-fxx-knob-color: #b0b0b0;
-fxx-tick-color: #e0e0e0;
-fxx-value-color: #e0e0e0;
}© 2015 - 2024 Weber Informatics LLC | Privacy Policy