dyi 1.2.1 → 1.3.0

data/CHANGES

@@ -1,5 +1,16 @@
 = DYI Changelog
 
+== Version 1.3.0 / 2012-06-01
+* Major Enhancement
+  * Can draw a predefined shape.
+  * Radial gradient support.
+* Minor Enhancement
+  * Adds options to LineChart.
+  * Changes project URL.
+  * Adds method that draws logomark of DYI.
+* Bug Fixes
+  * Revises spell-miss in DYI::Element#add_css_class.
+
 == Version 1.2.1 / 2012-05-01
 * Bug Fixes
   * A name of marker-option of LineChart is wrong.

data/README

@@ -6,7 +6,7 @@ to output other format; for example, EPS.
 
 == License
 
-Copyright (c) 2009-2011 Sound-F Co., Ltd. All rights reserved.
+Copyright (c) 2009-2012 Sound-F Co., Ltd. All rights reserved.
 
 DYI is free software: you can redistribute it and/or modify it
 under the terms of the GNU General Public License as published by
@@ -29,5 +29,4 @@ and forums.
 
 We are also preparing the Japanese mailing list.  More infomation
 about the mailing list is indicated to 
-<http://open-dyi.org/contents.html#community> in Japanese,
-including how to join it.
+<http://open-dyi.org/community.html>, including how to join it.

data/examples/animation.rb

