Anyone interested in some animation examples that don't work with grafox?

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Anyone interested in some animation examples that don't work with grafox?

news.verizon.net-2
I've got some svg files I've generated, which work fine under ASV 3.03 under
IE 6.0, but do not animate correctly under Firefox's SVG + Grafox.  The
initial display comes up almost correctly under Firefox 2.0, but the font is
wrong in Firefox 3.0b5.

Would anyone here be interested in taking a look to see if they can figure
out what's going wrong?

The svg files I have make use of animation, but are very light on the
complexity of the graphical elements.


_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Anyone interested in some animation examples that don't work with grafox?

Helder Magalhães
> but do not animate correctly under Firefox's SVG + Grafox.
Grafox is currently alpha/beta quality software. Although feedback was
provided in the first place [1], unfortunately there was no more
updates since then.

> The initial display comes up almost correctly under Firefox 2.0,
> but the font is wrong in Firefox 3.0b5.
Font issue? I experienced something like this in the past due to not
forcing a specific font/font family. According to the specification,
if author doesn't specifies it, it «depends on user agent» [2]. Try
setting "font-family" property in SVG element in order to obtain a
more consistent look cross implementations: for example, <svg (...)
font-family="Helvetica, sans-serif">(...)</svg>.

> Would anyone here be interested in taking a look to see if they can figure
> out what's going wrong?
Sure, why not? Please attach them to the thread (better) or publish
them in a publicly accessible server - why didn't you do it in the
first place? ;-)

Regards,

  Helder Magalhães

[1] http://www.schepers.cc/?p=47#comments
[2] http://www.w3.org/TR/SVG/text.html#FontFamilyProperty
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Anyone interested in some animation examples that don't work with grafox?

Corey Ashford-2
Hmm, I tried to post the svg file to this newsgroup last night, but it's
not showing up on the server today.  Maybe the server blocked it because
it's too large?  (about 16KB)

- Corey

HelderMagalhaes wrote:

>> but do not animate correctly under Firefox's SVG + Grafox.
> Grafox is currently alpha/beta quality software. Although feedback was
> provided in the first place [1], unfortunately there was no more
> updates since then.
>
>> The initial display comes up almost correctly under Firefox 2.0,
>> but the font is wrong in Firefox 3.0b5.
> Font issue? I experienced something like this in the past due to not
> forcing a specific font/font family. According to the specification,
> if author doesn't specifies it, it «depends on user agent» [2]. Try
> setting "font-family" property in SVG element in order to obtain a
> more consistent look cross implementations: for example, <svg (...)
> font-family="Helvetica, sans-serif">(...)</svg>.
>
>> Would anyone here be interested in taking a look to see if they can figure
>> out what's going wrong?
> Sure, why not? Please attach them to the thread (better) or publish
> them in a publicly accessible server - why didn't you do it in the
> first place? ;-)
>
> Regards,
>
>   Helder Magalhães
>
> [1] http://www.schepers.cc/?p=47#comments
> [2] http://www.w3.org/TR/SVG/text.html#FontFamilyProperty

Hmm.. I just tried replying, but I'm wonder
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Anyone interested in some animation examples that don't work with grafox?

Boris Zbarsky
Corey Ashford wrote:
> Hmm, I tried to post the svg file to this newsgroup last night, but it's
> not showing up on the server today.  Maybe the server blocked it because
> it's too large?  (about 16KB)

This newsgroup doesn't accept attachments.  The file needs to be pasted inline
into the post, or posted somewhere on the web, with the URL in the post.

-Boris
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Anyone interested in some animation examples that don't work with grafox?

Jeff Schiller
In reply to this post by news.verizon.net-2
On Apr 21, 10:00 pm, "news.verizon.net" <[hidden email]> wrote:

