Line / bezier curve / more typeface settings


#1

Hi, once again I’d like to ask for some additional features, despite the fact that Noodl is already awesome! :slight_smile:

I’d love some line/bezier tools to be able to create something similar to how noodl nodes are connected - line/curve.

In addition to that, extra text node settings would be awesome! basically anything to do with customising spacings etc. I know there’s css, but how would you go about plugging it into a noodl text node?

Thanks!


#2

As for lines, I’ve got a workaround, but am not sure how to deal with dimensions.

I’m using SVG and a element.
Unfortunately If I draw with this in an html node (set to 400x400 px).

<svg id="svgCont" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 390 V 390 H 10 L 10 10" fill="transparent" stroke="black"/>
</svg> 

the rectangle looks like this. Whereas I’d expect the rectangle to be within the green box region.
curve inside is also for test purposes.

Thanks!


#3

hmmm… yeah, I’m lost how to interpret this.

On top my width from Noodl (1080)
My SVG is set to 400x400, my green box is set to 400x400 px in Noodl. the black rectangle should be 380x380


#4

This is a bit tricky.

So what happens is that the units in Noodl (pixels) don’t actually match with what the browser sees as one pixel. In the project you’re using the resolution is set to 1080x1920, but the actual size of the window is probably something else, and depends on how big the window is.

Noodl will scale everything so it always keeps the aspect ratio and makes sure that all the content of the 1080x1920 canvas is visible. It’ll also add black borders and letterboxing if needed (like in your screenshot).

When you do your own HTML, Noodl won’t (and can’t) do that scaling. So you will get 400 actual browser pixels (css pixels), and not 400 Noodl pixels.

There are two options here:

  1. Use window.innerWidth/innerHeight and do the scaling yourself with some javascript. The scaled size will be 1080/window.innerWidth * 400, and 1920/innerHeight * 400.
    Change the HTML to <svg id="svgCont" width="{{scaledWidth}}" height="{{scaledHeight}}" and you can send your calculations as inputs to the HTML. (you might need to look at the documentation, I’m writing this from memory. Same with my scale calulations, they may need to be flipped :slight_smile:)

  2. Go into project settings and change the Fill mode to “Fill”. Now one Noodl pixel will be the same as a browser/css pixel and everything will match. But your project will fill the entire window, no matter the aspect ratio, will never have any black borders and will be different sizes on different screens etc. Resizing the preview window will change the amount of content you can see. Which of course can be exactly what you wan’t sometimes, but creates more work if you don’t need it


#5

Thanks! There’s usually a simple thing that one forgets. Like fill mode. Doh…