[ux] Show large swatch preview in color/symbol tooltips

Author: nyalldawson

src/core/symbology/qgsstylemodel.cpp

@@ -71,8 +71,29 @@ QVariant QgsStyleModel::data( const QModelIndex &index, int role ) const
         case Name:
         {
           const QStringList tags = mStyle->tagsOfSymbol( isColorRamp ? QgsStyle::ColorrampEntity : QgsStyle::SymbolEntity, name );
-          return role != Qt::ToolTipRole ? name
-                 : QStringLiteral( "<b>%1</b><br><i>%2</i>" ).arg( name, tags.count() > 0 ? tags.join( QStringLiteral( ", " ) ) : tr( "Not tagged" ) );
+
+          if ( role == Qt::ToolTipRole )
+          {
+            QString tooltip = QStringLiteral( "<b>%1</b><br><i>%2</i>" ).arg( name,
+                              tags.count() > 0 ? tags.join( QStringLiteral( ", " ) ) : tr( "Not tagged" ) );
+
+            // create very large preview image
+            std::unique_ptr< QgsSymbol > symbol( mStyle->symbol( name ) );
+            if ( symbol )
+            {
+              int size = static_cast< int >( Qgis::UI_SCALE_FACTOR * QFontMetrics( data( index, Qt::FontRole ).value< QFont >() ).width( 'X' ) * 20 );
+              QPixmap pm = QgsSymbolLayerUtils::symbolPreviewPixmap( symbol.get(), QSize( size, size ), size / 20 );
+              QByteArray data;
+              QBuffer buffer( &data );
+              pm.save( &buffer, "PNG", 100 );
+              tooltip += QStringLiteral( "<p><img src='data:image/png;base64, %3'>" ).arg( QString( data.toBase64() ) );
+            }
+            return tooltip;
+          }
+          else
+          {
+            return name;
+          }
         }
         case Tags:
           return mStyle->tagsOfSymbol( isColorRamp ? QgsStyle::ColorrampEntity : QgsStyle::SymbolEntity, name ).join( QStringLiteral( ", " ) );

src/gui/qgscolorbutton.cpp

@@ -157,14 +157,43 @@ bool QgsColorButton::event( QEvent *e )
 {
   if ( e->type() == QEvent::ToolTip )
   {
-    QString name = this->color().name();
-    int hue = this->color().hue();
-    int value = this->color().value();
-    int saturation = this->color().saturation();
-    QString info = QString( "HEX: %1 \n"
-                            "RGB: %2 \n"
-                            "HSV: %3,%4,%5" ).arg( name,
-                                QgsSymbolLayerUtils::encodeColor( this->color() ) )
+    QString name = mColor.name();
+    int hue = mColor.hue();
+    int value = mColor.value();
+    int saturation = mColor.saturation();
+
+    // create very large preview swatch
+    int size = static_cast< int >( Qgis::UI_SCALE_FACTOR * fontMetrics().width( 'X' ) * 15 );
+    int margin = static_cast< int >( size * 0.1 );
+    QImage icon = QImage( size + 2 * margin, size + 2 * margin, QImage::Format_ARGB32 );
+    icon.fill( Qt::transparent );
+
+    QPainter p;
+    p.begin( &icon );
+
+    //start with checkboard pattern
+    QBrush checkBrush = QBrush( transparentBackground() );
+    p.setPen( Qt::NoPen );
+    p.setBrush( checkBrush );
+    p.drawRect( margin, margin, size, size );
+
+    //draw color over pattern
+    p.setBrush( QBrush( mColor ) );
+
+    //draw border
+    p.setPen( QColor( 197, 197, 197 ) );
+    p.drawRect( margin, margin, size, size );
+    p.end();
+
+    QByteArray data;
+    QBuffer buffer( &data );
+    icon.save( &buffer, "PNG", 100 );
+
+    QString info = QStringLiteral( "<b>HEX</b> %1<br>"
+                                   "<b>RGB</b> %2<br>"
+                                   "<b>HSV</b> %3,%4,%5<p>"
+                                   "<img src='data:image/png;base64, %0'>" ).arg( QString( data.toBase64() ), name,
+                                       QgsSymbolLayerUtils::encodeColor( this->color() ) )
                    .arg( hue ).arg( saturation ).arg( value );
     setToolTip( info );
   }

src/gui/qgscolorswatchgrid.cpp

@@ -15,10 +15,12 @@
 
 #include "qgscolorswatchgrid.h"
 #include "qgsapplication.h"
+#include "qgssymbollayerutils.h"
 #include "qgslogger.h"
 #include <QPainter>
 #include <QMouseEvent>
 #include <QMenu>
+#include <QBuffer>
 
 #define NUMBER_COLORS_PER_ROW 10 //number of color swatches per row
 
@@ -115,15 +117,51 @@ void QgsColorSwatchGrid::updateTooltip( const int colorIdx )
 {
   if ( colorIdx >= 0 && colorIdx < mColors.length() )
   {
+    QColor color = mColors.at( colorIdx ).first;
+
     //if color has an associated name from the color scheme, use that
     QString colorName = mColors.at( colorIdx ).second;
-    if ( colorName.isEmpty() )
-    {
-      //otherwise, build a default string
-      QColor color = mColors.at( colorIdx ).first;
-      colorName = QString( tr( "rgb(%1, %2, %3)" ) ).arg( color.red() ).arg( color.green() ).arg( color.blue() );
-    }
-    setToolTip( colorName );
+
+    // create very large preview swatch, because the grid itself has only tiny preview icons
+    int size = static_cast< int >( Qgis::UI_SCALE_FACTOR * fontMetrics().width( 'X' ) * 15 );
+    int margin = static_cast< int >( size * 0.1 );
+    QImage icon = QImage( size + 2 * margin, size + 2 * margin, QImage::Format_ARGB32 );
+    icon.fill( Qt::transparent );
+
+    QPainter p;
+    p.begin( &icon );
+
+    //start with checkboard pattern
+    QBrush checkBrush = QBrush( transparentBackground() );
+    p.setPen( Qt::NoPen );
+    p.setBrush( checkBrush );
+    p.drawRect( margin, margin, size, size );
+
+    //draw color over pattern
+    p.setBrush( QBrush( mColors.at( colorIdx ).first ) );
+
+    //draw border
+    p.setPen( QColor( 197, 197, 197 ) );
+    p.drawRect( margin, margin, size, size );
+    p.end();
+
+    QByteArray data;
+    QBuffer buffer( &data );
+    icon.save( &buffer, "PNG", 100 );
+
+    QString info;
+    if ( !colorName.isEmpty() )
+      info += QStringLiteral( "<h3>%1</h3><p>" ).arg( colorName );
+
+    info += QStringLiteral( "<b>HEX</b> %1<br>"
+                            "<b>RGB</b> %2<br>"
+                            "<b>HSV</b> %3,%4,%5<p>" ).arg( color.name(),
+                                QgsSymbolLayerUtils::encodeColor( color ) )
+            .arg( color.hue() ).arg( color.saturation() ).arg( color.value() );
+    info += QStringLiteral( "<img src='data:image/png;base64, %0'>" ).arg( QString( data.toBase64() ) );
+
+    setToolTip( info );
+
   }
   else
   {