@@ -1,28 +1,104 @@
-# -*- encoding: UTF-8 -*-
-
-require 'rubygems'
-require 'dyi'
-
-canvas = DYI::Canvas.new(400, 300)
-
-rect = DYI::Drawing::Brush.new(:color=>'#51ADE2').draw_rectangle(canvas, [10,10], 300, 200)
-rect.add_painting_animation(:from => {:fill => '#51ADE2'},
-                            :to => {:fill => 'red'},
-                            :duration => 3,
-                            :begin_event => DYI::Event.mouseover(rect),
-                            :end_event => DYI::Event.mouseout(rect),
-                            :fill => 'freeze')
-text = DYI::Drawing::Brush.new.draw_text(canvas,
-                                         [100,250],
-                                         'click me!',
-                                         :show_border => true,
-                                         :border_color=>'#325BA8',
-                                         :padding => 8,
-                                         :border_rx => 10,
-                                         :border_width => 3,
-                                         :background_color=>'#A5C7F8')
-rect.add_painting_animation(:to => {:fill => 'green'},
-                            :begin_event => DYI::Event.click(text),
-                            :fill => 'freeze')
-
-canvas.save('output/animation.svg')
+# -*- encoding: UTF-8 -*-
+
+require 'rubygems'
+require 'dyi'
+
+canvas = DYI::Canvas.new(250, 140)
+canvas.title = 'Animation Icons without Script'
+canvas.description = 'This image is a sample of DYI which uses SVG animation.'
+
+# Left-Hand Icon
+icon1 = DYI::Shape::ShapeGroup.draw_on(canvas)
+pen = DYI::Drawing::Pen.new(:stroke_width => 6, :stroke_linecap => 'round')
+pen.color = '#DDD'
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.add_painting_animation(:from => {:stroke => '#DDD'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#333'}, {:stroke => '#DDD'}],
+                            :to => {:stroke => '#DDD'},
+                            :relay_times => [0.125, 0.125, 0.75],
+                            :duration => 1,
+                            :repeat_count => 0)
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.rotate(45)
+line.add_painting_animation(:from => {:stroke => '#DDD'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#333'}, {:stroke => '#DDD'}],
+                            :to => {:stroke => '#DDD'},
+                            :relay_times => [0.25, 0.25, 0.825],
+                            :duration => 1,
+                            :repeat_count => 0)
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.rotate(90)
+line.add_painting_animation(:from => {:stroke => '#DDD'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#333'}],
+                            :to => {:stroke => '#DDD'},
+                            :relay_times => [0.375, 0.375, 1],
+                            :duration => 1,
+                            :repeat_count => 0)
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.rotate(135)
+line.add_painting_animation(:from => {:stroke => '#BBB'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#DDD'}, {:stroke => '#333'}],
+                            :to => {:stroke => '#BBB'},
+                            :relay_times => [0.125, 0.5, 0.5],
+                            :duration => 1,
+                            :repeat_count => 0)
+pen.color = '#999'
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.rotate(180)
+line.add_painting_animation(:from => {:stroke => '#999'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#DDD'}, {:stroke => '#333'}],
+                            :to => {:stroke => '#999'},
+                            :relay_times => [0.25, 0.625, 0.625],
+                            :duration => 1,
+                            :repeat_count => 0)
+pen.color = '#777'
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.rotate(225)
+line.add_painting_animation(:from => {:stroke => '#777'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#DDD'}, {:stroke => '#333'}],
+                            :to => {:stroke => '#777'},
+                            :relay_times => [0.375, 0.75, 0.75],
+                            :duration => 1,
+                            :repeat_count => 0)
+pen.color = '#555'
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.rotate(270)
+line.add_painting_animation(:from => {:stroke => '#555'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#DDD'}, {:stroke => '#333'}],
+                            :to => {:stroke => '#555'},
+                            :relay_times => [0.5, 0.875, 0.875],
+                            :duration => 1,
+                            :repeat_count => 0)
+pen.color = '#333'
+line = pen.draw_line(icon1, [10,0], [18,0])
+line.rotate(315)
+line.add_painting_animation(:from => {:stroke => '#333'},
+                            :relays => [{:stroke => '#DDD'}, {:stroke => '#DDD'}],
+                            :to => {:stroke => '#333'},
+                            :relay_times => [0.625, 1],
+                            :duration => 1,
+                            :repeat_count => 0)
+icon1.translate(70,70)
+
+# Right-Hand Icon
+icon2 = DYI::Shape::ShapeGroup.draw_on(canvas)
+brush = DYI::Drawing::Brush.new(:color => '#08A')
+brush.draw_closed_path(icon2, [-14.489, -3.882]){|path|
+  path.arc_to([12.99, -7.5], 15, 15)
+  path.line_to([17.321, -10], [14.5, 0], [4.33, -2.5], [8.66, -5])
+  path.arc_to([-9.397, -3.42], 10, 10, 0, false, false)
+}
+brush.draw_closed_path(icon2, [14.489, 3.882]){|path|
+  path.arc_to([-12.99, 7.5], 15, 15)
+  path.line_to([-17.321, 10], [-14.5, 0], [-4.33, 2.5], [-8.66, 5])
+  path.arc_to([9.397, 3.42], 10, 10, 0, false, false)
+}
+icon2.add_transform_animation(:rotate,
+                              :from => 0,
+                              :to => 360,
+                              :duration => 1.5,
+                              :repeat_count => 0,
+                              :additive => 'sum')
+icon2.translate(180,70)
+
+canvas.save('output/animation.svg')

data/examples/clock.rb

@@ -0,0 +1,152 @@
+# -*- encoding: UTF-8 -*-
+
+require 'rubygems'
+require 'dyi'
+
+include DYI::Script::EcmaScript::DomLevel2
+
+settings = {
+    :hour => {:center => [250, 60], :rx => 220, :ry => 20},
+    :minute => {:center => [250, 91], :rx => 220, :ry => 32},
+    :second => {:center => [250, 122], :rx => 220, :ry => 44}}
+settings.each do |key, value|
+  value[:label_position] = DYI::Coordinate.new(value[:center][0],
+                                               value[:center][1] + value[:ry] + 10)
+end
+
+canvas = DYI::Canvas.new(500, 200)
+canvas.title = 'Circle Clock'
+canvas.description = 'This image is a sample of DYI which uses a client script.'
+
+pen = DYI::Drawing::Pen.new
+
+gradient = DYI::Drawing::ColorEffect::LinearGradient.new([0,0],[0,1])
+gradient.add_color(0, 'gainsboro')
+gradient.add_color(1, 'grey')
+line_pen = DYI::Drawing::Pen.new
+line_pen.color = gradient
+
+setting = settings[:second]
+sec_group = DYI::Shape::ShapeGroup.draw_on(canvas)
+line_pen.draw_ellipse(sec_group, setting[:center], setting[:rx], setting[:ry])
+60.times do |i|
+  pen.draw_text(sec_group, [0, 0], i.to_s,
+                :text_anchor => 'middle',
+                :css_class => i % 5 == 0 ? 'large' : 'small')
+end
+pen.draw_text(canvas, setting[:label_position], 'seconds',
+              :text_anchor => 'middle',
+              :css_class => 'label')
+
+setting = settings[:minute]
+min_group = DYI::Shape::ShapeGroup.draw_on(canvas)
+line_pen.draw_ellipse(min_group, setting[:center], setting[:rx], setting[:ry])
+60.times do |i|
+  pen.draw_text(min_group, [0, 0], i.to_s,
+                :text_anchor => 'middle',
+                :css_class => i % 5 == 0 ? 'large' : 'small')
+end
+pen.draw_text(canvas, setting[:label_position], 'minutes',
+              :text_anchor => 'middle',
+              :css_class => 'label')
+
+setting = settings[:hour]
+hour_group = DYI::Shape::ShapeGroup.draw_on(canvas)
+line_pen.draw_ellipse(hour_group, setting[:center], setting[:rx], setting[:ry])
+12.times do |i|
+  pen.draw_text(hour_group, [0, 0], (i + 1).to_s,
+                :text_anchor => 'middle',
+                :css_class => 'large')
+end
+pen.draw_text(canvas, setting[:label_position], 'hours',
+              :text_anchor => 'middle',
+              :css_class => 'label')
+ap_label = pen.draw_text(canvas, setting[:label_position] + [18, -10], 'A.M.',
+                         :css_class => 'label')
+
+canvas.add_initialize_script(<<-SCRIPT)
+  var hourTexts = #{get_element(hour_group)}.getElementsByTagName('text');
+  var minTexts = #{get_element(min_group)}.getElementsByTagName('text');
+  var secTexts = #{get_element(sec_group)}.getElementsByTagName('text');
+  var apLabel = #{get_element(ap_label)};
+  var hour = -1, minute = -1, second = -1;
+
+  function rewrite(){
+    var currentTime = new Date();
+    var text, i, angle, baseSize;
+
+    if(hour != currentTime.getHours()){
+      hour = currentTime.getHours();
+      for(i = 0; i < 12; i++){
+        text = hourTexts.item(i);
+        angle = Math.PI / 6 * (hour % 12 - i - 1);
+        text.setAttribute('x', #{settings[:hour][:rx]} * Math.sin(angle) + #{settings[:hour][:center][0]});
+        text.setAttribute('y', #{settings[:hour][:ry]} * Math.cos(angle) + #{settings[:hour][:center][1]});
+        text.setAttribute('opacity', (Math.cos(angle) + 1) * 0.375  + 0.25);
+        if(hour % 12 == i + 1){
+          text.setAttribute('font-size', '20pt');
+        }
+        else{
+          text.setAttribute('font-size', (16 * 200 / (300 - 100 * Math.cos(angle))).toString() + 'pt');
+        }
+      }
+      apLabel.childNodes.item(0).data = hour < 12 ? 'A.M.' : 'P.M.';
+    }
+
+    if(minute != currentTime.getMinutes()){
+      minute = currentTime.getMinutes();
+      for(i = 0; i < 60; i++){
+        text = minTexts.item(i);
+        angle = Math.PI / 30 * (minute - i);
+        text.setAttribute('x', #{settings[:minute][:rx]} * Math.sin(angle) + #{settings[:minute][:center][0]});
+        text.setAttribute('y', #{settings[:minute][:ry]} * Math.cos(angle) + #{settings[:minute][:center][1]});
+        text.setAttribute('opacity', (Math.cos(angle) + 1) * 0.375  + 0.25);
+        if(minute == i){
+          text.setAttribute('font-size', '20pt');
+        }
+        else{
+          baseSize = text.className.baseVal == 'large' ? 12 : 6;
+          text.setAttribute('font-size', (baseSize * 200 / (300 - 100 * Math.cos(angle))).toString() + 'pt');
+        }
+      }
+    }
+
+    if(second != currentTime.getSeconds()){
+      second = currentTime.getSeconds();
+      for(i = 0; i < 60; i++){
+        text = secTexts.item(i);
+        angle = Math.PI / 30 * (second - i);
+        text.setAttribute('x', #{settings[:second][:rx]} * Math.sin(angle) + #{settings[:second][:center][0]});
+        text.setAttribute('y', #{settings[:second][:ry]} * Math.cos(angle) + #{settings[:second][:center][1]});
+        text.setAttribute('opacity', (Math.cos(angle) + 1) * 0.375  + 0.25);
+        if(second == i){
+          text.setAttribute('font-size', '20pt');
+        }
+        else{
+          baseSize = text.className.baseVal == 'large' ? 12 : 6;
+          text.setAttribute('font-size', (baseSize * 200 / (300 - 100 * Math.cos(angle))).toString() + 'pt');
+        }
+      }
+    }
+  }
+
+  rewrite();
+  setInterval(rewrite, 250);
+SCRIPT
+
+canvas.reference_stylesheet_file('http://fonts.googleapis.com/css?family=Great+Vibes')
+
+canvas.add_stylesheet(<<-CSS)
+text {
+  font-family: 'Great Vibes', cursive;
+}
+text.large {
+  font-weight: bold;
+}
+text.label {
+  font-size: 10pt;
+  text-decoration: underline;
+}
+CSS
+
+canvas.save('output/clock.svg')

data/examples/data/money.csv

@@ -1,12 +1,13 @@
-1998,550804,5919793,#008000
-1999,589375,6153010,#008000
-2000,658350,6330959,#008000
-2001,667725,6478207,#008000
-2002,910393,6707326,#008000
-2003,1015445,6767064,#ffa500
-2004,1082958,6891878,#ffa500
-2005,1115568,7015353,#ffa500
-2006,1035779,7129107,#ffa500
-2007,908926,7210963,#ffa500
-2008,883589,7345795,#ffa500
-2009,956238,7542049,#ffa500
+Year,Money Stock,Monetary Base,Color
+2000,976798,67395,#008000
+2001,975687,72144,#008000
+2002,994527,89643,#008000
+2003,1005732,103726,#008000
+2004,1023448,110030,#ffa500
+2005,1028507,111765,#ffa500
+2006,1025202,96727,#ffa500
+2007,1026995,90034,#ffa500
+2008,1034705,91336,#ffa500
+2009,1053287,96311,#ffa500
+2010,1075186,100946,#ffa500
+2011,1098966,114671,#ffa500

data/examples/external_files/xslt.xsl

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+        xmlns:svg="http://www.w3.org/2000/svg">
+  <xsl:template match="/svg:svg">
+    <xsl:copy>
+      <xsl:copy-of select="@version"/>
+      <xsl:copy-of select="@viewBox"/>
+      <xsl:copy-of select="@preserveAspectRatio"/>
+      <xsl:attribute name="viewBox">0 0 861 488</xsl:attribute>
+      <xsl:attribute name="width">861</xsl:attribute>
+      <xsl:attribute name="height">488</xsl:attribute>
+      <svg:defs>
+        <svg:filter id="effect1" filterUnits="userSpaceOnUse" x="-5" y="-5"
+                width="305" height="185">
+          <svg:feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+          <svg:feOffset in="blur" dx="8" dy="12" result="offsetBlur"/>
+          <svg:feMerge>
+            <svg:feMergeNode in="offsetBlur"/>
+            <svg:feMergeNode in="SourceGraphic"/>
+          </svg:feMerge>
+        </svg:filter>
+        <svg:filter id="effect2" filterUnits="userSpaceOnUse" x="-5" y="-5"
+                width="305" height="185">
+          <svg:feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+          <svg:feOffset in="blur" dx="8" dy="12" result="offsetBlur"/>
+          <svg:feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
+                  specularExponent="20" lighting-color="#bbbbbb" result="specOut">
+            <svg:fePointLight x="-5000" y="-10000" z="20000"/>
+          </svg:feSpecularLighting>
+          <svg:feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+          <svg:feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
+                  k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+        </svg:filter>
+      </svg:defs>
+      <svg:g transform="translate(143.5,81.32) scale(2)">
+        <xsl:apply-templates mode="normal"/>
+      </svg:g>
+      <svg:g transform="translate(95.67,162.64)">
+        <xsl:apply-templates mode="line"/>
+      </svg:g>
+      <svg:g transform="translate(478.35,162.64)" filter="url(#effect1)">
+        <xsl:apply-templates mode="effect"/>
+      </svg:g>
+    </xsl:copy>
+  </xsl:template>
+
+  <xsl:template match="svg:path" mode="normal">
+    <xsl:copy>
+      <xsl:copy-of select="@*"/>
+    </xsl:copy>
+  </xsl:template>
+
+  <xsl:template match="svg:path" mode="line">
+    <xsl:copy>
+      <xsl:copy-of select="@d"/>
+      <xsl:attribute name="fill">#fff</xsl:attribute>
+      <xsl:attribute name="fill-opacity">0.9</xsl:attribute>
+      <xsl:attribute name="stroke">
+        <xsl:value-of select="@fill"/>
+      </xsl:attribute>
+      <xsl:attribute name="stroke-width">2</xsl:attribute>
+    </xsl:copy>
+  </xsl:template>
+
+  <xsl:template match="svg:path" mode="effect">
+    <xsl:copy>
+      <xsl:copy-of select="@*"/>
+      <xsl:attribute name="filter">url(#effect2)</xsl:attribute>
+    </xsl:copy>
+  </xsl:template>
+</xsl:stylesheet>

data/examples/letter.rb

@@ -0,0 +1,125 @@
+# -*- encoding: UTF-8 -*-
+
+require 'rubygems'
+require 'dyi'
+
+include DYI::Script::EcmaScript::DomLevel2
+
+path_points = [
+  [197, 42.141], [419.42, 172.747], [197, 306.472],
+  [241.055, 264.061], [374, 172.748], [241.055, 84.553]
+]
+ctrl_points = [
+  [262.211, 42.141], [419.42, 27.495], [419.42, 323.496], [260.69, 306.472],
+  [270.044, 264.061], [374, 272.829], [374, 75.829], [269.211, 84.553]
+]
+
+canvas = DYI::Canvas.new(625, 350)
+canvas.title = 'Letter D'
+canvas.description = 'This image is a sample of DYI which is drawn Bezier curves.'
+
+pen = DYI::Drawing::Pen.new(:width => 0, :color => nil)
+rect = pen.draw_rectangle(canvas, [1,1], canvas.width - 2, canvas.height - 2)
+
+letter = pen.draw_path(canvas, path_points[0]){|path|
+  path.curve_to(ctrl_points[0], ctrl_points[1], path_points[1])
+  path.curve_to(ctrl_points[2], ctrl_points[3], path_points[2])
+  path.close_path
+  path.move_to(path_points[3])
+  path.curve_to(ctrl_points[4], ctrl_points[5], path_points[4])
+  path.curve_to(ctrl_points[6], ctrl_points[7], path_points[5])
+  path.close_path
+  path.set_marker(:all, :circle, :size => 5)
+}
+
+lines = []
+lines << pen.draw_line(canvas, path_points[0], ctrl_points[0])
+lines << pen.draw_line(canvas, path_points[1], ctrl_points[1])
+lines << pen.draw_line(canvas, path_points[1], ctrl_points[2])
+lines << pen.draw_line(canvas, path_points[2], ctrl_points[3])
+lines << pen.draw_line(canvas, path_points[3], ctrl_points[4])
+lines << pen.draw_line(canvas, path_points[4], ctrl_points[5])
+lines << pen.draw_line(canvas, path_points[4], ctrl_points[6])
+lines << pen.draw_line(canvas, path_points[5], ctrl_points[7])
+
+circles = ctrl_points.map do |ctrl_pt|
+  circle = pen.draw_circle(canvas, ctrl_pt, 7.5)
+  circle.set_event(nil)
+  circle
+end
+
+dragging = DYI::Script::EcmaScript::EventListener.new(<<SCRIPT)
+  if(target_id == null) return;
+  var x = evt.pageX;
+  var y = evt.pageY;
+  circles[target_id].cx.baseVal.value = x;
+  circles[target_id].cy.baseVal.value = y;
+  lines[target_id].x2.baseVal.value = x;
+  lines[target_id].y2.baseVal.value = y;
+  letter.pathSegList.getItem(command_ids[target_id])['x' + (target_id % 2 == 0 ? '1' : '2')] = x;
+  letter.pathSegList.getItem(command_ids[target_id])['y' + (target_id % 2 == 0 ? '1' : '2')] = y;
+SCRIPT
+
+end_drag = DYI::Script::EcmaScript::EventListener.new(<<SCRIPT)
+  if(target_id == null) return;
+  circles[target_id].className.baseVal = '';
+  lines[target_id].className.baseVal = '';
+  target_id = null;
+SCRIPT
+
+canvas.add_script(<<SCRIPT)
+  var target_id = null;
+  var command_ids = [1, 1, 2, 2, 5, 5, 6, 6];
+  var letter, lines, circles
+SCRIPT
+
+canvas.add_initialize_script(<<SCRIPT)
+  letter = #{get_element(letter)};
+  lines = [#{lines.map{|l| get_element(l)}.join(',')}];
+  circles = [#{circles.map{|c| get_element(c)}.join(',')}];
+SCRIPT
+
+circles.each_with_index do |circle, i|
+  start_drag = DYI::Script::EcmaScript::EventListener.new(<<-SCRIPT)
+    if(target_id != null) return;
+    target_id = #{i};
+    circles[target_id].className.baseVal = 'target';
+    lines[target_id].className.baseVal = 'target';
+  SCRIPT
+
+  circle.add_event_listener(:mousedown, start_drag)
+  circle.add_event_listener(:mousemove, dragging)
+  circle.add_event_listener(:mouseup, end_drag)
+end
+rect.add_event_listener(:mousemove, dragging)
+rect.add_event_listener(:mouseup, end_drag)
+
+canvas.add_stylesheet(<<CSS)
+path {
+  fill: #C3DAFF;
+  stroke: #666666;
+  stroke-width: 3;
+}
+svg > circle {
+  fill: white;
+  stroke: #336699;
+  stroke-width: 1;
+  cursor: move;
+}
+marker circle{
+  fill: #666666
+}
+line {
+  stroke: #003DA2;
+  stroke-width: 2;
+  stroke-dasharray: 6,4;
+}
+circle.target{
+  fill: #33CCFF;
+}
+line.target{
+  stroke: #33CCFF;
+}
+CSS
+
+canvas.save('output/letter.svg')