WebVI decorations or CSS shapes

[brentjustice]

I'm attempting to use the LabVIEW web module 5.1 to build a web page.

My web page is going to be a schematic for a fluids system.  So, naturally, I need to be able to use lines and shapes and decorations to represent things like tanks and plumbing and off-page fluid connections.  (Very LabVIEW-y sounding, right?)

Unfortunately, the web module doesn't have native support for decoration elements.  This is making me very sad.  Here is the Decorations palette on the web module:

I figured: ok, I'll try to create my own decorations using HTML and CSS!  Surely this is the way.

Disclaimer: I have zero HTML/CSS/JavaScript experience.  (If I had experience with these things, I suspect that I wouldn't be trying to use the LabVIEW Web Module.)

After a bit of learning and discovery, I've gotten very close to creating my own decorations.  However, I'm stumbling at the 5-yard line.

If anyone is able to provide input and suggestions, they would be very welcomed.

Anyways, if you want to add custom shapes to your web page, here is how-ish:

1. Add a custom style (css) sheet to my project:
   
2. Link custom CSS to webvi custom HTML:
   
3. Create a CSS shape class.  This creates shapes using CSS style text.  It’s not suuuper powerful, but there are some cool things out there:
   https://css-tricks.com/the-shapes-of-css/
   
   For example, my CSS file looks like this:
   
4. On your webvi panel, create a text box.  Place a single character in this text box.  Set the font color to “transparent.”  Basically, this allows us to create a blank box
5. Link the text box to the CSS class attribute:
   
6. Open the webvi custom HTML, edit this with a meaningless whitespace character somewhere, save, and close.  (This action forces LabVIEW to reload the HTML and CSS, which forces an update in the preview window.  Basically, LabVIEW can't auto-detect that you've modified and saved the linked style CSS sheet.)

If you do all of this, then you can create some pretty cool things.  For example, I made this:

You can see that the "decorations" can be dragged around since they live inside of the blank text box objects.

Unfortunately, this is where I need help.

The screenshots above are from the LabVIEW preview window.  When I hit the RUN arrow, this happens:

Both text boxes with CSS shapes in them jump around. 😠

I've tried to play with various options to fix this, but I've had no luck.  The box always moves its absolute position when I hit the RUN arrow.

Any thoughts or advice would be great.  Surely it can't be this hard to add shapes to a web page in a way that lets me click and drag them around like traditional LabVIEW decorations.

[brentjustice]

I found a related forum post:

https://forums.ni.com/t5/LabVIEW/Decoration-is-missing-in-LV-NXG-web-module/td-p/4031234

Notables:

• The author was also sad that the "decorations" palette was rather empty
• The proposed solution was to use CSS shapes linked to a "button" UI element
• Nobody seems to mention any observation about the UI elements "jumping" around the page when running

I've confirmed that the jumping behavior occurs for all UI elements linked to CSS shapes.

I'm definitely at a loss here 😞

[alexderjuengere]

😉

[brentjustice]

omg, I think I figured it out.

I was including "width" and "height" in my CSS shapes.  Example:

.rectangle_shape{
width: 200px;
height: 20px;
border-bottom: 5px solid red;
border-right: 0px solid red;
}

This was "fighting" with the size of the text box:

The box wouldn't jump so long as the width and height matched perfectly.

It also seems that it's possible to remove width and height from the CSS sheet and let these properties get defined by the textbox size in LabVIEW