Merge pull request #296 from manuelkoester/colorpicker_rgba

Added color4/RGBA property/widget

Author: jchanvfx

NodeGraphQt/constants.py

@@ -246,3 +246,5 @@ class NodePropWidgetEnum(Enum):
     INT = 17
     #: Node property represented with button widget.
     BUTTON = 18
+    #: Node property represented with a ColorPickerRGBA widget.
+    COLOR4_PICKER = 19

NodeGraphQt/custom_widgets/properties_bin/custom_widget_color_picker.py

@@ -1,7 +1,7 @@
 #!/usr/bin/python
 from Qt import QtWidgets, QtCore, QtGui
 
-from .custom_widget_vectors import PropVector3
+from .custom_widget_vectors import PropVector3, PropVector4
 from .prop_widgets_abstract import BaseProperty
 
 
@@ -62,3 +62,64 @@ def set_value(self, value):
             self._update_color()
             self._update_vector()
             self.value_changed.emit(self.toolTip(), value)
+
+
+class PropColorPickerRGBA(BaseProperty):
+    """
+    Color4 (rgba) picker widget for a node property.
+    """
+
+    def __init__(self, parent=None):
+        super(PropColorPickerRGBA, self).__init__(parent)
+        self._color = (0, 0, 0, 255)
+        self._button = QtWidgets.QPushButton()
+        self._vector = PropVector4()
+        self._vector.set_value([0, 0, 0, 255])
+        self._update_color()
+
+        self._button.clicked.connect(self._on_select_color)
+        self._vector.value_changed.connect(self._on_vector_changed)
+
+        layout = QtWidgets.QHBoxLayout(self)
+        layout.setContentsMargins(0, 0, 0, 0)
+        layout.addWidget(self._button, 0, QtCore.Qt.AlignLeft)
+        layout.addWidget(self._vector, 1, QtCore.Qt.AlignLeft)
+
+    def _on_vector_changed(self, _, value):
+        self._color = tuple(value)
+        self._update_color()
+        self.value_changed.emit(self.toolTip(), value)
+
+    def _on_select_color(self):
+        current_color = QtGui.QColor(*self.get_value())
+        alpha_option = QtWidgets.QColorDialog.ShowAlphaChannel
+        color = QtWidgets.QColorDialog.getColor(
+            current_color, self, options=alpha_option)
+        if color.isValid():
+            self.set_value(color.getRgb())
+
+    def _update_vector(self):
+        self._vector.set_value(self._color)
+
+    def _update_color(self):
+        c = [int(max(min(i, 255), 0)) for i in self._color]
+        hex_color = '#{0:02x}{1:02x}{2:02x}{3:03x}'.format(*c)
+        self._button.setStyleSheet(
+            '''
+            QPushButton {{background-color: rgba({0}, {1}, {2}, {3});}}
+            QPushButton::hover {{background-color: rgba({0}, {1}, {2}, {3});}}
+            '''.format(*c)
+        )
+        self._button.setToolTip(
+            'rgba: {}\nhex: {}'.format(self._color, hex_color)
+        )
+
+    def get_value(self):
+        return self._color[:4]
+
+    def set_value(self, value):
+        if value != self.get_value():
+            self._color = value
+            self._update_color()
+            self._update_vector()
+            self.value_changed.emit(self.toolTip(), value)

NodeGraphQt/custom_widgets/properties_bin/node_property_factory.py

@@ -1,5 +1,5 @@
 from NodeGraphQt.constants import NodePropWidgetEnum
-from .custom_widget_color_picker import PropColorPickerRGB
+from .custom_widget_color_picker import PropColorPickerRGB, PropColorPickerRGBA
 from .custom_widget_file_paths import PropFilePath, PropFileSavePath
 from .custom_widget_slider import PropSlider
 from .custom_widget_value_edit import FloatValueEdit, IntValueEdit
@@ -34,6 +34,7 @@ def __init__(self):
             NodePropWidgetEnum.QDOUBLESPIN_BOX.value: PropDoubleSpinBox,
             # custom widgets.
             NodePropWidgetEnum.COLOR_PICKER.value: PropColorPickerRGB,
+            NodePropWidgetEnum.COLOR4_PICKER.value: PropColorPickerRGBA,
             NodePropWidgetEnum.SLIDER.value: PropSlider,
             NodePropWidgetEnum.FILE_OPEN.value: PropFilePath,
             NodePropWidgetEnum.FILE_SAVE.value: PropFileSavePath,

NodeGraphQt/custom_widgets/properties_bin/node_property_widgets.py

@@ -587,6 +587,11 @@ def __init__(self):
                 range=(45, 55),
                 widget_type=NodePropWidgetEnum.SLIDER.value
             )
+            self.create_property(
+                'color4_picker',
+                value=(255, 0, 0, 122),
+                widget_type=NodePropWidgetEnum.COLOR4_PICKER.value
+            )
 
     def _prop_changed(node_id, prop_name, prop_value):
         print('-'*100)