image

  • フォト Amazonギフト券
    ※この時計の時刻は、閲覧しているパソコンのものであり、必ずしも正確な時間とは限りません

検索

最近のトラックバック

無料ブログはココログ

« ピラミッドを作る (xvcd) | トップページ | ピックアップ: Ruby1.9は1.8より平均5倍速いらしい, Googleの面接試験 一体どのような質問をされるのか, etc... »

2007-09-09

xfy/xvcd の svg でタイマーイベントを扱う

Svgtimer

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>

« ピラミッドを作る (xvcd) | トップページ | ピックアップ: Ruby1.9は1.8より平均5倍速いらしい, Googleの面接試験 一体どのような質問をされるのか, etc... »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/184434/16394483

この記事へのトラックバック一覧です: xfy/xvcd の svg でタイマーイベントを扱う:

« ピラミッドを作る (xvcd) | トップページ | ピックアップ: Ruby1.9は1.8より平均5倍速いらしい, Googleの面接試験 一体どのような質問をされるのか, etc... »

mokuji

2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

google

  • twitter
  • __
  • _
    Googleボットチェッカー

合わせて読む

  • 合わせて読む
    フィードメーター - katoy: cocolog あわせて読みたい

リンク