
xfy のダウンロードサイト
https://www.xfytec.com/community/modules/mydownloads/singlefile.php?lid=131
にある "xfy での MP3 プレーヤ" では、SVG での文字表示を タイマーを使って表示更新しているようだ。
これを参考にして、単純なストップタイマーを作ってみた。
(本当に単純で、単に現在の時間を 0.1 秒単位で表示更新するのを Stop/Start できるだけのもの)
これで マウスイベントも、タイマーも扱う実験ができたことになる。
簡単なゲームをつくれるようになるかな?
$ cat 4.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?com.xfy vocabulary-connection href="4.xvcd" ?>
<sample:item xmlns:sample="http://xmlns.xfy.com/sample/pry">10</sample:item>
$ cat 4.xvcd
<?xml version="1.0" encoding="UTF-8"?>
<xvcd:xvcd
version="1.0"
xmlns:xvcd="http://xmlns.xfy.com/xvcd"
xmlns:function="http://xmlns.xfy.com/function"
xmlns:ctrl="http://xmlns.xfy.com/controls"
xmlns:instruction="http://xmlns.xfy.com/instruction"
xmlns:sample="http://xmlns.xfy.com/sample/pry"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/1999/xhtml">
<xvcd:vocabulary name="timer" match="sample:item" call-template="root"/>
<xvcd:variable name="time-format" select="'yyyy-MM-dd HH:mm:ss:'"/>
<xvcd:variable name="time-interval" select="'100'"/>
<xvcd:variable name="style" select="'fill:blue;font-size:24.0'"/>
<xvcd:user-data name="timer" value="start"/>
<xvcd:user-data name="time" value="{function:now($time-format)}000"/>
<xvcd:template name="root">
<html>
<head>
<title>time-event</title>
</head>
<body>
<ctrl:trigger>
<ctrl:label><xvcd:value-of select="xvcd:user-data('timer')"/></ctrl:label>
<xvcd:action event="ctrl:triggered">
<instruction:choose>
<instruction:when test="xvcd:user-data('timer') = 'stop'">
<xvcd:set-user-data name="timer" value="start"/>
</instruction:when>
<instruction:otherwise>
<xvcd:set-user-data name="timer" value="stop"/>
<xvcd:set-user-data name="time"
value="{concat(function:now($time-format), function:now('SSS', $time-interval))}" />
</instruction:otherwise>
</instruction:choose>
</xvcd:action>
</ctrl:trigger>
<div>
<xvcd:call-template name="svg-timer"/>
</div>
</body>
</html>
</xvcd:template>
<xvcd:template name="svg-timer">
<xvcd:variable name="text-val">
<xvcd:choose>
<xvcd:when test="xvcd:user-data('timer') = 'stop'">
<xvcd:value-of select="concat(function:now($time-format), function:now('SSS', $time-interval))"/>
</xvcd:when>
<xvcd:otherwise>
<xvcd:value-of select="xvcd:user-data('time')"/>
</xvcd:otherwise>
</xvcd:choose>
</xvcd:variable>
<svg:svg width="400" height="60">
<svg:g>
<svg:text x="5" y="25" style="{$style}">
<xvcd:value-of select="$text-val"/>
</svg:text>
</svg:g>
</svg:svg>
</xvcd:template>
</xvcd:xvcd>
最近のコメント