Get height of embedded View?

Is it possible to get the height of an embedded view? (in runtime)

2 Likes

Send a message by onStartup Events?

Each embedded view has view path which you can read JSON file of that view where ignition is installed and get width and height of it.
But if you mean the runtime size you can put map component at background and disable visibility and then enable sizechange event of map component. As map and your view has same width and height you can use map event change size and expose by output Param.
I forget to mention set width and height of map to 100%.

Another way is by using JavaScript injection with markdown compound to get the view size.
victordcq did it before and it is higher performance then my method.

1 Like

The size you get from this is the default size which is already bindable.

I'm after the runtime size, I'll look into victor's stuff with JavaScript, I haven't had time to play around with this yet! Cheers

@victordcq Any chance you know how to do this? I've looked at some of your other quickly and without any javascript knowledge, it's a bit over my head at the moment :face_with_spiral_eyes:

Basically, I have a View embedded into another View. I want to get the height of the Embedded View (EV) and set a custom parameter inside of the EV to this height (pixels). It also needs to work with EVs inside a percent-mode coord container.

For context, I'm playing around with the idea of creating a conveyor view template that you specify the number of segments to have and it will build it out. The end pieces are fixed, but the mid sections are a single SVG that gets copied using the flex repeater. The issue is, that I want the height of the conveyor to equal the height of the EV. But I can't get the height of the runtime EV using the standard props provided

E.g.
image

Ok, why don't you just set the height to 100%, for flex reaper and disable SVG keep aspect ratio. So in this case user can easy resize the width of embedded view to make them look nicely.

But as I told you if you need runtime height use map component or markdown js injector method.

By the way if I had to do this I make my SVG dynamic and not using flex repeater. This is the standard way to create any stuff like chart with svgs.
Try to bind SVG syntax in svg elements to generate them.

This is the method I would like to use, but the javascript side is over my head at the moment, hence pinging Victor :slight_smile:

I thought about using this method, and perhaps I still will. The repeater was the simple method at the moment while I tested a concept, and I wasn't keen on keeping the flex repeater due to performance. It actually doesn't perform too badly though. I've got 25 of these embedded on a View and load time is invariably 1s (957ms to 1080ms in my testing) which is plenty fast enough.

In comparison, completely removing the flex repeater and just showing the end caps, the load time is reduced to 600ms. ~400ms difference which is actually quite impressive

Do either of you guys know if there's a performance hit with each new SVG object you add? I.e. compare a single d path with for example a circle and two rectangles, with 3 objects: 2x rectangles and 1x circle? (which show up as 3 elements in Ignition)
Creating the SVG elements for individual objects will be far simpler than modifying my existing single d path which contains all three objects.

In my experience SVG performance is best for very big shap, so what you can to do is this:
If your final shap create with primitives object and the file size is lower than path d object use primivies.
Always try to lower svg file size do your loading time over internet decrease.
Try to hand optimise the final svg too. Use g element and apply CSS class to g so all children node effect. This decrease file size.
The rendering part for primitives is faster compare to d.

you can use getBoundingClientRect() in js to get some coordinate and dimension in an object.
putting an id on the embedded and then use a document.queryselector("ccs selector") with a css selector (you'll have to find out what you'll need for that)

But you really should use 100% like nader said.
And performance wise a single svg will be a lot better than a flex.

1 Like

I might post my symbol for some better context of the issue.

Conveyors.zip (12.3 KB)

"Conveyor Example" shows the issue.

Top = component simply dragged on. The issue appears in runtime as the component is always the same size regardless of the viewport resolution, despite it being inside a % coord container (actually, the backup doesn't use % mode but it should..)

Middle = component increase in size. Height is manually set in parameters passed in, which is bound to the widths of the SVG elements, hence why they're bigger. But the issue is still as in Top, where the size does not scale with viewport.

I have 3 sections of the conveyor: 2x end caps + Yx mid sections, based on the number of sections the dev wants, passed in as a parameter. Each section is square, width = height.

I want the height of the SVGs to be the height of the Embedded View.
Note: you can't use basis: auto with SVGs as their width/height is seemingly unknown and is assumed 0px to the browser. This is important.

To set the height of the SVG elements, I can't set the height of the SVG, as I need to also set the width of it to the same as the height (because it's square), but I don't know the height. If basis: auto worked with SVGs, then I could place the SVG into a column flex and set its grow/shrink (height): 1 to make it the height of the embedded view; the col flex is inside a row flex, and I could set its basis (width): auto to auto size based on its height (I think). But this doesn't work as per the note above

The only way I know how I could do this, is to set the width of the SVG to the height of the Embedded View its in. But I don't know the embedded view's runtime height... Doing this however, would also set the height of the SVG due to the nature of a flex row and its Items setting (set to stretch).

This seems far more complicated than I thought it was going to be.....
Maybe I should try it with a coord only and just ignore the flexs. They always cause me grief when used inside of coords. I don't think I can achieve it with a coord though :confused:
I think I just have to create multiple templates with different numbers of sections. It'll be better on performance at least. It was more a test of possibility than anything

is the conv2 the alarmicon?
not everything is in the zip^^
ah nvm there is a label already

bleh this is why i dont like flex containers xD use a canvas with grid since its always front middle end

i'm gonna come back to this tmw. got something to do

1 Like

Huh, I've actually never used a view canvas before. Ill look into it :slight_smile:

idk if its perfect, for this, but i'll take a look tmw.

Hi Nick,
I created a similar conveyor object and ended up passing the size of the embedded object into itself as a parameter. Not as clean as being embedded inside obviously but still worked. I then made an expression binding on a customer property to generate the correct SVG paths which I bound inside the SVG path.

Hi David, I did go down this route, but unfortunately you can't use this in a percentage-mode coord container, as the size of the conveyors will never change, hence they will become misaligned to other components on the screen :frowning:

What I'm leaning more towards now is using a coord container for the View templates and creating the SVG d path(s) myself with an expression (wish me luck) binding. This way, the SVG will just expand with the size of the bounds of the EV container where its embedded.

why dont you make a percentage based svg? the convoyer should be simple enough for that with some lines and circles