What would be the best giu / imgui approach for this?

[metaleap]

Loving giu! Wanted to gather opinions on this one:

Consider this (done in HTML) GUI prototype I aim to replicate in giu...

I have the picture part sorted already via g.GetCanvas().AddImage and am now wondering about the color table (which is not directly interactive, just colored-and-labelled table cells, so no buttons or anything). Current status:

Well all I have in my update-loop so far is g.SingleWindow().Layout(g.Custom(func() { canvas := g.GetCanvas() // etc........ but now for the colors table, I assume (correctly or not?) that I want a Table with one Label per table cell that I'd want to somehow (how?) background-color.

I'm thinking doing a MasterWindow.SetStyle before each Label call isn't exactly the right way to go about this cell (label) bg-coloring. Any other options for this?

[gucio321]

1. You might want to check out SplitLayout to separate image and table parts (just a sidenote)
2. Don't use MasterWindow.SetStyle as # it's a global style management system. You need to use StyleSetter for it table cell
3. If I remember correctly there is a style color ID for table cell background
4. Alternatively you can do this without using a table (what might easier). Just predict available area using the GetAvailableRegion, calculate how many labels you can put in one row and render each label in some type of container such as child widget or even a button. And for those containers I'm 100% sure there is a style color ID for background color.

[metaleap]

Thanks @gucio321 I tried alternative 4 first, but not seeing either red button background or red button text in this test code:

func loop() {
	widgets := []g.Widget{g.Label("100%")}
	for i := 0; i < 24; i++ {
		var cells []g.Widget
		for j := 0; j < 9; j++ {
			g.PushStyleColor(g.StyleColorButton, color.RGBA{R: 255, A: 255})
			cells = append(cells, g.Button("X"))
			g.PopStyleColor()
		}
		widgets = append(widgets, g.Row(cells...))
	}
	widgets = append(widgets,
		g.Custom(func() {
			canvas := g.GetCanvas()
			// pos := g.GetCursorScreenPos()
			canvas.AddImage(imgDstTexture, image.Pt(imgSize.Dx()/5, 55), image.Pt(5*(imgSize.Dx()/5), 55+4*(imgSize.Dy()/5)))
			canvas.AddImage(imgSrcTexture, image.Pt(imgSize.Dx()/5, 55), image.Pt(5*(imgSize.Dx()/5), 55+4*(imgSize.Dy()/5)))
		}),
	)

	g.SingleWindow().Layout(widgets...)
}

Just the usual imgui colors:

Will try the table next, but if any ideas on the above I'm curious =)

[metaleap]

If I remember correctly there is a style color ID for table cell background

Ouf... unfortunately it seems like (c)imgui only has these 5:

Guess I don't need to try the table approach here or what do you think?

[metaleap]

OK I got it, I render Labels and via the Canvas just as many AddRectFilled:

Black text color would be nice to have but in this case I can easily tell the letter/digit combo anyway, so nevermind =)

[gucio321]

Just to clarify the red background on your buttons didn't work because calling the button method doesn't actually render buttons but only creates a widget. in your code you push style ID, create a widget and Pop style ID what doesn't affect your widget. You should use style setter here.

As for table background I think rowBg should work.