Scripting an SVG Dot Matrix

[mister_electronico]

The script make create_images , make images svg Only runs once.

TEMPDIR=/tmp/panel
export TEMPDIR

if [ -d /tmp/panel/img ]; then exit 0; else mkdir /tmp/panel/img ; fi

mens=" Welcome to forum Puppy Linux "

val=${#mens} # take the size of menssage mens
echo $val
echo $mens > $TEMPDIR/message.dat

creator_svg 0;
sleep 1
cp $TEMPDIR/num.svg $TEMPDIR/img/img0.svg

let "val= $val*3+4"

echo $val
for(( i=1; i < ${val} ; i++ ))
do
creator_svg 1;
cp $TEMPDIR/num.svg $TEMPDIR/img/img${i}.svg

done

[mister_electronico]

This scripts are only a test.

The main script scroll_img, the idea of creating a link in the pixmap belongs to step from Gtkdialog - tips.

Code: Select all

#! /bin/bash
TEMPDIR=/tmp/panel
export IMG=/tmp/panel/img/imgA.svg
export NUM=$TEMPDIR/num.svg


if [ -d /tmp/panel ]; then m=1; else mkdir /tmp/panel ; fi
if [ -d /tmp/panel/img ]; then m=1; 
            else 
                 ./create_images &
                 xmessage -nearmouse -timeout 30 -fn 14 -bg black -fg "#03E400" "Please wait 30 second until the program is open. Only for first time open this program"
            fi

echo 0 > /tmp/panel/val.dat


rotate()
{
 val=$(cat /tmp/panel/val.dat)	
 

 rm $IMG
    
 ln -s /tmp/panel/img/img${val}.svg $IMG   
 
 if [ $val -eq 92 ]; then val=0 ; fi 

 let val=$val+1
 echo $val > /tmp/panel/val.dat
}

export -f rotate

export MAIN_DIALOG='
<vbox>

  <frame Pixmap with gif>
    <pixmap>
      <variable>MSG</variable> 
      <input file>/tmp/panel/img/imgA.svg</input>
    </pixmap>
  </frame>

    <timer milliseconds="true" interval="100" visible="false">

	  <action>rotate</action>
      <action type="refresh">MSG</action>  
   
    </timer>
   
   <hbox>
  
   <button><label>  Exit  </label>
	 <action>"killall script_01"</action>
     <action>exit:Exit</action>
   </button>
  </hbox>
  
</vbox>
'

gtkdialog --program=MAIN_DIALOG
unset script_01
unset MAIN_DIALOG

The LED panel can go faster, if we lower the value of the timer

<timer milliseconds = "true" interval = "100" visible = "false">

I've gone down to 50 but gives many hops the message panel.


Regards.

[technosaurus]

This topic got me into researching svg animation in general, so I came up with this little "clock" demo to animate a path along another path (it doesn't have to be a straight line)

Code: Select all

<svg viewBox="0 0 96 96">
<path d="M-3 48h6l-3-36z">
  <animateMotion
    dur="86400s"
    repeatCount="indefinite"
    rotate="auto"
    path="M48,6A45 45 0 1 1 47.9 6Z"
  />
</path>

<path d="M-2 48h4l-2-42z">
  <animateMotion
    dur="3600s"
    repeatCount="indefinite"
    rotate="auto"
    path="M48,6A45 45 0 1 1 47.9 6Z"
  />
</path>

<path d="M-1 48h2l-1-48z">
  <animateMotion
    dur="60"
    repeatCount="indefinite"
    rotate="auto"
    path="M48,6A45 45 0 1 1 47.9 6Z"
  />
</path>
</svg>

[greengeek]

so I came up with this little "clock" demo to animate a path along another path (it doesn't have to be a straight line)

How does one use this? I put the code into leafpad, saved it as /root/svgtest and clicked on it. Inkscapelite opened it as follows:

[technosaurus]

so I came up with this little "clock" demo to animate a path along another path (it doesn't have to be a straight line)

How does one use this? I put the code into leafpad, saved it as /root/svgtest and clicked on it. Inkscapelite opened it as follows:

Inkscape lite doesn't support animations AFAIK... I used chrome and firefox.

[01micko]

Works for me in firefox and chromium if I replace the <svg ...> line with this

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"> 

[mister_electronico]

Interesting and here I found another one

Code: Select all

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
  <desc>Example animMotion01 - demonstrate motion animation computations</desc>
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />
  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />
  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

[greengeek]

The base of my second hand travels around a bit but other than that the html version works for me now.