Giter Club home page Giter Club logo

Comments (8)

kovidgoyal avatar kovidgoyal commented on June 28, 2024 1

No.

from kitty.

kovidgoyal avatar kovidgoyal commented on June 28, 2024

You need to set the z-index of the image correctly.
https://sw.kovidgoyal.net/kitty/graphics-protocol/

from kitty.

mfontanini avatar mfontanini commented on June 28, 2024

Would you consider a mode where print order is the tie breaker? This puts more burden on us when building apps that print images/text. wezterm's default behavior feels a lot saner IMO.

from kitty.

mfontanini avatar mfontanini commented on June 28, 2024

Thanks!

from kitty.

mfontanini avatar mfontanini commented on June 28, 2024

Can you please explain how would I get the desired behavior if I cleared the screen using some background color, then I drew an image, and finally I printed text on top of it? This seems to be what you would normally do in cases where you have a modal, e.g. you clear the screen, paint some stuff, and then draw the modal on top of it.

If I use a z-index below INT_MIN/2, the image won't show up at all because it seems to be behind the clear screen's background. e.g. it's stacked as image / background / text.

If I use a z-index < 0 but above that threshold, I see the image is in between the background and the text, meaning I see the text but the text's background behind the image. e.g. background / image / text.

What I would need to get is background / image / text_with_background. You can reproduce this using this:

import sys
from base64 import standard_b64encode


# --- this is copied from https://sw.kovidgoyal.net/kitty/graphics-protocol/#a-minimal-example
def serialize_gr_command(**cmd):
    payload = cmd.pop("payload", None)
    cmd = ",".join(f"{k}={v}" for k, v in cmd.items())
    ans = []
    w = ans.append
    w(b"\033_G"), w(cmd.encode("ascii"))
    if payload:
        w(b";")
        w(payload)
    w(b"\033\\")
    return b"".join(ans)


def write_chunked(**cmd):
    data = standard_b64encode(cmd.pop("data"))
    while data:
        chunk, data = data[:4096], data[4096:]
        m = 1 if data else 0
        sys.stdout.buffer.write(serialize_gr_command(payload=chunk, m=m, **cmd))
        sys.stdout.flush()
        cmd.clear()


# -----------------------------------------------------------------------------


def move_cursor(x, y):
    cmd = "\x1b[{};{}H".format(y, x)
    sys.stdout.write(cmd)
    sys.stdout.flush()


def set_bg_color():
    cmd = "\x1b[41m"
    sys.stdout.write(cmd)
    sys.stdout.flush()


def clear_screen():
    cmd = "\x1b[2J"
    sys.stdout.write(cmd)
    sys.stdout.flush()


def run_example(image_path):
    x = 0
    y = 0
    offset = 5
    set_bg_color()
    clear_screen()

    # draw some text with red background
    for i in range(10):
        move_cursor(x, y + i)
        print("this is some text on top of the image")

    # draw image at an offset
    move_cursor(x + offset, y + offset)

    # Negative z-index values below INT32_MIN/2 (-1,073,741,824) will be drawn under cells with non-default background colors.
    INT32_MIN_2 = -1_073_741_824
    z = INT32_MIN_2 + 1 # play with this line <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

    with open(image_path, "rb") as f:
        write_chunked(a="T", f=100, data=f.read(), z=z)


# path to a png image:
image_path = "kitty.png"

run_example(image_path)

from kitty.

kovidgoyal avatar kovidgoyal commented on June 28, 2024

You cannot, there are not multiple layers of background color, which is what you are asking for. Use a semi-transparent image with z=-1 as your background, then you will get it blending with the background color giving you a distinct visual appearance for your modal region and draw text on top of it. You will of course need to erase any previously existing text in the region, otherwise that too will appear on top of the modal background.

from kitty.

mfontanini avatar mfontanini commented on June 28, 2024

Thanks, this should work.

However, I think you really should reconsider the logic here for z-index 0. In that z-index, where text lives, there's currently inconsistent/surprising behavior: text can overwrite text on the same cell but images can't be overwritten. I've tested this in other terminals (includiing wezterm using sixel, iterm2 and the kitty graphics protocol) and they all do what I expect so I don't imagine I can be that off on my expectations here.

It's nice that there's a workaround but I don't think I should have to go to these lengths to do something this simple. Note that I'm referring specifically to z-index 0 here, the behavior in other indexes sounds sensible.

from kitty.

kovidgoyal avatar kovidgoyal commented on June 28, 2024

As I said before, no. kitty graphics are not cell based, for very good
reasons, discussed at length when the spec was designed. WezTerm's
kitty graphics implementation is full of bugs including this one.

from kitty.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.