embgui

package module
v0.4.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Feb 7, 2021 License: MIT Imports: 6 Imported by: 0

README

EmbGUI - embedded GUI for Go apps.

Go Report Card

Instant admin panels for Go apps. Turn plain Go code into HTML+CSS admin panel with a collection of common components and a predefined layout.

screenshot

Use case

  • EmbGUI is aimed primarily at microservices and APIs, that need to expose some stats or basic maintenance panel via HTTP HTML interface
  • it has all the assets embedded, it's very convenient when shipping a single binary with no external dependencies
  • it doesn't require to do any:
    • HTML
    • CSS
    • JS
    • layouts
    • resource embedding

Non-use cases

  • advanced admin panels and websites
  • JavaScript apps (there's no JS, just plain old server-side rendering)
  • unique, custom styled panels (this lib is highly opinionated and styling is very limited)
package main

import (
	"net/http"
	"github.com/inteliwise/embgui"
)

var ui *embgui.EmbGUI

// sample page
func index(w http.ResponseWriter, r *http.Request) {
	page := ui.NewRoot("Hello") // "Hello" option will be active on navbar
	page.H1("Hello!")
	page.P("Lorem...")
	form := page.Form("/newuser")
	form.FormInput("First Name", "first_name")
	form.FormButton("Send")
	table := page.GenTableBody([]string{"name", "surname", "action"})
	row := table.Tr()
	row.Td("hello")
	row.Td("world")
	row.Td("").LinkButton("Inspect", "#")
	html, _ := page.RenderPage() // skipping errors for a concise example
	w.Write([]byte(html))
}

// another page that shares ui template with index
func world(w http.ResponseWriter, r *http.Request) {
	page := ui.NewRoot("World") // "World" option will be active on the navbar
	page.H1("World!")
	page.GenTiles(embgui.Tile{Title: "7", Subtitle: "new users"},
		embgui.Tile{Title: "71", Subtitle: "new sales"},
		embgui.Tile{Title: "90", Subtitle: "CPU usage"},
		embgui.Tile{Title: "71", Subtitle: "disk free"})	
	tagWithUnsafeContent := page.P("<strong>hello!</strong>")
	tagWithUnsafeContent.Unsafe = true
	page.RawHTML("<p><i>hello world</i></p>")
	html, _ := page.RenderPage()
	w.Write([]byte(html))
}

// return embedded CSS data
// this will return gzipped bulma.io CSS that is embedded into embgui sources
func css(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "text/css")
	w.Header().Set("Content-Encoding", "gzip")
	w.Write([]byte(ui.CSS)) 
}

func main() {
	// template, shared among all views
	// remember, that you need to pass a link to CSS assets
	ui, _ = embgui.New("DEMO", "/app.css", []embgui.MenuItem{
		{Name: "Hello", Link: "/"},
		{Name: "World", Link: "/world"},
	})
	http.HandleFunc("/", index)
	http.HandleFunc("/world", world)
	// CSS assets used by embgui.New()
	http.HandleFunc("/app.css", css)
	if err := http.ListenAndServe(":8080", nil); err != nil {
		panic(err)
	}
}

This is still WIP! Things may change before it reaches 1.0.0!

Developent goals

  • keep the ease of use, it always has to be from 0 to GUI in minutes
  • no JavaScript, CSS only, keep everything server-side
  • don't introduce any external dependencies like web-fonts or APIs (it should work in environments with no public Internet access)
  • maintain compatibility with text-based browsers
  • add charts (server side rendered)
  • more components and elements!

Bulma

EmbGUI uses wonderful Bulma framework for layout and styling. It's gzipped and base64 encoded and will be compiled with your app. Don't worry, it's just 30kb. Bulma Framework is released at https://github.com/jgthms/bulma on MIT License (see css_file.go)

Documentation

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

This section is empty.

Types

type EmbGUI 

type EmbGUI struct {
	CSS        string
	Size       string
	NavTheme   string
	NavLink    string
	CustomHead string
	// contains filtered or unexported fields
}

EmbGUI is a HTML page, with one root EmbNode with many children

func New 

func New(title string, cssLink string, menu []MenuItem) (*EmbGUI, error)

New creates a new page with a tile and a side menu usually it's defined once as a project-wide template you may customize NavTheme and NavLink after creation NavTheme uses bulma's colors (see https://bulma.io/documentation/elements/button/#colors) NavLink is a URL for navbar's title

func (*EmbGUI) NewRoot 

func (gui *EmbGUI) NewRoot(menuOption string) *EmbNode

NewRoot creates a new EmbNode root node that belongs to a EmbGUI Page it's injected into template, so usually you need to create one root per view menuOption will be made active on navbar

type EmbNode 

type EmbNode struct {
	Text        string
	Href        string
	Action      string
	Method      string
	HTMLTag     string
	Type        string
	Class       string
	Style       string
	Name        string
	ID          string
	Enctype     string
	Placeholder string
	Value       string
	Rows        int
	Unsafe      bool
	Root        bool

	GUIConfig *EmbGUI
	Children  []*EmbNode
	// contains filtered or unexported fields
}

EmbNode is a HTML element

func (*EmbNode) A 

func (n *EmbNode) A(text string, href string) *EmbNode

A generates a link

func (*EmbNode) ActionButton 

func (n *EmbNode) ActionButton(text string, action string) *EmbNode

ActionButton generates POST button wrapped into a hidden form It's like LinkButton, but uses POST instead of GET

func (*EmbNode) Box 

func (n *EmbNode) Box() *EmbNode

Box generates div-box element

func (*EmbNode) Buttons 

func (n *EmbNode) Buttons() *EmbNode

Buttons generates <div> for button group

func (*EmbNode) DelButton 

func (n *EmbNode) DelButton(text string, action string) *EmbNode

DelButton generates DEL button wrapped into a hidden form your framework should support hidden _method tag

func (*EmbNode) Div 

func (n *EmbNode) Div(id string, style string, text string) *EmbNode

Div generates <div> with custom id and styling

func (*EmbNode) FileUpload added in v0.4.0 

func (n *EmbNode) FileUpload(action string, label string, name string) *EmbNode

FileUpload generates a file upload form

func (*EmbNode) Form 

func (n *EmbNode) Form(action string, method string) *EmbNode

Form generates simple form

func (*EmbNode) FormButton 

func (n *EmbNode) FormButton(text string) *EmbNode

FormButton generates a submit button inside a form

func (*EmbNode) FormInput 

func (n *EmbNode) FormInput(label string, hideLabel bool, name string, value string) *EmbNode

FormInput generates a text input inside form

func (*EmbNode) FormTextArea 

func (n *EmbNode) FormTextArea(name string, rows int, text string) *EmbNode

FormTextArea generates a textarea inside a form

func (*EmbNode) GenTableBody 

func (n *EmbNode) GenTableBody(header []string) *EmbNode

GenTableBody helps generate html table it returns tbody from inside the table, not the table itself, so you can add Tr/Td to it 

tbody := page.GenTableBody([]string{"id", "name", "surname"})
row := tbody.Tr()
row.Td("1")
row.Td("john")
row.Td("smith")

func (*EmbNode) GenTiles 

func (n *EmbNode) GenTiles(data ...Tile) *EmbNode

GenTiles generates set of tiles 

page.GenTiles(embgui.Tile{Title: "7", Subtitle: "new users"},
embgui.Tile{Title: "71", Subtitle: "new sales"},
embgui.Tile{Title: "90%", Subtitle: "CPU usage"},
embgui.Tile{Title: "71%", Subtitle: "disk free"})

func (*EmbNode) H1 

func (n *EmbNode) H1(text string) *EmbNode

H1 generates <h1> tag

func (*EmbNode) H2 

func (n *EmbNode) H2(text string) *EmbNode

H2 generates <h2> tag

func (*EmbNode) H3 

func (n *EmbNode) H3(text string) *EmbNode

H3 generates <h3> tag

func (*EmbNode) H4 

func (n *EmbNode) H4(text string) *EmbNode

H4 generates <h4> tag

func (*EmbNode) H5 

func (n *EmbNode) H5(text string) *EmbNode

H5 generates <h5> tag

func (*EmbNode) Hr 

func (n *EmbNode) Hr() *EmbNode

Hr generates a horizontal rule

func (*EmbNode) Li 

func (n *EmbNode) Li(text string) *EmbNode

Li adds element to list

func (*EmbNode) LinkButton 

func (n *EmbNode) LinkButton(text string, href string) *EmbNode

LinkButton generates a link styled as button

func (*EmbNode) Message 

func (n *EmbNode) Message(text string, color string) *EmbNode

Message generates pre-styled message/tip div - alerts etc color can be one of bulma's colors (see https://bulma.io/documentation/elements/button/#colors)

func (*EmbNode) MiniActionButton 

func (n *EmbNode) MiniActionButton(text string, action string) *EmbNode

MiniActionButton generates POST button wrapped into a hidden form it's good for buttons inside tables

func (*EmbNode) MiniDelButton 

func (n *EmbNode) MiniDelButton(text string, action string) *EmbNode

MiniDelButton generates DEL button wrapped into a hidden form it's good for buttons inside tables your framework should support hidden _method tag

func (*EmbNode) MiniLinkButton 

func (n *EmbNode) MiniLinkButton(text string, href string) *EmbNode

MiniLinkButton generates a link styled as button, just like LinkButton(), but smaller it's good for links inside tables

func (*EmbNode) P 

func (n *EmbNode) P(text string) *EmbNode

P generates <p> tag

func (*EmbNode) Pre 

func (n *EmbNode) Pre(text string, class string) *EmbNode

Pre generates <pre><code> tags

func (*EmbNode) RawHTML 

func (n *EmbNode) RawHTML(html string) *EmbNode

RawHTML generates a div with unsafe HTML

func (*EmbNode) RenderPage 

func (n *EmbNode) RenderPage() (string, error)

RenderPage renders template with top-menu, root EmbNode element and its children

func (*EmbNode) SearchForm 

func (n *EmbNode) SearchForm(action string, value string) *EmbNode

SearchForm generates predefined search form action is a URL we use to do a GET request with a "search" param

func (*EmbNode) Td 

func (n *EmbNode) Td(text string) *EmbNode

Td table element

func (*EmbNode) Tr 

func (n *EmbNode) Tr() *EmbNode

Tr table element

func (*EmbNode) TwoColumns 

func (n *EmbNode) TwoColumns() (*EmbNode, *EmbNode)

TwoColumns generates 2 column layout and returns 2 EmbNode pointers 

col1, col2 := TwoColumns()
col1.H1("hello")
col2.H2("world")

func (*EmbNode) Ul 

func (n *EmbNode) Ul() *EmbNode

Ul starts a list 

type MenuItem struct {
	Name string
	Link string
}

MenuItem is an singe item in the top menu

type Tile 

type Tile struct {
	Title    string
	Subtitle string
}

Tile represents single tile https://bulma.io/documentation/layout/tiles/ see GenTiles()

Source Files

View all Source files

Directories

Path Synopsis
examples
stdlib

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.