Example of viewport and a simple function

[keith6014]

I have a simple function getData which takes in an argument. I would like to have 2 viewports which will output data from it periodically. I don't need them to scroll just update the content. Instead of a viewport ideally a widget of some sort would be ideal but I am not sure if such a thing exists.

I will call the function, getData("kilo") and getData("micro"). I would like to run it every .5secs (high precision).

I looked at https://github.com/charmbracelet/bubbletea/tree/master/examples/realtime and https://github.com/charmbracelet/bubbletea/tree/master/examples/send-msg but couldn't figure it out.

package main

import (
        "fmt"
        "math/rand"
        "time"
)

func getData(v string) string {
        if len(v) == 0 {
                return ""
        }
        rand.Seed(time.Now().UnixNano()) // Seed with current time
        k := rand.Intn(126 - 33)
        return v + string(k)
}

func main() {

        for {
                fmt.Println(getData("avbd"))
                time.Sleep(1 * time.Second)
        }
}

[KevM]

I've used the realtime example with success. You are expected to provide a channel (likely fed by a goroutine). The example uses waitForActivity to listen for a "message" coming from the channel.

After the message has been processed in yoru component's Update you'll need to setup another waitForActivity

I wrote a helper generic method similar to their waitForActivity to take a channel and a func to transform the channel output into a tea.Msg

func waitForChannelTransform[T any, R any](c chan T, f func(T) R) tea.Cmd {
	return func() tea.Msg {
		result := <-c
		return f(result)
	}
}

I found this handy as you often want to transform the channel results into something your TUI can consume.

Here is a contrived usage example:

func waitForTopColorEvent(m Model) tea.Cmd {

	if m.topColorSub == nil {
		return nil
	}

	toEvent := func(colors []sdk.Color) TopColorsEvent {
		return TopColorsEvent{
			Colors: colors,
		}
	}

	// The stream func retuns a channel which it manages 
	return waitForChannelTransform(m.topColorSub.Stream(), toEvent)
}

Your component would then have something like this in the Update message switch:

case TopColorsEvent:
 m.colors = msgType.Colors
 m.table = m.updateTopColorTable()
 cmd := waitForTopColorEvent(m)
 return m, cmd

[meowgorithm]

Nice to see you solved it! You could also use a Tick Cmd, which you may find simpler. Here's a full example based on your original question that uses two viewports:

kilomicro.mov

package main

import (
	"fmt"
	"math/rand"
	"os"
	"time"

	"github.com/charmbracelet/bubbles/viewport"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

func getData(v string) string {
	if len(v) == 0 {
		return ""
	}

	// NOTE: seed is no longer needed in Go 1.20 and greater
	// rand.Seed(time.Now().UnixNano())

	k := rand.Intn(126 - 33)
	return fmt.Sprintf("%v%d", v, k)
}

type dataMsg struct {
	kilo  string
	micro string
}

func tick() tea.Cmd {
	return tea.Tick(time.Second/2, func(time.Time) tea.Msg {
		return dataMsg{kilo: getData("kilo"), micro: getData("micro")}
	})
}

func newModel() (m model) {
	vpStyle := lipgloss.NewStyle().Border(lipgloss.RoundedBorder())
	m.viewportKilo = viewport.New(0, 0)
	m.viewportKilo.Style = vpStyle
	m.viewportMicro = viewport.New(0, 0)
	m.viewportMicro.Style = vpStyle.Copy()
	return m
}

type model struct {
	bufferKilo    string
	viewportKilo  viewport.Model
	bufferMicro   string
	viewportMicro viewport.Model
}

func (m model) Init() tea.Cmd {
	return tick()
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.WindowSizeMsg:
		m.viewportKilo.Height = msg.Height
		m.viewportKilo.Width = msg.Width / 2
		m.viewportMicro.Height = msg.Height
		m.viewportMicro.Width = msg.Width - m.viewportKilo.Width
	case tea.KeyMsg:
		switch msg.String() {
		case "q", "ctrl+c", "esc":
			return m, tea.Quit
		}
	case dataMsg:
		if s := msg.kilo; s != "" {
			if m.bufferKilo != "" {
				m.bufferKilo += "\n"
			}
			m.bufferKilo += s
			m.viewportKilo.SetContent(m.bufferKilo)
			m.viewportKilo.GotoBottom()
		}
		if s := msg.micro; s != "" {
			if m.bufferMicro != "" {
				m.bufferMicro += "\n"
			}
			m.bufferMicro += s
			m.viewportMicro.SetContent(m.bufferMicro)
			m.viewportMicro.GotoBottom()
		}
		return m, tick()
	}

	return m, nil
}

func (m model) View() string {
	return lipgloss.JoinHorizontal(lipgloss.Top, m.viewportKilo.View(), m.viewportMicro.View())
}

func main() {
	p := tea.NewProgram(newModel(), tea.WithAltScreen())
	if _, err := p.Run(); err != nil {
		fmt.Println("Error running program:", err)
		os.Exit(1)
	}
}

[KevM]

Very cool. tea.Tick makes more sense for a pull model (http, or db query). I am working with a websocket push model. Let me know if you have better magic for that mode update because I'd love to know.

[keith6014]

What if I want a list of functions I want to run at different frequency? How can we use it with tea.Batch?

Thanks again