Canvas touch issue in angular build - javascript

My dynamic data is displayed using the pixi.js library, which creates a canvas. If I run the Angular application by clicking on the items, it works fine. However,ever, when I run it in responsive mode or create an electron build to run it in Linux, it does not work.
I have tried the eGalaxTouch but it is not working on canvas.

Related

Javascript in WebView rendering issues

I'm not new to coding but I am new to using WebView to display HTML.
My Java swing project requires charts and graphs, and I think the prettiest out there is Chart.js.
To display the javascript-created charts, I save progmatically created html and read it in to a browser (WebView page) in a JPanel (through Javafx).
Here is my issue:
Chart.js (and my created HTML files) run fine in a real web browser, but in WebView they have really odd glitches that destroy my graphs (covering datapoints, etc). As far as I've seen, these glitches only occur in radial graphs such as Pie, Donut, and Radar.
I've even visited the chart.js webpage (through my app) and the examples on their homepage also have the same glitches. I have the updated, stable version of their open source code...
What i've tried:
messing with background/css in html
messing with parameters in chart creation, such as stroke controls or animations
drawing different graphs with different number of datapoints with different values
What I haven't tried:
I'm not too familiar with Javascript so i haven't gone in to debug its main chart.js javascript file yet.
An example of what a sample graph looks like in any real web browser:
good pic
And an example of what the same graph looks like in my java app: bad pic
Please help!

Record D3.js whiteboard animation as mp4 audio and video

I have a whiteboard/hand sketching app written with D3.js svg path elements. These elements are grouped into scenes with their own mp3 audio.
Multiple scenes with their animated svg paths are played according to a timeline, with the audio running perfectly.
So the end result is like a whiteboard animated movie. This works well within the app. How can i record the whole animation as a mp4 file?
I would like to run this entirely on the client side. I have looked at ffmpeg but prefer not to do a desktop install for this web app.
I looked into using chrome tab extension but it only works on chrome browser.
What other options do I have?

Html5 game development UI

I have been using phaser to make a simple game, however I have ran into a small problem with a creating a simple UI. I understand I can use javascript to create UI and add it into parts of html, however I am confused on how I can make it so that the UI will only be inside of the canvas/game and not just go all over the page.

How do I use d3's brushing/dragging/zoom behaviors in a meteor project?

I'm trying to build a souped-up force-layout graph based on this one using Meteor.js and D3.js.
Here's the problem:
In this project and in other projects involving d3 mouse-move events within a meteor framework, incorporating the mouse-event functionality causes the app to break.
By break, I mean either crash, throw errors on mouse-drags etc., or otherwise act unruly.
Two questions really:
Why is this happening? What is causing this frustrating behavior? Is this problem fixable, or do I need to try building this app using a different framework?
How can I prevent this behavior or get around it? I've tried building the same app using divs for graph nodes and using jquery's draggable feature to drag whem, which works great, but it's kindof a hack, because I still can't use D3 features like brushing and zooming.
Here is a link to a very-simple version of the force-layout editor being incorporated in a meteor environment. This program allows the user to drag the node, but all other functionality is lost. Dragging the single node that appears throws the following error:
Uncaught TypeError: Cannot read property 'apply' of undefined
The user is unable to select a node, draw new nodes, or do anything else that the app is programmed to do.
Looks like "preventing default" was the culprit...I just got my graph to select nodes and draw connections.
Here was the key to the drag line not working. It turns out that d3.svg.mouse(container) is deprecated. You're supposed to use d3.mouse now.
This is really great news, because it means d3 and meteor are more compatible than I thought.

Phaser game destroy() not working

I am currently using Phaser with Meteor and I want to destroy the game when I switch to another page. And create the game again when I go back.
But when I check Phaser.GAMES I see something like this:
[Phaser.Game, Phaser.Game, Phaser.Game, Phaser.Game, Phaser.Game]
And then, the canvas gets black. I've tried setting the game variable to null, tried set to null the items inside the Phaser.GAMES but had no success.
The strange thing is, when I check the source code, it shows Phaser.GAMES[this.id] = null but it keeps the value.I checked the source code (https://github.com/photonstorm/phaser/blob/master/src/core/Game.js) and I added the extra logic to destroy() missing from the version I am currently using (2.1.3) but it was not working either.
I tried to just hide it, but in slower machines, it just slows down the entire site keeping the game running.
I am using Phaser v2.1.3 | Pixi.js v2.0.0. Thank you for your help.
It was the version. I was using Phaser 2.1.3, the first version with Pixi 2.0.0. I downgraded to the version 2.1.2 and it was ok.
meteor add robertlowe:meteor-phaser#=2.1.2
This should be fixed with Pixi v3 (not out yet). I got the info from here: https://github.com/GoodBoyDigital/pixi.js/issues/1238
A good way to find problems in Phaser is to switch the canvas to Phaser.CANVAS, or to look for the issue in Pixi.

Categories