From d1a2e5c171d41f2afc03204ee30f7852aac6643c Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Wed, 3 Aug 2022 09:43:52 +0200 Subject: [PATCH] Material 3: Calculate real pixels from device-independent pixels Resolves #210 --- skins/material3/QskMaterial3Skin.cpp | 172 +++++++++++++++------------ 1 file changed, 99 insertions(+), 73 deletions(-) diff --git a/skins/material3/QskMaterial3Skin.cpp b/skins/material3/QskMaterial3Skin.cpp index dc60d1bf..f8b289a5 100644 --- a/skins/material3/QskMaterial3Skin.cpp +++ b/skins/material3/QskMaterial3Skin.cpp @@ -45,8 +45,8 @@ #include #include -#include -#include +#include +#include static const int qskDuration = 150; @@ -61,13 +61,39 @@ namespace { factor = 1.0; -#if 0 if ( const auto screen = QGuiApplication::primaryScreen() ) { - // is this calculation correct ? TODO ... - factor = screen->logicalDotsPerInch() / 160.0; + const qreal pdpi = screen->physicalDotsPerInch(); + qreal dpi; + + // calculate buckets according to https://developer.android.com/training/multiscreen/screendensities + if( pdpi <= 140.0 ) + { + dpi = 120.0; // ldpi + } + else if( pdpi <= 200.0 ) + { + dpi = 160.0; // mdpi + } + else if( pdpi <= 280.0 ) + { + dpi = 240.0; // hdpi + } + else if( pdpi <= 400.0 ) + { + dpi = 320.0; // xhdpi + } + else if( pdpi <= 560.0 ) + { + dpi = 480.0; // xxhdpi + } + else + { + dpi = 640.0; // xxxhdpi + } + + factor = dpi / 160.0; } -#endif } return value * factor; @@ -186,7 +212,7 @@ void Editor::setupControl() { using A = QskAspect; - setPadding( A::Control, 11 ); + setPadding( A::Control, 11_dp ); setGradient( A::Control, m_pal.background ); setColor( A::Control | A::StyleColor, m_pal.onBackground ); @@ -196,13 +222,13 @@ void Editor::setupCheckBox() { using Q = QskCheckBox; - setSpacing( Q::Panel, 10 ); + setSpacing( Q::Panel, 10_dp ); - setStrutSize( Q::Box, 24, 24 ); + setStrutSize( Q::Box, 24_dp, 24_dp ); - setPadding( Q::Box, 6 ); - setBoxShape( Q::Box, 2 ); - setBoxBorderMetrics( Q::Box, 2 ); + setPadding( Q::Box, 6_dp ); + setBoxShape( Q::Box, 2_dp ); + setBoxBorderMetrics( Q::Box, 2_dp ); setBoxBorderColors( Q::Box, m_pal.onBackground ); setBoxBorderMetrics( Q::Box | Q::Checked, 0 ); @@ -243,7 +269,7 @@ void Editor::setupMenu() using A = QskAspect; using Q = QskMenu; - setBoxShape( Q::Panel, 4 ); + setBoxShape( Q::Panel, 4_dp ); setBoxBorderMetrics( Q::Panel, 0 ); setPadding( Q::Panel, 0 ); @@ -255,25 +281,25 @@ void Editor::setupMenu() setShadowMetrics( Q::Panel, m_pal.elevationLight2 ); setShadowColor( Q::Panel, m_pal.shadow ); - setMetric( Q::Separator | A::Size, qskDpiScaled( 1 ) ); + setMetric( Q::Separator | A::Size, 1_dp ); setBoxShape( Q::Separator, 0 ); setBoxBorderMetrics( Q::Separator, 0 ); setGradient( Q::Separator, m_pal.primary12 ); - setPadding( Q::Segment, 6 ); - setSpacing( Q::Segment, 5 ); + setPadding( Q::Segment, 6_dp ); + setSpacing( Q::Segment, 5_dp ); setGradient( Q::Segment, Qt::transparent ); setGradient( Q::Cursor, m_pal.primary12 ); - setPadding( Q::Graphic, 7 ); - setStrutSize( Q::Graphic, { 46, -1 } ); + setPadding( Q::Graphic, 7_dp ); + setStrutSize( Q::Graphic, { 46_dp, -1 } ); setColor( Q::Text, m_pal.onSurface ); setFontRole( Q::Text, QskMaterial3Skin::M3BodyMedium ); setPosition( Q::Panel, 0 ); - setPosition( Q::Panel | QskPopup::Closed, 1 ); + setPosition( Q::Panel | QskPopup::Closed, 1_dp ); setAnimation( Q::Panel | A::Metric, 150 ); setAnimation( Q::Cursor | A::Position | A::Metric, 75, QEasingCurve::OutCubic ); @@ -286,7 +312,7 @@ void Editor::setupTextLabel() setAlignment( Q::Text, Qt::AlignCenter ); setColor( Q::Text, m_pal.onSurface ); - setPadding( Q::Panel, 5 ); + setPadding( Q::Panel, 5_dp ); } @@ -298,25 +324,25 @@ void Editor::setupTextInput() setColor( Q::Text, m_pal.onBackground ); - setPadding( Q::Panel, 5 ); - setBoxShape( Q::Panel, 4, 4, 0, 0 ); - setBoxBorderMetrics( Q::Panel, 0, 0, 0, 1 ); + setPadding( Q::Panel, 5_dp ); + setBoxShape( Q::Panel, 4_dp, 4_dp, 0, 0 ); + setBoxBorderMetrics( Q::Panel, 0, 0, 0, 1_dp ); setBoxBorderColors( Q::Panel, m_pal.onSurface ); - setBoxBorderMetrics( Q::Panel | Q::Focused, 0, 0, 0, 2 ); + setBoxBorderMetrics( Q::Panel | Q::Focused, 0, 0, 0, 2_dp ); setBoxBorderColors( Q::Panel | Q::Focused, m_pal.primary ); - setBoxBorderMetrics( Q::Panel | Q::Editing, 0, 0, 0, 2 ); + setBoxBorderMetrics( Q::Panel | Q::Editing, 0, 0, 0, 2_dp ); setBoxBorderColors( Q::Panel | Q::Editing, m_pal.primary ); - setBoxBorderMetrics( Q::Panel | Q::Hovered, 0, 0, 0, 1 ); + setBoxBorderMetrics( Q::Panel | Q::Hovered, 0, 0, 0, 1_dp ); setBoxBorderColors( Q::Panel | Q::Hovered, m_pal.onSurface ); setGradient( Q::Panel, m_pal.surfaceVariant ); const auto c1 = QskRgb::toTransparentF( m_pal.onSurface, 0.04 ); setGradient( Q::Panel | Q::Disabled, c1 ); - setBoxBorderMetrics( Q::Panel | Q::Disabled, 0, 0, 0, 1 ); + setBoxBorderMetrics( Q::Panel | Q::Disabled, 0, 0, 0, 1_dp ); setColor( Q::Text | Q::Disabled, m_pal.onSurface38 ); setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface38 ); @@ -327,7 +353,7 @@ void Editor::setupProgressBar() using A = QskAspect; using Q = QskProgressBar; - auto size = qskDpiScaled( 5 ); + auto size = 5_dp; for ( auto subControl : { Q::Groove, Q::Bar } ) { @@ -359,7 +385,7 @@ void Editor::setupSegmentedBar() using A = QskAspect; using Q = QskSegmentedBar; - const QSize strutSize( -1, 40 ); + const QSize strutSize( -1, 40_dp ); { // Panel @@ -369,7 +395,7 @@ void Editor::setupSegmentedBar() setBoxShape( Q::Panel, 100, Qt::RelativeSize ); - setBoxBorderMetrics( Q::Panel, 1 ); + setBoxBorderMetrics( Q::Panel, 1_dp ); setBoxBorderColors( Q::Panel, m_pal.outline ); setBoxBorderColors( Q::Panel | Q::Disabled, m_pal.onSurface12 ); @@ -387,8 +413,8 @@ void Editor::setupSegmentedBar() { // Separator - setStrutSize( Q::Separator | A::Horizontal, 1, strutSize.height() ); - setStrutSize( Q::Separator | A::Vertical, strutSize.height(), 1 ); + setStrutSize( Q::Separator | A::Horizontal, 1_dp, strutSize.height() ); + setStrutSize( Q::Separator | A::Vertical, strutSize.height(), 1_dp ); setPadding( Q::Separator, 0 ); setGradient( Q::Separator, m_pal.outline ); setColor( Q::Separator | Q::Disabled, m_pal.onSurface38 ); @@ -396,7 +422,7 @@ void Editor::setupSegmentedBar() { // Cursor - setMargin( Q::Cursor, 1 ); + setMargin( Q::Cursor, 1_dp ); setBoxShape( Q::Cursor, 0 ); setBoxShape( Q::Cursor | Q::Minimum | A::Horizontal, @@ -435,8 +461,8 @@ void Editor::setupSegmentedBar() { // Graphic - setPadding( Q::Graphic, 10 ); - setMargin( Q::Graphic, 10 ); + setPadding( Q::Graphic, 10_dp ); + setMargin( Q::Graphic, 10_dp ); } } @@ -449,7 +475,7 @@ void Editor::setupSeparator() { const auto aspect = Q::Panel | placement; - setMetric( aspect | A::Size, 4 ); + setMetric( aspect | A::Size, 4_dp ); setBoxShape( Q::Panel, 0 ); setBoxBorderMetrics( Q::Panel, 0 ); setGradient( aspect, m_pal.background ); @@ -460,7 +486,7 @@ void Editor::setupPageIndicator() { using Q = QskPageIndicator; - const auto extent = qskDpiScaled( 9 ); + const auto extent = 9_dp; setStrutSize( Q::Bullet, extent, extent ); // circles, without border @@ -473,7 +499,7 @@ void Editor::setupPageIndicator() setGradient( Q::Bullet | Q::Disabled, m_pal.onSurface12 ); setGradient( Q::Bullet | Q::Selected | Q::Disabled, m_pal.onSurface38 ); - setSpacing( Q::Panel, qskDpiScaled( 3 ) ); + setSpacing( Q::Panel, 3_dp ); setPadding( Q::Panel, 0 ); setGradient( Q::Panel, QskGradient() ); // invisible } @@ -484,9 +510,9 @@ void Editor::setupPushButton() using Q = QskPushButton; setFlagHint( Q::Panel | QskAspect::Direction, Qsk::LeftToRight ); - setStrutSize( Q::Panel, -1, 31 ); - setSpacing( Q::Panel, qskDpiScaled( 4 ) ); - setPadding( Q::Panel, { 24, 0, 20, 0 } ); + setStrutSize( Q::Panel, -1, 31_dp ); + setSpacing( Q::Panel, 4_dp ); + setPadding( Q::Panel, { 24_dp, 0, 20_dp, 0 } ); setBoxShape( Q::Panel, 100, Qt::RelativeSize ); @@ -533,9 +559,9 @@ void Editor::setupDialogButton() { using Q = QskDialogButton; - setStrutSize( Q::Panel, 48, -1 ); - setSpacing( Q::Panel, 8 ); - setPadding( Q::Panel, { 12, 13, 12, 13 } ); + setStrutSize( Q::Panel, 48_dp, -1 ); + setSpacing( Q::Panel, 8_dp ); + setPadding( Q::Panel, { 12_dp, 13_dp, 12_dp, 13_dp } ); setBoxShape( Q::Panel, 100, Qt::RelativeSize ); setGradient( Q::Panel, m_pal.secondaryContainer ); @@ -560,7 +586,7 @@ void Editor::setupSlider() using A = QskAspect; using Q = QskSlider; - const qreal extent = 30; + const qreal extent = 30_dp; // Panel @@ -582,8 +608,8 @@ void Editor::setupSlider() setBoxBorderMetrics( subControl, 0 ); } - setMetric( Q::Groove | A::Size, qskDpiScaled( 4 ) ); - setMetric( Q::Fill | A::Size, qskDpiScaled( 6 ) ); + setMetric( Q::Groove | A::Size, 4_dp ); + setMetric( Q::Fill | A::Size, 6_dp ); setGradient( Q::Groove, m_pal.primaryContainer ); setGradient( Q::Groove | Q::Disabled, m_pal.onSurface12 ); @@ -594,7 +620,7 @@ void Editor::setupSlider() setBoxShape( Q::Handle, 100, Qt::RelativeSize ); setBoxBorderMetrics( Q::Handle, 0 ); - setStrutSize( Q::Handle, { 20, 20 } ); + setStrutSize( Q::Handle, { 20_dp, 20_dp } ); setGradient( Q::Handle, m_pal.primary ); setGradient( Q::Handle | Q::Pressed, m_pal.primary ); @@ -602,7 +628,7 @@ void Editor::setupSlider() const auto disabledColor = flattenedColor( m_pal.onSurface, m_pal.background, 0.38 ); setGradient( Q::Handle | Q::Disabled, disabledColor ); - setStrutSize( Q::Ripple, { 40, 40 } ); + setStrutSize( Q::Ripple, { 40_dp, 40_dp } ); setBoxShape( Q::Ripple, 100, Qt::RelativeSize ); setGradient( Q::Ripple, Qt::transparent ); setGradient( Q::Ripple | Q::Hovered, m_pal.primary12 ); @@ -619,7 +645,7 @@ void Editor::setupSwitchButton() using Q = QskSwitchButton; setBoxShape( Q::Groove, 100, Qt::RelativeSize ); - const QSizeF strutSize( 52, 32 ); + const QSizeF strutSize( 52_dp, 32_dp ); setStrutSize( Q::Groove | A::Horizontal, strutSize ); setStrutSize( Q::Groove | A::Vertical, strutSize.transposed() ); setGradient( Q::Groove, m_pal.surfaceVariant ); @@ -628,14 +654,14 @@ void Editor::setupSwitchButton() setGradient( Q::Groove | Q::Checked, m_pal.primary ); setGradient( Q::Groove | Q::Checked | Q::Disabled, m_pal.onSurface12 ); - setBoxBorderMetrics( Q::Groove, 2 ); + setBoxBorderMetrics( Q::Groove, 2_dp ); setBoxBorderColors( Q::Groove, m_pal.outline ); setBoxBorderMetrics( Q::Groove | Q::Checked, 0 ); setBoxShape( Q::Handle, 100, Qt::RelativeSize ); - setStrutSize( Q::Handle, 16, 16 ); - setStrutSize( Q::Handle | Q::Checked, 24, 24, { QskStateCombination::CombinationNoState, Q::Disabled } ); + setStrutSize( Q::Handle, 16_dp, 16_dp ); + setStrutSize( Q::Handle | Q::Checked, 24_dp, 24_dp, { QskStateCombination::CombinationNoState, Q::Disabled } ); setGradient( Q::Handle, m_pal.outline ); setGradient( Q::Handle | Q::Checked, m_pal.primaryContainer ); @@ -644,10 +670,10 @@ void Editor::setupSwitchButton() setGradient( Q::Handle | Q::Disabled | Q::Checked, m_pal.surface ); // just to keep the strut size the same at all times: - setStrutSize( Q::Ripple, 40, 40 ); + setStrutSize( Q::Ripple, 40_dp, 40_dp ); setGradient( Q::Ripple, Qt::transparent ); - setStrutSize( Q::Ripple | Q::Hovered, 40, 40 ); + setStrutSize( Q::Ripple | Q::Hovered, 40_dp, 40_dp ); setBoxShape( Q::Ripple, 100, Qt::RelativeSize ); setGradient( Q::Ripple | Q::Hovered, stateLayerColor( m_pal.onSurface, m_pal.focusOpacity ) ); setGradient( Q::Ripple | Q::Hovered | Q::Checked, stateLayerColor( m_pal.primary, m_pal.focusOpacity ) ); @@ -673,7 +699,7 @@ void Editor::setupTabButton() using A = QskAspect; using Q = QskTabButton; - setStrutSize( Q::Panel, 48, 48 ); + setStrutSize( Q::Panel, 48_dp, 48_dp ); setGradient( Q::Panel, m_pal.surface ); setColor( Q::Text, m_pal.onSurfaceVariant ); @@ -712,7 +738,7 @@ void Editor::setupTabButton() } QskBoxBorderMetrics border; - border.setWidthAt( edge, 3 ); + border.setWidthAt( edge, 3_dp ); setBoxBorderMetrics( aspect, border ); QskBoxBorderColors borderColors( m_pal.surface ); @@ -787,10 +813,10 @@ void Editor::setupVirtualKeyboard() using Q = QskVirtualKeyboard; // key panel - setMargin( Q::ButtonPanel, 2 ); + setMargin( Q::ButtonPanel, 2_dp ); setBoxShape( Q::ButtonPanel, 20.0, Qt::RelativeSize ); - setBoxBorderMetrics( Q::ButtonPanel, 2 ); + setBoxBorderMetrics( Q::ButtonPanel, 2_dp ); setBoxBorderColors( Q::ButtonPanel, m_pal.background ); for ( auto state : { A::NoState, Q::Focused } ) @@ -818,17 +844,17 @@ void Editor::setupScrollView() for ( auto subControl : { Q::HorizontalScrollBar, Q::VerticalScrollBar } ) { - setMetric( subControl | A::Size, 10 ); + setMetric( subControl | A::Size, 10_dp ); setPadding( subControl, 0 ); } - const auto handleExtent = qskDpiScaled( 40.0 ); + const auto handleExtent = 40_dp; setStrutSize( Q::HorizontalScrollHandle, handleExtent, 0.0 ); setStrutSize( Q::VerticalScrollHandle, 0.0, handleExtent ); for ( auto subControl : { Q::HorizontalScrollHandle, Q::VerticalScrollHandle } ) { - setBoxShape( subControl, 3 ); + setBoxShape( subControl, 3_dp ); setBoxBorderMetrics( subControl, 0 ); setGradient( subControl, m_pal.primary ); setAnimation( subControl | A::Color, qskDuration ); @@ -842,8 +868,8 @@ void Editor::setupListView() { using Q = QskListView; - setPadding( Q::Cell, { 16, 12, 16, 12 } ); - setBoxBorderMetrics( Q::Cell, { 0, 0, 0, 1 } ); + setPadding( Q::Cell, { 16_dp, 12_dp, 16_dp, 12_dp } ); + setBoxBorderMetrics( Q::Cell, { 0, 0, 0, 1_dp } ); setBoxBorderColors( Q::Cell, m_pal.outline ); setColor( Q::Cell, m_pal.surface ); setColor( Q::Cell | Q::Selected, m_pal.primary12 ); @@ -858,17 +884,17 @@ void Editor::setupSubWindow() // Panel - setPadding( Q::Panel, { 24, 0, 24, 24 } ); - setStrutSize( Q::Panel, { 280, -1 } ); - setBoxShape( Q::Panel, 28 ); + setPadding( Q::Panel, { 24_dp, 0, 24_dp, 24_dp } ); + setStrutSize( Q::Panel, { 280_dp, -1 } ); + setBoxShape( Q::Panel, 28_dp ); setBoxBorderMetrics( Q::Panel, 0 ); setGradient( Q::Panel, m_pal.secondaryContainer ); setShadowMetrics( Q::Panel, m_pal.elevationLight3 ); setShadowColor( Q::Panel, m_pal.shadow ); // TitleBarPanel - setBoxShape( Q::TitleBarPanel, { 28, 28, 0, 0 } ); - setPadding( Q::TitleBarPanel, { 24, 24, 24, 16 } ); + setBoxShape( Q::TitleBarPanel, { 28_dp, 28_dp, 0, 0 } ); + setPadding( Q::TitleBarPanel, { 24_dp, 24_dp, 24_dp, 16_dp } ); setFlagHint( Q::TitleBarPanel | QskAspect::Style, Q::TitleBar | Q::Title | Q::Symbol ); @@ -1005,10 +1031,10 @@ void QskMaterial3Skin::setupFonts() { Inherited::setupFonts( QStringLiteral( "Roboto" ) ); - setFont( M3BodyMedium, createFont( 14, 0.25, QFont::Normal ) ); - setFont( M3BodyLarge, createFont( 16, 0.5, QFont::Normal ) ); - setFont( M3HeadlineSmall, createFont( 28, 0.0, QFont::Normal ) ); - setFont( M3LabelLarge, createFont( 14, 0.1, QFont::Medium ) ); + setFont( M3BodyMedium, createFont( 14_dp, 0.25, QFont::Normal ) ); + setFont( M3BodyLarge, createFont( 16_dp, 0.5, QFont::Normal ) ); + setFont( M3HeadlineSmall, createFont( 28_dp, 0.0, QFont::Normal ) ); + setFont( M3LabelLarge, createFont( 14_dp, 0.1, QFont::Medium ) ); } #include "moc_QskMaterial3Skin.cpp"