Im doing a Christmas based filter where i want my body to stay static and does not rotate according to the face movement. I have a code for that but for some reason, this error shows up "cannot set property 'rotationX' of undefined". Can someone help on how to fix this? Running on Spark AR v104
Here is the code:
var Scene = require('Scene');
var Textures = require('Textures');
var Materials = require('Materials');
var FaceTracking = require('FaceTracking');
var Animation = require('Animation');
var Reactive = require('Reactive');
var TouchGestures = require('TouchGestures');
const Instruction = require('Instruction');
var face = FaceTracking.face(0);
var neck = Scene.root.findFirst('Bone.004');
var neckmovement = 80;
neck.transform.rotationX = face.cameraTransform.rotationX.mul(-1.0).sum(0).expSmooth(neckmovement);
neck.transform.rotationY = face.cameraTransform.rotationZ.mul(1.0).sum(0).expSmooth(neckmovement);
neck.transform.rotationZ = face.cameraTransform.rotationY.mul(-1.0).sum(0).expSmooth(neckmovement);
findFirst returns a promise (https://sparkar.facebook.com/ar-studio/learn/reference/classes/scenemodule.scene/#methods). So you need to do something like this:
var Scene = require('Scene');
var Textures = require('Textures');
var Materials = require('Materials');
var FaceTracking = require('FaceTracking');
var Animation = require('Animation');
var Reactive = require('Reactive');
var TouchGestures = require('TouchGestures');
const Instruction = require('Instruction');
(async function() {
var face = FaceTracking.face(0);
var neck = await Scene.root.findFirst('Bone.004');
var neckmovement = 80;
neck.transform.rotationX = face.cameraTransform.rotationX.mul(-1.0).sum(0).expSmooth(neckmovement);
neck.transform.rotationY = face.cameraTransform.rotationZ.mul(1.0).sum(0).expSmooth(neckmovement);
neck.transform.rotationZ = face.cameraTransform.rotationY.mul(-1.0).sum(0).expSmooth(neckmovement);
})();
Or you could decide to use .then(...) on the promise if you don't want to wrap everything in an async function. But I would recommend the async function approach as it'll make things a little easier in your code most likely.
Related
I'm experimenting with JXA and trying to 'port' a small script, which parses track names from the web page. This script is currently working as Keyboard Maestro macro and is executed in current Safari window:
var trackBlock = document.getElementsByClassName("track tracklist_track_title");
var trackList = [];
for (var a of trackBlock) {
trackList.push(a.innerText);
}
trackList.join("\n");
The problem is that my porting attempt works well in JXA if doJavaScript returns a single string (variable trackName1 contains track title):
var sfr = Application("Safari");
var trackName1 = sfr.doJavaScript('document.getElementsByClassName("track tracklist_track_title")[1].innerText', { in: sfr.windows[0].currentTab });
trackName1 // contains track name
But if I change the code, so that doJavaScript returns an array (as it was in the initial code), the variable is null. Can you, please, explain me: what am I doing wrong?
var sfr = Application("Safari");
var trackBlock = sfr.doJavaScript('document.getElementsByClassName("track tracklist_track_title")', { in: sfr.windows[0].currentTab });
trackBlock[0].innerText; // null
Thank you!
I think the problem is this statement:
trackList.join("\n");
When you put that code in a JXA script, you need to escape the \n:
trackList.join("\\n");
Here's my script that works:
'use strict';
(function myMain() { // function will auto-run when script is executed
var app = Application.currentApplication();
app.includeStandardAdditions = true;
/*
HOW TO USE:
1. Open Safari to this URL:
https://forum.keyboardmaestro.com/
2. Run this script
*/
var jsStr = `
(function myMain2() {
//debugger;
//return 'Just testing';
var elemCol = document.querySelectorAll('div.category-text-title');
var elemArr = Array.from(elemCol);
var titleArr = elemArr.map(e => {return e.innerText});
return titleArr.join('\\n');
})();
`
var safariApp = Application("Safari");
var oTab = safariApp.windows[0].currentTab();
var pageURL = oTab.url();
var pageTitle = oTab.name();
var jsScriptResults = safariApp.doJavaScript(jsStr, {in: oTab})
console.log(jsScriptResults);
return jsScriptResults;
})();
//-->RETURNS:
/* Questions & Suggestions
Macro Library
Plug In Actions
Tips & Tutorials
Wiki
Announcements
Status Menu Icons
Forum Admin
*/
Here is a more clear example of the issue. Here is the code:
var sfr = Application("Safari");
var scr2run = 'document.getElementsByClassName("tracklist_track_title")';
var scr2run1 = 'document.getElementsByClassName("tracklist_track_title")[0]';
var scr2run2 = 'document.getElementsByClassName("tracklist_track_title")[0].innerText';
var trackName = sfr.doJavaScript(scr2run, { in: sfr.windows[0].currentTab });
var trackName1 = sfr.doJavaScript(scr2run1, { in: sfr.windows[0].currentTab });
var trackName2 = sfr.doJavaScript(scr2run2, { in: sfr.windows[0].currentTab });
Here is the output:
app = Application("Safari")
app.doJavaScript("document.getElementsByClassName(\"tracklist_track_title\")", {in:app.windows.at(0).currentTab})
--> null
app.doJavaScript("document.getElementsByClassName(\"tracklist_track_title\")[0]", {in:app.windows.at(0).currentTab})
--> null
app.doJavaScript("document.getElementsByClassName(\"tracklist_track_title\")[0].innerText", {in:app.windows.at(0).currentTab})
--> "From What Is Said To When It's Read"
Why the two first doJavaScript calls return null, but the third one returns expected value?
In answer to your second question:
Why the two first doJavaScript calls return null, but the third one
returns expected value?
var scr2run = 'document.getElementsByClassName("tracklist_track_title")';
var scr2run1 = 'document.getElementsByClassName("tracklist_track_title")[0]';
var scr2run2 = 'document.getElementsByClassName("tracklist_track_title")[0].innerText';
The third JavaScript returns a text value, whereas the first two do not. They return an element collection and an element.
UPDATED 6/1/17 with the correct code pasted at the bottom.
I'm working through Apple's TVML guide, section 2: Navigating Between Pages. (https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/NavigatingBetweenPages.html#//apple_ref/doc/uid/TP40016718-CH9-SW1)
Everything is fine until the last bit (Listing 4-4), which allow you to use the menu button on the remote to return to the previous page. Whenever I try it, my sample app simply won't load:
var baseURL;
function loadingTemplate() {
var template = '<document><loadingTemplate><activityIndicator><text>Loading</text></activityIndicator></loadingTemplate></document>';
var templateParser = new DOMParser();
var parsedTemplate = templateParser.parseFromString(template, "application/xml");
return parsedTemplate;
}
function getDocument(extension) {
var templateXHR = new XMLHttpRequest();
var url = baseURL + extension;
var loadingScreen = loadingTemplate();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushPage(templateXHR.responseXML, loadingScreen);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
}
function pushPage(page, loading) {
var currentDoc = getActiveDocument();
navigationDocument.replaceDocument(page, loading);
}
App.onLaunch = function(options) {
baseURL = options.BASEURL;
var extension = "templates/InitialPage.xml";
getDocument(extension);
}
What am I missing?
This works:
var baseURL;
function loadingTemplate() {
var template = '<document><loadingTemplate><activityIndicator><text>Loading</text></activityIndicator></loadingTemplate></document>';
var templateParser = new DOMParser();
var parsedTemplate = templateParser.parseFromString(template, "application/xml");
navigationDocument.pushDocument(parsedTemplate);
return parsedTemplate;
}
function getDocument(extension) {
var templateXHR = new XMLHttpRequest();
var url = baseURL + extension;
var loadingScreen = loadingTemplate();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushPage(templateXHR.responseXML, loadingScreen);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
}
function pushPage(page, loading) {
navigationDocument.replaceDocument(page, loading);
}
App.onLaunch = function(options) {
baseURL = options.BASEURL;
var extension = "templates/InitialPage.xml";
getDocument(extension);
}
Yes, I believe there is a mistake. They should have kept the line
navigationDocument.pushDocument(parsedTemplate);
at the end of the loadingTemplate method.
The idea is to push the loading page, then replace it with the new page.
On a side note, the line
var currentDoc = getActiveDocument();
has no business here. This code was obviously not tested or reviewed.
var backgroundImg = new Image(50, 50);
backgroundImg.src = "img/grass.png";
var backgroundPattern = screen.createPattern(backgroundImg, "repeat");
backgroundPattern is null. Why??
Because you need to give the image time to load. For this, use the onload handler on the Image instance. Note that this is asynchronous so you need to have that in mind for the rest of the code:
var backgroundPattern;
var backgroundImg = new Image(50, 50);
backgroundImg.onload = function() {
// provided screen holds the 2D context of the canvas:
backgroundPattern = screen.createPattern(this, "repeat");
// execute next part of your code from here...
// next();
};
backgroundImg.src = "img/grass.png";
I have a canvas which I use to draw a plot periodically. I have a function that receives data periodically, and it parses the data and plots it on the canvas. For the plotting I use Chart.js.
But I am not able to update the plot periodically. I have confirmed that the data are received correctly and parsed, but the plot is not updating. It updates when I click the page, or if I minimize the browser and maximize it again. The plot would briefly appear and the next time update is called, the plot dissapears.
Here is my code. I am using Firefox.
function start ()
{
// create a new websocket and connect
window.ws = new wsImpl('ws://localhost:8181/consoleappsample', 'my-protocol');
// when data is comming from the server, this metod is called
ws.onmessage = function (evt)
{
ParseIncomingData(evt.data);
};
// when the connection is established, this method is called
ws.onopen = function ()
{
inc.innerHTML = 'Connected<br/>';
textPanel.style.background = "#00FF00";
};
// when the connection is closed, this method is called
ws.onclose = function ()
{
inc.innerHTML = 'Connection closed<br/>';
textPanel.style.background = "#FF0000";
}
var periodicFuncID = setInterval( function() { ws.send(1); }, 2000);
}
function ParseIncomingData(data)
{
var splitContents = data.split(',');
var inc = document.getElementById('incomming');
var xaxis = new Array();
var yaxis = new Array();
yaxis = splitContents;
var dataType = yaxis.shift();
var data;
for(var i=1; i<=yaxis.length; i++)
{
xaxis.push(i);
}
data =
{
labels : xaxis,
datasets : [
{
//fillColor : "rgba(135,206,250,0.5)",
fillColor : "rgba(0,0,0,0.4)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(255,165,0,1)",
pointStrokeColor : "#585858 ",
data : yaxis
}
]
}
var canvas= document.getElementById('Plot');
var ctx = canvas.getContext("2d");
var myLine = new Chart(ctx).Line(data);
}
window.onload = start;
Most of the code is unrelated to my problem but I just wanted to know if there is something wrong in the way I handle.
Thank you.
I am attempting to create a generic Container for my viewModels so common methods can be applied a variety of objects without specific knowledge ot the viewModel. The container and contained object would look like this:
var containedViewModel = function() {
var self = this;
self.id = ko.observable();
...
self.doSomething = function() {
alert('here');
};
}
var ContainerModel = function(cRoot, cModel, cName) {
var self = this;
self.rootModel = cRoot; // Root view model
self.viewName = cName; // viewModel container name
self.refModel = cModel; // viewModel reference
self.viewModel = ko.observable(); // Single view model
self.viewModels = ko.observableArray(); // Array of view models
self.init = function(rootModel) {
self.viewModel = new self.refModel();
}
self.doSomething = function() {
self.rootModel.doSomeThing(); // This works
self.refModel.doSomeThing(); // This does not work
self.viewModel.doSomeThing(); // This does not work as well
}
}
And the container would be created with a call like:
var ParnentModel = function() {
var self = this;
self.id = ko.observable();
...
self.container = new ContainerModel(self, containedViewModel, 'modelName');
...
self.doSomething = function() {
alert('here');
};
};
In this example the rootModel function access works fine because the actual viewmodel is created and passed to the container. Using 'new self.refModel()' and 'self.rootModel.doSomeThing()' appear to work as expected. When I attempt to use 'self.viewModel.doSomeThing();' knockout complains that it is not a function.
Is it possible to access a viewModels functions by reference to the viewModel.
Any help would be appreciated.
You're almost there. See my comments inside the code.
var containedViewModel = function() {
var self = this;
self.id = ko.observable();
self.doSomething = function() {
alert('contained');
};
// I would prefer to have return self here
};
var ContainerModel = function(cRoot, cModel, cName) {
var self = this;
self.rootModel = cRoot; // Root view model
self.viewName = cName; // viewModel container name
self.refModel = cModel; // viewModel reference
self.viewModel = ko.observable(); // Single view model
self.viewModels = ko.observableArray(); // Array of view models
self.init = function(rootModel) {
// you meant this, right?
self.viewModel(new self.refModel());
};
self.doSomething = function() {
self.rootModel.doSomething(); // This works
//self.refModel.doSomeThing(); // This does not work
// need to unwrap the value, fixed typo
self.viewModel().doSomething(); // This does not work as well
};
};
var ParnentModel = function() {
var self = this;
self.id = ko.observable();
self.container = new ContainerModel(self, containedViewModel, 'modelName');
// missing call to init
self.container.init();
self.doSomething = function() {
alert('parent');
};
};
// execution
var p = new ParnentModel();
p.container.doSomething();
http://jsbin.com/arezew/1/edit
I think you should create instance of contained model when passing to ContainerModel like this :
self.container = new ContainerModel(self, new containedViewModel, 'modelName');