~eliasnaur/gio

7 3

Custom text rendering

Details
Message ID
<200EFB1C-A516-4B5B-893F-D9F38ED01036@viktomas.com>
DKIM signature
pass
Download raw message
Hello again 👋

I’m still writing the terminal emulator. It’s not working that great, but the code is here https://gitlab.com/viktomas/gritty

I reached a point where the `material.Label` doesn’t work for me and I need to implement custom character grid.

Until now, I counted the available character space
(https://lists.sr.ht/~eliasnaur/gio/%3CE17329F0-A6E6-45E1-A176-7B1396ECA86D%40viktomas.com%3E),
then used Gio-unrelated method to create string with row*col rune grid and pass it to material.Label:
 https://gitlab.com/viktomas/gritty/-/blob/b9b969635a6d1aee394a9795e55627d36200b998/main.go#L193.

I would love to get some pointers for how to render the runes into a grid myself.
(if the documentation already explains the concept, then links to code are fine).

I’ve been looking at the following files:

- widget.textView https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/text.go#L45
  - this seems to be the closes to what i need
  - the cursor is implemented in the textView.caret but I couldn’t find where the cursor rendering is. I assume that the caret.end is where
    textView renders the vertical line, but I didn’t find the code
- widget.Editor https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/editor.go#L32
  - this struct implements much more logic than what I need (undo, redo, alignment, drag-drop)

What I need:

  - Must have
    - render grid of runes
    - render cursor (for now, it’s enough to invert colors on a rune, but eventually I’d like to be able to render the vertical line, similar to widget.Editor)
    - choose foreground and background color for each rune
      - it seems that the text.Shaper is not responsible for colors. Will I have to do my own ops to create background square, then change color and 
        let the shaper render the rune?
  - Nice to have
    - eventually be able to scroll back in the buffer, but that’s not critical, I’d just like to have that option in the future
    - underline, bold, and other text styling

I’ll appreciate any help

All the best

Tomas
Details
Message ID
<CAFcc3FTRF2LfmfH0r9sfooxefen+bV0p=+0deS9ct=Agbv-Nrw@mail.gmail.com>
In-Reply-To
<200EFB1C-A516-4B5B-893F-D9F38ED01036@viktomas.com> (view parent)
DKIM signature
pass
Download raw message
On Fri, Sep 1, 2023 at 5:39 AM Tomas <me@viktomas.com> wrote:
>
> Hello again 👋

Hi Tomas!

> I’m still writing the terminal emulator. It’s not working that great, but the code is here https://gitlab.com/viktomas/gritty
>
> I reached a point where the `material.Label` doesn’t work for me and I need to implement custom character grid.
>
> Until now, I counted the available character space
> (https://lists.sr.ht/~eliasnaur/gio/%3CE17329F0-A6E6-45E1-A176-7B1396ECA86D%40viktomas.com%3E),
> then used Gio-unrelated method to create string with row*col rune grid and pass it to material.Label:
>  https://gitlab.com/viktomas/gritty/-/blob/b9b969635a6d1aee394a9795e55627d36200b998/main.go#L193.
>
> I would love to get some pointers for how to render the runes into a grid myself.
> (if the documentation already explains the concept, then links to code are fine).
> I’ve been looking at the following files:
>
> - widget.textView https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/text.go#L45
>   - this seems to be the closes to what i need
>   - the cursor is implemented in the textView.caret but I couldn’t find where the cursor rendering is. I assume that the caret.end is where
>     textView renders the vertical line, but I didn’t find the code
> - widget.Editor https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/editor.go#L32
>   - this struct implements much more logic than what I need (undo, redo, alignment, drag-drop)


Well, this means using the raw shaper API. You are looking at the
right files. widget.textView is the unexported power behind all
interactive text in Gio. It demonstrates how to traverse the glyph
stream, index it for cursor position candidates, and display the
results.

Caret painting is implemented here:
https://git.sr.ht/~eliasnaur/gio/tree/main/item/widget/text.go#L367

As you noted, widget.Editor is specialized beyond your needs.

> What I need:
>
>   - Must have
>     - render grid of runes
>     - render cursor (for now, it’s enough to invert colors on a rune, but eventually I’d like to be able to render the vertical line, similar to widget.Editor)
>     - choose foreground and background color for each rune
>       - it seems that the text.Shaper is not responsible for colors. Will I have to do my own ops to create background square, then change color and
>         let the shaper render the rune?

Yes, for this (right now) you'd need to implement your own equivalent
of textView that painted glyphs with different colors by setting the
paint color manually. Soon I hope to teach the widgets to do this
themselves, but I'm not sure how soon.

>   - Nice to have
>     - eventually be able to scroll back in the buffer, but that’s not critical, I’d just like to have that option in the future
>     - underline, bold, and other text styling

This would require some rich text support from the shaper API, which
is on my todo list alongside switching colors. Right now it would be
extremely difficult for you to implement this, as you would have to
invoke the shaper separately for each run of text with a consistent
style and then stitch the results back together.

> I’ll appreciate any help

Your best bet for short-term progress is to copy widget.textView and
its unexported dependencies into your project and to modify them to
support the color specialization you want. Once core has a richtext
API, you can try to simplify what you're doing using that.

Cheers,
Chris
Details
Message ID
<D6BF4408-21FB-4636-8208-EE5A01574030@viktomas.com>
In-Reply-To
<CAFcc3FTRF2LfmfH0r9sfooxefen+bV0p=+0deS9ct=Agbv-Nrw@mail.gmail.com> (view parent)
DKIM signature
pass
Download raw message
Thanks Chris, I hacked my way into rendering row x column character grid with different foreground (text) and background color:

https://github.com/viktomas/gritty/blob/777f7faed94ebfd2ae3b7d60de106346ab9307cb/label.go#L278-L326

I have a suspicion that it’s very inefficient, but I don’t mind since the rendering is fast enough.

----

I’m now done with Gritty. Thanks for all the help and good luck with Gio :) I enjoyed learning about the immediate mode.

Is it possible to put https://github.com/viktomas/gritty in the Docs showcase section? https://gioui.org/doc/showcase

> On 1. 9. 2023, at 17:04, Chris Waldon <christopher.waldon.dev@gmail.com> wrote:
> 
> On Fri, Sep 1, 2023 at 5:39 AM Tomas <me@viktomas.com> wrote:
>> 
>> Hello again 👋
> 
> Hi Tomas!
> 
>> I’m still writing the terminal emulator. It’s not working that great, but the code is here https://gitlab.com/viktomas/gritty
>> 
>> I reached a point where the `material.Label` doesn’t work for me and I need to implement custom character grid.
>> 
>> Until now, I counted the available character space
>> (https://lists.sr.ht/~eliasnaur/gio/%3CE17329F0-A6E6-45E1-A176-7B1396ECA86D%40viktomas.com%3E),
>> then used Gio-unrelated method to create string with row*col rune grid and pass it to material.Label:
>> https://gitlab.com/viktomas/gritty/-/blob/b9b969635a6d1aee394a9795e55627d36200b998/main.go#L193.
>> 
>> I would love to get some pointers for how to render the runes into a grid myself.
>> (if the documentation already explains the concept, then links to code are fine).
>> I’ve been looking at the following files:
>> 
>> - widget.textView https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/text.go#L45
>>  - this seems to be the closes to what i need
>>  - the cursor is implemented in the textView.caret but I couldn’t find where the cursor rendering is. I assume that the caret.end is where
>>    textView renders the vertical line, but I didn’t find the code
>> - widget.Editor https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/editor.go#L32
>>  - this struct implements much more logic than what I need (undo, redo, alignment, drag-drop)
> 
> 
> Well, this means using the raw shaper API. You are looking at the
> right files. widget.textView is the unexported power behind all
> interactive text in Gio. It demonstrates how to traverse the glyph
> stream, index it for cursor position candidates, and display the
> results.
> 
> Caret painting is implemented here:
> https://git.sr.ht/~eliasnaur/gio/tree/main/item/widget/text.go#L367
> 
> As you noted, widget.Editor is specialized beyond your needs.
> 
>> What I need:
>> 
>>  - Must have
>>    - render grid of runes
>>    - render cursor (for now, it’s enough to invert colors on a rune, but eventually I’d like to be able to render the vertical line, similar to widget.Editor)
>>    - choose foreground and background color for each rune
>>      - it seems that the text.Shaper is not responsible for colors. Will I have to do my own ops to create background square, then change color and
>>        let the shaper render the rune?
> 
> Yes, for this (right now) you'd need to implement your own equivalent
> of textView that painted glyphs with different colors by setting the
> paint color manually. Soon I hope to teach the widgets to do this
> themselves, but I'm not sure how soon.
> 
>>  - Nice to have
>>    - eventually be able to scroll back in the buffer, but that’s not critical, I’d just like to have that option in the future
>>    - underline, bold, and other text styling
> 
> This would require some rich text support from the shaper API, which
> is on my todo list alongside switching colors. Right now it would be
> extremely difficult for you to implement this, as you would have to
> invoke the shaper separately for each run of text with a consistent
> style and then stitch the results back together.
> 
>> I’ll appreciate any help
> 
> Your best bet for short-term progress is to copy widget.textView and
> its unexported dependencies into your project and to modify them to
> support the color specialization you want. Once core has a richtext
> API, you can try to simplify what you're doing using that.
> 
> Cheers,
> Chris
Details
Message ID
<CANtNKfooeLdqzHtWtXR9pCJKc9rO7PJxcD62TyRY68++wCHOuQ@mail.gmail.com>
In-Reply-To
<D6BF4408-21FB-4636-8208-EE5A01574030@viktomas.com> (view parent)
DKIM signature
pass
Download raw message
One optimization would be to draw all the glyphs that have the same
foreground and background color. If you limit yourself to a single
line it shouldn't be too problematic.

On Mon, Sep 18, 2023 at 3:07 PM Tomas <me@viktomas.com> wrote:
>
> Thanks Chris, I hacked my way into rendering row x column character grid with different foreground (text) and background color:
>
> https://github.com/viktomas/gritty/blob/777f7faed94ebfd2ae3b7d60de106346ab9307cb/label.go#L278-L326
>
> I have a suspicion that it’s very inefficient, but I don’t mind since the rendering is fast enough.
>
> ----
>
> I’m now done with Gritty. Thanks for all the help and good luck with Gio :) I enjoyed learning about the immediate mode.
>
> Is it possible to put https://github.com/viktomas/gritty in the Docs showcase section? https://gioui.org/doc/showcase
>
> > On 1. 9. 2023, at 17:04, Chris Waldon <christopher.waldon.dev@gmail.com> wrote:
> >
> > On Fri, Sep 1, 2023 at 5:39 AM Tomas <me@viktomas.com> wrote:
> >>
> >> Hello again 👋
> >
> > Hi Tomas!
> >
> >> I’m still writing the terminal emulator. It’s not working that great, but the code is here https://gitlab.com/viktomas/gritty
> >>
> >> I reached a point where the `material.Label` doesn’t work for me and I need to implement custom character grid.
> >>
> >> Until now, I counted the available character space
> >> (https://lists.sr.ht/~eliasnaur/gio/%3CE17329F0-A6E6-45E1-A176-7B1396ECA86D%40viktomas.com%3E),
> >> then used Gio-unrelated method to create string with row*col rune grid and pass it to material.Label:
> >> https://gitlab.com/viktomas/gritty/-/blob/b9b969635a6d1aee394a9795e55627d36200b998/main.go#L193.
> >>
> >> I would love to get some pointers for how to render the runes into a grid myself.
> >> (if the documentation already explains the concept, then links to code are fine).
> >> I’ve been looking at the following files:
> >>
> >> - widget.textView https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/text.go#L45
> >>  - this seems to be the closes to what i need
> >>  - the cursor is implemented in the textView.caret but I couldn’t find where the cursor rendering is. I assume that the caret.end is where
> >>    textView renders the vertical line, but I didn’t find the code
> >> - widget.Editor https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/editor.go#L32
> >>  - this struct implements much more logic than what I need (undo, redo, alignment, drag-drop)
> >
> >
> > Well, this means using the raw shaper API. You are looking at the
> > right files. widget.textView is the unexported power behind all
> > interactive text in Gio. It demonstrates how to traverse the glyph
> > stream, index it for cursor position candidates, and display the
> > results.
> >
> > Caret painting is implemented here:
> > https://git.sr.ht/~eliasnaur/gio/tree/main/item/widget/text.go#L367
> >
> > As you noted, widget.Editor is specialized beyond your needs.
> >
> >> What I need:
> >>
> >>  - Must have
> >>    - render grid of runes
> >>    - render cursor (for now, it’s enough to invert colors on a rune, but eventually I’d like to be able to render the vertical line, similar to widget.Editor)
> >>    - choose foreground and background color for each rune
> >>      - it seems that the text.Shaper is not responsible for colors. Will I have to do my own ops to create background square, then change color and
> >>        let the shaper render the rune?
> >
> > Yes, for this (right now) you'd need to implement your own equivalent
> > of textView that painted glyphs with different colors by setting the
> > paint color manually. Soon I hope to teach the widgets to do this
> > themselves, but I'm not sure how soon.
> >
> >>  - Nice to have
> >>    - eventually be able to scroll back in the buffer, but that’s not critical, I’d just like to have that option in the future
> >>    - underline, bold, and other text styling
> >
> > This would require some rich text support from the shaper API, which
> > is on my todo list alongside switching colors. Right now it would be
> > extremely difficult for you to implement this, as you would have to
> > invoke the shaper separately for each run of text with a consistent
> > style and then stitch the results back together.
> >
> >> I’ll appreciate any help
> >
> > Your best bet for short-term progress is to copy widget.textView and
> > its unexported dependencies into your project and to modify them to
> > support the color specialization you want. Once core has a richtext
> > API, you can try to simplify what you're doing using that.
> >
> > Cheers,
> > Chris
>
>
Details
Message ID
<FE095F23-D45B-4247-B781-0B88247BDCC3@viktomas.com>
In-Reply-To
<CANtNKfooeLdqzHtWtXR9pCJKc9rO7PJxcD62TyRY68++wCHOuQ@mail.gmail.com> (view parent)
DKIM signature
pass
Download raw message
Thanks Ergon, that wouldn’t work for terminal emulator since each character can be rendered in different color.

I haven’t implemented color SGR sequences yet
(https://github.com/viktomas/gritty/blob/332814b61f0c4c184939fb48bc3dc7b7cab97120/controller/csi_translator.go#L141-L163),
but I already need to at least invert foreground and background color for blinking curosr.

> On 18. 9. 2023, at 14:19, Egon Elbre <egonelbre@gmail.com> wrote:
> 
> One optimization would be to draw all the glyphs that have the same
> foreground and background color. If you limit yourself to a single
> line it shouldn't be too problematic.
> 
> On Mon, Sep 18, 2023 at 3:07 PM Tomas <me@viktomas.com> wrote:
>> 
>> Thanks Chris, I hacked my way into rendering row x column character grid with different foreground (text) and background color:
>> 
>> https://github.com/viktomas/gritty/blob/777f7faed94ebfd2ae3b7d60de106346ab9307cb/label.go#L278-L326
>> 
>> I have a suspicion that it’s very inefficient, but I don’t mind since the rendering is fast enough.
>> 
>> ----
>> 
>> I’m now done with Gritty. Thanks for all the help and good luck with Gio :) I enjoyed learning about the immediate mode.
>> 
>> Is it possible to put https://github.com/viktomas/gritty in the Docs showcase section? https://gioui.org/doc/showcase
>> 
>>> On 1. 9. 2023, at 17:04, Chris Waldon <christopher.waldon.dev@gmail.com> wrote:
>>> 
>>> On Fri, Sep 1, 2023 at 5:39 AM Tomas <me@viktomas.com> wrote:
>>>> 
>>>> Hello again 👋
>>> 
>>> Hi Tomas!
>>> 
>>>> I’m still writing the terminal emulator. It’s not working that great, but the code is here https://gitlab.com/viktomas/gritty
>>>> 
>>>> I reached a point where the `material.Label` doesn’t work for me and I need to implement custom character grid.
>>>> 
>>>> Until now, I counted the available character space
>>>> (https://lists.sr.ht/~eliasnaur/gio/%3CE17329F0-A6E6-45E1-A176-7B1396ECA86D%40viktomas.com%3E),
>>>> then used Gio-unrelated method to create string with row*col rune grid and pass it to material.Label:
>>>> https://gitlab.com/viktomas/gritty/-/blob/b9b969635a6d1aee394a9795e55627d36200b998/main.go#L193.
>>>> 
>>>> I would love to get some pointers for how to render the runes into a grid myself.
>>>> (if the documentation already explains the concept, then links to code are fine).
>>>> I’ve been looking at the following files:
>>>> 
>>>> - widget.textView https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/text.go#L45
>>>> - this seems to be the closes to what i need
>>>> - the cursor is implemented in the textView.caret but I couldn’t find where the cursor rendering is. I assume that the caret.end is where
>>>>   textView renders the vertical line, but I didn’t find the code
>>>> - widget.Editor https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/editor.go#L32
>>>> - this struct implements much more logic than what I need (undo, redo, alignment, drag-drop)
>>> 
>>> 
>>> Well, this means using the raw shaper API. You are looking at the
>>> right files. widget.textView is the unexported power behind all
>>> interactive text in Gio. It demonstrates how to traverse the glyph
>>> stream, index it for cursor position candidates, and display the
>>> results.
>>> 
>>> Caret painting is implemented here:
>>> https://git.sr.ht/~eliasnaur/gio/tree/main/item/widget/text.go#L367
>>> 
>>> As you noted, widget.Editor is specialized beyond your needs.
>>> 
>>>> What I need:
>>>> 
>>>> - Must have
>>>>   - render grid of runes
>>>>   - render cursor (for now, it’s enough to invert colors on a rune, but eventually I’d like to be able to render the vertical line, similar to widget.Editor)
>>>>   - choose foreground and background color for each rune
>>>>     - it seems that the text.Shaper is not responsible for colors. Will I have to do my own ops to create background square, then change color and
>>>>       let the shaper render the rune?
>>> 
>>> Yes, for this (right now) you'd need to implement your own equivalent
>>> of textView that painted glyphs with different colors by setting the
>>> paint color manually. Soon I hope to teach the widgets to do this
>>> themselves, but I'm not sure how soon.
>>> 
>>>> - Nice to have
>>>>   - eventually be able to scroll back in the buffer, but that’s not critical, I’d just like to have that option in the future
>>>>   - underline, bold, and other text styling
>>> 
>>> This would require some rich text support from the shaper API, which
>>> is on my todo list alongside switching colors. Right now it would be
>>> extremely difficult for you to implement this, as you would have to
>>> invoke the shaper separately for each run of text with a consistent
>>> style and then stitch the results back together.
>>> 
>>>> I’ll appreciate any help
>>> 
>>> Your best bet for short-term progress is to copy widget.textView and
>>> its unexported dependencies into your project and to modify them to
>>> support the color specialization you want. Once core has a richtext
>>> API, you can try to simplify what you're doing using that.
>>> 
>>> Cheers,
>>> Chris
>> 
>> 
Details
Message ID
<CANtNKfoqQ6j_n-ZbzTmKHt_2QnekkcWxbHOtO5BSzt55=UzUVA@mail.gmail.com>
In-Reply-To
<FE095F23-D45B-4247-B781-0B88247BDCC3@viktomas.com> (view parent)
DKIM signature
pass
Download raw message
You can detect a character sequence that has the same fg and paint
that as a single shape.

On Mon, Sep 18, 2023 at 3:37 PM Tomas <me@viktomas.com> wrote:
>
> Thanks Ergon, that wouldn’t work for terminal emulator since each character can be rendered in different color.
>
> I haven’t implemented color SGR sequences yet
> (https://github.com/viktomas/gritty/blob/332814b61f0c4c184939fb48bc3dc7b7cab97120/controller/csi_translator.go#L141-L163),
> but I already need to at least invert foreground and background color for blinking curosr.
>
> > On 18. 9. 2023, at 14:19, Egon Elbre <egonelbre@gmail.com> wrote:
> >
> > One optimization would be to draw all the glyphs that have the same
> > foreground and background color. If you limit yourself to a single
> > line it shouldn't be too problematic.
> >
> > On Mon, Sep 18, 2023 at 3:07 PM Tomas <me@viktomas.com> wrote:
> >>
> >> Thanks Chris, I hacked my way into rendering row x column character grid with different foreground (text) and background color:
> >>
> >> https://github.com/viktomas/gritty/blob/777f7faed94ebfd2ae3b7d60de106346ab9307cb/label.go#L278-L326
> >>
> >> I have a suspicion that it’s very inefficient, but I don’t mind since the rendering is fast enough.
> >>
> >> ----
> >>
> >> I’m now done with Gritty. Thanks for all the help and good luck with Gio :) I enjoyed learning about the immediate mode.
> >>
> >> Is it possible to put https://github.com/viktomas/gritty in the Docs showcase section? https://gioui.org/doc/showcase
> >>
> >>> On 1. 9. 2023, at 17:04, Chris Waldon <christopher.waldon.dev@gmail.com> wrote:
> >>>
> >>> On Fri, Sep 1, 2023 at 5:39 AM Tomas <me@viktomas.com> wrote:
> >>>>
> >>>> Hello again 👋
> >>>
> >>> Hi Tomas!
> >>>
> >>>> I’m still writing the terminal emulator. It’s not working that great, but the code is here https://gitlab.com/viktomas/gritty
> >>>>
> >>>> I reached a point where the `material.Label` doesn’t work for me and I need to implement custom character grid.
> >>>>
> >>>> Until now, I counted the available character space
> >>>> (https://lists.sr.ht/~eliasnaur/gio/%3CE17329F0-A6E6-45E1-A176-7B1396ECA86D%40viktomas.com%3E),
> >>>> then used Gio-unrelated method to create string with row*col rune grid and pass it to material.Label:
> >>>> https://gitlab.com/viktomas/gritty/-/blob/b9b969635a6d1aee394a9795e55627d36200b998/main.go#L193.
> >>>>
> >>>> I would love to get some pointers for how to render the runes into a grid myself.
> >>>> (if the documentation already explains the concept, then links to code are fine).
> >>>> I’ve been looking at the following files:
> >>>>
> >>>> - widget.textView https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/text.go#L45
> >>>> - this seems to be the closes to what i need
> >>>> - the cursor is implemented in the textView.caret but I couldn’t find where the cursor rendering is. I assume that the caret.end is where
> >>>>   textView renders the vertical line, but I didn’t find the code
> >>>> - widget.Editor https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/editor.go#L32
> >>>> - this struct implements much more logic than what I need (undo, redo, alignment, drag-drop)
> >>>
> >>>
> >>> Well, this means using the raw shaper API. You are looking at the
> >>> right files. widget.textView is the unexported power behind all
> >>> interactive text in Gio. It demonstrates how to traverse the glyph
> >>> stream, index it for cursor position candidates, and display the
> >>> results.
> >>>
> >>> Caret painting is implemented here:
> >>> https://git.sr.ht/~eliasnaur/gio/tree/main/item/widget/text.go#L367
> >>>
> >>> As you noted, widget.Editor is specialized beyond your needs.
> >>>
> >>>> What I need:
> >>>>
> >>>> - Must have
> >>>>   - render grid of runes
> >>>>   - render cursor (for now, it’s enough to invert colors on a rune, but eventually I’d like to be able to render the vertical line, similar to widget.Editor)
> >>>>   - choose foreground and background color for each rune
> >>>>     - it seems that the text.Shaper is not responsible for colors. Will I have to do my own ops to create background square, then change color and
> >>>>       let the shaper render the rune?
> >>>
> >>> Yes, for this (right now) you'd need to implement your own equivalent
> >>> of textView that painted glyphs with different colors by setting the
> >>> paint color manually. Soon I hope to teach the widgets to do this
> >>> themselves, but I'm not sure how soon.
> >>>
> >>>> - Nice to have
> >>>>   - eventually be able to scroll back in the buffer, but that’s not critical, I’d just like to have that option in the future
> >>>>   - underline, bold, and other text styling
> >>>
> >>> This would require some rich text support from the shaper API, which
> >>> is on my todo list alongside switching colors. Right now it would be
> >>> extremely difficult for you to implement this, as you would have to
> >>> invoke the shaper separately for each run of text with a consistent
> >>> style and then stitch the results back together.
> >>>
> >>>> I’ll appreciate any help
> >>>
> >>> Your best bet for short-term progress is to copy widget.textView and
> >>> its unexported dependencies into your project and to modify them to
> >>> support the color specialization you want. Once core has a richtext
> >>> API, you can try to simplify what you're doing using that.
> >>>
> >>> Cheers,
> >>> Chris
> >>
> >>
>
Details
Message ID
<80DCE26C-CAE3-4D75-B146-95607DC1B0EE@viktomas.com>
In-Reply-To
<CANtNKfoqQ6j_n-ZbzTmKHt_2QnekkcWxbHOtO5BSzt55=UzUVA@mail.gmail.com> (view parent)
DKIM signature
pass
Download raw message
Oh, sorry, I didn’t understand the previous message. You are right, that would work as an optimization.

> On 18. 9. 2023, at 14:45, Egon Elbre <egonelbre@gmail.com> wrote:
> 
> You can detect a character sequence that has the same fg and paint
> that as a single shape.
> 
> On Mon, Sep 18, 2023 at 3:37 PM Tomas <me@viktomas.com> wrote:
>> 
>> Thanks Ergon, that wouldn’t work for terminal emulator since each character can be rendered in different color.
>> 
>> I haven’t implemented color SGR sequences yet
>> (https://github.com/viktomas/gritty/blob/332814b61f0c4c184939fb48bc3dc7b7cab97120/controller/csi_translator.go#L141-L163),
>> but I already need to at least invert foreground and background color for blinking curosr.
>> 
>>> On 18. 9. 2023, at 14:19, Egon Elbre <egonelbre@gmail.com> wrote:
>>> 
>>> One optimization would be to draw all the glyphs that have the same
>>> foreground and background color. If you limit yourself to a single
>>> line it shouldn't be too problematic.
>>> 
>>> On Mon, Sep 18, 2023 at 3:07 PM Tomas <me@viktomas.com> wrote:
>>>> 
>>>> Thanks Chris, I hacked my way into rendering row x column character grid with different foreground (text) and background color:
>>>> 
>>>> https://github.com/viktomas/gritty/blob/777f7faed94ebfd2ae3b7d60de106346ab9307cb/label.go#L278-L326
>>>> 
>>>> I have a suspicion that it’s very inefficient, but I don’t mind since the rendering is fast enough.
>>>> 
>>>> ----
>>>> 
>>>> I’m now done with Gritty. Thanks for all the help and good luck with Gio :) I enjoyed learning about the immediate mode.
>>>> 
>>>> Is it possible to put https://github.com/viktomas/gritty in the Docs showcase section? https://gioui.org/doc/showcase
>>>> 
>>>>> On 1. 9. 2023, at 17:04, Chris Waldon <christopher.waldon.dev@gmail.com> wrote:
>>>>> 
>>>>> On Fri, Sep 1, 2023 at 5:39 AM Tomas <me@viktomas.com> wrote:
>>>>>> 
>>>>>> Hello again 👋
>>>>> 
>>>>> Hi Tomas!
>>>>> 
>>>>>> I’m still writing the terminal emulator. It’s not working that great, but the code is here https://gitlab.com/viktomas/gritty
>>>>>> 
>>>>>> I reached a point where the `material.Label` doesn’t work for me and I need to implement custom character grid.
>>>>>> 
>>>>>> Until now, I counted the available character space
>>>>>> (https://lists.sr.ht/~eliasnaur/gio/%3CE17329F0-A6E6-45E1-A176-7B1396ECA86D%40viktomas.com%3E),
>>>>>> then used Gio-unrelated method to create string with row*col rune grid and pass it to material.Label:
>>>>>> https://gitlab.com/viktomas/gritty/-/blob/b9b969635a6d1aee394a9795e55627d36200b998/main.go#L193.
>>>>>> 
>>>>>> I would love to get some pointers for how to render the runes into a grid myself.
>>>>>> (if the documentation already explains the concept, then links to code are fine).
>>>>>> I’ve been looking at the following files:
>>>>>> 
>>>>>> - widget.textView https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/text.go#L45
>>>>>> - this seems to be the closes to what i need
>>>>>> - the cursor is implemented in the textView.caret but I couldn’t find where the cursor rendering is. I assume that the caret.end is where
>>>>>>  textView renders the vertical line, but I didn’t find the code
>>>>>> - widget.Editor https://github.com/gioui/gio/blob/89d20c7d99bbccf9e24141ecf7e5ed75c913d283/widget/editor.go#L32
>>>>>> - this struct implements much more logic than what I need (undo, redo, alignment, drag-drop)
>>>>> 
>>>>> 
>>>>> Well, this means using the raw shaper API. You are looking at the
>>>>> right files. widget.textView is the unexported power behind all
>>>>> interactive text in Gio. It demonstrates how to traverse the glyph
>>>>> stream, index it for cursor position candidates, and display the
>>>>> results.
>>>>> 
>>>>> Caret painting is implemented here:
>>>>> https://git.sr.ht/~eliasnaur/gio/tree/main/item/widget/text.go#L367
>>>>> 
>>>>> As you noted, widget.Editor is specialized beyond your needs.
>>>>> 
>>>>>> What I need:
>>>>>> 
>>>>>> - Must have
>>>>>>  - render grid of runes
>>>>>>  - render cursor (for now, it’s enough to invert colors on a rune, but eventually I’d like to be able to render the vertical line, similar to widget.Editor)
>>>>>>  - choose foreground and background color for each rune
>>>>>>    - it seems that the text.Shaper is not responsible for colors. Will I have to do my own ops to create background square, then change color and
>>>>>>      let the shaper render the rune?
>>>>> 
>>>>> Yes, for this (right now) you'd need to implement your own equivalent
>>>>> of textView that painted glyphs with different colors by setting the
>>>>> paint color manually. Soon I hope to teach the widgets to do this
>>>>> themselves, but I'm not sure how soon.
>>>>> 
>>>>>> - Nice to have
>>>>>>  - eventually be able to scroll back in the buffer, but that’s not critical, I’d just like to have that option in the future
>>>>>>  - underline, bold, and other text styling
>>>>> 
>>>>> This would require some rich text support from the shaper API, which
>>>>> is on my todo list alongside switching colors. Right now it would be
>>>>> extremely difficult for you to implement this, as you would have to
>>>>> invoke the shaper separately for each run of text with a consistent
>>>>> style and then stitch the results back together.
>>>>> 
>>>>>> I’ll appreciate any help
>>>>> 
>>>>> Your best bet for short-term progress is to copy widget.textView and
>>>>> its unexported dependencies into your project and to modify them to
>>>>> support the color specialization you want. Once core has a richtext
>>>>> API, you can try to simplify what you're doing using that.
>>>>> 
>>>>> Cheers,
>>>>> Chris
>>>> 
>>>> 
>> 
Details
Message ID
<CAFcc3FT5zE8Xju2Z8N0XYUAVic8heuPdWj2=7Lq7cd47LxDBbw@mail.gmail.com>
In-Reply-To
<D6BF4408-21FB-4636-8208-EE5A01574030@viktomas.com> (view parent)
DKIM signature
pass
Download raw message
> I’m now done with Gritty. Thanks for all the help and good luck with Gio :) I enjoyed learning about the immediate mode.

Nice!

> Is it possible to put https://github.com/viktomas/gritty in the Docs showcase section? https://gioui.org/doc/showcase

Would you like to submit a PR here?
https://github.com/gioui/giouiorg/tree/main/content/doc/showcase

We'd be happy to have it in the showcase.

Cheers,
Chris
Reply to thread Export thread (mbox)