Scrollable part of a plan

[matas_ka]

Hello, 

I've been trying to make a scrollable part in my visualization. I made a scrollable part using a frame, but I had no luck with jumping between plans. I would like it to jump to a new plan when I pressed a button in the scrollable list. I tried to use external links with no luck and linking to a plan opens the plan in the mentioned frame (which is not desired). Is there a way to do this? Thank you in advance. 

Matas

[admin]

Can you give some detail what kind of scrollable list you want to implement? Maybe there's an easier solution for this.

[matas_ka]

There should be a part on the left side of the plan which is scrollable (list of rooms). When i select a room the right side should show information about the room and controls (temperature settings, etc.). I need the list to be scrollable, because there is a lot of rooms (28 to be exact) and I need to fit them in an intuitive way to access them. I will attach a sketch.

[admin]

Why not use built-in navigation menu? Try setting Usermode sidebar to Show docked in Utilities > Vis. configuration

[matas_ka]

I've tried it but it shows all the plans, which is not desired. Can we configure it to show certain elements and can we change it's design somehow?

[admin]

You can hide and change elements via Custom CSS (In Vis. graphics). Use browser dev tools (F12) to inspect elements and get IDs etc.

Hide all menu items for levels:

Code:

.nav-main .level {
  display: none;
}

Each plan link there has a unique ID, you can use that to hide certain plan links:

Code:

#menu-plan-2, #menu-plan-3 {
  display: none;
}

[matas_ka]

Can I change the sidebar design? I need it to have custom buttons and colors

[admin]

You need to add extra CSS for .nav .a selector. I can provide a small example if you tell what exactly needs to be changed.

[matas_ka]

I would like it to look something like this image I've attached. There needs to be additional labels for grouping rooms (marked red). The sidebar also doesn't show which room plan is opened at the moment (the button text should be grayed out, marked blue). Thanks for the help so far!

[admin]

This should provide something similar. You need to enable dark theme in Utilities > Vis. configuration. Use levels for grouping.

Code:

.usermode .menu {
  background: #7E7E7E;
}

.usermode .nav-main .icon {
  display: none !important;
}

.usermode .nav-main li .a,
.usermode .nav-main li .a:hover {
  text-transform: uppercase;
  background: #3B3B46 !important;
  color: #E4E4E4 !important;
  padding: 16px 8px;
  border-radius: 0;
  text-align: center;
  box-shadow: none !important;
  font-size: 16px;
}

.usermode .nav-main li.disabled .a {
    color: #989898 !important;
  font-weight: bold;
}

.usermode .nav-main li.active .a {
  background: transparent !important;
  font-weight: bold;
}

[matas_ka]

Thank you! Will try it now and see how it goes,

[domotiqa]

Thank you! Will try it now and see how it goes,

is there a way to have image close to each menu entry

[admin]

Use this Custom CSS for menu icons (only for plans that are on the first level). You need to change ids (#menu-plan-2) to your plan ids and background image urls accordingly.

Code:

.level-1 {
  position: relative;
}
.level-1 .a {
  padding-left: 30px;
}
.level-1::before {
  position: absolute;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  top: 6px;
  left: 6px;
}
.level::before {
  display: none;
}
#menu-plan-1::before {
  background-image: url('/scada/resources/icons/00.svg');
}
#menu-plan-2::before {
  background-image: url('/scada/resources/icons/01.svg');
}
#menu-plan-3::before {
  background-image: url('/scada/resources/icons/02.svg');
}

[domotiqa]

Use this Custom CSS for menu icons (only for plans that are on the first level). You need to change ids (#menu-plan-2) to your plan ids and background image urls accordingly.

Code:

.level-1 {
 position: relative;
}
.level-1 .a {
 padding-left: 30px;
}
.level-1::before {
 position: absolute;
 content: "";
 display: block;
 width: 20px;
 height: 20px;
 top: 6px;
 left: 6px;
}
.level::before {
 display: none;
}
#menu-plan-1::before {
 background-image: url('/scada/resources/icons/00.svg');
}
#menu-plan-2::before {
 background-image: url('/scada/resources/icons/01.svg');
}
#menu-plan-3::before {
 background-image: url('/scada/resources/icons/02.svg');
}

cool Thanks, I will try !