My version of the HMI builder

Applications that run on PC/Mac.
Post Reply
User avatar
bbrally
Posts: 210
Joined: Sat Mar 27, 2010 3:59 am
Bot?: No
Location: Vancouver, BC
Contact:

Re: My version of the HMI builder

Post by bbrally »

Text asserting outputs - done. Everything should be that easy.
User avatar
oakbarn
Posts: 846
Joined: Thu Jan 05, 2012 2:28 pm
Bot?: No
Location: Texas
Contact:

Re: My version of the HMI builder

Post by oakbarn »

Thanks. I am documenting how I am doing things. May take a while.
User avatar
oakbarn
Posts: 846
Joined: Thu Jan 05, 2012 2:28 pm
Bot?: No
Location: Texas
Contact:

Re: My version of the HMI builder

Post by oakbarn »

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. :D

https://www.dropbox.com/s/z3lpy2d3ijcnu ... I.png?dl=0
User avatar
oakbarn
Posts: 846
Joined: Thu Jan 05, 2012 2:28 pm
Bot?: No
Location: Texas
Contact:

Re: My version of the HMI builder

Post by oakbarn »

Be nice to have a corner widget
corner.png
corner.png (1.58 KiB) Viewed 156694 times
User avatar
bbrally
Posts: 210
Joined: Sat Mar 27, 2010 3:59 am
Bot?: No
Location: Vancouver, BC
Contact:

Re: My version of the HMI builder

Post by bbrally »

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:

corners.png
corners.png (1.68 KiB) Viewed 156692 times
User avatar
oakbarn
Posts: 846
Joined: Thu Jan 05, 2012 2:28 pm
Bot?: No
Location: Texas
Contact:

Re: My version of the HMI builder

Post by oakbarn »

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.
User avatar
bbrally
Posts: 210
Joined: Sat Mar 27, 2010 3:59 am
Bot?: No
Location: Vancouver, BC
Contact:

Re: My version of the HMI builder

Post by bbrally »

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.
User avatar
bbrally
Posts: 210
Joined: Sat Mar 27, 2010 3:59 am
Bot?: No
Location: Vancouver, BC
Contact:

Re: My version of the HMI builder

Post by bbrally »

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
Last edited by bbrally on Sun Jan 14, 2018 3:46 pm, edited 1 time in total.
clearwaterbrewer
Posts: 383
Joined: Wed Feb 09, 2011 3:43 pm
Bot?: No
Location: Clearwater, FL
Contact:

Re: My version of the HMI builder

Post by clearwaterbrewer »

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. :D
can you give one example of how you accomplish your customization? For example, the oblong green widget (the hmi for dummies version, please)
User avatar
bbrally
Posts: 210
Joined: Sat Mar 27, 2010 3:59 am
Bot?: No
Location: Vancouver, BC
Contact:

Re: My version of the HMI builder

Post by bbrally »

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:
shape.png
shape.png (20.41 KiB) Viewed 156649 times
Post Reply