Skip to content
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

Feature request: trelliscope support for sepia and night mode in bookdown #103

Open
stefvanbuuren opened this issue Nov 26, 2020 · 10 comments
Open

Feature request: trelliscope support for sepia and night mode in bookdown #103

stefvanbuuren opened this issue Nov 26, 2020 · 10 comments

Comments

@stefvanbuuren
Copy link

stefvanbuuren commented Nov 26, 2020 •
edited
Loading

I use transparent colors to blend ggplot2 and plotly figures into sepia and night modes in bookdown documents. See for example https://d-score.org/dbook1/sec-aged.html, and switch to sepia and night mode.

In trelliscopejs this approach doesn't work (e.g. https://d-score.org/dbook2/section-sec-impactequate.html). The background of trelliscope figure is solid white, which blocks any transparent color settings in the figures.

My question: Would there be a simple trick to change the solid white into transparent?

Here's a short demo code that I use to sets transparent colors in trelliscopejs:

library(trelliscopejs)
library(ggplot2)
library(gapminder)

theme_set(theme_light())
theme_update(panel.background = element_rect(fill = "transparent", colour = NA),
             plot.background = element_rect(fill = "transparent", colour = NA),
             legend.key = element_blank(),
             rect = element_rect(fill = "transparent"))

qplot(year, lifeExp, data = subset(gapminder, continent == "Europe")) +
  facet_trelliscope(~ country + continent,
                    path = "docs/transparent")

I would like all white areas to become transparent, whereas any coloured areas (left navigation bar, bottom sort bar, trelliscope logo) should retain their colouring. Is that possible by setting some styles?
stefvanbuuren added a commit to D-score/dbook-apps that referenced this issue Nov 26, 2020
@stefvanbuuren
Make transparent demo for hafen/trelliscopejs#103
7138004
@hafen
Copy link
Owner

hafen commented Dec 2, 2020

Hi @stefvanbuuren - After creating the example display and updating all elements to have no background, I don't see the desired effect. Can you provide a screenshot of what it a "correct" plot should look like?

In general I have been wanting to add the ability for users to provide custom style specifications. Doing this properly will take some time though. In the mean time, I think this issue is addressable by making all whitespace have no background, as I don't see how this as a default setting would have an adverse effect on anything else.

@stefvanbuuren
Copy link
Author

My thinking is that the data area, the plot margin and selected trelliscope panels could be made transparent. If the reader changes bookdown background changes to sepia/dark, then sepia/dark would shine through in the plots.

In the figure below, I have tried to draw what the figure could look like if my background color is yellow3 (sepia is not an R color). I failed because I do not know how to change some of the backgrounds to transparent, the cross-hatched areas. So ideally these should also be transparent, and show the bookdown sepia/dark coloring set by the reader.

SCAN0036

@hafen
Copy link
Owner

hafen commented Dec 2, 2020

Ah I see now! So you are talking about a background color behind the entire embedded display. Are you embedding your displays as iframes in your book? If so, I'm not sure if this is possible.

@stefvanbuuren
Copy link
Author

I use knitr::include_url() for example:

knitr::include_url(url = "https://d-score.org/dbook-apps/p-d-equate-1339/#display=Percent_pass_by_D_score__four_models&nrow=2&ncol=2&arr=row&pg=65&labels=equate,model&sort=equate_index;asc,model;asc&filter=&sidebar=&fv=", height = "450px")

@hafen
Copy link
Owner

hafen commented Dec 2, 2020

I see. Can you point me to an example of the output so I can inspect? You had shared this link before but I'm getting a 404: https://stefvanbuuren.name/dbook2/section-sec-impactequate.html

@stefvanbuuren
Copy link
Author

stefvanbuuren commented Dec 2, 2020 •
edited
Loading

Ah yes, sorry. It's now moved it to https://d-score.org/dbook2/section-sec-impactequate.html .
Just updated it in my original post.

@hafen
Copy link
Owner

hafen commented Dec 2, 2020

It see. It looks like it is in an iframe. But even with an iframe it looks achievable. I made some css tweaks to the page to experiment and got this far (with an ugly yellow background to test)

image

In this particular display it appears that there is no transparency set in the images themselves.

@stefvanbuuren
Copy link
Author

That's progress. I will need to look into the transparency of the plots.

@stefvanbuuren
Copy link
Author

I checked and regenerated, but the plots were already transparent.
Could there be an additional layer within the iframe? I found the following, but cannot change it from the Safari browser console.

<head>
    <meta charset="utf-8"/>
    <style>
    body {
        background-color: white;
    }
    </style>

@hafen
Copy link
Owner

hafen commented Dec 3, 2020

I went in and manually disabled all background colors in the Trelliscope display but the images do not appear to be transparent.

To double check, I right-clicked on the first graph in the Trelliscope display and chose "Download Image" and opened it in an image editor to confirm that it doesn't have a transparent background.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hafen @stefvanbuuren