ECC Forum

Text asserting outputs - done. Everything should be that easy.

Thanks. I am documenting how I am doing things. May take a while.

Here is link to my latest canvas. It has Oblong Green Widgets when an out is ASSERTED. Also have color coded Temp Gauges that are larger.

https://www.dropbox.com/s/z3lpy2d3ijcnu ... I.png?dl=0

Be nice to have a corner widget

I originally had one, but "stretching" can only happen in one axis and even then it was very expensive.

That made these more useful and efficient:

One that had no stretch would be fine. I find it hard to make perfect corners with the two widgets you have. They work fine, it is just not visually exact. Similar to your 45 degree widget.

The plumbing can be moved one pixel at a time with the cursor keys. You may also have to move an object up/down a layer to get the ends to sit correctly.

It's very easy to have them lined up perfectly. In my example everything looks correct with the liquid turned off. I spent almost no time aligning elements.

Cursor keys are your friends.

clearwaterbrewer wrote: ↑

Mon Feb 27, 2017 3:42 pm

what would it take for this to run on a private network without being connected to the internet and needing to reach altervista.org, maxcdn.bootstrapcdn.com, code.jquery.com, or cdnjs.cloudflare.com?

I've updated the beta help under a "Misc" tab to give the steps for this in Firefox. Once I figure out Chrome, I'll add it. If someone else understands Chrome enough to make this work, let me know so I can share.

http://bbrally.altervista.org/guibeta/index.html

oakbarn wrote: ↑

Fri Mar 03, 2017 4:14 pm

Here is link to my latest canvas. It has Oblong Green Widgets when an out is ASSERTED. Also have color coded Temp Gauges that are larger.

can you give one example of how you accomplish your customization? For example, the oblong green widget (the hmi for dummies version, please)

Most of the formatting properties can be figured out just by experimenting, but "border" and "border radius" are more confusing.

Border defines the thickness of the border line, the style of the line (solid, dashed, etc.), and the color. The order is not important, just a space between them.

The thickness should be whole numbers followed by px ("1px" or "4px").
Style can be "solid", "dashed", "double", etc. https://www.w3schools.com/cssref/pr_border-style.asp
Color is as the other color properties.

The border radius specifies what the corners will look like. The most common units are % and px. A very simple entry would be "0" meaning a radius in every corner of 0 (0 is the only value that does not need a unit). "5px" would be a 5 pixel radius in every corner. "50%" would be a radius of half the length of each side for each corner. (A circle for a square or an oval for a rectangle).

All of the above can also be given values for each individual corner or side.

“value” gives all four sides the same.
“value1 value2” gives top and bottom sides value1, and left and right sides value2.
“value1 value2 value3 value4” gives the top value1, right side value2, bottom value3, left side value3. (Values start on the upper side and go clockwise)

“value” gives all four corners the same.
“value1 value2” gives top-left and bottom-right corners value1, and top-right and bottom-left sides value2.
“value1 value2 value3 value4” gives the top-left corner value1, top-right corner value2, bottom-right corner value3, bottom-left corner value3. (Values start in the upper left and go clockwise)

Border radius can get more complicated as each corner can have 2 values representing the line length of the left and right side of that corner. This is represented by a "/" between lengths. The values before the slash represent the horizontal radii of that corner, the value after the slash represent the vertical radii of that corner.
“50% 50% 0 0 / 100% 100% 0 0” would produce a bullet shape.

There are many tutorials/example of this on the web, just search “border-radius css”

This tool may help for border radius: https://developer.mozilla.org/en-US/doc ... _generator

A simple oblong shape would be like this: