Hello Stepan,
There is a XYChart component in the CHARTS library in the HMI Designer. It shows several points (lines) stored in the internal buffer. So, the trail is represented by several historical points.

@stepan-ozana Currently, this feature is highly experimental and requires large involvement of the development team. So it in not available for public use.

@tcele
You are almost done. The last step is to create new file in HMI Designer save it to hmisrc dir and name it servis.hmi.svg. You can design new screen in this file.

@tcele
I have created a minimal working example and find out there is a little typo in my example source code

// indexOf
if(itm.getValue() && window.location.href.indexOf('servis.html') == -1 ){ 

After the fix, code is working fine for me. See the attachment.
BR
Ondrej
tcele.zip

@tcele
Are you sure, that your custom.js is included during the build? Please add alert('I am here') to your code and test if the alert occurs. I was told that you want to open this screen, whenever some operator switches some digital input. That's why my code requests servis data point and wait until the read value is non-zero. There is no need for a Button or Slider.

If you want you can send me the source for your HMI and I can check it for you.

Best regards
Ondrej

@tcele
This behavior indicates that you are requesting too many datapoints and thus the read request is timeout. I suggest opening the SERVICE page on a different web page. You can do it by adding redirect request to custom javascript.

1. Create CUSTOM and CUSTOM/js folder in your hmisrc folder.
2. Create custom.js file in the CUSTOM/js folder
3. Open your page in HMI Designer, open HMI Configuration and in the HTML Export tab check Expert mode. Add two rows in the Library Path with GENERAL and CUSTOM texts. This will tell the HMI builder to include components from GENERAL library and your CUSTOM foilder. That how you append the custom.js file to your project
4. Edit the custom.js file with following content:

REX.HMI.init = function(){

let servis= REX.HMI.get('<name of the alias defined in HMI Designer>');
//or
let servis= // REX.HMI.add({alias:"servis",cstring:"task.block:parameter"}'alias defined in HMI Designer>'); // Add new item

// Subsribe to onChange event
servis.on('change',(itm)=>{
    // If true and not in the page redirect current page to servis page
   // The check for href is not necessary if only on used in index.html page
    if(itm.getValue() && window.location.href.indexof('servis.html') == -1 ){
        window.location.href = '/hmi/servis.html';
        // or open new tab
        // window.open('/hmi/servis.html','blank_');
    }
    else{
        // do nothing
    }
});
};

@apollo I am glad that it is working.

@apollo Yes, I know this is inconvenient. We are aware of this limitation and will are planning to change it in the future.
Kind regards
Ondrej

Hello @apollo,
The color function in the Group animation component does color interpolation between the given colors. So this allows you to fluently change color eg. from cold to hot. This interpolation is done if the value of the data point for the color is not on the low or high limit.
I check your SVGs but I am not able to tell if this is your case.

Best regards
Ondrej

Dear Scoobsalamander,
your background must be available in the www folder of the webserver. You have two possible options for how to upload your picture to the webserver.

1. Copy your background to the hmisrc folder in your project. Then point your CSS to background-image: url("/hmi/background.jpg");
   The disadvantage of this approach is that you will upload your background every time you compile the project.

2. Use WinSCP or a similar tool to upload your background to the target. The location must be in the webserver root or below. The root of the webserver is in /rex/www folder. So upload your background to '/rex/www/bacground.jpg' and change your CSS to background-image: url("/background.jpg");

Best regards
Ondrej