Merge pull request #2407 from ControlSystemStudio/CSSTUDIO-1215

Csstudio 1215: Transparency Support for ProgressBar, SlideButton, ComboBox widgets

Author: kasemir

app/display/representation-javafx/src/main/java/org/csstudio/display/builder/representation/javafx/JFXUtil.java

@@ -7,6 +7,7 @@
  *******************************************************************************/
 package org.csstudio.display.builder.representation.javafx;
 
+import java.text.DecimalFormat;
 import java.util.Locale;
 import java.util.concurrent.ConcurrentHashMap;
 import java.util.logging.Level;
@@ -32,6 +33,7 @@
 public class JFXUtil extends org.phoebus.ui.javafx.JFXUtil
 {
     private static double font_calibration = 1.0;
+    private static final DecimalFormat RGBA_ALPHA_DECIMAL_FORMAT = new DecimalFormat("0.00");
 
     static
     {
@@ -88,12 +90,20 @@ public static String webRgbOrHex(final WidgetColor color)
                 return "rgba(" + col.getRed() + ',' +
                                  col.getGreen() + ',' +
                                  col.getBlue() + ',' +
-                                 col.getAlpha()/255f + ')';
+                                 RGBA_ALPHA_DECIMAL_FORMAT.format(col.getAlpha()/255f) + ')';
             else
                 return webHex(col);
         });
     }
 
