반응형

go-sciter를 이용하여 아날로그 시계를 구현해보도록 하겠습니다. go-sciter를 이용한 프로그램은 데이터처리를 위한 .go 파일과 뷰 제어를 위한 .html파일로 구성이 되어있는데요, 오늘은 아날로그 시계 만들기는 html에서 시계의 움직임까지 표현해주고, .go파일에서는 그냥 html을 로딩하는 역할만 하게됩니다.

우선 결과물은 아래와 같이 나옵니다.

 

 

 

그럼, 소스는...

 

1. main.go (기본적인 html 로딩 포맷으로 기존과 동일)

package main

import (
	"fmt"

	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, 200, 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("./main.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")

}

// Preaprare Program for execution ///
func main() {

	w.Show()
	w.Run()

}

 

2.main.html

<html>
  <head>
    <title>Sciter2 clock</title>
    <style>
    
      div.clock { 
        prototype:Clock; 
        width:*;
        height:*;
        /*border:1px solid black;*/
      }
    
    </style>
    <script type="text/tiscript">

!function(){

  $(span#os).text = System.OS;

}();   

    
class Clock: Behavior 
{

  function attached() { 
    this.paintContent = this.drawclock; // attaching draw handler to paintContent layer
    this.timer(300,::this.refresh());
  }

  function drawclock(gfx)
  {
    var (x,y,w,h) = this.box(#rectw);
    var scale = w < h? w / 300.0: h / 300.0;
    var now = new Date();
    gfx.save();
    gfx.translate(w/2.0,h/2.0);
    gfx.scale(scale,scale);    
    gfx.rotate(-Math.PI/2);
    gfx.lineColor(color(0,0,0));
    gfx.lineWidth(8);
    gfx.lineCap = Graphics.CAP_ROUND;
       
    // Hour marks
    gfx.save();
    gfx.lineColor(color(0x32,0x5F,0xA2));
    for (var i in 12) {
      gfx.rotate(Math.PI/6);
      gfx.line(100,0,120,0);
    }
    gfx.restore();

    // Minute marks
    gfx.save();
    gfx.lineWidth(5);
    for (var i in 60) {
      if ( i % 5 != 0)
        gfx.line(117,0,120,0);
      gfx.rotate(Math.PI/30);
    }
    gfx.restore();

    var sec = now.second;
    var min = now.minute;
    var hr  = now.hour;
    hr = hr >= 12 ? hr-12 : hr;
  
    // write Hours
    gfx.save();
    gfx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
    gfx.lineWidth(14);
    gfx.line(-20,0,70,0);
    gfx.restore();

    // write Minutes
    gfx.save();
    gfx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
    gfx.lineWidth(10);
    gfx.line(-28,0,100,0);
    gfx.restore();
      
    // Write seconds
    gfx.save();
    gfx.rotate(sec * Math.PI/30);
    gfx.lineColor(color(0xD4,0,0));
    gfx.fillColor(color(0xD4,0,0));
    gfx.lineWidth(6);
    gfx.line(-30,0,83,0);
    gfx.ellipse(0,0,10);
    
    gfx.noFill();
    gfx.ellipse(95,0,10);
    gfx.restore();
    
    // outline
    gfx.lineWidth(14);
    gfx.lineColor(color(0x32,0x5F,0xA2));
    gfx.ellipse(0,0,142);
    
    gfx.restore();
  }    
}
    
    </script>
  </head>
<body>
  <h2>Sciter clock using immediate mode drawing on <span #os></span></h2>
  <div class="clock" ></div>

</body>
</html>

이전 포스팅에서 말씀드렸다시피 TIScript라는 걸 사용해서 시계를 구현하는데요, 자바스크립트랑 비슷한 것 같긴한데 잘 모르겠는게 좀 있네요. 사실 자바스크립트도 잘 알지는 못하니... 좀 더 알아봐야겠습니다.

 

오늘은 이만~

반응형
반응형

간단히 날짜 표시하는 앱을 구현해보겠습니다.

 

1.main.go

package main

import (
	"fmt"
	"time"

	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, 200, 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("./main.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")

}

// Preaprare Program for execution ///
func main() {

	t := time.Now().Format("2006-01-02 15:04:05")
	date_now, _ := root.SelectById("date")
	date_now.SetText(t)
	//date_now.SetText("hello")

	w.Show()
	w.Run()

}

 

2.main.html

<html window-frame="default" window-blurbehind>
<head>
    <head>
        <title>Simple Calc</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <style>
          html{
            background: transparent;
          }
          #date{
            color: white;
            text-align: left;
            font-size:20px;
          }
        </style>
    </head>
</head>
<body>
  <label id="date">date</label>
</body>
</html>

 

결과는 아래와 같이~~

 

투명하게 처리된 프로그램. 보이시나요?

 

 

Golang과 HTML로 GUI 실행파일 만든다는게 꽤 재미있네요. 자주 활용할 수 있을 것 같습니다.

오늘은 이만~~

반응형
반응형

 

이번엔 인터넷에서 go-sciter를 이용한 간단한 계산기 프로그램을 우연히 발견하여 이를 투명하게 개조해보았습니다.

참고로 이번 프로그램에는 컬러값을 설정할 때 "github.com/fatih/color" 라는 패키지가 필요합니다.

go get "github.com/fatih/color"

를 수행해서 추가로 필요한 패키지를 설치해 줍니다.

 

그리고 아래 코드를 작성해줍시다.

 

1. main.go

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, 200, 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("./main.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()
}

2.main.html

<html window-frame="transparent" window-blurbehind>
<head>
    <head>
        <title>Simple Calc</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <style>
          html{
            background: transparent;
          }
          div{
            color: white;
            text-align: right;
          }
        </style>
    </head>
</head>
<body>
    <div>
      <label for="">No1</label>
      <input type="number" style="width: 100px; margin: 0 auto;" id="input1" >
      <br>
      <label for="">No2</label>
      <input type="number" style="width: 100px; margin: 0 auto;" id="input2" >
      <br>
      <input type="button" style="width: 50px; margin: 0 auto;" value="Add ( + )" id="add"> 
      <hr>
      <input type="number" style="width: 100px; margin: 0 auto;" id="output1" disabled>
    </div>

</body>
</html>

 

실행결과는 ..

 

 

 

투명하게 나오니까 역시 이쁘네요.

오늘은 여기까지~~

 

반응형

+ Recent posts