Keskustelu: Koodit: 8th GUI esimerkki

"logo.png" app:asset img:new var, logo-img

needs nk/gui
needs nk/widgets
needs map/iter

libbin font/Roboto-Regular.ttf

\ Gauge widgets and values
\ uses numbers as names but could be more descriptive
{ 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0, 10: 0 } constant gauges
\ Order to iterate gauges
' >s 1 10 a:generate constant gauge-keys

var task

800 constant WIDTH
600 constant HEIGHT

: new-win
  {
    name: "main",
    wide: @WIDTH,
    high: @HEIGHT,
    resizable: false,
    fonts: {
      f1: {
        font: @font/Roboto-Regular.ttf
      }
    },
    fontheight: 18,
    font: "f1",
    title: "Test"
  }
  nk:win ;

: center-rect  \ r1 r2 -- r3
  nk:rect>size >r
  dup nk:rect>pos
  swap
  nk:rect>size r@
  ( n:- 2 n:/ ) a:2map
  ' n:+ a:2map
  r> a:+ ;

: random-value  \ -- n
  rand-pcg n:abs 400 n:mod 600 n:+ 1000 n:/ ;

\ Simulate reading of some measurement values and pass results to main GUI task
: update-task
  repeat
    m:new
    ( random-value m:! ) 1 10 loop
    "cb" ( gauges swap m:+ drop ) m:!
    nk:do
    0.35 sleep
  again ;

\ Really ugly gauge widget. Takes value between 0 to 1 as param.
: gauge  \ n --
  0 1 n:clamp
  nk:widget drop   \ n widget-bound-rect
  \ background
  dup 0 "lightgray" nk:fill-rect
  \ frame
  dup 0 1 "black" nk:stroke-rect
  \ arc
  0 a:@ swap 2 a:@ 2 n:/ rot n:+ over 1 a:@ swap 3 a:@ nip n:+ 2 a:close dup >r
  over 2 a:@ swap 3 a:@ nip 0.8 n:* n:min dup 0.86 n:* >r
  180 deg>rad 360 deg>rad 2 a:close
  1
  "black"
  nk:stroke-arc
  \ indicator
  180 rot n:* 180 n:+ deg>rad dup n:cos r@ n:* swap n:sin r> n:* 2 a:close
  r> swap over ' n:+ a:2map
  2
  "red"
  nk:stroke-line
  drop ;

var show-about

: about-window
  {
    title: "About",
    bounds: ` [ 0, 0, @WIDTH, @HEIGHT ] [ 0, 0, 320, 120] center-rect ` ,
    padding: [ 8, 8 ],
    flags: [ @nk:WINDOW_TITLE, @nk:WINDOW_NO_SCROLLBAR, @nk:WINDOW_MOVABLE, @nk:WINDOW_CLOSABLE ]
  }

  show-about @ if
    nk:(begin) dup show-about ! if
      150 1 nk:layout-row-dynamic
        "Simple demo of passing data between worker task and main GUI task." "white" nk:label-wrap-colored
    then
    nk:(end)
  else
    drop
  then ;

: measurement-window
  {
    title: "Measurements",
    bounds: ` [ 0, 0, @WIDTH, @HEIGHT ] [ 0, 0, 400, 150 ] center-rect ` ,
    padding: [ 8, 8 ],
    flags: [ @nk:WINDOW_TITLE , @nk:WINDOW_NO_SCROLLBAR , @nk:WINDOW_MOVABLE ]
  }

  nk:begin
    40 5 nk:layout-row-dynamic
      gauges gauge-keys ( m:@ gauge ) m:iter drop
  nk:end ;

: menu-window
 {
    title: "Menu",
    bounds: [ 0, 0, @WIDTH, 32 ],
    padding: [ 0, 0 ],
    flags: [ @nk:WINDOW_NO_SCROLLBAR ]
  }

  nk:begin
    nk:menubar-begin
      nk:STATIC nk:get-row-height 2 nk:layout-row-begin
        50 nk:layout-row-push
          "Help" nk:TEXT_LEFT [120,200] nk:menu-begin if
            nk:get-row-height 1 nk:layout-row-dynamic
              "About" nk:TEXT_LEFT ( true show-about ! "About" nk:win-focus ) nk:menu-item-label
          nk:menu-end then
    nk:menubar-end
  nk:end ;

: background-window
 {
    title: "Background",
    bg: "gray",
    flags: [ @nk:WINDOW_BACKGROUND, @nk:WINDOW_NO_INPUT, @nk:WINDOW_NO_SCROLLBAR ]
  }

  nk:begin
    nk:win-content-bounds [ 0, 0, 400, 400 ] center-rect logo-img @ "white" nk:draw-image
  nk:end ;


: main-render
  background-window
  menu-window
  about-window
  measurement-window ;

: app:main
  ' update-task t:task task !
  new-win ' main-render -1 nk:render-loop ;