katoy: cocolog: 2007年9月2日

xfy/xvcd の svg でマウスイベントを扱う

- https://www.xfytec.com/community/modules/mydownloads/singlefile.php?cid=58&lid=166
> > xfy Community - xfeyes
として、xfy/xvcd で svg を使った描画による xeye アプリの例が公開された。
これをみて svg でマウスイベントを扱う方法が判った。
(徐々に実験を続けて、オセロゲームの盤面を扱えるようになろうと思う)

そこで、
　- http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/index.html
　> > ＳＶＧの勉強会
にある
svgsample7.svg
>> マウスを追いかけるサンプルです。
を xfy/xvcd で真似してみた。
svg 全体では、マウス移動イベントを扱い、
描画する円では、マウスクリックとドラッグイベントを扱うようにした例を作成してみた。

$ cat xfeye.xml
<?xml version="1.0" encoding="UTF-8"?>
<?com.xfy vocabulary-connection href="xfeyes.xvcd" ?>
<eyes:root xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes">
<eyes:eyes>
</eyes:eyes>
</eyes:root>

$ cat xfeye.xvcd
<?xml version="1.0" encoding="UTF-8"?>
<!--
2007-09-02 katoy

xfy/xvcd をつかって
http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/index.html
にある
http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/svgsample7.svg
と同様のものを実装した。
マウスの移動とクリックに反応して、SVG 描画が変化する。
-->

<xvcd:xvcd version="1.0"
exclude-result-prefixes="#all"
xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes"
xmlns:function="http://xmlns.xfy.com/function"
xmlns:event="http://xmlns.xfy.com/event"
xmlns:inst="http://xmlns.xfy.com/instruction"
xmlns:xvcd="http://xmlns.xfy.com/xvcd"
xmlns:svg="http://www.w3.org/2000/svg">

<xvcd:variable name="WIDTH" select="'400'" />
<xvcd:variable name="HEIGHT" select="'300'" />
<xvcd:variable name="radiusS" select="'30'" />
<xvcd:variable name="COLOR0" select="'red'" />
<xvcd:variable name="COLOR1" select="'blue'" />

<xvcd:user-data name="X" value="{$WIDTH * 0.5}" />
<xvcd:user-data name="Y" value="{$HEIGHT * 0.5}" />
<xvcd:user-data name="COLOR" value="{$COLOR0}" />

<xvcd:vocabulary name="xfeyes" match="eyes:root" call-template="root" />

<xvcd:command name="Move">
      <inst:param name="event"/>
      <xvcd:set-user-data name="X" value="{$event/event:*/@component-x}" />
      <xvcd:set-user-data name="Y" value="{$event/event:*/@component-y}" />
</xvcd:command>

<xvcd:command name="ChangeColor">
      <inst:param name="event"/>
      <inst:choose>
         <inst:when test="xvcd:user-data('COLOR')=$COLOR0">
            <xvcd:set-user-data name="COLOR" value="{$COLOR1}" />
         </inst:when>
         <inst:otherwise>
            <xvcd:set-user-data name="COLOR" value="{$COLOR0}" />
         </inst:otherwise>
      </inst:choose>
</xvcd:command>

<xvcd:template name="root">
      <svg:svg width="{$WIDTH}" height="{$HEIGHT}">
         
         <xvcd:action event="event:mouse-moved">
            <inst:param name="event:event" />
            <inst:call name="Move">
                  <inst:with-param name="event" select="$event:event"/>
            </inst:call>
         </xvcd:action>
         <xvcd:call-template name="draw" />
      </svg:svg>
</xvcd:template>

<xvcd:template name="draw">
      
      <svg:g>
         <svg:circle cx="{xvcd:user-data('X')}" cy="{xvcd:user-data('Y')}" r="{$radiusS}"
            style="fill:{xvcd:user-data('COLOR')};
            stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:2;stroke-linecap:butt;
            stroke-linejoin:miter;fill-opacity:1;
            fill-rule:nonzero;">
            
            <xvcd:action event="event:mouse-pressed[@button=1]">
                  <inst:param name="event:event" />
                  <inst:call name="ChangeColor">
                     <inst:with-param name="event" select="$event:event"/>
                  </inst:call>
            
            </xvcd:action>
                  <xvcd:action event="event:mouse-dragged">
                     <inst:param name="event:event"/>
                  <inst:call name="Move">
                     <inst:with-param name="event" select="$event:event"/>
                  </inst:call>
            </xvcd:action>
         </svg:circle>
      </svg:g>
</xvcd:template>

</xvcd:xvcd>

投稿者 katoy 日時 2007-09-02 | 固定リンク | コメント (0) | トラックバック (0)

郵便番号検索ページをプログラムから利用してみる(その2)

前回は、結果を cosole に出していた。
xfy/xvcd で利用するには、xml 形式で出力したほうが便利である。
そこで、rss 形式出力するように変更した。

$ ruby zipcode-rss.rb "100-0002" | nkf -s
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
<channel>
<title>zipcode</title>
<link>http://www.excite.co.jp/postcode/</link>
<description>search zipcode</description>
<item>
   <title>100-0002</title>
   <link>http://www.excite.co.jp/postcode/list/1000002.html</link>
   <description>1, 東京都千代田区　　皇居外苑</description>
   <pubDate>Sun, 02 Sep 2007 12:41:33 +0900</pubDate>
</item>
</channel>
</rss>

下に ruby コードを示す。
require 'kconv' を使った最後の行の .to_s.toutf8 をなくせれば、jruby でも動作するのだが...。
toutf8 をやめると、私の環境では、shift_jis で出力されてしまう...

# excite の郵便番号検索ページを ruby から利用する。
# 検索結果の最初のページ(50件まで) 内容を rss にする。
# useage: ruby zupcode-rss.rb keyword
#
# キーワードには、住所の一部、郵便番号の一部を指定できる。
# space で区切って、複数を指定することも可能。
#
# keyword ='赤坂ミッドタウン・タワー（１階）'
# keyword ='100-0002'

$KCODE = "utf-8"

require 'rubygems'
require 'hpricot'
require 'open-uri'
require 'rss'
require 'kconv'

# 郵便番号検索ページの URL
url = 'http://www.excite.co.jp/postcode/'
rdf = 'zipcode.rdf'

keyword = ARGV[0]

doc = Hpricot(open('http://www.excite.co.jp/postcode/search/?keyword=' + keyword))

# rss を生成する
rss = RSS::Maker.make("2.0") { |maker|
maker.channel.about = rdf
maker.channel.title = "zipcode"
maker.channel.description = "search zipcode"
maker.channel.link = url

doc.search('//table[4]/tr') { |tr|
address1 = tr.search('td[1]/font/text()').to_html
address2 = tr.search('td[1]/text()').to_html
zipcode = tr.search('td[2]/b/text()').to_html
if (address2 != "") then
   item = maker.items.new_item

   item.date = Time.new()
   item.title = zipcode
   item.description = address1 + address2
   tr.search('td[4]/font/a').each {|e|
      item.link = 'http://www.excite.co.jp' + e.attributes['href']
   }
end
}
}

puts rss.to_s.toutf8
# open(rdf, 'w') {|file|
# file.write(rss.to_s.toutf8)
#}
#--- End of File ---