New version Dashboard

Dear Team,

I have updated my dashboard to the new version available on TagoIO. After changing to the new version, when i perform any downlink command from my customized widget, the downlink command is not reaching the analysis.

Here is the code i was using in old version and the same i used for new version:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://admin.tago.io/dist/custom-widget.min.js"></script>
        <title>On and Off Widget</title>
        <style>
	.button {
  	border: none;
  	color: white;
  	padding: 20px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	font-family: Arial;
  	margin: 4px 2px;
  	cursor: pointer;}
	.button1 {background-color: #4CAF50;color: black; border-radius: 12px; width: 200px;}
	.button1:hover {background-color:#006400 ;color: white;}
	.button2 {background-color: #FF0000;color: black; border-radius: 12px; width: 200px;}
	.button2:hover {background-color: #8B0000;color: white;}
    </style>    
    </head>
    <body>
        <p style="text-align: center;"><button class="button button1"; onclick="sendData()">Click to turn ON</button>
        <button class="button button2"; onclick="sendDa()">Click to turn OFF</button></p>

        <script>
            var data;
            function sendData() {
            if (window.confirm("Are you sure you want to turn ON your device ?")){
             window.alert("ON command has been sent 👍")
                data = [
                    {
                        variable: "form_payload",
                        value: "31",
                    },
                    {
                        variable: "form_port",
                        value: "01",
                    }
                ]
                window.TagoIO.sendData(data);}
             else { 
                window.alert("ON command is not sent! ❌");}}
	
              function sendDa() {
              if (window.confirm("Are you sure you want to turn OFF your device ?")){
             window.alert("OFF command has been sent 👍")
                data = [
                    {
                        variable: "form_payload",
                        value: "30",
                    },
                    {
                        variable: "form_port",
                        value: "01",
                    },
                ]
                window.TagoIO.sendData(data);}
            else { 
                window.alert("OFF command is not sent! ❌");}}

            window.TagoIO.onStart((widget) => {
                window.widget = widget;
            });

            window.TagoIO.ready();
        </script>
    </body>
</html>

Do i have to change any code for the new version dashboard?

Can any one help me on this?

Hi Surendar,

Having the same issue with the same code for Strega shutoff valve. I believe the issue is not from the code. The custom widget is not triggering the downlink analysis at all. If i get error in the downlink analysis console, i will assume there is issue with the code but the analysis is not triggered at all from the custom widget. Same custom widget is working with the old version. Hope Tago will fix the issue soon if its from their side.

Hi @surendar

Thanks for reporting this issue, we’re checking now, and soon we get back to you.

Sorry for the inconvenience.

Hi @solomon and @surendar,

Thanks for contacting us! We have deployed a fix to address this issue in this past hour, and I have tested it in all types of dashboards and to confirm it’s all working.

Let me and @phil.gutierre know if you experience any issues.

2 Likes

Dear Klausb,

Thank you for your action, i can see the DL in the Analysis console, but its getting error 400.

[2021-07-19 11:08:05] Downlink failed with status 400
[2021-07-19 11:08:05] {}
[2021-07-19 11:08:05] Trying to send the downlink
[2021-07-19 11:08:05] {"device":"0004a30b00f77468","authorization":"atbb3058b3a3b044aab101495a3ac00f3f","payload":"31","port":"01","priority":"NORMAL","confirmed":true}
[2021-07-19 11:08:05] Downlink analysis started
[2021-07-19 11:08:05] Starting analysis 60dd218f7efc1f00183bc7b0

Any idea about this, i didn’t make any changes in the analysis scripts. It shows error now

Hi Surendar,
Status error 400 means that something is wrong on TTI side. I usually see this error if you didn’t authorize downlinks for the integration on TTN side.

I updated the TTI middleware on our side to return you the error that TTI is sending to us. You should be able to see more details about this error if you perform the downlink again.

Dear @phil.gutierre ,

Thank you for the reply.

I am facing the same issue again.

When i send downlink from the widget. its not reaching the downlink analysis.

Here is the HTML widget code for your reference.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://admin.tago.io/dist/custom-widget.min.js"></script>
        <title>Open and Close Widget</title>
        <style>
	.button {
  	border: none;
  	color: white;
  	padding: 20px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	font-family: Arial;
  	margin: 4px 2px;
  	cursor: pointer;}
	.button1 {background-color: #4CAF50;color: black; border-radius: 12px; width: 200px;}
	.button1:hover {background-color:#006400 ;color: white;}
	.button2 {background-color: #FF0000;color: black; border-radius: 12px; width: 200px;}
	.button2:hover {background-color: #8B0000;color: white;}
    </style>    
    </head>
    <body>
        <p style="text-align: center;"><button class="button button1"; onclick="sendData()">Click to Open</button>
        <button class="button button2"; onclick="sendDa()">Click to Close</button></p>

        <script>
            var data;
            function sendData() {
             if (window.confirm("Are you sure you want to OPEN ?")){
             window.alert("OPEN command has been sent 👍")
                data = [
                    {
                        variable: "form_payload",
                        value: "31",
                    },
                    {
                        variable: "form_port",
                        value: "01",
                    }
                ]
                window.TagoIO.sendData(data);}
             else { 
                window.alert("OPEN command is not sent! ❌");}}	
             
             function sendDa() {
             if (window.confirm("Are you sure you want to CLOSE ?")){
             window.alert("CLOSE command has been sent 👍")
                data = [
                    {
                        variable: "form_payload",
                        value: "30",
                    },
                    {
                        variable: "form_port",
                        value: "01",
                    },
                ]
                window.TagoIO.sendData(data);}
            else { 
                window.alert("CLOSE command is not sent! ❌");}}

            window.TagoIO.onStart((widget) => {
                window.widget = widget;
            });

            window.TagoIO.ready();
        </script>
    </body>
</html>

Can you help me on this.

Thank you

Hi Surendar,

Facing the same issue again on my side too. It was working after the fix but now the buttons are no longer triggering the analysis. The mobile version is working good. I can send the downlink open/close to the valve from the mobile version but for some reason the desktop version is not working. Have you tried from the mobile version? Hope Tago fix the issue soon.

Thanks!

Hello @solomon and @surendar,

Can you show me the Data from section from your widget’s configuration?

Here’s the widget I am using to help you with this issue.

image

And here is the relevant part of my simple Custom Widget:

Note how I have my_variable2 in the widget, which is the same variable my custom widget is sending in sendData(data). This is required for the “auto fill” functionality of the custom widget library, so in the case of the custom widget from @surendar that would require my widget to have both form_payload and form_port in the Data from configuration.

In TagoIO we have two types of dashboards, I was showing my Blueprint dashboard configuration but I tested in both Normal (the old and new versions) and Blueprint dashboards and the data reached my Analysis correctly. I ran these testes on TagoIO Admin (https://admin.tago.io), and also on RUN / RUN App with no issues.

I suspect that the issue is the widget’s configuration, but if the variables are set up correctly the widget’s structure might help me see if the problem is there. You can get the structure here:
image

Dear Klausb,

Here is my data from for your reference:
image

{
	"analysis_run": "610049b4914fb80017bf07e2",
	"dashboard": "6100495924fec2001823809e",
	"display": {
		"header_buttons": [],
		"help": "",
		"parameters": [
			{}
		],
		"theme": {
			"color": {
				"background": null
			}
		},
		"url": "https://api.tago.io/file/608f9aa4c825f9001895bec0/open_close_DL.html",
		"header_size": 32,
		"user": {
			"id": "608f9aa3c825f9001895beba",
			"name": "LeakDtech Dtech",
			"options": {
				"date_format": "",
				"time_format": ""
			},
			"timezone": "Etc/GMT-4",
			"type": "account"
		},
		"variables": [
			{
				"variable": "form_payload",
				"origin": {
					"id": "610048d41267e00018d7a868",
					"bucket": "610048d41267e00018d7a869"
				}
			},
			{
				"variable": "form_port",
				"origin": {
					"id": "610048d41267e00018d7a868",
					"bucket": "610048d41267e00018d7a869"
				}
			},
			{
				"variable": "device_eui",
				"origin": {
					"id": "610048d41267e00018d7a868",
					"bucket": "610048d41267e00018d7a869"
				}
			}
		]
	},
	"data": [
		{
			"bucket": "610048d41267e00018d7a869",
			"origin": "610048d41267e00018d7a868",
			"timezone": "Europe/Brussels",
			"variables": [
				"form_payload",
				"form_port",
				"device_eui"
			]
		}
	],
	"id": "6100495924fec200182380a5",
	"label": "Open & Close the valve",
	"realtime": null,
	"type": "iframe"
}

The variables in the data form is correct. It was working well till 26th July. After that i can not find the data in the analysis console.

I faced the same issue when i was migrating from the old version dashboard to the new version dashboard. And later it was rectified and now again the same issue occurs

Dear @klausb,

I found the issue, it was due to the window.confirm and window.alert.

But, previously it was working fine. Is there any changes made on the windows library when upgrading to the new dashboard version.

Can you check with your team about the “window library”. As we need to have a confirmation pop-up window from our widget if the command is executed or not.

Thank you.

Hi @surendar,

The window object is from the browser itself, the window.TagoIO used in the code is the only part our library makes changes to so you can use the onStart and ready to communicate with the dashboard. And our library (the one imported on the top of your HTML file) has not changed in a few months.

Did you try just removing the ifs with window.confirm from both functions, keeping the window.alert since you want that confirmation? I don’t think the window.alert alone should block the data from being sent. You can also add an extra div element and change its text when the data is sent, or you can just change the visibility by toggling element classes with CSS like this example here.

Let me know if this helps you.

Hi Klausb and Surendar,

It looks like its a browser issue. Its working with firefox but not working with Chrome and Microsoft edge. We have to find out how it will work with the browsers. Probably it stop working when the browsers get updates.

Thanks!

Hi @solomon and @surendar,

Glad to know it’s working. I believe the way to go about this is something like the example on the link on my previous post, it’s quite simple to manipulate an element on the page to put text with confirmation that the data was sent. This way you don’t have to rely on alerts and the user will still have feedback for their actions.

This article on the MDN states that " A boolean indicating whether OK ( true ) or Cancel ( false ) was selected. If a browser is ignoring in-page dialogs, then the returned value is always false ." So confirm will return false when the browser is ignoring dialogs, which makes the if clause fail and caused the data not to be sent.

So what I said on the previous post still stands, you can still use the alert without any issues, but it might not show if the browser is ignoring dialog boxes. However, it’s better not to use confirm as it will return false if the browser ignores dialogs.

Just an idea: you can have a hidden div with a “Confirm” button which calls the sendData function, and the first button action is to make the div visible. This way you can have the same functionality as the confirm dialog without having issues with browsers ignoring them.

1 Like