Backgound color, Background Images

[antillgrp]

I've read a lot already about vuetify but I'm still having a hard time with trame doing something like this:

https://codesandbox.io/s/change-vuetify-background-color-zp82p

Or like this:

https://codepen.io/aaha/pen/qBbVNWG

Thanks in advance

[jourdain]

The second one is easier since you don't create interaction on JS variable only.

from trame.app import get_server
from trame.ui.vuetify import VAppLayout
from trame.widgets import vuetify, html

server = get_server()

with VAppLayout(server):
  with vuetify.VAppBar(app=True, color="transparent"):
    vuetify.VAppBarNavIcon()
    vuetify.VToolbarTitle("Title")
    vuetify.VSpacer()
    with vuetify.VBtn(icon=True):
      vuetify.VIcon("mdi-magnify")
    with vuetify.VBtn(icon=True):
      vuetify.VIcon("mdi-heart")
    with vuetify.VBtn(icon=True):
      vuetify.VIcon("mdi-dots-vertical")

  with vuetify.VContent(classes="ma-0 pa-0"):
    with html.Div(classes="d-flex flex-wrap justify-center"):
      html.Img(src="https://picsum.photos/300/300")
      html.Img(src="https://picsum.photos/600/300")
      html.Img(src="https://picsum.photos/700/300")
      html.Img(src="https://picsum.photos/200/300")
      html.Img(src="https://picsum.photos/400/300")
      html.Img(src="https://picsum.photos/500/300")

server.start()

But for the first example, it would be easier to create a "fake" vue component and drive it from trame.

[jourdain]

For the first one, you are stretching what you can get out of the box with trame. But if you were to create your own vuetify bundle with the scss file, you could be good.

So far I stopped at:

from trame.app import get_server
from trame.ui.vuetify import VAppLayout
from trame.widgets import vuetify, html, client


server = get_server()
state, ctrl = server.state, server.controller


vuetify.initialize(server)
server.enable_module(
    dict(
        vue_use=[
            (
                "trame_vuetify",
                {
                    # missing the var mapping... But probably need a custom build of vuetify
                    "options": { "customProperties": True },
                    "theme": {
                        "dark": True,
                        "themes": {
                            "dark": {
                                "background": "#00a86b",
                            },
                            "light": {
                                "background": "#d0f0c0",
                            },
                        },
                    },
                },
            )
        ]
    )
)


with VAppLayout(server):
    ctrl.swap = client.JSEval(
        exec="$vuetify.theme.isDark = !$vuetify.theme.isDark"
    ).exec
    ctrl.update_color = client.JSEval(
        exec="""
    const amount = $event;
    console.log('update amount', amount);

    function lightenDarkenColor (col, amt) {
        let usePound = false

        if (col[0] === '#') {
          col = col.slice(1)
          usePound = true
        }

        const num = parseInt(col, 16)

        let r = (num >> 16) + amt

        if (r > 255) {
          r = 255
        } else if (r < 0) {
          r = 0
        }

        let b = ((num >> 8) & 0x00FF) + amt

        if (b > 255) {
          b = 255
        } else if (b < 0) {
          b = 0
        }

        let g = (num & 0x0000FF) + amt

        if (g > 255) {
          g = 255
        } else if (g < 0) {
          g = 0
        }

        return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
    }

    const themeName = $vuetify.theme.isDark ? 'dark':'light';
    const theme = $vuetify.theme.themes[themeName];
    const currentColor = theme.background;
    if (currentColor == null) {
      return
    }
    if (typeof currentColor === 'object') {
      Object.entries(currentColor).forEach(([key, value]) => {
        currentColor[key] = lightenDarkenColor(value, amount)
      })
    } else {
      theme.background = lightenDarkenColor(currentColor, amount)
    }


    $vuetify.theme.themes[themeName] = {};
    $vuetify.theme.themes[themeName] = theme;
    """
    ).exec

    with vuetify.VContainer(full_height=True):
        with vuetify.VRow():
            with vuetify.VCol(cols=12, classes="headline text-center"):
                html.Span("Background color")
        with vuetify.VRow(classes="mt-4 flex-column flex-sm-row align-center"):
            vuetify.VSpacer()
            with vuetify.VCol(cols="auto"):
                with vuetify.VBtn(click=(ctrl.update_color, "[-10]")) as btn:
                    vuetify.VIcon("mdi-brightness-3", classes="mr-1 title")
                    btn.add_child("Darken")
            with vuetify.VCol(cols="auto"):
                with vuetify.VBtn(click=(ctrl.update_color, "[10]")) as btn:
                    vuetify.VIcon("mdi-brightness-5", classes="mr-1 title")
                    btn.add_child("Lighten")
            with vuetify.VCol(cols="auto"):
                with vuetify.VBtn(click=ctrl.swap) as btn:
                    vuetify.VIcon("mdi-invert-colors", classes="mr-1 title")
                    btn.add_child("Swap")
            vuetify.VSpacer()


