 |
| calc usin golang andsciter |
Last Update : 18-07-2018
Up to this, we know how to create a window, put elements inside it, get input from the user and convert them in datatype we want.
We also know how to pass that converted input data to golang function and update GUI elements according to the response/ result we get from the execution of GUI element.
Here I am sharing the code of calc which actually requires all of the elements we have seen in previous examples.
GUI File
Here I am sharing GUI file given by Andrew as suggestions. But you can check original GUI code that I have written in case you want to curious how much this code is more optimized than the original code.
main-update.html
<html>
<head>
<style>
html { background:transparent; }
div#buttons {
flow: grid( 1 1 1 1,
3 4 5 12,
6 7 8 13,
9 10 11 14,
2 16 16 15 );
border-spacing:10dip;
size:*;
}
div#buttons > * {
display:block;
size:*;
min-height: 2em;
font-size: 4vh;
}
</style>
</head>
<body>
<h1>Simple Input</h1>
<div#buttons>
<input|text #input> <!-- 1 -->
<button.btn>0</button> <!-- 2 -->
<button.btn>1</button> <!-- 3 -->
<button.btn>2</button> <!-- 4 -->
<button.btn>3</button> <!-- 5 -->
<button.btn>4</button> <!-- 6 -->
<button.btn>5</button> <!-- 7 -->
<button.btn>6</button> <!-- 8 -->
<button.btn>7</button> <!-- 9 -->
<button.btn>8</button> <!-- 10 -->
<button.btn>9</button> <!-- 11 -->
<button.btn>+</button> <!-- 12 -->
<button.btn>-</button> <!-- 13 -->
<button.btn>*</button> <!-- 14 -->
<button.btn>/</button> <!-- 15 -->
<button.op>=</button> <!-- 16 -->
</div>
<p> Operator Found <label for="" #prev></label></p>
<script type="text/tiscript">
event click $(button.op){
self#prev.text="";
self#input.text= view.Operate(self#input.text);
}
event click $(button.btn){
if (this.text == "+" || this.text == "-"
|| this.text == "*" || this.text == "/" ) {
if (self#prev.text != "y"){
self#prev.text="y"
}else{
self#input.text= view.Operate(self#input.text)
}
}
self#input.text = self#input.text + this.text; }
</script>
</body>
</html>
Grid in Sciter
Actually, the aim is not to explain the logic of calc. You will find better than me. What I want to show first is Grid (flow: grid)
div#buttons {
flow: grid( 1 1 1 1,
3 4 5 12,
6 7 8 13,
9 10 11 14,
2 16 16 15 );
border-spacing:10dip;
size:*;
}
 |
| explanation of flow grid defined in CSS |
Upper CSS applies to the HTML div shown below. It arranged elements in the order we have defined in the grid ( see image for better understanding )
<div#buttons>
<input|text #input> <!-- 1 -->
<button.btn>0</button> <!-- 2 -->
<button.btn>1</button> <!-- 3 -->
<button.btn>2</button> <!-- 4 -->
<button.btn>3</button> <!-- 5 -->
<button.btn>4</button> <!-- 6 -->
<button.btn>5</button> <!-- 7 -->
<button.btn>6</button> <!-- 8 -->
<button.btn>7</button> <!-- 9 -->
<button.btn>8</button> <!-- 10 -->
<button.btn>9</button> <!-- 11 -->
<button.btn>+</button> <!-- 12 -->
<button.btn>-</button> <!-- 13 -->
<button.btn>*</button> <!-- 14 -->
<button.btn>/</button> <!-- 15 -->
<button.op>=</button> <!-- 16 -->
</div>
</div>
Event in Sciter
In earlier examples, we were using syntax like self$(selector).on("click",...)
But Andrew suggest a far better way to respond to events
event click $(button.btn){
if (this.text == "+" || this.text == "-"
|| this.text == "*" || this.text == "/" ) {
if (self#prev.text != "y"){
self#prev.text="y"
}else{
self#input.text= view.Operate(self#input.text) }
}
self#input.text = self#input.text + this.text; }
if (this.text == "+" || this.text == "-"
|| this.text == "*" || this.text == "/" ) {
if (self#prev.text != "y"){
self#prev.text="y"
}else{
self#input.text= view.Operate(self#input.text) }
}
self#input.text = self#input.text + this.text; }
Here, You may find prev some difficult to understand. For short, the role of prev is to get track of operator. If there is one operator exists on the string then the second should not be entered until the current input string has been processed and output of that string is received.
If still you can not understand it just comment and I will try to explain it in another way.
By the way, there are other events too, here is the list of predefined sciter events
If still you can not understand it just comment and I will try to explain it in another way.
By the way, there are other events too, here is the list of predefined sciter events
General Syntax for event
event ename $(selector) (evt) { ... code ... }
GoLang File
main.go
package main
import (
"fmt"
"strconv"
"strings"
"github.com/fatih/color"
"github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
)
func main() {
rect := sciter.NewRect(100, 100, 300, 300)
window, windowsGenerateionError := window.New(sciter.SW_MAIN|sciter.SW_CONTROLS|sciter.SW_ENABLE_DEBUG, rect)
if windowsGenerateionError != nil {
color.RedString("Failed to generate sciter window ", windowsGenerateionError.Error())
}
uiLoadingError := window.LoadFile("./main-update.html")
if uiLoadingError != nil {
color.RedString("Failed to load ui file ", uiLoadingError.Error())
}
window.DefineFunction("Operate", Operate)
// Setting up stage for Harmony
window.SetTitle("Simple Input")
window.Show()
window.Run()
}
// Operate function just expects one parametre
// mathamatic string containing both
// operands and operator
func Operate(val ...*sciter.Value) *sciter.Value {
// Trim All space as we are taking
// now input as string
trimmedString := val[0].String()
// if input empty or not
if strings.TrimSpace(trimmedString) == "" {
fmt.Println("Invalid input ")
return nil
}
opGroup := []string{"+", "-", "*", "/"}
for _, op := range opGroup {
if strings.Contains(trimmedString, op) {
fmt.Println("we found ", op, " operator in string")
inputString := strings.Split(trimmedString, op)
op1, _ := strconv.Atoi(inputString[0])
op2, _ := strconv.Atoi(inputString[1])
switch op {
case "+":
{
return sciter.NewValue(op1 + op2)
}
case "-":
{
return sciter.NewValue(op1 - op2)
}
case "/":
{
return sciter.NewValue(op1 / op2)
}
case "*":
{
return sciter.NewValue(op1 * op2)
}
default:
{
fmt.Println("no operator found ")
}
}
}
}
return nil
}Here new thing is just Operate function which is even pretty much easy to understand. It just checks which operator is present in this string. Then splits from that opeartor. After getting operands from input string via splits it does operate on it using the operator.
Though this code is self explantory. You can comment if you need more explanation.
Link to Soruce Code
Though this code is self explantory. You can comment if you need more explanation.
Link to Soruce Code
Hey, a nice blog article :)
ReplyDeleteSome typos:
s/parametre/parameter/
s/mathamatic/mathematical/
Instead of a single string in `view.Operate` it would be better to pass an easy to use object, like, `{ left: 123, right: 456, op: "+" }`, it would simplify your Go code.
To construct it on TIScript side, either to parse `self#input` with regexp (for example) or to maintain a separate state (i.e. Model) with this object and render (i.e. display in View) it via, say, `self#input.text = String.printf("%d %s %d", state.left, state.op, state.right);`
Thanks for feedback. I will fix types.
Delete