+    /**
+     * Extract alpha value, formatted as expected for e.g. an RGBA function
+     * @return alpha value in decimal form, from 0.00 to 1.00
+     */
+    public static String webAlpha(final WidgetColor color) {
+        return RGBA_ALPHA_DECIMAL_FORMAT.format(color.getAlpha()/255f);
+    }
+
     /** Convert model color into web-type RGB text
      *  @param buf StringBuilder where RGB text of the form "#FF8080" is added
      *  @param color {@link WidgetColor}

app/display/representation-javafx/src/main/java/org/csstudio/display/builder/representation/javafx/widgets/ComboRepresentation.java

@@ -266,7 +266,7 @@ public void updateChanges()
             Font f = JFXUtil.convert(model_widget.propFont().getValue());
 
             jfx_node.setStyle(MessageFormat.format(
-                "-fx-body-color: linear-gradient(to bottom,ladder({0}, derive({0},8%) 75%, derive({0},10%) 80%), derive({0},-8%)); "
+                    "-fx-background-color: linear-gradient(to bottom,ladder({0}, derive({0},8%) 75%, derive({0},10%) 80%), derive({0},-8%)); "
               + "-fx-text-base-color: ladder(-fx-color, -fx-light-text-color 45%, -fx-dark-text-color 46%, -fx-dark-text-color 59%, {1}); "
               + "-fx-font: {2} {3}px \"{4}\";",
                 JFXUtil.webRgbOrHex(model_widget.propBackgroundColor().getValue()),

app/display/representation-javafx/src/main/java/org/csstudio/display/builder/representation/javafx/widgets/ProgressBarRepresentation.java

@@ -49,6 +49,7 @@ protected void registerListeners()
     {
         super.registerListeners();
         model_widget.propFillColor().addUntypedPropertyListener(lookChangedListener);
+        model_widget.propBackgroundColor().addUntypedPropertyListener(lookChangedListener);
         model_widget.propWidth().addUntypedPropertyListener(lookChangedListener);
         model_widget.propHeight().addUntypedPropertyListener(lookChangedListener);
         model_widget.propLimitsFromPV().addUntypedPropertyListener(valueChangedListener);
@@ -64,6 +65,7 @@ protected void registerListeners()
     protected void unregisterListeners()
     {
         model_widget.propFillColor().removePropertyListener(lookChangedListener);
+        model_widget.propBackgroundColor().removePropertyListener(lookChangedListener);
         model_widget.propWidth().removePropertyListener(lookChangedListener);
         model_widget.propHeight().removePropertyListener(lookChangedListener);
         model_widget.propLimitsFromPV().removePropertyListener(valueChangedListener);
@@ -181,8 +183,36 @@ public void updateChanges()
             // Tweaking the color used by CSS keeps overall style.
             // See also http://stackoverflow.com/questions/13467259/javafx-how-to-change-progressbar-color-dynamically
             final StringBuilder style = new StringBuilder();
-            style.append("-fx-accent: ").append(JFXUtil.webRgbOrHex(model_widget.propFillColor().getValue())).append(';');
-            style.append("-fx-control-inner-background: ").append(JFXUtil.webRgbOrHex(model_widget.propBackgroundColor().getValue())).append(';');
+
+            // Color of the progress bar / foreground
+            style.append("-fx-accent: ").append(JFXUtil.webRGB(
+                    JFXUtil.convert(
+                            model_widget.propFillColor().getValue()
+                    )
+            )).append(" !important; ");
+
+            // Color of the background underneath the progress bar
+            // Note per moderna.css the background is actually three layers of color
+            // with fx-shadow-highlight-color on the bottom,
+            // then fx-text-box-border,
+            // and finally fx-control-inner-background on top, all stacked in place with offsets.
+            // This gives the illusion of having a bordered box with a shadow instead of actually being a
+            // bordered box with a shadow...
+            // Fortunately, the bottom-most color (the 'shadow') is already transparent so we can leave it alone
+            // Unfortunately, the middle color (the "border" color) is a solid gray color (#ececec), so we must
+            // override it with its rgba equivalent so that it has transparency matching the picked background color.
+            style.append("-fx-control-inner-background: ")
+                    .append(JFXUtil.webRGB(
+                            JFXUtil.convert(
+                                    model_widget.propBackgroundColor().getValue()))
+                            )
+                    .append(";");
+            style.append("-fx-text-box-border: rgba(236, 236, 236, ")
+                    .append(JFXUtil.webAlpha(model_widget.propBackgroundColor().getValue()))
+                    .append(");");
+            style.append("-fx-shadow-highlight-color: rgba(236, 236, 236, ")
+                    .append(JFXUtil.webAlpha(model_widget.propBackgroundColor().getValue()))
+                    .append(");");
             jfx_node.setStyle(style.toString());
         }
         if (dirty_value.checkAndClear())

app/display/representation-javafx/src/main/resources/org/csstudio/display/builder/representation/javafx/opibuilder.css

@@ -237,14 +237,15 @@
 {
     -db-toggle-switch-off: #f5f5f5;
     -db-toggle-switch-on: #0b99c9;
+    -db-transparent-text-box-border: rgba(236, 236, 236, 0.50);
 }
 .toggle-switch .thumb-area
 {
     -fx-background-radius: 1em;
     -fx-background-color: linear-gradient(
             to bottom,
-            derive(-fx-text-box-border, -20%),
-            derive(-fx-text-box-border, -30%)
+            derive(-db-transparent-text-box-border, -20%),
+            derive(-db-transparent-text-box-border, -30%)
         ),
         -db-toggle-switch-off;
     -fx-background-insets: 0, 1;
@@ -254,8 +255,8 @@
 {
     -fx-background-color: linear-gradient(
             to bottom,
-            derive(-fx-text-box-border, -20%),
-            derive(-fx-text-box-border, -30%)
+            derive(-db-transparent-text-box-border, -20%),
+            derive(-db-transparent-text-box-border, -30%)
         ),
         linear-gradient(
             to bottom,

app/display/representation-javafx/src/test/java/org/csstudio/display/builder/representation/javafx/JFXUtilTest.java

@@ -38,7 +38,16 @@ public void testRGB()
     {
         assertThat(JFXUtil.webRgbOrHex(new WidgetColor(15, 255, 0)), equalTo("#0FFF00"));
         assertThat(JFXUtil.webRgbOrHex(new WidgetColor(0, 16, 255)), equalTo("#0010FF"));
-        assertThat(JFXUtil.webRgbOrHex(new WidgetColor(0, 16, 255, 50)), equalTo("rgba(0,16,255,0.19607843)"));
+        assertThat(JFXUtil.webRgbOrHex(new WidgetColor(0, 16, 255, 50)), equalTo("rgba(0,16,255,0.20)"));
+    }
+
+    @Test
+    public void testRGBWithAlpha()
+    {
+        // NOTE that the actual decimal value for transparency would have been 0.019607844, however it needs
+        // to be formatted to two decimal places
+        assertThat(JFXUtil.webRgbOrHex(new WidgetColor(15, 255, 0, 5)), equalTo("rgba(15,255,0,0.02)"));
+        assertThat(JFXUtil.webRgbOrHex(new WidgetColor(0, 16, 255)), equalTo("#0010FF"));
     }
 
     @Test