Vertical label on the edge of a vision-window

Hi,

When using the 'Rotate' property on a label and setting it to 270 degrees, the text will still wrap based on the width of the label-element. In my case, this means a label of 40x300 will have plenty of space to write vertically, but will wrap based on the 40px width.

I've tried a few work-arounds but none of them seem to have a different result. Possible solutions either behave the same, don't have a 'Rotate' property, or don't have a 'Text' property. After looking through the forum, most posts on this topic are based around working in perspective.

Is it simply not possible in a vision, or am I overlooking something?

I'm also looking for a fix for this. I have a couple spots in my current project I use the rotation, but thankfully the labels are short and text-wrapped, so it's not a monstrously sized label. This is something I think would normally be done with CSS, though, and vision has effectively no CSS support iirc. It might require a third party module of some kind?

I see what you mean:
Parameters:
image
image
Result:
image

This is not the behavior I would have expected. It seems silly to have to do this, but as a work around, you could make the label 300 x 300, and use the following parameters to manipulate where the text renderers, so it ends up working the way you want it to in your project:
image

If you are near the edge of your container, you can manually set the position, so it overflows the edge using the size and position dialog box [Ctrl-P].

Result:
image

This is an interesting problem, so I will mess around with this more when I get time, and if I come up with something better, I will let you know.

1 Like

You've tagged the question as both Vision and Perspective. Can you remove the irrelevant tag?

I've created a template with an embedded paintable canvas that simply draws the text rotated 270 degrees.

Result: (with size at 40x300)
image

I've added thee intuitive properties to the template for controlling the text:
image

If anything else is needed, simply add it to the template as a custom property and incorporate it into the repaint event handler of the embedded paintable canvas.

VerticalLabel.zip (8.5 KB)

Note: The text won't display in the designer if it is not in preview mode

3 Likes

I have not tagged it as perspective, although I've used the word in the post. The only tags I've added are Ignition and Vision.

That's probably a more user-friendly way than what I ended up using, found under a different post;

These are the steps I followed.

It's in the revision history on the original post. Justin removed it for you.

Yep. This is the way.

Alright, I double checked when I saw your comment and it wasn't there, my mistake. Must've happened by accident, the issue is specific to Vision.

No worries. I probably should have mentioned that I had removed the tag for you

The six year old post you found is amazing in that it's almost an exact parallel of this one. The only advise that's missing from this thread is locking the position of the overlapping label, and the funny thing is that it had occurred to me to mention that, but after developing the canvas template, I didn't bother with editing the previous post.

2 Likes

I just found a much simpler solution to this problem. Using a regular label with the text rotated 90 degrees, simply preface the text with <html><nobr>, and it will override the ellipsis behavior and prevent the text from wrapping.

Result:
image

image

7 Likes