Tutorial about Vis. Graphics

[CLavergne]

Good afternoon all,

I'm searching a way to personnalize visualisation graphics (icons, sliders, etc). Is there a tutorial or a documentation about this?

Thanks

[Thomas_Rohde]

Hello CLavergne,

unfortunately we do not have such kind of tutorial/documentation. Sorry!

[Erwin-vd-Zwart]

Good starting point is w3schools, here you can learn everything about html, css and javascript, those 3 skills are required to change the html structure of the visu and customization of sliders, icons and standard behavior by using the power of custom JavaScript and custom CSS, due to the complexity and huge possibilities it’s impossible to put it in a manual

[CLavergne]

Thanks Ervin,

I already know some things about html and javascript. I would like to know how to implement in the controllers. 

[Erwin-vd-Zwart · Accepted solution]

@CLavergne 

There are 2 sections in the controller:

1) Custom CSS that you can find under Configurator -> Vis. Graphics -> Edit Custom CSS, here you can place CSS that can override the default CSS, additionally you can set additional classes on object level in the plan editor to help you get unique handles on elements in the DOM.

2) Custom JS can be found under Configurator ->  Scripting -> Tools -> Black Arrow -> Edit custom JavaScript, here you can place JS that listen to object changes and execute additional JS actions when a value change occurs or any other JS you might want to execute.

A sample of custom CSS could be changing the slider by setting the additional class of a slider to slider-alt, enable Show Control and add this CSS to the Edit Custom CSS section:

.slider-alt .slider-min,

.slider-alt .slider-max {

  display: none;

}

.slider-alt .slider {

  overflow: hidden;

  padding: 13px 0;

}

.slider-alt .slider .progress {

  height: 4px;

  margin: 0;

  border: none;

  border-radius: 0;

  box-shadow: none;

  background-color: #ccc;

}

.slider-alt .slider .slider-handle {

  background-clip: padding-box;

  background-color: #fff;

  background-image: none;

  border-radius: 50%;

  border-color: #bbb;

  box-sizing: border-box;

  height: 24px;

  padding: 0;

  width: 24px;

}

.touch .slider-alt .slider .slider-handle {

  margin-top: 3px;

}

.usermode .slider-alt .slider {

  width: 250px;

}

.slider-alt .slider .slider-handle:before {

  background: #5bb75b;

  content: ' ';

  height: 4px;

  left: -301px;

  pointer-events: none;

  position: absolute;

  top: 9px;

  width: 300px;

}

.slider-alt .slider-value span {

  border-radius: 0;

}

A sample of Custom JS can be changing the background of a value item based on temperature where 3/0/0 is the measured temperature, you can do that like this when setting the additional class of the element to temp1 and add script below to the Edit Custom JS section:

$(function(){
if (typeof grp != 'undefined') {
grp.listen('3/0/0', function(object, state) {
if (object.value < 17) {
   $(".temp1.item-bg").css({"background":"rgb(60 105 231 / 65%)"});
} else if (object.value >= 17 && object.value <= 21) {
   $(".temp1.item-bg").css({"background":"rgb(220 233 15 / 75%)"});
} else {
   $(".temp1.item-bg").css({"background":"rgb(233 15 15 / 85%)"});
}
}, true);
}
});

There are many other things you can do so try this as a starting point..

[CLavergne]

Thanks @Erwin-vd-Zwart , i will test your code.

Have a nice day

[Thomas_Rohde]

Hi CLavergne!
Maybe you can share more in detail what you are looking for or you plan to realize?

[CLavergne]

I'm thinking about it and will let you know!