URL stored in String has & charector and is getting translated to & when used with oh-image

Add-ons UIs
1

Ok so i am using the zoneminder binding to generate the URL for a monitor image that i then want to display in a widget with oh-image

Here is the code for displaying the image in the widget

                - component: oh-image
                        config:
                          url: =items.ZMVideoMonURL.state
                          visible: =items.Display_EMBY_Poster.state == "OFF"
                          width: 100%

I know that the literal value of the string produces the correct URL in the items state because i can copy and paste this string value into a browser window and it displays properly.

Here is a sample of the URL that is generated

http://192.168.50.5/zm/cgi-bin/zms?mode=jpeg&monitor=1&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJab25lTWluZGVyIiwiaWF0IjoxNzAzNDQ4MDUzLCJleHAiOjE3MDM0NTUyNTMsInVzZXIiOiJvcGVuaGFiIiwidHlwZSI6ImFjY2VzcyJ9.hBQ7hGfhPfzdigq-6bMsmCuDue4jLl4OVBa1dcZanZ8

However, when using the widget the url is changed at the & character is changed to be & so the URL does not function:

http://192.168.50.5/zm/cgi-bin/zms?mode=jpeg&monitor=1&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJab25lTWluZGVyIiwiaWF0IjoxNzAzNDQ4MDUzLCJleHAiOjE3MDM0NTUyNTMsInVzZXIiOiJvcGVuaGFiIiwidHlwZSI6ImFjY2VzcyJ9.hBQ7hGfhPfzdigq-6bMsmCuDue4jLl4OVBa1dcZanZ8

I think this has something todo with HTML not properly handling the & character and that i need to escape this in the URL. How can i do this in my widget?

Thanks

2

Maybe use regex to just store the token into a string item and then build the URL by yourself, as the remaining part seems to be fix?

3

You could try a workaround by adding a profile which stringifies your URL to a JSON string and in your widget you parse the JSON string like this:

url: =JSON.parse(items.ZMVideoMonURL.state)

or you could try to replace strings (but not sure if that works):

url: =(items.ZMVideoMonURL.state).replaceAll("&","&")
4

Thanks guys i tried both of these but what ended up working was Matze0211 suggestion so I created a rule to parse out the token and store it in a string and then build the url manually in the widget with the needed values.

I will add that the replaceALL command did appear to make the proper replacements (tried it with other characters to see if it was replacing anything and it was) but when used with the & character the URL still ended up malformed. What was really weird to me is that in the dev console the div element for the URL looked correct but if you copied it out to notepad to inspect it malformed it again, so i think something is happening during the actual rendering that is messing things up when the whole URL is stored in the String Item.

It feels hacky since the zoneminder binding is already generating the full correct URL and may end up breaking the widget if zoneminder changes the URL but at least it is working for now.

I think there must be something weird going on in the MainUI rendering that is malforming the & character in the url when it is stored in a full value as a string that doesn’t happen when the string is formed in the widget directly. But at least it is back to working now.

Thanks for all the help!

         rules.JSRule({
            name: "Zoneminder URL fix",
            description: "Fix the String of the URL for Zoneminder Tablets",
            triggers: [
                triggers.ItemStateChangeTrigger("ZMVideoMonURL")
            ],
            execute: (event) => {
                let url = new URL(event.newState.toString());
                let queryArray = url.getQuery().split("&");
                let token = queryArray[2].split("=")[1];
                items.getItem("ZMVideoMonToken").sendCommand(token);
                    },
            tags: ["Tablets.js"],
            id: "ZMStringTestupdater"
        });

                        config:
                          url: ='http://192.168.50.5/zm/cgi-bin/zms?mode=jpeg&monitor=' + items.ZMVideoMonID.state + '&token=' + items.ZMVideoMonToken.state
                          visible: =items.Display_EMBY_Poster.state == "OFF"
                          width: 100%