server.start()

[jourdain]

Also it seems that lightenDarkenColor is wrong. You can see it from the code below

from trame.app import get_server
from trame.ui.vuetify import VAppLayout
from trame.widgets import vuetify, html, client


server = get_server()
state, ctrl = server.state, server.controller


vuetify.initialize(server)
server.enable_module(
    dict(
        vue_use=[
            (
                "trame_vuetify",
                {
                    "theme": {
                        "dark": True,
                        "themes": {
                            "dark": {
                                "primary": "#00a86b",
                            },
                            "light": {
                                "primary": "#d0f0c0",
                            },
                        },
                    },
                },
            )
        ]
    )
)


with VAppLayout(server):
    ctrl.swap = client.JSEval(
        exec="$vuetify.theme.isDark = !$vuetify.theme.isDark"
    ).exec
    ctrl.update_color = client.JSEval(
        exec="""
    const amount = $event;

    function lightenDarkenColor (col, amt) {
        let usePound = false
        console.log('color in', col, 'delta', amt);

        if (col[0] === '#') {
          col = col.slice(1)
          usePound = true
        }

        const num = parseInt(col, 16)

        let r = (num >> 16) + amt

        if (r > 255) {
          r = 255
        } else if (r < 0) {
          r = 0
        }

        let b = ((num >> 8) & 0x00FF) + amt

        if (b > 255) {
          b = 255
        } else if (b < 0) {
          b = 0
        }

        let g = (num & 0x0000FF) + amt

        if (g > 255) {
          g = 255
        } else if (g < 0) {
          g = 0
        }

        console.log('out color', (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16));
        return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
    }

    const themeName = $vuetify.theme.isDark ? 'dark':'light';
    const theme = $vuetify.theme.themes[themeName];
    const currentColor = theme.primary;
    if (currentColor == null) {
      return
    }
    if (typeof currentColor === 'object') {
      Object.entries(currentColor).forEach(([key, value]) => {
        currentColor[key] = lightenDarkenColor(value, amount)
      })
    } else {
      theme.primary = lightenDarkenColor(currentColor, amount)
    }


    $vuetify.theme.themes[themeName] = {};
    $vuetify.theme.themes[themeName] = theme;
    """
    ).exec

    with vuetify.VContainer(full_height=True):
        with vuetify.VRow():
            with vuetify.VCol(cols=12, classes="headline text-center"):
                html.Span("Background color")
        with vuetify.VRow(classes="mt-4 flex-column flex-sm-row align-center"):
            vuetify.VSpacer()
            with vuetify.VCol(cols="auto"):
                with vuetify.VBtn(click=(ctrl.update_color, "[-10]"), color="primary") as btn:
                    vuetify.VIcon("mdi-brightness-3", classes="mr-1 title")
                    btn.add_child("Darken")
            with vuetify.VCol(cols="auto"):
                with vuetify.VBtn(click=(ctrl.update_color, "[10]"), color="primary") as btn:
                    vuetify.VIcon("mdi-brightness-5", classes="mr-1 title")
                    btn.add_child("Lighten")
            with vuetify.VCol(cols="auto"):
                with vuetify.VBtn(click=ctrl.swap) as btn:
                    vuetify.VIcon("mdi-invert-colors", classes="mr-1 title")
                    btn.add_child("Swap")
            vuetify.VSpacer()


server.start()