MxChartJS tip: start index from SmarthomeUI

[piet66]

Bildschirmfoto vom 2021-02-07 13-27-51.png (10.99 KiB) Viewed 26864 times

Create a new instance of module Information Widget and enter following configuration (with some blanks after Start):

Code: Select all

{
    moduleId: "InfoWidget",
    active: true,
    title: "MxChartJS Index",
    params: {
        widgets: [
            {
                headline: "MxChartJS Index",
                text: "Start                                              
                <script>
                    //target = '_parent';        //open in same window  
                    target = '_blank';         //open in new window
                    window.open('user/MxChartJS/index.html', target);
                </script>",
                imgURI: "/ZAutomation/api/v1/load/modulemedia/MxChartJS/icon.png",
            }
        ],
        internationalize: false
    },
    id: 76,
    creationTime: "2021-02-07 13:23:54",
    category: "device_enhancements",
}

Wih same method it's possible to call also other webpages like MxInfo Index or whathever you want.

[michap]

Thanks, I already tried it before like this - but after closing the called page there will be the JS window still visible with the Start... , right?
I use iframe instead - it is working fine
Michael

[piet66]

Hi Michael,
nice to get some response.
It's only a quick hack. I've tried to find an easy solution. Can you provide yours?

Here is my improved one, starts the index in new window and closes the modal:

Code: Select all

{
    moduleId: "InfoWidget",
    active: "true",
    title: "MxInfo + MxChartJS Index",
    params: {
        widgets: [
            {
                headline: "MxInfo Index",
                text: "<title>Start</title>
                <script>
                    //refresh current window to close modal
                    window.location.reload();
                    //open index in new window
                    window.open('user/MxInfo/index.html', '_blank');
                </script>",
                imgURI: "/ZAutomation/api/v1/load/modulemedia/MxInfo/icon.png"
            },
            {
                headline: "MxChartJS Index",
                text: "<title>Start</title>
                <script>
                    //refresh current window to close modal
                    window.location.reload();
                    //open index in new window
                    window.open('user/MxChartJS/index.html', '_blank');
                </script>",
                imgURI: "/ZAutomation/api/v1/load/modulemedia/MxChartJS/icon.png"
            }
        ],
        internationalize: false
    },
    id: 89,
    creationTime: "2021-02-06 12:53:09",
    category: "device_enhancements"
}

It may be necessary to enable popups for that page.

[michap]

Hi,

I have used the most easy version

Code: Select all

<iframe src="user/MxChartJS/index.html" style="border:none;height:580px !important" width="90%" title=graph"">                                              
</iframe>

BTW: is there already any topic about MxChartJS app?
Would like to use it for requests and feedback about this great app

Michael

[piet66]

Hi Michael,
your solution is very good. I had also searched for something like this, but did not find it. I am not a web programmer.

[piet66]

Although it is not intended, with an additional entry you can colorize the background:

Wetter.png (155.64 KiB) Viewed 26813 times

Code: Select all

{
    index: 12,
    device: "Daylight_35 (Tageslicht)",
    metric: "level",
    formula: "x == 'off' ? 100 : null",
    devlabel: "Nacht",
    color: "#cccccc",
    graphType: "rectangle",
    lineType: "invisible",
    fill: 98,
    intcharticon: false
}

[MadMAX]

Hello, could someone help me getting than to work?. I have created a Infomation Widget with the App "Infomation Widget". But where i have to copy the code ? Regards Max

Ok, I figured it out.
It was easier then i thought.