Skip to main content

module salix::demo::basic::Clock

rascal-0.34.0
salix-core-0.2.3

Usage​

import salix::demo::basic::Clock;

Source code​

http://github.com/usethesource/salix-core/src/main/rascal/salix/demo/basic/Clock.rsc

Dependencies​

import salix::SVG;
import salix::HTML;
import salix::App;
import salix::Core;
import util::Math;
import salix::Index;

function clockWebApp​

App[Model] clockWebApp() = webApp(clockApp(), |project://salix/src/main/rascal|);

function clockApp​

SalixApp[Model] clockApp(str id = "root") 
  = makeApp(id, init, withIndex("Clock", id, view), update, subs=subs);

alias Model​

tuple[int time, bool running]

function init​

Model init() = <1, false>;

data Msg​

data Msg  
     = tick(int time)
     | toggle()
     ;

function subs​

list[Sub] subs(Model m) = [timeEvery(tick, 1000) | m.running ];

function update​

Model update(Msg msg, Model t) {
  switch (msg) {
   case tick(int time): t.time = time;
   case toggle(): t.running = !t.running;
  }
  return t;
}

function view​

void view(Model m) {
  h2("Clock using SVG");
  clock(m);
}

function clock​

void clock(Model m) {
  real angle = 2 * PI() * (toReal(m.time) / 60.0);
  int handX = round(50 + 40 * cos(angle));
  int handY = round(50 + 40 * sin(angle));
  svg(viewBox("0 0 100 100"), width("300px"), () {
    circle(cx("50"), cy("50"), r("45"), fill("#0B79CE"));
    line(x1("50"), y1("50"), x2("<handX>"), y2("<handY>"), stroke("#023963"));
  }); 
  button(onClick(toggle()), "On/Off");
}