Including d3 graph in Angular 4 application - node.js

I am building an Angular application with typescript, where I would like to display the force directed network graph from Mike Boston build with d3 shown here.
I have copied and translated most of the code to type script without trouble but the line
. force("link", d3.forceLink().id(function(d) { return d.id; }))
fails with the error {} has no property id.
Only the following lines referring to d.source.x works fine?
I have installed d3 with npm and also types/d3 but still no luck, even though the typings.d.ts has an interface defining the id.
Thank you for your help!

Maybe that is something related to versioning, if you are using TypeScript 2.4.1, try to downgrade to 2.3.4 and give it a go.
As a workaround you could use any:
const forceLink: any = d3.forceLink();
. force("link", forceLink.id(function(d) { return d.id; }))

The example given at http://plnkr.co/edit/qcESHb3cCwD6NZL1yuhX?p=preview helped me, with focus on code shown here:
this.simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
this.render(miserables);
This is the best rendition I have seen. Works for me.

Related

Jetpack Compose preview stopped working in Arctic Fox with Patch 1

With the first patch for AS Arctic Fox Jetpack Compose previews stopped working.
I'm getting this error for all previews - even older ones, which worked fine a while back:
android.content.res.Resources$NotFoundException: Could not resolve resource value: [some hex value]
Are here any quick fixes for this? Clearing caches and the usual stuff did not work.
EDIT:
Looks like the problem is not always present. Some preview started working, while other are still failing.
EDIT 2:
This is happening in dynamic feature modules, when there's a need for resources from the main module or painterResource() is being used (even is resource from the same module is to be displayed).
Same problem here with dynamic-modules project.
Inspired by above answer, I've made another temporary workaround while waiting for Compose team to fix this.
import androidx.compose.ui.res.stringResource as originalStringResource
#Composable
#ReadOnlyComposable
fun stringResourceSafe(#StringRes id: Int): String =
if (BuildConfig.DEBUG) {
val resources = LocalContext.current.resources
try {
resources.getString(id)
} catch (e: Resources.NotFoundException) {
"missing res."
}
} else {
originalStringResource(id)
}
This got fixed in AS Bumblebee, patch 2.
As a temporary hack workaround I did this to get past the error and preview the UI elements.
//import androidx.compose.ui.res.stringResource
fun stringResource(id: Int): String {
when (id) {
R.string.res_id -> return "Foo"
...
}
return "missing res_id"
}

How to import and utilize P5.Sound in Vue?

I have been trying to make a music visualizer app using Vue and P5, and after tinkering with P5 using this article as my guide (https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33), I managed to get a Canvas rendered with some cool looking graphics.
Now, I am trying to create a link between the waveform/amplitude of a given song and the visuals rendered in the canvas. I have been trying to get the constructors/functions from the P5.sound library to load a song from a file path, and then use the output from a FFT object to control the visuals rendering in the canvas.
Now, my research has indicated that the P5 library must be run in instance mode in order to function (https://github.com/processing/p5.js/wiki/Global-and-instance-mode), and I have done my very best to adhere to this approach in my Vue project. But although the visual rendering works, none of the P5.sound functionalities do.
Here is the code to my model which sets up the P5 objects:
import P5 from 'p5';
import P5sound from "p5/lib/addons/p5.sound";
let p5;
let fft;
let sound;
export function main(_p5) {
p5 = _p5;
p5.setup = () => {
p5.createCanvas(500, 500);
p5.background(100);
fft = new p5.FFT();
fft.setInput("../assets/sawtooth.mp3")
sound.amp(0.2);
};
p5.draw = () => {
p5.background(220);
let spectrum = fft.analyze();
noStroke();
fill(255, 0, 255);
for (let i = 0; i < spectrum.length; i++) {
let x = map(i, 0, spectrum.length, 0, width);
let h = -height + map(spectrum[i], 0, 255, height, 0);
rect(x, height, width / spectrum.length, h);
}
let waveform = fft.waveform();
noFill();
beginShape();
stroke(20);
for (let i = 0; i < waveform.length; i++){
let x = map(i, 0, waveform.length, 0, width);
let y = map( waveform[i], -1, 1, 0, height);
vertex(x,y);
}
endShape();
};
}
Then, in my MusicVisualization.vue component, I call this model in the mounted() section of the component:
import P5 from 'p5';
var musicVisualizerModel = require("../models/musicVisualizerModel.js");
export default {
name: "MusicVisualization",
data(){
return{
message: ""
}
},
mounted() {
new P5(musicVisualizerModel.main);
}
};
No matter how I try to import my P5.sound library, the line fft = new p5.FFT() always yields an error p5.FFT is not a constructor. I have checked the P5.js module in my node_modules, and I can clearly see the P5.sound.js library present in the p5/lib/addons/p5.sound file path, but I cannot utilize any of its functionality. I should note that when I remove all P5.sound functionality from the model's code, and only have a canvas with some simple shapes, it works fine.
I installed P5 using npm install --save p5, and have tried numerous approaches to getting P5.sound to work, such as the P5-manager package (https://www.npmjs.com/package/p5-manager/v/0.1.0) and the Vue-P5 wrapper (https://www.npmjs.com/package/vue-p5). I have also tried implementing some of the proposed solutions given in this similar question (Using p5.sound.js in instance mode: 'p5.Amplitude() not a constructor'). None of these work, although I may be implementing incorrectly. Does anybody know how I can import the P5.sound library into my Vue project?
UPDATES
Another error that I noticed if I did not run the fft= new p5.FFT() line was the error ReferenceError: p5 is not defined. This error occurred whenever I tried to import the P5.sound library (with either import P5sound from "p5/lib/addons/p5.sound"; or with import "p5/lib/addons/p5.sound";). I looked deeper into this problem and found others had experienced it as well (https://github.com/processing/p5.js-sound/issues/453). Apparently, one user resolved the issue by "downgrading to 0.9, copying the sound.js into project folder, boosted back into 1.0 and just linked imports to the local, 0.9 version of sound." Sadly, I am unsure how to carry out this solution. Would anybody know how?
Thanks to help I received on the Github issues page (https://github.com/processing/p5.js-sound/issues/453), I figured out how to get the P5.sound library to import.
First, I uninstalled the P5.js in the node_modules, then installed P5.js version 0.9.0:
npm uninstall p5
npm install p5#0.9.0
Next, after locating the P5 module in node_modules, I copied the P5 sound lib file and pasted it into my project's src directory, and then replaced the import P5sound from "p5/lib/addons/p5.sound" with import "../p5.sound.js" (which represented my relative file path). Then I installed the latest version of P5.js in the terminal with the following command:
npm install p5#1
And now I can import the sound library without getting the errors ReferenceError: p5 is not defined or p5.FFT is not a constructor.
The problem is that p5-sound relies on p5 globally available.
If you are using webpack, that can be solved easily by using webpack's ProvidePlugin, like so:
plugins: [
new webpack.ProvidePlugin({
p5: 'p5',
})
]
Then you should be able to import via:
import p5 from 'p5';
import 'p5/lib/addons/p5.sound';
I had a similar problem using p5 in react, but I was able to get this working (for the time being 😅) by including the p5 scripts in my html file.
<script src="https://cdn.jsdelivr.net/npm/p5#1.3.1/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5#1.3.1/lib/addons/p5.sound.min.js"></script>
And then when creating my p5 instance in React I call:
new window.p5(sketch, node);
My sketch file looks something like:
const sketch = (p, props) => {
p.preload = () => {
...
};
p.setup = function () {
...
};
p.draw = () => {
...
};
};
export default sketch;
In my sketch logic, I use the instance p variable for the standard p5.js functionality like drawing shapes. Whenever I need to use a constructor of a p5 class like AudioIn, Amplitude, SoundFile, etc., I create it using the global p5 variable. For example:
new window.p5.AudioIn()
I believe this is necessary because the p5 sound addon library adds functions and classes onto the global p5 variable. When I was using es6 imports, there must have been some mess where the sound addon was not being added correctly to the imported p5 class.
One day there will hopefully be a better es6 module system for p5.js, but this seems to do the trick for me.

Testcafe: using Test Controler in boundTestRun not working

I'm trying to work with shadow roots in my Testcafe project. It's a little bit complicated to deal with it. I create a custom function that behaves the same as Selector().find() but I struggle with this error :
The "boundTestRun" option value is expected to be a test controller.
when I'm doing as documented here :
import { Selector, t } from 'testcafe'
getInShadowRoot = Selector(
// More code here
)
const boundedGetInShadowRoot = this.getInShadowRoot.with({ boundTestRun: t })
I create a gist to illustrate my problem: https://gist.github.com/HugoDel/a600f3e120674e3f255884f3dc84fee3
Thanks for your help!
Edit:
I finally get rid of it since I don't need to add .with({ boundTestRun: t }) to make it work.

Nodejs difference between two paths

I am trying to get the difference between two path. I've come with a solution, but I am not really happy about it, even if it works. Is there a better / easier way to do this?
var firstPath = '/my/first/path'
, secondPath = '/my/first/path/but/longer'
// what I want to get is: '/but/longer'
// my code:
var firstPathDeconstruct = firstPath.split(path.sep)
, secondPathDeconstruct = secondPath.split(path.sep)
, diff = []
secondPathDeconstruct.forEach(function(chunk) {
if (firstPathDeconstruct.indexOf(chunk) < 0) {
diff.push(chunk)
}
})
console.log(diff)
// output ['but', 'longer']
Node provides a standard function, path.relative, which does exactly this and also handles all of the various relative path edge cases that you might encounter:
From the online docs:
path.relative(from, to)
Solve the relative path from from to to.
Examples:
path.relative('C:\\orandea\\test\\aaa', 'C:\\orandea\\impl\\bbb')
// returns
'..\\..\\impl\\bbb'
path.relative('/data/orandea/test/aaa', '/data/orandea/impl/bbb')
// returns
'../../impl/bbb'

Ogre material lod: How do i set it up?

I have an Ogre material and, since i'm not happy with the GPU filtering, i want to make a manual mipmapping, i.e, i create all the textures, and then i set up a lod-based strategy to load the correct texture.
The problem is: it doensn't matter which strategy i use, neither the lod_value, my material does not change the texture. What should i do?
I'm reading the manual but it really didn't help.
Here is my code:
material shader/content
{
lod_values 100.0
technique t1
{
lod_index 0
pass
{
scene_blend alpha_blend
depth_write off
texture_unit
{
filtering none
texture menu_image.png
}
}
}
technique t2
{
lod_index 1
pass
{
scene_blend alpha_blend
depth_write off
texture_unit
{
filtering none
texture menutest.png
}
}
}
}
What you have posted seems correct.
Which image shows? I assume menu_image.png.
Things to try:
Are you sure menutest.png is loaded along with your other ogre assets?
Are there any relevant messages in your ogre logs?
What version of Ogre are you using? Try lod_distances instead of lod_values
Could there be code modifying the material/techniques at runtime?

Resources