This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

Scrollable part of a plan
#1
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
Reply
#2
Can you give some detail what kind of scrollable list you want to implement? Maybe there's an easier solution for this.
Reply
#3
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.


Attached Files Image(s)
   
Reply
#4
Why not use built-in navigation menu? Try setting Usermode sidebar to Show docked in Utilities > Vis. configuration
Reply
#5
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?
Reply
#6
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;
}
Reply
#7
Can I change the sidebar design? I need it to have custom buttons and colors
Reply
#8
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.
Reply
#9
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!


Attached Files Image(s)
   
Reply
#10
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;
}
Reply
#11
Thank you! Will try it now and see how it goes,
Reply
#12
(10.08.2018, 12:09)matas_ka Wrote: Thank you! Will try it now and see how it goes,

is there a way to have image close to each menu entry
Reply
#13
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');
}
Reply
#14
(09.11.2018, 08:28)admin Wrote: 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 !
Reply


Forum Jump: