Having a weird issue. In my Dart code I have some polymer components on the screen and one of them has a method I call from my main().
I grab a reference to it by doing
PolyComp poly = querySelector("#idOfPolymer");
poly.flash();
This works perfectly in dart. The page loads up and PolyComp starts to flash. However when I run this in Chrome by running Build Polymer app from the Dart IDE, I get an error that says cannot call flash() on null.
I ended up making it flash by just using an event bus and letting PolyComp listen to my event, but this is overkill.
What am I doing wrong? This happens in the latest Chrome, Firefox and Safari.
Edit:
I built the following polymer app to JS also and ran into the same issue.
https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/todo_element/todo.html
Works on DartVM, not in Chrome because its calling a method on a null element.
When you run this code from the main() method it is probably a timing issue.
You can try something like
import "package:polymer/polymer.dart";
main() {
initPolymer().run(() {
// code here works most of the time
Polymer.onReady.then((e) {
// some things must wait until onReady callback is called
});
});
}
see also how to implement a main function in polymer apps
Related
I am attempting to rebuild a game that works on itch to be compatible on most major devices and browsers. I have a problem where on iOS (and possibly other mobile devices) a call to play audio tags from click and touch events has quite a significant delay.
I have read about several potential causes, including the 300ms delay, preventDefault for the second click event, stopPropagation for potential parent clicks, different audio formats causing lag in decompression, etc. Nothing seems to work.
Initially my intent was to keep everything in vanilla js without outside libraries to force myself to really learn what's going on under the hood. However, I have been having some success with some outside libraries for other problems, so I tried fastclick.js for this problem. That didn't work for me either. So, if someone knows how to address this issue without a library that would be great, but after looking at the fastclick code, that may be beyond my level of comprehension.
A current build can be found at www.teachersteve.net/assett_loading_with_ian/assett_loading_with_ian.html
Some explanation of my thought process:
I removed anything that is actually game related to try and isolate the problem. I put all the assetts directly in the html to simplify the loading process and wait to start the js after the DOM loaded
document.addEventListener("DOMContentLoaded", doSomething);
I am currently only calling one audio tag to play as I read somewhere that calling multiple tags can overload the decompression process and cause a delay. That seems to not be the issue.
I have 3 different file formats so far for compatibility attempts... I did read that LEI16 (a wav format) might be best because it eliminates compression, although I haven't tried it yet.
This is the rest of the doSomething() function
function doSomething() {
document.body.style.opacity = 1;
document.addEventListener("click", playAudio);
document.addEventListener('click', preventInputDefault);
document.addEventListener('ontouchend', preventInputDefault);
console.log("assetts loaded");
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
function playAudio() {
// backgroundMusic.play();
letterAudio.play();
// correctAnswerAudio.play();
// letterAudio.play();
// correctAnswerAudio.play();
}
function preventInputDefault(evt) {
evt.preventDefault();
console.log("hello preventInputDefault");
evt.stopPropagation();
console.log("hello stopPropagation");
}
}
Thanks!
I've used Notifications working on a JavaScript app and It's very useful when you don't have to be all the time looking at the app when something important needs to be acknowledged. I tried to replicate some work on Dart but a reference error is shown on compiled to JS Chrome.
Do you know if It's going to be implemented for Chrome soon? or is It going to remain experimental?
Thanks in advance
This is the function which tries to call Notification API. Without Notification line, everything works, when I add Notification line I get this error "Uncaught ReferenceError: requestPermission is not defined" running the code as JavaScript. (I am importing 'dart:html')
void revisarInput() {
if ( valorLogin != '' ) {
indicador = true;
_ws.send( Util.formatearJsonSocket( 'loginPwd', { 'pwd': int.parse( valorLogin )}));
}
Notification.requestPermission();
}
This was a bug in dart2js, https://code.google.com/p/dart/issues/detail?id=22483 and is fixed for Dart 1.9.
This page says
https://developer.chrome.com/apps/notifications
Stable since Chrome 28
I am making a custom plugin for Phonegap. Within Android all works fine. The exec function executes the Phonegap Java code imediately. This is all fine because than my data is send realtime to my computer.
But when I have the exact same JS and created this plugin in IOS the exec plugin function in IOS native code is only executed when I touchend or stop moving my finger. So when I touchstart and start moving my finger, I can see that the exec function is called by adding console.log before the plugin call. But when I set a breakpoint in my plugin IOS code it is called when I stop moving my finger or touchend. When I stop moving my finger all the calls to the native code gets executed after each other.
Which means that while I am using the UIThread the plugin IOS code is not called. Are there any solutions for this? So the Phonegap RunInBackground function is no use since we never get the while moving my finger. Als using a JS Worker does not seem to help.
Javascript:
WifiInfo.prototype.setColor = function(mac, groupnr, angle, success, fail) {
console.log("START SENDING"); // This does work
cordova.exec(success, fail, 'WifiInfoPlugin', "send", ["setColor", angle == -1 ? angle : Device.colorAngleToDevice(angle), mac, groupnr ] );
};
IOS:
- (void)send:(CDVInvokedUrlCommand*)command
{
// Code here. Made a breakpoint. The console.log above is executed. But the breakpoint
// over here is not called. It is called when I stop moving my finger
// or touchend
}
Having a weird issue. In my Dart code I have some polymer components on the screen and one of them has a method I call from my main().
I grab a reference to it by doing
PolyComp poly = querySelector("#idOfPolymer");
poly.flash();
This works perfectly in dart. The page loads up and PolyComp starts to flash. However when I run this in Chrome by running Build Polymer app from the Dart IDE, I get an error that says cannot call flash() on null.
I ended up making it flash by just using an event bus and letting PolyComp listen to my event, but this is overkill.
What am I doing wrong? This happens in the latest Chrome, Firefox and Safari.
Edit:
I built the following polymer app to JS also and ran into the same issue.
https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/todo_element/todo.html
Works on DartVM, not in Chrome because its calling a method on a null element.
When you run this code from the main() method it is probably a timing issue.
You can try something like
import "package:polymer/polymer.dart";
main() {
initPolymer().run(() {
// code here works most of the time
Polymer.onReady.then((e) {
// some things must wait until onReady callback is called
});
});
}
see also how to implement a main function in polymer apps
I would appreciate any help in solving this - or at least where to look to solve it.
What I have is calling on iPhone navigator.compass.getCurrentHeading(succ, fail), the success function is called every time the device is moved even slighly. In the XCode debug log I see lots of entries of navigator.compass.setHeading calls being generated for every movement. If I try to poll for heading data again - the request just hangs. Here's the code:
function onBodyLoad() {
if (typeof navigator.device == "undefined") {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
}
function succ(heading) {
alert("compass " + heading);
}
function fail() {
alert('fail');
}
function onDeviceReady() {
navigator.compass.getCurrentHeading(succ, fail);
}
This is really strange behaviour, as I expect getCurrentHeading to be called just once and return a single result, instead of the unstoppable flurry of events.
I use PhoneGap 1.0.0. The same code on Android works perfectly. I've removed all custom JS code to prevent possibility of conflicts.
It is odd that noone else seems to encounter this. In any case, this (hacky) solution may help anyone who comes looking for an answer.
We had to stop using getCurrentHeading because of this issue, and replaced it with navigator.compass.watchHeading instead. On clearing the watch we also call navigator.compass.stop() function to prevent from further compass spamming (for iPhone platform only - Android is fine), and before calling watchHeading again we call navigator.compass.stop() and navigator.compass.start(), to reinitialize the compass "just in case" (again, on iPhone only).
After taking these measures the page that user compass no longer hangs on second entry, and there is no heading spamming outside of this page.