NewSplits vertical splits #738

ddkwork · 2024-01-01T05:56:31Z

ddkwork
Jan 1, 2024

I searched through all demos, examples, issues, and GIV related source code, and I couldn't find the vertical setting for the split layout,As an example of a Xi layout is to implement a CPU page layout with x64dbg.

https://x64dbg.com/

package main

import (
	"goki.dev/colors"
	"goki.dev/gi/v2/gi"
	"goki.dev/gi/v2/gimain"
	"goki.dev/girl/styles"
)

func main() {
	gimain.Run(func() {
		appBody := gi.NewAppBody("dbg")

		tabs := gi.NewTabs(appBody)
		tabs.NewTab("cpu")
		tabs.NewTab("log")
		tabs.NewTab("notes")
		tabs.NewTab("break")

		splits := gi.NewSplits(tabs)
		gi.NewFrame(splits).Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		gi.NewFrame(splits).Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})

		newSplits := gi.NewSplits(splits)
		gi.NewFrame(newSplits).Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		gi.NewFrame(newSplits).Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		appBody.NewWindow().Run().Wait()
	})
}

kkoreilly · 2024-01-01T06:04:08Z

kkoreilly
Jan 1, 2024
Maintainer

Apologies for the incomplete documentation; you need to set the Dim of the splits (ie: gi.NewSplits(tabs).SetDim(mat32.Y)). Also, you should add elements to each individual tab, not to the tabs element container as a whole. For example:

                tabs := gi.NewTabs(appBody)
		cpu := tabs.NewTab("cpu")
		tabs.NewTab("log")
		tabs.NewTab("notes")
		tabs.NewTab("break")

		splits := gi.NewSplits(cpu).SetDim(mat32.Y) // <- you need to add the splits to the tab (cpu), not the tabs container

1 reply

ddkwork Jan 1, 2024
Author

Thank you very much, I will try further

ddkwork · 2024-01-01T11:53:26Z

ddkwork
Jan 1, 2024
Author

Also, a linear setup for vertical splitting is possible, with your guidance, but it was a bit difficult for me to nest multiple horizontal split layouts with one vertical split layout.

I'm going to replace the previous debugger interface library with goki.
https://github.com/HyperDbg/gui

8 replies

kkoreilly Jan 5, 2024
Maintainer

