About

This repository holds community extensions for the Fyne toolkit.

This is in early development and more information will appear soon.

Layouts

Community contributed layouts.

import "fyne.io/x/fyne/layout"

Responsive Layout

The responsive layout provides a "bootstrap like" configuration to automatically make containers and canvas reponsive to the window width. It reacts to the window size to resize and move the elements. The sizes are configured with a ratio of the container width (0.5 is 50% of the container size).

The responsive layout follow the bootstrap size breakpoints:

• extra small for window width <= 576px
• small for window width <= 768
• medium for window width <= 992
• large for window width <= 1200
• extra large for windo width > 1200

To use a responsive layout:

layout := NewResponsiveLayout(fyne.CanvasObject...)

Optionally, Each canvas object can be encapsulated with Responsive() function to give the sizes:

layout := NewResponsiveLayout(
    Responsive(object1),            // all sizes to 100%
    Responsive(object2, 0.5, 0.75), // small to 50%, medium to 75%, all others to 100% 
)

Widgets

Community contributed widgets.

import "fyne.io/x/fyne/widget"

Calendar

A date picker which returns a time object with the selected date.

To use create a new calendar with a given time and a callback function:

calendar := widget.NewCalendar(time.Now(), onSelected, cellSize, padding)

Demo available for example usage

Animated Gif

A widget that will run animated gifs.

gif, err := NewAnimatedGif(storage.NewFileURI("./testdata/gif/earth.gif"))
gif.Start()

FileTree

An extension of widget.Tree for displaying a file system hierarchy.

tree := widget.NewFileTree(storage.NewFileURI("~")) // Start from home directory
tree.Filter = storage.NewExtensionFileFilter([]string{".txt"}) // Filter files
tree.Sorter = func(u1, u2 fyne.URI) bool {
    return u1.String() < u2.String() // Sort alphabetically
}

CompletionEntry

An extension of widget.Entry for displaying a popup menu for completion. The "up" and "down" keys on the keyboard are used to navigate through the menu, the "Enter" key is used to confirm the selection. The options can also be selected with the mouse. The "Escape" key closes the selection list.

entry := widget.NewCompletionEntry([]string{})

// When the use typed text, complete the list.
entry.OnChanged = func(s string) {
    // completion start for text length >= 3
    if len(s) < 3 {
        entry.HideCompletion()
        return
    }

    // Make a search on wikipedia
    resp, err := http.Get(
        "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + entry.Text,
    )
    if err != nil {
        entry.HideCompletion()
        return
    }

    // Get the list of possible completion
    var results [][]string
    json.NewDecoder(resp.Body).Decode(&results)

    // no results
    if len(results) == 0 {
        entry.HideCompletion()
        return
    }

    // then show them
    entry.SetOptions(results[1])
    entry.ShowCompletion()
}

7-Segment ("Hex") Display

A skeuomorphic widget simulating a 7-segment "hex" display. Supports setting digits by value, as well as directly controlling which segments are on or off.

Check out the demo for an example of usage.

h := widget.NewHexWidget()
// show the value 'F' on the display
h.Set(0xf)

Map

An OpenStreetMap widget that can the user can pan and zoom. To use this in your app and be compliant with their requirements you may need to request permission to embed in your specific software.

m := NewMap()

Data Binding

Community contributed data sources for binding.

import fyne.io/x/fyne/data/binding

WebString

A WebSocketString binding creates a String data binding to the specified web socket URL. Each time a message is read the value will be converted to a string and set on the binding. It is also Closable so you should be sure to call Close() once you are completed using it.

s, err := binding.NewWebSocketString("wss://demo.piesocket.com/v3/channel_1?api_key=oCdCMcMPQpbvNjUIzqtvF1d2X2okWpDQj4AwARJuAgtjhzKxVEjQU6IdCjwm&notify_self")
l := widget.NewLabelWithData(s)

The code above uses a test web sockets server from "PieSocket", you can run the code above and go to their test page to send messages. The widget will automatically update to the latest data sent through the socket.

MqttString

A MqttString binding creates a String data binding to the specified topic associated with the specified MQTT client connection. Each time a message is received the value will be converted to a string and set on the binding. Each time the value is edited, it will be sent back over MQTT on the specified topic. It is also a Closer so you should be sure to call Close once you are completed using it to disconnect the topic handler from the MQTT client connection.

opts := mqtt.NewClientOptions()
opts.AddBroker("tcp://broker.emqx.io:1883")
opts.SetClientID("fyne_demo")
client := mqtt.NewClient(opts)

token := client.Connect()
token.Wait()
if err := token.Error(); err != nil {
    // Handle connection error
}

s, err := binding.NewMqttString(client, "fyne.io/x/string")

Data Validation

Community contributed validators.

import fyne.io/x/fyne/data/validation

Password

A validator for validating passwords. Uses https://github.com/wagslane/go-password-validator for validation using an entropy system.

pw := validation.NewPassword(70) // Minimum password entropy allowed defined as 70.