Delayed rendering leads to ugly UI #173

prolic · 2022-06-16T00:12:54Z

I attached two video to demonstrate the problem.

The rounded corners ( styleBasic [ radius 4 ] ) are appearing, but very often it takes a second, which is kind of annoying. Not only tooltips are affected, but also buttons.

pl-next-2022-06-15_20.03.58.mp4

Here in the second video you can see the same quick flicker for buttons, overlays and close icons.

pl-next-2022-06-15_20.09.38.mp4

The text was updated successfully, but these errors were encountered:

fjvallarino · 2022-06-17T03:41:15Z

Do you have a minimal example I can use to reproduce the issue? I tried with the following (it's a modified version of Tutorial 02), but it looks good for me (tested on macOS and Ubuntu 21.04):

{-|
Module      : Tutorial02_Styling
Copyright   : (c) 2018 Francisco Vallarino
License     : BSD-3-Clause (see the LICENSE file)
Maintainer  : fjvallarino@gmail.com
Stability   : experimental
Portability : non-portable

Main module for the '02 - Styling' tutorial.
-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TemplateHaskell #-}

module Tutorial02_Styling where

import Control.Lens
import Data.Text (Text)
import Monomer

import qualified Monomer.Lens as L

data AppModel = AppModel {
  _sampleText :: Text,
  _showPicker :: Bool,
  _fontName :: Font,
  _fontSize :: Double,
  _fontColor :: Color,
  _topVisible :: Bool,
  _compVal :: ()
} deriving (Eq, Show)

data AppEvent
  = AppInit
  | AppShow
  | AppHide
  deriving (Eq, Show)

makeLenses 'AppModel

buildComp :: WidgetEnv () () -> () -> WidgetNode () ()
buildComp wenv model = vstack [
    tooltip "Test" (button "AAAA" ())
  ] `styleBasic` [minHeight 100, bgColor gray]

handleComp :: WidgetEnv () () -> WidgetNode () () -> () -> () -> [EventResponse () () AppModel AppEvent]
handleComp wenv node model evt = [
    Report AppHide
  ]

buildUI
  :: WidgetEnv AppModel AppEvent
  -> AppModel
  -> WidgetNode AppModel AppEvent
buildUI wenv model = widgetTree where
  widgetTree = zstack [
      bottomPanel,
      topPanel
        `nodeVisible` (model ^. topVisible)
    ]
  topPanel = composite "" compVal buildComp handleComp

  bottomPanel = vstack [
      titleText "Text",
      box (textField sampleText) `styleBasic` [paddingV 10],

      tooltip "Test" (button "AAAA" AppShow),

      titleText "Font name",
      hgrid [
        hstack [
          labeledRadio "Regular " "Regular" fontName,
          filler
        ],
        hstack [
          labeledRadio "Medium " "Medium" fontName,
          filler
        ],
        hstack [
          labeledRadio "Bold " "Bold" fontName,
          filler
        ],
        hstack [
          labeledRadio "Italic " "Italic" fontName
        ]
      ] `styleBasic` [paddingV 10],

      titleText "Font size",
      hslider fontSize 10 200
        `styleBasic` [paddingV 10, fgColor orange],

      titleText "Font color",
      hstack [
        labeledCheckbox "Show color picker " showPicker,
        filler
      ] `styleBasic` [paddingT 10, paddingB 5],
      colorPicker fontColor
        `nodeVisible` (model ^. showPicker)
        `styleBasic` [paddingB 10],

      sampleTextLabel
    ] `styleBasic` [padding 10]

  titleText text = label text
    `styleBasic` [textFont "Medium", textSize 20]

  sampleTextLabel = label_ (model ^. sampleText) [ellipsis]
    `styleBasic` [
      bgColor dimGray,
      border 4 lightGray,
      radius 10,
      textFont (model ^. fontName),
      textSize (model ^. fontSize),
      textColor (model ^. fontColor),
      textCenter,
      flexHeight 100]

handleEvent
  :: WidgetEnv AppModel AppEvent
  -> WidgetNode AppModel AppEvent
  -> AppModel
  -> AppEvent
  -> [AppEventResponse AppModel AppEvent]
handleEvent wenv node model evt = case evt of
  AppInit -> []
  AppShow -> [Model $ model & topVisible .~ True]
  AppHide -> [Model $ model & topVisible .~ False]

main02 :: IO ()
main02 = do
  startApp model handleEvent buildUI config
  where
    config = [
      appWindowTitle "Tutorial 02 - Styling",
      appWindowIcon "./assets/images/icon.bmp",
      appTheme darkTheme,
      appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
      appFontDef "Medium" "./assets/fonts/Roboto-Medium.ttf",
      appFontDef "Bold" "./assets/fonts/Roboto-Bold.ttf",
      appFontDef "Italic" "./assets/fonts/Roboto-Italic.ttf",
      appInitEvent AppInit
      ]
    model = AppModel {
      _sampleText = "Hello World!",
      _showPicker = False,
      _fontName = "Regular",
      _fontSize = 24,
      _fontColor = white,
      _topVisible = False,
      _compVal = ()
    }

prolic · 2022-06-17T04:42:54Z

Try to use this as widget within the main UI.

…

On Thu, Jun 16, 2022, 23:41 Francisco Vallarino ***@***.***> wrote: Do you have a minimal example I can use to reproduce the issue? I tried with the following (it's a modified version of Tutorial 02), but it looks good for me (tested on macOS and Ubuntu 21.04): {-|Module : Tutorial02_StylingCopyright : (c) 2018 Francisco VallarinoLicense : BSD-3-Clause (see the LICENSE file)Maintainer : ***@***.*** : experimentalPortability : non-portableMain module for the '02 - Styling' tutorial.-} {-# LANGUAGE OverloadedStrings #-} {-# LANGUAGE TemplateHaskell #-} module Tutorial02_Styling where import Control.Lensimport Data.Text (Text)import Monomer import qualified Monomer.Lens as L data AppModel = AppModel { _sampleText :: Text, _showPicker :: Bool, _fontName :: Font, _fontSize :: Double, _fontColor :: Color, _topVisible :: Bool, _compVal :: ()} deriving (Eq, Show) data AppEvent = AppInit | AppShow | AppHide deriving (Eq, Show) makeLenses 'AppModel buildComp :: WidgetEnv () () -> () -> WidgetNode () () buildComp wenv model = vstack [ tooltip "Test" (button "AAAA" ()) ] `styleBasic` [minHeight 100, bgColor gray] handleComp :: WidgetEnv () () -> WidgetNode () () -> () -> () -> [EventResponse () () AppModel AppEvent] handleComp wenv node model evt = [ Report AppHide ] buildUI :: WidgetEnv AppModel AppEvent -> AppModel -> WidgetNode AppModel AppEvent buildUI wenv model = widgetTree where widgetTree = zstack [ bottomPanel, topPanel `nodeVisible` (model ^. topVisible) ] topPanel = composite "" compVal buildComp handleComp bottomPanel = vstack [ titleText "Text", box (textField sampleText) `styleBasic` [paddingV 10], tooltip "Test" (button "AAAA" AppShow), titleText "Font name", hgrid [ hstack [ labeledRadio "Regular " "Regular" fontName, filler ], hstack [ labeledRadio "Medium " "Medium" fontName, filler ], hstack [ labeledRadio "Bold " "Bold" fontName, filler ], hstack [ labeledRadio "Italic " "Italic" fontName ] ] `styleBasic` [paddingV 10], titleText "Font size", hslider fontSize 10 200 `styleBasic` [paddingV 10, fgColor orange], titleText "Font color", hstack [ labeledCheckbox "Show color picker " showPicker, filler ] `styleBasic` [paddingT 10, paddingB 5], colorPicker fontColor `nodeVisible` (model ^. showPicker) `styleBasic` [paddingB 10], sampleTextLabel ] `styleBasic` [padding 10] titleText text = label text `styleBasic` [textFont "Medium", textSize 20] sampleTextLabel = label_ (model ^. sampleText) [ellipsis] `styleBasic` [ bgColor dimGray, border 4 lightGray, radius 10, textFont (model ^. fontName), textSize (model ^. fontSize), textColor (model ^. fontColor), textCenter, flexHeight 100] handleEvent :: WidgetEnv AppModel AppEvent -> WidgetNode AppModel AppEvent -> AppModel -> AppEvent -> [AppEventResponse AppModel AppEvent] handleEvent wenv node model evt = case evt of AppInit -> [] AppShow -> [Model $ model & topVisible .~ True] AppHide -> [Model $ model & topVisible .~ False] main02 :: IO () main02 = do startApp model handleEvent buildUI config where config = [ appWindowTitle "Tutorial 02 - Styling", appWindowIcon "./assets/images/icon.bmp", appTheme darkTheme, appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf", appFontDef "Medium" "./assets/fonts/Roboto-Medium.ttf", appFontDef "Bold" "./assets/fonts/Roboto-Bold.ttf", appFontDef "Italic" "./assets/fonts/Roboto-Italic.ttf", appInitEvent AppInit ] model = AppModel { _sampleText = "Hello World!", _showPicker = False, _fontName = "Regular", _fontSize = 24, _fontColor = white, _topVisible = False, _compVal = () } — Reply to this email directly, view it on GitHub <#173 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADAJPBQW4C5LZIFHKDSXV3VPPXWNANCNFSM5Y5BEFIA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

fjvallarino · 2022-06-17T14:25:18Z

I'm not sure I follow. The example I pasted has a composite embedded in the main UI and a zstack to simulate what you show in the videos. If possible, could you modify the example and paste it here with your proposed changes?

prolic · 2022-06-17T18:49:56Z

That's weird, I can reproduce the issue with your example. See attached video.

pl-next-2022-06-17_14.49.04.mp4

fjvallarino · 2022-06-17T19:35:43Z

I assume that's Linux. What window manager are you using? I can create a VM to test it in the next few days.

prolic · 2022-06-18T03:08:16Z

Kubuntu 20.04
KDE Plasma 5.18.8
KDE Frameworks 5.68.0
Qt Version: 5.12.8

dimsuz · 2022-10-18T00:19:24Z

By the way, probably related issue happens for me with 100% reproduceability on any widget with rounded corners.

Here's what I see after start:

Note that what's different from OP, for me it stays this way until I move the mouse. And then it immediately becomes this:

And this is the "style" bit for this widget:

    vstack
      [header, diff]
      `styleBasic` [border 1 borderColor, radius 10]

radius 6 looks like this:

And sometimes successive launches lead to different artifacts, for example here's the same radius 6, but for some reason only right corners are "glitchy":

System Details:

Renderer: AMD Radeon RX 5500 XT (navi14, LLVM 14.0.6, DRM 3.48, 6.0.1-arch2-1)
Version: 4.6 (Core Profile) Mesa 22.2.1
OS: ArchLinux, kernel 6.0.1-arch2-1
Desktop: GNOME 42.1, Wayland
Monomer: 1.5.0.0

fjvallarino · 2022-10-21T12:38:29Z

I created a PR with a fix/workaround that solves the issue, at least on my end. This seems to be somehow platform dependent, since it does not happen on my older machine (which is the reason I could not work on it earlier): #215

You can test the fix by modifying your stack.yaml to point to:

- git: https://github.com/fjvallarino/monomer.git
  commit: 53647710e856da733d69fcf1639976e5824cbb0d

dimsuz · 2022-10-21T23:08:55Z

I can confirm: with this commit I have no more rounded corners artifacts I described in #173 (comment). Nice and clean now! 👍

prolic · 2022-10-22T00:25:06Z

I will try to verify this weekend as well.

…

On Fri, Oct 21, 2022, 20:09 dimsuz ***@***.***> wrote: I can confirm: with this commit I have no more rounded corners artifacts I described in #173 (comment) <#173 (comment)>. Nice and clean now! 👍 — Reply to this email directly, view it on GitHub <#173 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADAJPG6E5LABX6WOD3O4GLWEMPBFANCNFSM5Y5BEFIA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

fjvallarino · 2022-10-31T11:00:40Z

I feel the solution/workaround for #180 could be something similar to what was done for this issue.

I'll close the issue for the time being, since it appears to work correctly now. If you happen to test it and it does not work as expected, please let me know (re-open the issue or create a new one, as you prefer). Thanks!

fjvallarino added the bug Something isn't working correctly label Jun 16, 2022

fjvallarino added the platform issue Issue happening on specific platform label Jun 18, 2022

fjvallarino closed this as completed Oct 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Delayed rendering leads to ugly UI #173

Delayed rendering leads to ugly UI #173

prolic commented Jun 16, 2022

fjvallarino commented Jun 17, 2022

prolic commented Jun 17, 2022 via email

fjvallarino commented Jun 17, 2022

prolic commented Jun 17, 2022

fjvallarino commented Jun 17, 2022 •

edited

prolic commented Jun 18, 2022

dimsuz commented Oct 18, 2022 •

edited

fjvallarino commented Oct 21, 2022

dimsuz commented Oct 21, 2022

prolic commented Oct 22, 2022 via email

fjvallarino commented Oct 31, 2022

Delayed rendering leads to ugly UI #173

Delayed rendering leads to ugly UI #173

Comments

prolic commented Jun 16, 2022

fjvallarino commented Jun 17, 2022

prolic commented Jun 17, 2022 via email

fjvallarino commented Jun 17, 2022

prolic commented Jun 17, 2022

fjvallarino commented Jun 17, 2022 • edited

prolic commented Jun 18, 2022

dimsuz commented Oct 18, 2022 • edited

fjvallarino commented Oct 21, 2022

dimsuz commented Oct 21, 2022

prolic commented Oct 22, 2022 via email

fjvallarino commented Oct 31, 2022

fjvallarino commented Jun 17, 2022 •

edited

dimsuz commented Oct 18, 2022 •

edited