+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Scrollable part of a plan (/showthread.php?tid=1525)
Scrollable part of a plan - matas_ka - 09.08.2018
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
RE: Scrollable part of a plan - admin - 10.08.2018
Can you give some detail what kind of scrollable list you want to implement? Maybe there's an easier solution for this.
RE: Scrollable part of a plan - matas_ka - 10.08.2018
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.
RE: Scrollable part of a plan - admin - 10.08.2018
Why not use built-in navigation menu? Try setting Usermode sidebar to Show docked in Utilities > Vis. configuration
RE: Scrollable part of a plan - matas_ka - 10.08.2018
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?
RE: Scrollable part of a plan - admin - 10.08.2018
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;
}RE: Scrollable part of a plan - matas_ka - 10.08.2018
Can I change the sidebar design? I need it to have custom buttons and colors
RE: Scrollable part of a plan - admin - 10.08.2018
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.
RE: Scrollable part of a plan - matas_ka - 10.08.2018
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!
RE: Scrollable part of a plan - admin - 10.08.2018
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;
}RE: Scrollable part of a plan - matas_ka - 10.08.2018
Thank you! Will try it now and see how it goes,
RE: Scrollable part of a plan - domotiqa - 08.11.2018
(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
RE: Scrollable part of a plan - admin - 09.11.2018
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');
}RE: Scrollable part of a plan - domotiqa - 09.11.2018
(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 !