Background color

Ignition
1

How do I get all the background to be set for the same background color?

Ignition 8.1.0
I have spent hours on this.
I set every single container to have style background color.

Is there a brute force way to make sure all the background is not white?

*updated code
this code has a different issue, where the top bar does not stay it’s color across the width.
However the background is at least not white.
Here is a sample code of my testing.


[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column",
      "style": {
        "overflow": "visible",
        "backgroundColor": "#205287"
      }
    },
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "wrap": "wrap",
          "style": {
            "overflow": "visible",
            "backgroundColor": "#4C78DB"
          }
        },
        "meta": {
          "name": "header80"
        },
        "position": {
          "shrink": 0,
          "basis": "34px"
        },
        "custom": {}
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "style": {
            "overflow": "visible",
            "backgroundColor": "#205287"
          }
        },
        "meta": {
          "name": "bodyrow840"
        },
        "position": {
          "shrink": 0,
          "basis": "800px"
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "overflow": "visible",
                "backgroundColor": "#808080"
              }
            },
            "meta": {
              "name": "leftnav"
            },
            "position": {
              "shrink": 0,
              "basis": "600px"
            },
            "custom": {}
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column",
              "style": {
                "backgroundColor": "#205287"
              }
            },
            "meta": {
              "name": "rightcontentcolumn1502scroll"
            },
            "position": {
              "shrink": 0,
              "basis": "6000px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.container.flex",
                "version": 0,
                "props": {
                  "direction": "column",
                  "style": {
                    "overflow": "visible"
                  }
                },
                "meta": {
                  "name": "outerrightcontentcolumn906visible"
                },
                "position": {
                  "shrink": 0,
                  "basis": "906px"
                },
                "custom": {},
                "children": [
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "backgroundColor": "#E1E63C"
                          }
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {},
                        "children": [
                          {
                            "type": "ia.display.label",
                            "version": 0,
                            "props": {
                              "text": "Label"
                            },
                            "meta": {
                              "name": "Label"
                            },
                            "position": {
                              "shrink": 0,
                              "basis": "32px"
                            },
                            "custom": {}
                          }
                        ]
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_0"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "backgroundColor": "#1FDA54"
                          }
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {},
                        "children": [
                          {
                            "type": "ia.display.label",
                            "version": 0,
                            "props": {
                              "text": "Label"
                            },
                            "meta": {
                              "name": "Label"
                            },
                            "position": {
                              "shrink": 0,
                              "basis": "32px"
                            },
                            "custom": {}
                          }
                        ]
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_1"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible",
                            "backgroundColor": "#E91B50"
                          }
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {},
                        "children": [
                          {
                            "type": "ia.display.label",
                            "version": 0,
                            "props": {
                              "text": "Label"
                            },
                            "meta": {
                              "name": "Label"
                            },
                            "position": {
                              "shrink": 0,
                              "basis": "32px"
                            },
                            "custom": {}
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

When I scroll to the right, I get this white space both at the top and the bottom on this test.
Though on another test, I actually go the top to be a color the whole way, not sure why or how.

image
image589×948 3.24 KB

2

Sounds like a good use case for themes. You can change most Perspective defaults this way. Check out the readme in your install files (C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes) for details on how to get started.

From what you're describing, i think you'll just need to override 3 variables:

--containerRoot: var(--neutral-10); /* the root container, depth 0 */
--container: var(--neutral-20); /* standard container, depth 1 */
--containerNested: var(--neutral-30); /* nested container, depth 2 */

You'll replace var(*) with your desired color. Check out the light-warm and light-cool themes for examples on how to do this.

Note that this will apply to any project(s) using this theme. If you only need it for some parts of a project and not others, styles might be a better option.

1 Like
3

I think I finally got it to take.
Thanks for helping me Cory.
I will try style next on the root if this row-row way doesn’t take on other pages.

At the top, I made a flex container row with a flex container row.
The outer established the height, and the inner established the width.
I did the same at the bottom.
I set all of them with the background color I wanted.

1 Like
4

I think I glossed over your actual use case, themes probably don’t make sense here. Glad you were able to get it working at least!

Without know what specifically you’re looking to do, I think there may be a better way. Looks like the background colors are getting tripped up by having your row components being hardcoded to wider than the container itself. Seems like you’re using flex containers but forcing them in a way that takes away their key feature - flexibility.

What’s the end goal of this view?

1 Like
5

I have a column on the right side that starts a few pixels from the bottom.
So scrolling up in that column, doesn’t come from the bottom, but starts somewhere above bottom.

This lets me do other things, like caption and note below it while maintaining the position of the left side column.

6

A few things.

  1. Is there any reason you’re not using docked Views for your header and sidebar navigation?
  2. you’ve set fixed basis sizes for the components in your flex containers with no grow or shrink, so if there’s any slight change in screen resolution, you are either going to see scrollbars or the background colour of the root container
  3. I’m not really sure why there are 3 tall containers stacked on top of each other? Without any understanding of your page, it seems that these could be replaced by a single content which is an embedded view with a dynamic path
    image
    image1069×850 28.2 KB
1 Like
7

Sorry for late response.
I avoided embedded views for:

Better performance
Minimal troubleshooting time
Responsive pages

I thought @nader.chinichian had mentioned avoiding embedded views for responsive pages when possible.

I know when I go to some pages some people make, it takes hours to sort out all the embeds.
Only takes me a few seconds to copy my nav bars.

8

what about when you need to change them?

Embedded views without nested embedded views are fine, it's embedded views that have embedded views within embedded views that get slower with each nest.

You could also potentially have this as a dock as well (edit: wait, I already mentioned that in my other reply)

4 Likes
9

Are docks handled measurably more efficiently and I don't know it?
I know they could save some time.
I currently think of docks as an avoidable embed.

If I need to change one nav flex, given the option, I think i fix one nav flex and copy this same flex to the other pages.

I have a script I can use to detect the current page and gray the text out to identify which is the active page.

That is on pages I control.
I have other pages that I wish I were allowed to simplify.

10

Like many things, it's a question of efficiency vs convenience. The performance impact of a single embedded view is going to be imperceptible. Same goes for a docked view. They're options for a reason: they're powerful tools that simplify your workflow and help you standardize your design. It's much better to make changes in one place than 100 and risk missing something, introducing a typo on one of them, etc.

To Nick's point, using embedded views for templates is fine (that's one of their main features!). Deeply nesting is the concern. But even then, I've seen (and made...) views that are 4-5 levels deep. They're a bit slower, but not unusable.

5 Likes
11

Docks are always part of the DOM, whether they're in view (visible) or not, so you definitely should be aware of that in case you're expecting them to be destroyed if they're hidden. For example, startup events only fire once for them at their birth, regardless how many times they're hidden/shown.

Now imagine you have 500 pages. Have fun! Then you get asked to add something else... All of a sudden your simple "add a new tab to the navigation" goes from 5mins to 2 hours of RSI-inducing, brain-melting, repeated cycles of clicks and keyboard shortcuts. I value my sanity too much, even if it is "only 2 hours"
No point not using features that will save you time and frustration (and the next person from throwing their laptop out the window)

9 Likes
12

I had 60 production lines over 4 departments with 1 mega menu.
There were more than 250 pages.

The submenus had 10 or fewer pages.
They took about 10 minutes to add or remove pages.
I'd modify one flex container, open the pages, and paste.
Usually pasting took 2 minutes, and then testing them took about 8.

I was using 8.1.0 for a long time.
I think docks had a hang-up at the time in that version, but not certain.

I agree that docks are not hard to troubleshoot.
Docks don't take up much performance.
I don't like when one page depends on another though.

Some save some construction time with embeds for sure.
Small performance improvements each place can add up.
Keeping footprints small makes for robust pages as well.

13

The point here is that foregoing docked views won't give you a meaningful performance improvement, but it very likely could hurt quality (and quality of life for other devs).

I don't think there should be any interdependencies here? Sounds like it would be the same as your existing setup, but in a docked view instead of statically in your main view.

If you need different menus in different contexts, you could simply swap the docked view based on the loaded page/view. Or assign different docked views to different pages altogether.

14

How much is the performance cost of a dock of ten navigation locations if you have 100 users?

I think docks are needed sometimes, like in the Ignition manual.

15

The load should scale (more or less) linearly with users. The vast majority of that load will be the totality of the session, irrespective of any docked views.

Put another way, if a docked view affects your session's usability and responsiveness, you probably have bigger issues (or a very inefficient docked view).

3 Likes
16

If you're talking about performance cost on the server, it would be negligable; simply the cost to serve up the contents of the dock to each user. Docks don't "run" on the gateway, they're displayed by the client browser. Scripts, bindings, and whatnot are what run on the gateway, so while you might have more bindings in your dock to hide navigation menus, it's miniscule compared to the number of bindings on most SCADA pages.

I don't think I need to tell you how I'd feel if I came across a SCADA project I had to edit, and I found the navigation was copied and pasted into every single page as basic components... It wouldn't be delight

6 Likes
17

Do you make a dock at one navigation option?

You have me convinced docks are okay.

Is there an easy way to have the placement of a dock adjusted on one page vs another while using the same dock still?

Can I easily place a dock a little farther down like 1000px or to the right 200px compared with the previous page?

18

That seems... weird. If the content of the dock needs to change that much, you may need a different dock

1 Like
19

Take a look at the docs - you can configure this on a per-page basis, or under shared settings for docks that apply to all pages.

1 Like
20

I didn't see an option for setting location per page.

I don't see the shared settings section.
I see it on another page.

I remember why I don't like docks again.
I thought it was performance.
I think it is more so the placement.

I think it is performance for why I don't like other embeds.