Skip to main content

Simple Calc using golang and sciter-sdk

calc usin golang andsciter
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:*;            
                   }
explaination of flow grid defined in css
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> 


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;          }


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

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

Comments

  1. Hey, a nice blog article :)

    Some 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);`

    ReplyDelete

Post a Comment

Popular posts from this blog

Apache : setup basic auth with apache in windows

Authentication is any process by which you verify that someone is who they claim they are. Authorization is any process by which someone is allowed to be where they want to go or to have information that they want to have. I will show here how to set up basic auth on the apache with windows. Pre-requests  Windows VPS Apache server ( That's it ) ( In windows it might be difficult to setup the Apache alone. So instead use something ling xampp , wamp or laragon .) RestClient (  I personally use the postman , but you can use your preferable client)  Windows VPS provider Steps  Enable the necessary modules in the Apache Create the password file Set the auth directives in the virtual host file. Verify basic auth. Enable the  necessary   modules  in the Apache Open the httpd.conf file in the apache's conf folder. httpd.conf file Enable the necessary modules to make the basic auth working. Necessary modules  mod_auth_basic

Firebase - update a spacific fields of single element of object of array in firestore

Firebase - update a spacific fields of single element of object of array in firestore  Its actully advisable to use map instead of array when ever it is possible. But, there are cetain cases where you don't have option to do so.  For example, you are directly saving the response from some outer source without any modification and they send you an array. In this case you will have array to work with. Firestore does not support array here is why  "bad things can happen if you have multiple clients all trying to update or delete array elements at specific indexes. In the past, Cloud Firestore addressed these issues by limiting what you can do with arrays " For more details information you can refer to Kato Richardson post Best Practices: Arrays in Firebase .  Firestore document having array [ used from stackoverflow question ] Suppose you have array of object something like shown in array. Now you want to update endTime field of the object on the index [1]

Sciter : GUI Application with Golang using HTML/CSS

GUI library for golang sciter 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 e