kaisellgren/Animation

Exception: type 'double' is not a subtype of type 'int' of 'value'.

imiten opened this issue · 8 comments

imiten commented

Hi,

I am unable to debug at my end so am providing following error stack trace.

Exception: type 'double' is not a subtype of type 'int' of 'value'.
Stack Trace: #0      StyleAnimation._advance._advance.<anonymous closure> (http://127.0.0.1:3030/E:/learn/dart/mybookmarks/bin/packages/animation/src/style_animation.dart:127:43)
#1      _LinkedHashMapImpl.forEach._ (bootstrap:1295:8)
#2      DoubleLinkedQueue.forEach (bootstrap:1554:8)
#3      _LinkedHashMapImpl.forEach (bootstrap:1294:18)
#4      StyleAnimation._advance._advance (http://127.0.0.1:3030/E:/learn/dart/mybookmarks/bin/packages/animation/src/style_animation.dart:127:25)

Here is myanimate method:

void myanimate() {
  var header = query('body header');
  print(header.text);
  /*
     $element.animate({opacity:0.2}).delay(1000)
                    .animate({opacity:0.4}).delay(1000)
                    .animate({opacity:0.6}).delay(1000)
                    .animate({opacity:0.8}).delay(1000)
                    .animate({opacity:1}).delay(1000)
                    .animate({opacity:0.8}).delay(1000)
                    .animate({opacity:0.6}).delay(1000)
                    .animate({opacity:0.4}).delay(1000)
                    .animate({opacity:0.2}).delay(1000);
                    */
  var opacity = [0.2, 0.4, 0.6, 0.8, 1, 0.8, 0.6, 0.4, 0.2];
  var p = null;
  for(var opa in opacity) {
    p = {"opacity": opa};
    animate(element:header, 
        duration:1000, properties : p 
    );  
  }



}

You have closed earlier issue so I did not know how to reopen and thus created this new issue.

Few editor help needed:

  1. dart application is able to pub install and update and on file system I see dart file but the editor is not showing those download packages animation dart files. due to this I am unable to debug and step into the source code and explore. if you can help correct this is might help. I am on win 7. I am currently extracting packages and creating separate app in which I put the *.dart files as if they are part of app itself and not using pub package.

  2. The ide has one more issue that it shows below code as error:

_performEasing(time, duration, change, baseValue) {
    switch (easingType) {
      case EasingType.LINEAR:
        return Easing.linear(time, duration, change, baseValue);
      case EasingType.QUADRATIC_EASY_IN:

Those LINEAR etc are complained that expected constant expression.

Ok to add more on my attempts to debug things:

I went ahead and changed those easing type spec to static const instead of final static to get rid of error.
I also at few places changed the int, double, var to be num (for toProperties and fromProperties) and few anonymous functions.
Then I was able to get to run code else it would show in ide the errors and native parser not found error.

I added looping using Timer class so added Timer parameter to myanimate method but it just does not work as desired. I do not see effect like jquery as you can see here http://mama.indstate.edu/users/mehta/public_html/bookmarks.html

But then the animation is not quite as I would like. Below is my code bookmarks.dart:

bookmarks.dart:

library bookmarks;

import 'dart:html';
import 'dart:isolate';
import 'animation.dart';

void myanimate(Timer t) {
  var header = query('body header');
  print(header.text);
  /*
     $element.animate({opacity:0.2}).delay(1000)
                    .animate({opacity:0.4}).delay(1000)
                    .animate({opacity:0.6}).delay(1000)
                    .animate({opacity:0.8}).delay(1000)
                    .animate({opacity:1}).delay(1000)
                    .animate({opacity:0.8}).delay(1000)
                    .animate({opacity:0.6}).delay(1000)
                    .animate({opacity:0.4}).delay(1000)
                    .animate({opacity:0.2}).delay(1000);
                    */
  var opacity = [0.2, 0.4, 0.6, 0.8, 1, 0.8, 0.6, 0.4, 0.2];
  var p = null;
  for(var opa in opacity) {
    p = {"opacity": opa};
    animate(element:header, 
        duration:100, properties : p 
    );  
  }



}

void main() {

  queryAll("article table tr:nth-child(even) td:first-child").forEach((e) => e.style.background = 'white');

  queryAll("article table tr:nth-child(odd) td:first-child").forEach((e) => e.style.background = 'whitesmoke');



  queryAll("article table div:nth-child(even)").forEach((e) => e.style.background = 'white');
  queryAll("article table div:nth-child(odd)").forEach((e) => e.style.background = 'whitesmoke');


  var header = query('body header');
  header.style
    ..border = "2px solid black" 
    ..color = "black" //reset color to black
    ..backgroundColor = "whitesmoke"
    ..padding = "5px 5px"
    ..width = "120px" //tag width
    ..textAlign = "center"//center text in tag
    ..marginLeft = "auto" //center tag
    ..marginRight = "auto" //center tag
  ;

  var timer = new Timer.repeating(3000, myanimate);
  //myanimate();

}

The html file you can use as below mostly:

bookmarks.html

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="HTML Tidy, see www.w3.org" name="generator"/>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<title>Bookmarks</title>
    <script type="application/dart" src="bookmarks.dart"></script>
    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>

</head>

<body>
<!-- hide text by setting color to white as background and center -->
<!--h2 align="center" style="color:white">Bookmarks</h2-->
<header style="text-align: center; color:white">Bookmarks</header>
</body>
</html>

where are the wiki editing tags like triple quoted html, dart documented. I actually looked at your readme.md file to tidy this message a bit.

Regards,

Miten.

kaisellgren commented

Those IDE problems are just IDE problems (as far as I know). It runs fine though.

Regarding that double/int issue, it's now fixed.

I'd like to inform that .delay() is not yet implemented. It's just a placeholder method that throws NotImplementedException :)

Maybe I will now implement it.

imiten commented

Hi,

I do not see the animation as I see on my website url I provided.  could you try out what all changes are needed in your code or mine to mimic the jquery functionality.

Regards,

Miten.

From: Kai Sellgren notifications@github.com
To: kaisellgren/Animation Animation@noreply.github.com
Cc: imiten imiten@yahoo.com
Sent: Monday, November 19, 2012 10:15 PM
Subject: Re: [Animation] Exception: type 'double' is not a subtype of type 'int' of 'value'. (#7)

Those IDE problems are just IDE problems (as far as I know). It runs fine though.
Regarding that double/int issue, it's now fixed.
I'd like to inform that .delay() is not yet implemented. It's just a placeholder method that throws NotImplementedException :)
Maybe I will now implement it.
—
Reply to this email directly or view it on GitHub.

kaisellgren commented

I'll take a look at this at the evening UTC+2.

I'll return with a code sample.

imiten commented

Hi,

Thanks.  So it must be around 11:15am in your region now and will be about 7 hours when you get to code !

Regards,

Miten.

From: Kai Sellgren notifications@github.com
To: kaisellgren/Animation Animation@noreply.github.com
Cc: imiten imiten@yahoo.com
Sent: Tuesday, November 27, 2012 2:32 PM
Subject: Re: [Animation] Exception: type 'double' is not a subtype of type 'int' of 'value'. (#7)

I'll take a look at this at the evening UTC+2.
I'll return with a code sample.
—
Reply to this email directly or view it on GitHub.

kaisellgren commented

If you now try the latest version, it should be possible to do what you want like this:

<div id="box" style="opacity: 0;"></div>
var el = query('#box');

new AnimationQueue()
  ..addAll([
    animate(element: el, properties: {'opacity': 0.2}, duration: 1000, paused: true),
    animate(element: el, properties: {'opacity': 0.4}, duration: 1000, paused: true),
    animate(element: el, properties: {'opacity': 0.6}, duration: 1000, paused: true),
    animate(element: el, properties: {'opacity': 0.8}, duration: 1000, paused: true),
    animate(element: el, properties: {'opacity': 1.0}, duration: 1000, paused: true),
    animate(element: el, properties: {'opacity': 0.8}, duration: 1000, paused: true),
    animate(element: el, properties: {'opacity': 0.6}, duration: 1000, paused: true),
    animate(element: el, properties: {'opacity': 0.4}, duration: 1000, paused: true),
  ])
  ..repeat = -1
  ..interval = 1000
  ..run();

Basically, we create a queue, and add a bunch of animations which are all initially paused. Each of these last for a second, and animate opacity to some value. Then the queue is told to repeat forever (-1) and have an interval of 1000 milliseconds, which means that there is a 1 second pause between the animations in the queue.

Also you should star this project. ;)

imiten commented

Hi Kai,

I have starred !

Thanks for actively looking into things.  I think the docs can be updated in sync with code changes like information you have in this email for repeat etc. attributes is not in your readme on web site.

Regards,

Miten.

From: Kai Sellgren notifications@github.com
To: kaisellgren/Animation Animation@noreply.github.com
Cc: imiten imiten@yahoo.com
Sent: Wednesday, November 28, 2012 12:06 AM
Subject: Re: [Animation] Exception: type 'double' is not a subtype of type 'int' of 'value'. (#7)

If you now try the latest version, it should be possible to do what you want like this:

var el = query('#box'); new AnimationQueue() ..addAll([ animate(element: el, properties: {'opacity': 0.2}, duration: 1000, paused: true), animate(element: el, properties: {'opacity': 0.4}, duration: 1000, paused: true), animate(element: el, properties: {'opacity': 0.6}, duration: 1000, paused: true), animate(element: el, properties: {'opacity': 0.8}, duration: 1000, paused: true), animate(element: el, properties: {'opacity': 1.0}, duration: 1000, paused: true), animate(element: el, properties: {'opacity': 0.8}, duration: 1000, paused: true), animate(element: el, properties: {'opacity': 0.6}, duration: 1000, paused: true), animate(element: el, properties: {'opacity': 0.4}, duration: 1000, paused: true), ]) ..repeat = -1 ..interval = 1000 ..run();
Basically, we create a queue, and add a bunch of animations which are all initially paused. Each of these last for a second, and animate opacity to some value. Then the queue is told to repeat forever (-1) and have an interval of 1000 milliseconds, which means that there is a 1 second pause between the animations in the queue.
Also you should star this project. ;)
—
Reply to this email directly or view it on GitHub.

kaisellgren commented

Yes I'm planning on doing that, and also put an API documentation online similar to Dart's official API.

imiten commented

Hi Kai,

can you provide some background on _advance method.  I know window.requestAnimationFrame(callback) described on Mozilla site.

For my case of opacity  I feel that if browser is going to invoke _advance 60 times in 1 sec then its going to be overkill in performance since I do not think the value is going to be changing at all as per the variables you have in code like baseValue, value, intermediateValue, change.  Basically change will always be zero.  Please explain bit on it if possible.

Also since the editor is not showing .dart files in the project/app I find it bit incovenient to have separate project setup  just for debugging.

Regards,

Miten.

From: Kai Sellgren notifications@github.com
To: kaisellgren/Animation Animation@noreply.github.com
Cc: imiten imiten@yahoo.com
Sent: Wednesday, November 28, 2012 12:16 PM
Subject: Re: [Animation] Exception: type 'double' is not a subtype of type 'int' of 'value'. (#7)

Yes I'm planning on doing that, and also put an API documentation online similar to Dart's official API.
—
Reply to this email directly or view it on GitHub.