Flex container Background Image Issue

Ignition
,
1

I am currently trying to set a background image from the HMI screen I created. My screen is created all within a Flex container so that it will be adjusted depending on the size of the HMI, but I can't seem to get a background image to work without the flex container wanting to push the image to a side.

image
image1765×934 103 KB

I was able to get it to work when using a coordinate container but then it ruins the flex part of my project.

image
image1737×951 196 KB

Any ideas on how I can get a background to work with a flex container, or maybe a different work around?

2

Can you show how and where you've referenced the image?

Comments on the view:

  • There are at least five different font sizes. Why? Be consistent.
  • Never use underline - unless to demonstrate an amateur design. Use bottom border across the width of the container if required. (It's not the same as underline which cuts through character descenders whereas the border doesn't.)
  • The variable information (the important bit) is in low contrast grey on a a pale blue background. Why? That's more important than the labels which are block capitals (why) and bold. The padding seems to have been overridden on some the labels (probably by specifying a height) so they all appear crushed inside their containers.
  • In general, left-align text and right-align numbers, both in your report header and in the table itself. The decimal points don't line up in the results column. (If you right-align a column's data then you should right-align the column header as well.)
  • Think how the user or the occasional reader has to scan the header - left to right, up and down.

For example:

Nifty report header
Nifty report header870×199 14.7 KB

There's only one font size but the information is clear and easily scanned. It only uses flex containers and label components and all the styles are set by style class definitions using the Perspective Built-In Themes | Ignition User Manual so they're consistent and easy to modify across the whole application.

Similarly the green and red start and stop buttons are confusing. Does green indicate that Start is a good thing to press and red indicate that Stop is a bad thing? Why do both appear to be enabled at the same time? If there are only two possible states for the machine then one of the buttons (the current machine state) should be disabled.

Suggestion:

Start and stop buttons
Start and stop buttons888×80 6.82 KB

Design elegant applications!

2 Likes
3

I appreciate the feed back and will definitely apply some of these to my project, but the project is far from finished and what you see is me trying to fix the functionality of the page before moving forward with formatting. I purposely left thing huge and obnoxious so I wouldn't forget to address them.

That being said, would you know any sort of answer for my original question:
Any ideas on how I can get a background to work with a flex container, or maybe a different work around?

Thanks!

4

...

5

I strongly disagree with the design choice, but here's how to do it:

image
You have to set the following styles on your main flex container:
image

{
  "classes": "",
  "backgroundColor": "#FFFFFF",
  "backgroundRepeat": "no-repeat",
  "overflow": "auto",
  "backgroundImage": "url(\"/system/images/foo.png\")",
  "backgroundPosition": "bottom",
  "backgroundSize": "cover"
}

Play around with the Position and Size properties as needed.

Additionally, any components you want the background to be visible through need the style property

backgroundColor: transparent

By the way, from your first picture it seems that you were just trying to drag and drop the image into the flex container, which adds it as a child. That's why it was getting pushed around by the other components.

1 Like
6

Agreed.
(To the OP:) Ask yourself, "How does the background image help in presentation of the data? Does it help legibility? Does it help in guiding the reader through the data in some useful way?"

1 Like