SCITER : GUI APPLICATION WITH GOLANG USING HTM

SCITER : GUI APPLICATION WITH GOLANG USING HTML/CSS

https://www.mchampaneri.in/2018/06/sciter-gui-application-with-golang.html

GUI library for golang sciter

Last Update: 03-07-2018

This is the words from Sciter’s Web site,

Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications.

Various GUI frameworks offer different UI declaration and styling languages, such as QML and XAML (Microsoft WPF). On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.

Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs/ui library i already have written a post on it. You can read it on post gui programming with golang. But this library is still under construction and has no support for production apps.

Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb. Which is 15mb of go and other was the electron.

Before some time I found another alternative, sciter , which is now also free to use for even commercially ( which was not before some time ).

I suppose you have read upper two paragraphs in grey text. If you want to know more about sciter you can visit its site which is https://sciter.com/

Here is a simple example of sciter application

Simple GUI App with Scitter & Golang
Here I am sharing the source code of golang and HTML file. [ which has to be in the same folder ]

package main
import (
    "fmt"
    "github.com/fatih/color"
    sciter "github.com/sciter-sdk/go-sciter"
    "github.com/sciter-sdk/go-sciter/window"
)
// Specifying  havily used
// Singltons to make them
// package wide available
var root *sciter.Element
var rootSelectorErr error
var w *window.Window
var windowErr error
// Preapare Scitre For Execution ///
func init() {
    // initlzigin window for downloaer
    // app with appropriate properties
    rect := sciter.NewRect(0, 100, 300, 350)
    w, windowErr = window.New(sciter.SW_TITLEBAR|
        sciter.SW_CONTROLS|
        sciter.SW_MAIN|
        sciter.SW_GLASSY,
        rect)
    if windowErr != nil {
        fmt.Println("Can not create new window")
        return
    }
    // Loading main html file for app
    htloadErr := w.LoadFile("./simpleGuiApp.html")
    if htloadErr != nil {
        fmt.Println("Can not load html in the screen", htloadErr.Error())
        return
    }
    // Initializng  Selector at global level as we  are going to need
    // it mostly and as it is
    root, rootSelectorErr = w.GetRootElement()
    if rootSelectorErr != nil {
        fmt.Println("Can not select root element")
        return
    }
    // Set title of the appliaction window
    w.SetTitle("Simple Calc")
}
// Preaprare Program for execution ///
func main() {
    addbutton, _ := root.SelectById("add")
    out1, errout1 := root.SelectById("output1")
    if errout1 != nil {
        color.Red("failed to bound output 1 ", errout1.Error())
    }
    addbutton.OnClick(func() {
        output := add()
        out1.SetText(fmt.Sprint(output))
    })
    w.Show()
    w.Run()
}
//////////////////////////////////////////////////
/// Function of calc                           ///
//////////////////////////////////////////////////
func add() int {
    // Refreshing and fetching inputs()
    in1, errin1 := root.SelectById("input1")
    if errin1 != nil {
        color.Red("failed to bound input 1 ", errin1.Error())
    }
    in2, errin2 := root.SelectById("input2")
    if errin2 != nil {
        color.Red("failed to bound input 2 ", errin2.Error())
    }
    in1val, errv1 := in1.GetValue()
    color.Green(in1val.String())
    if errv1 != nil {
        color.Red(errv1.Error())
    }
    in2val, errv2 := in2.GetValue()
    if errv2 != nil {
        color.Red(errv2.Error())
    }
    color.Green(in2val.String())
    return in1val.Int() + in2val.Int()
}
///////////////////////////////////////////////////

<html>
<head>
    <head>
        <title>Simple Calc</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    </head>
</head>
<body>
    <label for="">Input First</label>
    <input type="number" style="width: 250px; margin: 0 auto;" id="input1" >
    <label for="">Input Second</label>
    <input type="number" style="width: 250px; margin: 0 auto;" id="input2" >
    <input type="button" style="width: 125px; margin: 0 auto;" value="Add ( + )" id="add"> 
    <hr>
    <input type="number" style="width: 250px; margin: 0 auto;" id="output1" disabled>
</body>
</html>

But the conclusion is that sciter is most promising GUI library to create GUI app with golang.

Update : 26-06-2018

GoLang-Sciter Learn by example [ link to my GitHub repo ]
Examples [ chapters ] in increasing order of complexity. I will update it continuously unless I feel it’s complete. So stay tuned and watch

Update : 03-07-2018

I am writing a blog just about golang & sciter [ exclusively golang and sciter. nothing else. ] Itsgo-sciter.mchampaneri.in

Hope find it useful!