> I've got some svg files I've generated, which work fine under ASV 3.03 under
> IE 6.0, but do not animate correctly under Firefox's SVG + Grafox.  The
> initial display comes up almost correctly under Firefox 2.0, but the font is
> wrong in Firefox 3.0b5.
>
> Would anyone here be interested in taking a look to see if they can figure
> out what's going wrong?
>
> The svg files I have make use of animation, but are very light on the
> complexity of the graphical elements.

FWIW, I recommend using FakeSmile if you're interested in getting SMIL
to work in Firefox.  FakeSmile is a new JS library that has a more
complete implementation of SMIL.  http://leunen.d.free.fr/fakesmile/
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Anyone interested in some animation examples that don't work with grafox?

news.mozilla.org-4
codedread wrote:

> On Apr 21, 10:00 pm, "news.verizon.net" <[hidden email]> wrote:
>> I've got some svg files I've generated, which work fine under ASV 3.03 under
>> IE 6.0, but do not animate correctly under Firefox's SVG + Grafox.  The
>> initial display comes up almost correctly under Firefox 2.0, but the font is
>> wrong in Firefox 3.0b5.
>>
>> Would anyone here be interested in taking a look to see if they can figure
>> out what's going wrong?
>>
>> The svg files I have make use of animation, but are very light on the
>> complexity of the graphical elements.
>
> FWIW, I recommend using FakeSmile if you're interested in getting SMIL
> to work in Firefox.  FakeSmile is a new JS library that has a more
> complete implementation of SMIL.  http://leunen.d.free.fr/fakesmile/

Thanks!  I tried that out.  The animations do work a little better with
this plug-in instead of grafox, but seem to be a ways from actually
being good enough for this application.

I'm going to post an example inline as a reply to my other message about
the post getting chucked by the server because it contained an attachment.

- Corey
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Anyone interested in some animation examples that don't work with grafox?

news.mozilla.org-4
In reply to this post by Boris Zbarsky
Boris Zbarsky wrote:

> Corey Ashford wrote:
>> Hmm, I tried to post the svg file to this newsgroup last night, but
>> it's not showing up on the server today.  Maybe the server blocked it
>> because it's too large?  (about 16KB)
>
> This newsgroup doesn't accept attachments.  The file needs to be pasted
> inline into the post, or posted somewhere on the web, with the URL in
> the post.
>
> -Boris

