I have a problem with animation; here is my code:
window.addEventListener('load', function(){
var Q =window.Q= Quintus().include("Sprites, Scenes,2D, Anim").setup({maximize:true});
Q.Sprite.extend('user',{
init:function(p){
this._super({sheet:"user",sprite:"user",
x:p.x,y:p.y,vx:p.vx,vy:p.vy});
this.add("animation");
},
step:function(dt){
this.play("walk");
}
});
Q.scene("scene1",function(stage){
var sprite1=stage.insert(new Q.user({x:200,y:20,vx:0,vy:0}));
});
Q.load("sprites.json,sprites.png",function()
{
Q.compileSheets("sprites.png","sprites.json");
Q.animations('user',{walk:{frames:[0,1],rate:1/15}});
Q.stageScene("scene1");
})
});
The error I get is the following:
Uncaught TypeError: Cannot call method 'draw' of undefined, quintus-all.js:4185
You'll need to make sure you have a spritesheet called "user" in your sprites.json, if you don't you'll get this error.
Related
I have been using svg-pan-zoom library successfully with my javascript app but I now need to refactor it to use requireJS.
My util.js is:
define([
'baja!',
'jquery',
'/file/WebWidgets/js/libraries/svg-pan-zoom.js'
], function (
baja,
$,
svgPanZoom) {
'use strict';
const updateInitializeDiv = () => {
const svgDocument = $('#svgObjectElementFromBinding')[0].contentDocument;
const svgDocumentElement = svgDocument.documentElement;
console.log(svgDocumentElement);
console.log(svgDocumentElement.tagName);//svg
let panZoomSVG = svgPanZoom(svgDocumentElement, {
zoomEnabled: true,
controlIconsEnabled: true
});
}
const util = {};
util.updateInitializeDiv = updateInitializeDiv;
return util;
});
I am getting "Uncaught TypeError: svgPanZoom is not a function".
Can anyone suggest what I am doing wrong?
I had to reference the svg-pan-zoom library in the RequireJS config to get this to work.
I've got an error in mediasoup-client while executing "device.createRecvTransport" in the Redux SAGA (I know this is not the best practice, but no choice).
"device.createRecvTransport" is actually an abstraction which holds a webRTC RTCPeerConnection instance. When I call it, it throws this error.
TypeError: Cannot read property '_createTransport' of null at createRecvTransport
the code:
function* createRecvTransport(device: Device) {
const {
id,
iceParameters,
iceCandidates,
dtlsParameters,
sctpParameters
} = yield sendRequest({
action: 'createWebRtcTransport',
data: {
forceTcp: false,
producing: false,
consuming: true
}
});
const recvTransport: Transport = yield call(device.createRecvTransport, {
id,
iceParameters,
iceCandidates,
dtlsParameters,
sctpParameters,
iceServers: []
});
}
the Device is declared with function
function* initDevice() {
const handlerName = detectDevice();
const device = new Device({
handlerName
});
const routerRtpCapabilities = yield sendRequest({
action: 'getRouterRtpCapabilities'
});
device.load({ routerRtpCapabilities });
}
"device.createSendTransport" method also works, the only issue is with creating Receive Transport. The method "router.createWebRtcTransport" get executed in the mediasoup router and it returns data before executing "createRecvTransport" in client side.
Seems the problem is with the "yield call" expression.
As the "device.createRecvTransport" isn't an async (handled with promise) function, it shouldn't be executed using "yield call".
When I removed "yield call", it fixed.
I can't understand because when I include a bit of javascript code, only for testing something in Magento, the following error returns:
Uncaught TypeError: Cannot read property 'fill' of undefined
at klass.onComplete (ceramic-sinks.html?p=1&dir=asc&limit=21&mode=grid&order=position&cat=205:4525)
at klass.<anonymous> (ezzoom.js:2)
at prototype.js:1
at klass.<anonymous> (ezzoom.js:2)
at prototype.js:1
Anyone could give me an example of how a testing code should be?
This is the code I tested:
<script type="text/javascript">
document.observe("dom:loaded", function() {
new Ajax.JSONRequest('http://www.abcd.com/ezzoom/hole/fill', {
parameters: {isAjax: true,
id: '1090382',
key: 'eJw1ybESgjAQhOFcJ5IlcXgDLSyU1rFxzlxchBsIYS6HBU8vjtrt/y3SZGAy8nB+73ztGgxKS1nmToljFXL6QSG8SLHmTTg+aRkND7JeP/Afu1wi01AQolKS8K2qtzRi7aJhhgOLgkrAKEkM3iFljuhUGFk5KuZcXMQkTwi0/XWDW9ue76fL4Xh9A5CyPlI=',
holes: 'eJx1UsFKAzEQ/Zcc9lR3bUWUwlwiXCJFL1rQehBXQppMN6HZnWWStRTx351sra2gp8x7eZmZvJkPYdFDENMP8e5gA+Y4EtcP84eX+/nzk7w8F58j0WJ0eqf+CUXtcam83BMs09h0iiDJfkKhVVQe67wjNL2O+fdNHpyBpaL0roEQVL3Lf4j3BfbMqIZ4S9h3YO5i48Xh3YTF/6k4fYfep9S7U5CrbcwH8Mm3PSXSxthNq6IqNptNvibVhz6o1GtVLFW0hMfRSXDtOlSFBlKN0zuYWy531ZXjzDgqVdCZd42L5WScNWigrMmZDMlcMJUdBhcdthl7U05Oz/krWmkLcg1b6doViukrO0hQFYG/xcpBMfj4i7Kg19jHA/c2Ela1ZpjsqzCwUr2PrHxazB9n8oAXd7P7mVxcEbYRWiODa7ANFrsjyXc9yVwn1EhbmbbjL96rLRCvzUjcXFwvZrfzxxd5dpGEfYjYXDBJVtdgJDea+tNcXJNwGAgbxdazVawezGI0GafBsmFpAdgyRoNpDPe28di+XDDTxPh6'
},
onComplete: function(transport) {
var json = transport.responseJSON;
for(var i=0;i<json.fill.length;i++){
var obj = json.fill[i];
$('ezzoom-'+obj.block).update(obj.data);
}
if (json.conversionRate)
convertFromJson(json);
}
});
});
</script>
I'm trying to test a (simple) directive that validates a text field to see if the inputted value is less than another controller's variable max value.
Here's my error:
IE 11.0.0 (Windows 7) Maximum value validator should be valid initially FAILED
Error: Unexpected request: GET app/layout/shell.html
No more request expected
at $httpBackend (C:/Projects/myProj/myProj/scripts/angular-mocks.js:1218:5)
at sendReq (C:/Projects/myProj/myProj/scripts/angular.js:9462:9)
at serverRequest (C:/Projects/myProj/myProj/scripts/angular.js:9179:9)
at processQueue (C:/Projects/myProj/myProj/scripts/angular.js:12914:11)
at Anonymous function (C:/Projects/myProj/myProj/scripts/angular.js:12930:27)
at Scope.prototype.$eval (C:/Projects/myProj/myProj/scripts/angular.js:14123:9)
at Scope.prototype.$digest (C:/Projects/myProj/myProj/scripts/angular.js:13939:15)
at Anonymous function (C:/Projects/myProj/myProj.test/directiveTests.js:11:3)
at invoke (C:/Projects/myProj/myProj/scripts/angular.js:4152:7)
at workFn (C:/Projects/myProj/myProj/scripts/angular-mocks.js:2255:11)
So looking around this seems to be associated with not setting up an AJAX call. Except, as you can see below, my directive doesn't have any associated service calls at all on it. Plus, why the heck is it trying a GET request for the shell html file? Where did that come from?
I've only written a few tests so far as I'm just starting this project, but my other tests worked just fine. I'm running Karma if that might make a difference. I'm stumped though because my tests look like the example tests that are out there. If I debug through, everything seems great through the end of the test but I get the error after the test completes and the test fails with this error.
OK code time.
My directive:
(function() {
'use strict';
var app = angular.module('app');
app.directive('maxValue', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
ctrl.$parsers.unshift(function(value) {
var valid;
if (value) {
var maxValue = scope.$eval(attrs.maxValue);
valid = parseInt(value, 10) <= maxValue;
}
return valid ? valid : undefined;
});
}
};
});
})();
and my tests:
describe("Maximum value validator", function() {
var $scope, form;
beforeEach(module('app'));
beforeEach(inject(function($compile, $rootScope) {
var element = angular.element('<form name="form"><input type="text" name="value" ng-model="value" max-value="maxValue" /></form>');
$scope = $rootScope;
$scope.value = 0;
$scope.maxValue = 100;
$compile(element)($scope);
$scope.$digest();
}));
it('should be valid initially', function () {
expect($scope.form.value.$valid).toBe(true);
});
it('should be valid when value is the same as the max value', function() {
$scope.form.value.$setViewValue('100');
expect($scope.form.value.$valid).toBe(true);
});
it('should be invalid when the value is greater than the max value', function() {
$scope.form.value.$setViewValue('101');
expect($scope.form.value.$valid).toBe(false);
});
});
#rball and I have came to the conclusion that the following fixed the "module not found" error:
var mod = angular.module('uiRouterNoop', []);
mod.service('$state', function () {
return {}
});
mod.service('$urlRouter', function () {
return {};
});
Then in the spec
beforeEach(module('uiRouterNoop'));
It is an important practice in angular to separate modules where need be. Most SPA's tie every module to the same one such as 'app'. But it is good to separate them for testing purposes such as these and can prevent dependency problems when testing due to complex mock scenarios.
The contents of my dataHelper.js file:
define(["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr", "dojo/json"],
function(declare, dom, xhr, json){
return {
getJSON: function(){
xhr.get({
url: "../../cpuusage.json",
handleAs: "json",
load: function(jsonData){
return jsonData;
},
error: function() {
}
});
}
};
});
I'm trying to run this from my index.html as follows:
var chartData = dataHelper.getJSON();
I think I have several issues. First of all, I'm not sure my module and the getJSON function is defined correctly. Secondly I get errors on my console:
TypeError: this.source is undefined
[Break On This Error]
= [],
dojo.js (line 362)
SyntaxError: missing : after property id
},
dojo.js (line 330)
SyntaxError: missing : after property id
},
dojo.js (line 330)
SyntaxError: missing : after property id
},
All I want to achieve first is load the json data into the chartData variable. Many thanks.
The first issue I'm seeing is you are treating an asynchronous process as if it was a synchronous one. The xhr.get returns immediately after the request to the server is sent, it does not block until a response is received.
First, I would add a console.log to your module definition to ensure that your dataHelper module is being loaded correctly.
define(["dojo/_base/xhr"],
function(xhr){
console.log('dataHelper.js loaded');
return {
//
};
});
Also note that above you aren't using any of the base dojo modules except dojo/_base/xhr, so it is unnecessary to include them (unless they are used outside this snippet).
You need to update your code to handle this call asynchronously. To do this, you could take advantage of the fact that the xhr.get method returns a Deferred object. This class makes dealing with asynchronous in a consistent manner quite easy.
To do this, update the dataHelper module to return the result of the xhr call:
define(["dojo/_base/xhr"], function(xhr){
return {
getJSON: function(){
//this returns a Deferred object, what to do on load and error is then handled by the invoker
return xhr.get({
url: "../../cpuusage.json",
handleAs: "json"
});
}
};
});
Then, when utilizing this module:
//replace dataHelper with whatever it's path is
require(['dataHelper'],function(dataHelper){
var deferred = dataHelper.getJSON();
deferred.then(function(data){
//this function is invoked once the data has been fully loaded
}, function(error){
//this function is invoked if an error occurs while loading the data (in case of a server error response or if the response isn't in the format you specified)
});
});
This is my proposal:
Your dataHelper.js file:
define("dataHelper", ["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr"],
function(declare, dom, xhr){
return declare("dataHelper", [], {
getJSON: function(){
return xhr.get({
url: "../../cpuusage.json",
handleAs: "json"
});
});
};
});
your invocation:
require(["dataHelper"], function(dataHelper) {
var chartData;
dataHelper.getJSON().then(function(jsonData) {
chartData = jsonData;
//Continue doing stuff with chartData in here, not outside
});
});