You should still be able to nest the splits within each other. If I understand what you are trying to accomplish correctly, it seems like you should do this in the relevant part of your code. Also, in your markdown code blocks, please use ```go for the start instead of just ``` so that the code is formatted properly.

		vsplits := NewVSplits(cpu)
                splits := NewHSplits(vsplits)
		//splits := gi.NewSplits(cpu)
		//splits.Style(func(s *styles.Style) {
		//	s.Direction = styles.Column
		//	s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		//})
		frame := gi.NewFrame(splits)
		frame.Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		demoTable(frame)

		frame2 := gi.NewFrame(splits)
		frame2.Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		splits.SetSplits(.7, .3)

		newSplits := NewHSplits(vsplits)
		//newSplits := gi.NewSplits(cpu)
		gi.NewFrame(newSplits).Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		frame4 := gi.NewFrame(newSplits)
		frame4.Style(func(s *styles.Style) {
			s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		demoTable(frame4)
		newSplits.SetSplits(.6, .4)

ddkwork Jan 5, 2024
Author

thx you very much, i will try again.

ddkwork Jan 5, 2024
Author

Thank you again for your pointers, I updated the split layout code as you prompted, and it has been rendered as expected, but the arrow that adjusts the scale horizontally has changed to a vertical direction, I don't know if it's a bug

package main

import (
	_ "embed"
	"fmt"
	"goki.dev/colors"
	"goki.dev/gi/v2/gi"
	"goki.dev/gi/v2/gimain"
	"goki.dev/gi/v2/giv"
	"goki.dev/girl/states"
	"goki.dev/girl/styles"
	"goki.dev/girl/units"
	"goki.dev/icons"
	"goki.dev/ki/v2"
)

//go:embed Fleet.ico
var icon []byte

func main() {
	gimain.Run(func() {
		b := gi.NewAppBody("debugger")
		//b.App().SetIconBytes(icon)
		//todo add main menu and tooBar
		b.AddAppBar(func(tb *gi.Toolbar) {
			//o := gi.NewButton(tb).SetText("open").SetIcon(icons.FolderOpen)
			//o.On(events.MouseEnter, func(e events.Event) {
			//	println("MouseEnter")
			//	o.Styles.Font.Face.Size += 3 //todo放大字体和刷新
			//	o.ApplyStylePrefs()
			//})
			//o.On(events.MouseLeave, func(e events.Event) {
			//	println("MouseLeave")
			//	o.Styles.Font.Face.Size -= 3
			//	o.ApplyStylePrefs()
			//})

			o := gi.NewButton(tb).SetText("open").SetIcon(icons.FolderOpen)
			o.OnWidgetAdded(func(w gi.Widget) {
				if lb, ok := w.(*gi.Label); ok {
					lb.Style(func(s *styles.Style) {
						if o.StateIs(states.Hovered) {
							s.Font.Size = units.Dp(17)
						} else {
							s.Font.Size = units.Dp(14)
						}
					})
				}
			})

			gi.NewButton(tb).SetText("reload").SetIcon(icons.FrameReload)
			gi.NewButton(tb).SetText("stop").SetIcon(icons.StopCircle)
			gi.NewButton(tb).SetText("f7")
			gi.NewButton(tb).SetText("f8")
			gi.NewButton(tb).SetText("f9")
			gi.NewButton(tb).SetText("scylla")
			gi.NewButton(tb).SetText("path")
			gi.NewButton(tb).SetText("calc")
			gi.NewButton(tb).SetText("setting").SetIcon(icons.Settings)
			gi.NewButton(tb).SetText("about")
		})

		tabs := gi.NewTabs(b)
		cpu := tabs.NewTab("cpu") //todo add svg,设计寄存器垂直拆分布局，
		// 反汇编和立即数的垂直拆分布局以及cpu页面的嵌套垂直拆分布局，底部的命令栏和状态栏
		tabs.NewTab("log")
		tabs.NewTab("notes")
		tabs.NewTab("break")
		tabs.NewTab("memory")
		tabs.NewTab("stack")
		tabs.NewTab("seh")
		tabs.NewTab("script")
		tabs.NewTab("symbol")
		tabs.NewTab("source")
		tabs.NewTab("references")
		tabs.NewTab("thread")
		tabs.NewTab("handle")
		tabs.NewTab("trace")

		vSplits := NewVSplits(cpu) //有垂直布局的情况需要先垂直，水平的父级是垂直就合理了
		topSplits := NewHSplits(vSplits)
		downSplits := NewHSplits(vSplits)
		vSplits.SetSplits(.7, .3)

		dismFrame := gi.NewFrame(topSplits)
		dismFrame.Style(func(s *styles.Style) {
			//s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		dismTable(dismFrame)

		regFrame := gi.NewFrame(topSplits)
		regFrame.Style(func(s *styles.Style) {
			//s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		topSplits.SetSplits(.7, .3)

		hexEditFrame := gi.NewFrame(downSplits)
		hexEditFrame.Style(func(s *styles.Style) {
			//s.Direction = styles.Row
			s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
		})
		stackFrame := gi.NewFrame(downSplits)
		stackTable(stackFrame) //stack
		downSplits.SetSplits(.6, .4)

		c := gi.NewTextField(b).SetPlaceholder("command")
		c.Style(func(s *styles.Style) {
			s.Min.X.Pw(300)
			//s.Max.X.Pw(300)//todo 取屏幕宽度为最大宽度
			//s.Display = styles.Grid
		})

		b.NewWindow().Run().Wait()
	})
}

func NewHSplits(par ki.Ki) *gi.Splits {
	splits := gi.NewSplits(par)
	splits.Style(func(s *styles.Style) {
		s.Direction = styles.Row
		s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
	})
	return splits
}

func NewVSplits(par ki.Ki) *gi.Splits {
	splits := gi.NewSplits(par)
	splits.Style(func(s *styles.Style) {
		s.Direction = styles.Column
		s.Background = colors.C(colors.Scheme.SurfaceContainerLow)
	})
	return splits
}

func dismTable(frame *gi.Frame) *giv.TableView {
	tsttable := make([]*Dism, 100)

	for i := range tsttable {
		ts := &Dism{
			Icon:        "",
			Address:     0x00007FF838E51030 + i,
			Opcode:      []byte{1, 2, 3},
			Instruction: "mov qword ptr ss:[rsp+0x18], rsi",
			Comment:     "comment " + fmt.Sprint(i),
		}
		tsttable[i] = ts
	}
	tv := giv.NewTableView(frame, "tv")
	// tv.SetState(true, states.ReadOnly)
	tv.SetSlice(&tsttable)
	return tv
}

func stackTable(frame *gi.Frame) *giv.TableView {
	tsttable := make([]*Stack, 100)

	for i := range tsttable {
		ts := &Stack{
			Address: 0x00007FF838E51030 + i,
			Data:    0x00007FF838E51030 + i,
			Context: "返回到 ntdll.RtlGetImageFileMachines+4D9 自 ntdll.RtlAllocateHeap",
		}
		tsttable[i] = ts
	}
	tv := giv.NewTableView(frame, "tv")
	// tv.SetState(true, states.ReadOnly)
	tv.SetSlice(&tsttable)
	return tv
}

kkoreilly Jan 5, 2024
Maintainer

Yes, that is a bug. I updated the code and it should be fixed now if you use the latest version of gi (go get goki.dev/gi/v2@main).

ddkwork Jan 5, 2024
Author

Yes, that is a bug. I updated the code and it should be fixed now if you use the latest version of gi (go get goki.dev/gi/v2@main).

You are very cool, in the near future, gogi will appear in more and more software with complex layouts, thank you for your great project and your selfless dedication, let me understand the charm of your code

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

NewSplits vertical splits #738

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 9 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

NewSplits vertical splits #738

Uh oh!

ddkwork Jan 1, 2024

Replies: 2 comments · 9 replies

Uh oh!

kkoreilly Jan 1, 2024 Maintainer

Uh oh!

ddkwork Jan 1, 2024 Author

Uh oh!

ddkwork Jan 1, 2024 Author

Uh oh!

kkoreilly Jan 5, 2024 Maintainer

Uh oh!

ddkwork Jan 5, 2024 Author

Uh oh!

Uh oh!

ddkwork Jan 5, 2024 Author

Uh oh!

kkoreilly Jan 5, 2024 Maintainer

Uh oh!

ddkwork Jan 5, 2024 Author

ddkwork
Jan 1, 2024

Replies: 2 comments 9 replies

kkoreilly
Jan 1, 2024
Maintainer

ddkwork Jan 1, 2024
Author

ddkwork
Jan 1, 2024
Author

kkoreilly Jan 5, 2024
Maintainer

ddkwork Jan 5, 2024
Author

ddkwork Jan 5, 2024
Author

kkoreilly Jan 5, 2024
Maintainer

ddkwork Jan 5, 2024
Author