Ok, trying again.  Here it is inline:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:hack="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
a:timeline="independent" width="100%" height="100%"
preserveAspectRatio="none" viewBox="0 0 190 110">


   <desc>Timer experiment</desc>

   <!-- This hidden text is used store the timer markers (the start
times for
        each timer segment -->
   <text x="0" y="0" id="timerMarkers" visibility="hidden">0.1;30.1;</text>

   <script type="text/ecmascript"> <![CDATA[

     function keypress(evt) {
       var key = evt.getCharCode();
       var input_text = String.fromCharCode(key);

       switch (input_text) {
       case "R":
        rewindToPrevClick(evt);
        break;
       case "r":
         rewindClick(evt);
        break;
       case "P":
        playClick(evt);
        break;
       case "p":
        pauseClick(evt);
        break;
       case "s":
        stopClick(evt);
        break;
       case "f":
        fastForwardClick(evt);
        break;
       case "F":
        fastForwardToNextClick(evt);
        break;
       }
     }

     function initialize() {
         focus();
     }
   ]]> </script>

<g onload="initialize();" onkeypress="keypress(evt);">

   <!-- This is the background color -->
   <rect x="0" y="0" width="190" height="110" fill="#000" stroke="#777" />

   <!-- The rectangle surrounding the timer -->
   <rect id="tb" width="150" height="60" x="20" y="5" rx="10"
fill="black" stroke="darkslategray" stroke-width="5" />

   <script type="text/ecmascript"> <![CDATA[
     function loopToStart() {
       document.rootElement.setCurrentTime(0);
     }
   ]]> </script>

   <!-- Here's the little progress bar and triangle.  It's also used as for
        auto-restarting the timer -->
   <rect x="27.5" y="72" width="135" height="1" fill="black"
stroke-width="0.2" stroke="green" />

   <polygon points="26,74 29,74 27.5,70" fill="lime" onend="loopToStart();">
        <animateMotion id="progressBar" begin="0" type="translation"
calcMode="linear" additive="sum" from="0,0" to="135,0" dur="45" />
   </polygon>



<g id="timeDisplay" fill="lime">

   <!-- minutes -->

    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">9<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">8<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">7<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">6<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">5<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">4<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">3<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">2<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">1<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="53.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">0<animate attributeName="visibility" to="visible"
begin="0.1;" end="200000" />
    </text>

    <!-- colon -->

    <text x="78.3" y="25" text-anchor="middle" font-size="60"
baseline-shift="-50%" pointer-events="none">:</text>

    <!-- tens of seconds -->

    <text x="103.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">5<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="103.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">4<animate attributeName="visibility" to="visible"
begin="200000" end="200000" />
    </text>
    <text x="103.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">3<animate attributeName="visibility" to="visible"
begin="0.1;" end="1.1;" />
    </text>
    <text x="103.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">2<animate attributeName="visibility" to="visible"
begin="1.1;" end="11.1;" />
    </text>
    <text x="103.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">1<animate attributeName="visibility" to="visible"
begin="11.1;30.1;" end="21.1;36.1;" />
    </text>
    <text x="103.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">0<animate attributeName="visibility" to="visible"
begin="21.1;36.1;" end="30.1;" />
    </text>

    <!-- seconds -->
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">9<animate attributeName="visibility" to="visible"
begin="1.1;11.1;21.1;36.1;" end="2.1;12.1;22.1;37.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">8<animate attributeName="visibility" to="visible"
begin="2.1;12.1;22.1;37.1;" end="3.1;13.1;23.1;38.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">7<animate attributeName="visibility" to="visible"
begin="3.1;13.1;23.1;38.1;" end="4.1;14.1;24.1;39.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">6<animate attributeName="visibility" to="visible"
begin="4.1;14.1;24.1;39.1;" end="5.1;15.1;25.1;40.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">5<animate attributeName="visibility" to="visible"
begin="5.1;15.1;25.1;30.1;40.1;" end="6.1;16.1;26.1;31.1;41.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">4<animate attributeName="visibility" to="visible"
begin="6.1;16.1;26.1;31.1;41.1;" end="7.1;17.1;27.1;32.1;42.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">3<animate attributeName="visibility" to="visible"
begin="7.1;17.1;27.1;32.1;42.1;" end="8.1;18.1;28.1;33.1;43.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">2<animate attributeName="visibility" to="visible"
begin="8.1;18.1;28.1;33.1;43.1;" end="9.1;19.1;29.1;34.1;44.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">1<animate attributeName="visibility" to="visible"
begin="9.1;19.1;29.1;34.1;44.1;" end="10.1;20.1;30.1;35.1;" />
    </text>
    <text x="136.5" y="25" text-anchor="middle" font-size="60"
visibility="hidden" baseline-shift="-50%"
pointer-events="none">0<animate attributeName="visibility" to="visible"
begin="0.1;10.1;20.1;35.1;" end="1.1;11.1;21.1;36.1;" />
    </text>

    <!-- INSERT SETTIMERCOLOR ELEMENTS HERE -->

<hack:set attributeName="fill" to="red" begin="30.1" /><hack:set
attributeName="fill" to="lime" begin="0.1" /></g>



   <text text-anchor="middle" font-size="16" x="95" y="88" fill="blue"
pointer-events="none">30 15</text>

   <script type="text/ecmascript"> <![CDATA[
     function pauseWithHack() {
       document.rootElement.pauseAnimations();
       var t = document.rootElement.getCurrentTime();
       document.rootElement.setCurrentTime(t+5);  // hack to work around
adobe viewer bug
       document.rootElement.setCurrentTime(t);
     }
   ]]> </script>


   <script type="text/ecmascript"> <![CDATA[

     function getPrevTimer(curTime) {
         var tmEl = document.rootElement.getElementById("timerMarkers");
         var timerMarkers = tmEl.lastChild.nodeValue.split(";");

         // Trin off the last marker because it will be null.
         timerMarkers.length--;

        var idx = 0;

         for (idx = timerMarkers.length - 1; idx >= 0; idx--) {
           if (curTime > (Number(timerMarkers[idx]) + Number(1.0))) {
                return timerMarkers[idx];
           }
         }
        return 0;

     }


     function rewindToPrevClick(evt) {
       document.rootElement.setCurrentTime(
              getPrevTimer(document.rootElement.getCurrentTime()));
     }
   ]]> </script>

   <g id="rewindToPrev" onclick="rewindToPrevClick();">
   <rect width="18" height="16" x="26" y="91" rx="3" fill="darkslategray" />
   <text baseline-shift="-50%" font-family="webdings"
text-anchor="middle" font-size="17" x="35" y="95" fill="lime">9</text>
   <text baseline-shift="-50%" x="35" y="105" fill="white"
text-anchor="middle" font-size="3">R</text>
   <rect width="18" height="16" x="26" y="91" rx="3"
pointer-events="fill" visibility="hidden" />
   </g>

   <script type="text/ecmascript"> <![CDATA[
     function rewindClick(evt) {
       var cur_time = document.rootElement.getCurrentTime();
       cur_time -= 5;
       document.rootElement.setCurrentTime((cur_time - 10) > 0 ?
cur_time - 10 : 0); // hack to work around adobe viewer bug
       document.rootElement.setCurrentTime(cur_time > 0 ? cur_time : 0);
     }
   ]]> </script>

   <g onclick="rewindClick(evt);">
   <rect width="18" height="16" x="46" y="91" rx="3" fill="darkslategray" />
   <text baseline-shift="-50%" font-family="webdings"
text-anchor="middle" font-size="17" x="55" y="95" fill="lime">7</text>
   <text baseline-shift="-50%" x="55" y="105" fill="white"
text-anchor="middle" font-size="3">r</text>
   <rect width="18" height="16" x="46" y="91" rx="3"
pointer-events="fill" visibility="hidden" />
   </g>

   <script type="text/ecmascript"> <![CDATA[
     function playClick(evt) {
       document.rootElement.unpauseAnimations();
 
document.rootElement.getElementById("pauseButton").setAttribute("fill",
"orange");
 
document.rootElement.getElementById("playButton").setAttribute("fill",
"#080");
       document.rootElement.getElementById("tb").setAttribute("stroke",
"darkslategray");
     }
   ]]> </script>


   <g onclick="playClick(evt);">
   <rect width="18" height="16" x="66" y="91" rx="3" fill="darkslategray" />
   <text id="playButton" baseline-shift="-50%" font-family="webdings"
text-anchor="middle" font-size="17" x="75" y="95" fill="#080">4</text>
   <text baseline-shift="-50%" x="75" y="105" fill="white"
text-anchor="middle" font-size="3">P</text>
   <rect width="18" height="16" x="66" y="91" rx="3"
pointer-events="fill" visibility="hidden" />
   </g>

   <script type="text/ecmascript"> <![CDATA[
     function pauseClick(evt) {
       pauseWithHack();
 
document.rootElement.getElementById("pauseButton").setAttribute("fill",
"#c80");
 
document.rootElement.getElementById("playButton").setAttribute("fill",
"lime");
       document.rootElement.getElementById("tb").setAttribute("stroke",
"orange");
     }
   ]]> </script>

   <g onclick="pauseClick(evt);">
   <rect width="18" height="16" x="86" y="91" rx="3" fill="darkslategray" />
   <text id="pauseButton" baseline-shift="-50%" font-family="webdings"
text-anchor="middle" font-size="17" x="95" y="95" fill="orange">;</text>
   <text baseline-shift="-50%" x="95" y="105" fill="white"
text-anchor="middle" font-size="3">p</text>
   <rect width="18" height="16" x="86" y="91" rx="3"
pointer-events="fill" visibility="hidden" />
   </g>

   <script type="text/ecmascript"> <![CDATA[

     function getURLHead(url) {
         lastSlashIdx = url.lastIndexOf("/");
         // add one to get the trailing slash
         return url.substring(0,lastSlashIdx + 1);
     }

     function stopClick(evt) {
       alert("stopClick event: " + getURLHead(window.location.href) +
"selector.svg");
       window.location = "http://www.cnn.com";
       //window.location = getURLHead(window.location.href) +
"selector.svg";
     }
   ]]> </script>


   <g onclick="stopClick(evt);">
   <rect width="18" height="16" x="106" y="91" rx="3"
fill="darkslategray" />
   <text baseline-shift="-50%" font-family="webdings"
text-anchor="middle" font-size="17" x="115" y="95" fill="red">&lt;</text>
   <text baseline-shift="-50%" x="115" y="105" fill="white"
text-anchor="middle" font-size="3">s</text>
   <rect width="18" height="16" x="106" y="91" rx="3"
visibility="hidden" pointer-events="fill" />
   </g>

   <script type="text/ecmascript"> <![CDATA[
     function fastForwardClick(evt) {
        document.rootElement.setCurrentTime(document.rootElement.getCurrentTime()
+ 5);
     }
   ]]> </script>

   <g onclick="fastForwardClick(evt);">
   <rect width="18" height="16" x="126" y="91" rx="3"
fill="darkslategray" />
   <text baseline-shift="-50%" font-family="webdings"
text-anchor="middle" font-size="18" x="135" y="95" fill="lime">8</text>
   <text baseline-shift="-50%" x="135" y="105" fill="white"
text-anchor="middle" font-size="3">f</text>
   <rect width="18" height="16" x="126" y="91" rx="3"
pointer-events="fill" visibility="hidden" />
   </g>

   <script type="text/ecmascript"> <![CDATA[
     function getNextTimer(curTime) {
         var tmEl = document.rootElement.getElementById("timerMarkers");
         var timerMarkers = tmEl.lastChild.nodeValue.split(";");

         // Trin off the last marker because it will be null.
         timerMarkers.length--;

        var idx = 0;

         for (idx = timerMarkers.length - 1; idx >= 0; idx--) {
           if (Number(curTime) >= Number(timerMarkers[idx])) {
             if (idx == (timerMarkers.length - 1)) {
                 // This is the last timer.  Rewind to the beginning
                 // since we normally loop back to the beginning at the
                 // end of all the timers anyway.
                return 0;
             } else {
                return timerMarkers[idx + 1];
             }
           }
         }

     }

     function fastForwardToNextClick(evt) {
       document.rootElement.setCurrentTime(
                getNextTimer(document.rootElement.getCurrentTime()));
     }
   ]]> </script>


   <g onclick="fastForwardToNextClick();">
   <rect width="18" height="16" x="146" y="91" rx="3"
fill="darkslategray" />
   <text baseline-shift="-50%" font-family="webdings"
text-anchor="middle" font-size="17" x="155" y="95" fill="lime">:</text>
   <text baseline-shift="-50%" x="155" y="105" fill="white"
text-anchor="middle" font-size="3">F</text>
   <rect width="18" height="16" x="146" y="91" rx="3"
pointer-events="fill" visibility="hidden" />
   </g>
</g>

<!-- INSERT PLAYSOUND ELEMENTS HERE -->

<a:audio type="audio/x-wav" repeatCount="1" xlink:href="bell.wav"
begin="30.1" volume="1.0" /><a:audio type="audio/x-wav" repeatCount="1"
xlink:href="bell.wav" begin="0.1" volume="1.0" /></svg>
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg