Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix: milgra/sov#42 CSS Colors don't follow standard #RRGGBBAA (fixes #42, closes #40) #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
milgra merged 1 commit into from
Aug 31, 2023
Merged

fix: milgra/sov#42 CSS Colors don't follow standard #RRGGBBAA (fixes #42, closes #40) #43

milgra merged 1 commit into from
Aug 31, 2023

Conversation

@trinitronx
Copy link
Contributor

@trinitronx trinitronx commented Aug 2, 2023 •
edited
Loading

Before patch & After patch Examples

Before

swappy-20230801_112415

After

swappy-20230801_112515

Note: Both above examples are using the following main.css config

While hexidecimal color palindromes will be the same across both Before & After examples...

Extreme pure color choices reveal the BGR vs. RGB behavior. The config specifies the following colors in RGB hex format:

  • main border-color: Red
  • workspace border-color: Blue
  • window border-color: Green
  • window_active border-color: Teal
    • This is not supposed to be olive green, as in the Before / unpatched example screenshot.

~/.config/sov/html/main.css:

#main {
    border-radius: 10px;
    background-color: #181712aa;
    border-radius: 8px;
    border-width: 2px;
    border-color: #ff0000ff;
}

#base {
    margin: 10px;
}

.fullscale {
    height: 100%;
    width: 100%;
}

.colflex {
    display: flex;
    flex-direction: column;
}

.rowflex {
    display: flex;
    flex-direction: row;
}

.workspace {
    margin: 10px;
    border-radius: 8px;
    border-width: 1px;
    background-color: #0000000F;
    border-color: #0000ffFF;
}

.window {
    width: 100px;
    height: 80px;
    background-color: #24221bee;
    border-radius: 8px;
    border-width: 2px;
    border-color: #00ff00FF;
}

.window_active {
    width: 100px;
    height: 80px;
    background-color: #444444FF;
    background-color: #1b1a14ee;
    border-radius: 8px;
    border-width: 2px;
    border-color: #2EB398FF;
}

.title {
    width: 100%;
    height: 21px;
    margin-top: 4px;
    margin-left: 4px;
    margin-right: 4px;
    color: #D4D7CCFF;
    font-size: 14px;
    font-family: "JetBrainsMonoNL NFM ExtraBold:style=EstraBold,Bold";
}

.content {
    width: 100%;
    height: 100%;
    margin-left: 4px;
    margin-right: 4px;
    color: #999999FF;
    vertical-align: top;
    font-size: 12px;
    font-family: "JetBrainsMonoNL NFM ExtraBold:style=EstraBold,Bold";
    word-wrap: break-word;
    line-height: 24px;
}

.number {
    width: 20px;
    height: 20px;
    right: -14px;
    top: -9px;
    color: #FFFFFFFF;
    font-size: 18px;
    font-family: "JetBrainsMonoNL NFM ExtraBold:style=EstraBold,Bold";
}

Explanation of Change

Although very misleading, the Wayland RGBA format appears to be actually stored as BGRA:

WL_DRM_FORMAT_ARGB8888

Always stored as B, G, R, A in memory (B at lowest address, A at highest)
Source: https://afrantzis.com/pixel-format-guide/wayland_drm.html

Compatible format between OpenGL GL_RGBA+GL_UNSIGNED_BYTE and wayland_drm family appears to be: WL_DRM_FORMAT_ABGR8888

$ git clone https://github.com/afrantzis/pixel-format-guide.git
$ cd pixel-format-guide

$ python -m pfg find-compatible GL_RGBA+GL_UNSIGNED_BYTE wayland_drm
Format: GL_RGBA+GL_UNSIGNED_BYTE
Is compatible on all systems with:
        WL_DRM_FORMAT_ABGR8888
Is compatible on little-endian systems with:
Is compatible on big-endian systems with:

In this code, WL_SHM is used, so this commit uses the SHM variant.

Reference:

  • "A Pixel Format Guide to the Galaxy", Presenter: Alexandros Frantzis, FOSDEM 2018

Video: https://www.youtube.com/watch?v=NoZwgNSuqkU
Slides: https://archive.fosdem.org/2018/schedule/event/pixel_formats/attachments/slides/2627/export/events/attachments/pixel_formats/slides/2627/fosdem_2018_pixel_format_guide.pdf

pixel-format-guide

Project Page: https://afrantzis.github.io/pixel-format-guide/
Project Repo: https://github.com/afrantzis/pixel-format-guide
Blog: https://afrantzis.wordpress.com/

@trinitronx
fix: milgra#42 CSS Colors don't follow standard #RRGGBBAA
102a85f 
Although very misleading, the Wayland RGBA format appears to be
actually stored as BGRA:

> WL_DRM_FORMAT_ARGB8888
>
> Always stored as B, G, R, A in memory (B at lowest address, A at highest)
Source: https://afrantzis.com/pixel-format-guide/wayland_drm.html

Compatible format between OpenGL `GL_RGBA+GL_UNSIGNED_BYTE` and
`wayland_drm` family appears to be: `WL_DRM_FORMAT_ABGR8888`

    $ git clone https://github.com/afrantzis/pixel-format-guide.git
    $ cd pixel-format-guide

    $ python -m pfg find-compatible GL_RGBA+GL_UNSIGNED_BYTE wayland_drm
    Format: GL_RGBA+GL_UNSIGNED_BYTE
    Is compatible on all systems with:
            WL_DRM_FORMAT_ABGR8888
    Is compatible on little-endian systems with:
    Is compatible on big-endian systems with:

In this code, `WL_SHM` is used, so this commit uses the `SHM` variant.

Reference:

 - _"A Pixel Format Guide to the Galaxy"_, Presenter: Alexandros Frantzis, FOSDEM 2018

Video: https://www.youtube.com/watch?v=NoZwgNSuqkU
Slides: https://archive.fosdem.org/2018/schedule/event/pixel_formats/attachments/slides/2627/export/events/attachments/pixel_formats/slides/2627/fosdem_2018_pixel_format_guide.pdf

pixel-format-guide
------------------

Project Page: https://afrantzis.github.io/pixel-format-guide/
Project Repo: https://github.com/afrantzis/pixel-format-guide
Blog: https://afrantzis.wordpress.com/
@milgra
Copy link
Owner

milgra commented Aug 30, 2023

hi, thanks for the awesome work and explanation, I will look into it. As far as I remember my setup didn't work with this color format when I was developing sov, maybe I missed something or I just need the latest lib versions.

@milgra milgra merged commit 214cba5 into milgra:main Aug 31, 2023
@milgra
Copy link
Owner

milgra commented Aug 31, 2023

Works fine, thank you!

@trinitronx
Copy link
Contributor Author

trinitronx commented Sep 1, 2023

Works fine, thank you!

No problem! Glad it worked 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@trinitronx @milgra