# Ui-template fully kiosk browser update problem dashboard 2

**URL:** <https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [4 April 2024 11:46 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003 "2024-04-04T11:46:35Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [4 April 2024 11:46 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/1 "2024-04-04T11:46:35Z")

</div>

Hi,

I have some problem with a UI-template (with v-progress-linear).  
I have an old Samsung Galaxy Tab A with fully kiosk browser.  
It does update normally all controls except this UI-template.  
I must say, that loading the page in Chrome on the tablet does update this control also.  
So it's possible a problem of fully kiosk browser ?,  
but why all other controls work as expected?  
Maybe i made something wrong in this control?  
(I am new to html,css and javascript programming)

thanks  
Thomas

```auto
    <div>
    <v-progress-linear class="my-progress-class" 
        label="Batterie"
        min="0" 
        max="100" 
        height="40"
        bg-color="grey"
        bg-opacity="0.5"
        :color="getColor(value)"
        v-model=calcvalue>
         <template v-slot:default="{ value }">
          <strong>{{ this.value }} W</strong>
        </template>
    </v-progress-linear>
    </div>
</template>

<script>

    /*
        <strong>{{ Math.abs(Math.floor(value)) }} W</strong>
*/

    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                count: 0
            }
        },
        watch: {
            // watch for any changes of "count"
            count: function () {
                if (this.count % 5 === 0) {
                    this.send({payload: 'Multiple of 5'})
                }
            }
        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
            calcvalue: function () {
                // return this.value*100/2500
                return msg.payload*100/2500
            }
        },
/*        
        methods: {
            // expose a method to our <template> and Vue Application
            increase: function () {
                this.count++
            }
        },
*/        
        methods: {
        // add a function to determine the color of the progress bar given the row's item
            getColor: function (value) {
                if (value<0) {
                     return 'red'
                } else{
                    return 'green'
                }
            },
            getValue: function (value) {
                return Math.abs(value*100/2500)
            }
        },
       
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
     
</script>
<style>
    /* define any styles here - supports raw CSS */
    /* color: red;*/
    /* background-color: blue-grey-lighten-3;*/
    .my-progress-class {

    }
</style>

```

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [4 April 2024 17:00 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/2 "2024-04-04T17:00:39Z")

</div>

Hi,

update

Seems to be not only a fully kiosk browser problem.  
I tested the same on chrome on my smart phone, also there the  
linear gauge freezes after some time.  
The values in the textbox get updated (every 30s).  
When I refresh the page, the gauges get in sync again and work for some time.

 ![Screenshot_20240404_164101_Chrome](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/871bdb585ce631babd7621b841372215fdd96dc0.jpeg)

in the nodered log I found the following entries ?

```auto
4 Apr 15:23:49 - [info] [ui-base:My Dashboard] Disconnected fMs0YjwMNeTzy6BpAAFr due to transport close
4 Apr 15:32:39 - [info] [ui-base:My Dashboard] Disconnected WANTPvRWlObTOG5iAAFt due to transport close
4 Apr 15:38:53 - [info] [ui-base:My Dashboard] Disconnected bVzk3-Z9HUb2dU29AAFw due to transport close
4 Apr 15:43:22 - [info] [ui-base:My Dashboard] Disconnected Oj0e5bnk3XiQnIoAAAFy due to transport error
4 Apr 15:51:19 - [info] [ui-base:My Dashboard] Disconnected JNWTRP2f2liPt9NfAAF0 due to transport close
4 Apr 15:54:39 - [info] [ui-base:My Dashboard] Disconnected SFu1CQ5vuG8eN_tlAAF5 due to transport close
4 Apr 16:01:17 - [info] [ui-base:My Dashboard] Disconnected 0rDEAvU7U9rtKZElAAF8 due to ping timeout
4 Apr 16:02:33 - [info] [ui-base:My Dashboard] Disconnected HDrvuScWZvs6-tbwAAF- due to transport close
4 Apr 16:03:03 - [info] [ui-base:My Dashboard] Disconnected CIzMvpC6OpFT1G-NAAGA due to transport close
4 Apr 16:03:38 - [info] [ui-base:My Dashboard] Disconnected QjOU9bJJpoGQDLH9AAF2 due to ping timeout
4 Apr 16:52:08 - [info] [ui-base:My Dashboard] Disconnected G_I2ZO8vOxjApA39AAGC due to transport close

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [4 April 2024 19:51 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/3 "2024-04-04T19:51:02Z")

</div>

Is suspect this is the same issue as [Page not updating when left in background on Android · Issue #444 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/444).

Interesting, though, that your text widgets continue to receive updates, I need to recheck mine to see if I also see that.

Does yours recover if you switch to a different dashboard page and back again?

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [4 April 2024 19:57 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/4 "2024-04-04T19:57:02Z")

</div>

yes, switching to another page and back, make the gauges work for some time.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [4 April 2024 20:10 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/5 "2024-04-04T20:10:18Z")

</div>

I think that confirms that it is the same issue. It seems to be related to [Widget state not updated after network disconnection and recovery · Issue #620 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/620) which is basically the same issue triggered by a temporary network failure.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [4 April 2024 20:17 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/6 "2024-04-04T20:17:08Z")

</div>

It is in the Up Next category on the [activity tracker](https://github.com/orgs/FlowFuse/projects/15/views/1) so hopefully it won't be too long. There are a lot of things on the Up Next list though and only a limited amount of manpower available. That manpower is of the highest quality, however, so do not despair 🙂

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [4 April 2024 20:50 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/7 "2024-04-04T20:50:59Z")

</div>

Thanks for the explanation,  
what is a little bit confusing is the fact, that the textbox works correctly ?  
my ui-template is correct ? 🤔  
despite it, thanks for this great work on dashboard 2 😃

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 April 2024 07:41 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/8 "2024-04-05T07:41:47Z")

</div>

> [@RedTom](#):
>
> what is a little bit confusing is the fact, that the textbox works correctly

You are right, there seems to be more subtlety to the problem than I thought. I am going to carry out some more experiments to try and tie it down a bit tighter. Hopefully that will give the developers more clues about what is going on.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 April 2024 09:09 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/9 "2024-04-05T09:09:16Z")

</div>

In fact it seems the problem you are seeing (which I have also been seeing) is not quite the problem described in that issue, but is specifically related to ui-template nodes. I had been conflating the two issues.

What I am seeing if that after a period of not interacting with the device, or if the dashboard is left in the background and then restored, that ui-template nodes stop receiving messages. If your device is connected by WiFi then it can be triggered by switching the WiFi off for 20 seconds and then back on again. I will open a new issue for this and post the link here.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 April 2024 10:27 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/10 "2024-04-05T10:27:46Z")

</div>

Issue opened [ui-template nodes not receiving messages after network disconnection/recovery. · Issue #747 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/747)

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [5 April 2024 10:34 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/11 "2024-04-05T10:34:55Z")

</div>

Hi  
only a guess

> <https://github.com/socketio/socket.io/issues/3025>
>
> I've setup socket.io v.1.4.5 w express and I have been unable to trace the reaso…n for unexplainable disconnects on the clients. The reason given by the disconnect event on the client is "transport close." It happens very consistently on some clients.
> 
> Is there any explanation for a client getting "transport close" disconnects on what seems to be a timed interval? The client reconnects just fine but it causes extreme inconvenience because it happens so frequently.
> 
> I've tried various settings, like changing the pingInterval, pingTimeout and the port for websockets (I am now using port 80). But no matter what I seem to do, the problem never goes away.

I try to test smaller refresh rates, problem was with 30sec update rate of the ui-template

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 April 2024 10:59 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/12 "2024-04-05T10:59:46Z")

</div>

By reading the code some doubts: UITemplate.vue line 183 -\> `this.$socket.off(`msg-input:${this.id}`)`  
Listening is applied via data-tracker on `setup` but is it even for same scope?

Don't know much about the magic of vue but just reading the code which seems a bit off.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [5 April 2024 11:28 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/13 "2024-04-05T11:28:22Z")

</div>

I have identified a crude work around which seems to work for me (though it has not been intensively tested yet so not guaranteed under all circumstances). It forces a page refresh when a client re-connects.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3cc5c76756bad949de150b9e9269c855a1fd14b1.png)

```auto
[{"id":"4f18b8e4184480ed","type":"ui-control","z":"8fde719260b2c325","name":"","ui":"04ee189a49c54f22","events":"all","x":120,"y":580,"wires":[["d1df98110878717d"]]},{"id":"d1df98110878717d","type":"switch","z":"8fde719260b2c325","name":"Connection?","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"connect","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":270,"y":580,"wires":[["40a640c42724fd98"]]},{"id":"bb1dd58f34d597e5","type":"change","z":"8fde719260b2c325","name":"Blank payload","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":880,"y":640,"wires":[["4f18b8e4184480ed"]]},{"id":"40a640c42724fd98","type":"trigger","z":"8fde719260b2c325","name":"Ignore multiple connections within 3 secs to stop loop","op1":"","op2":"","op1type":"pay","op2type":"nul","duration":"3","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":580,"y":580,"wires":[["bb1dd58f34d597e5"]]},{"id":"7d37ad627b74f6a7","type":"comment","z":"8fde719260b2c325","name":"Refresh page when a client connects to hide issue #747","info":"","x":260,"y":540,"wires":[]},{"id":"04ee189a49c54f22","type":"ui-base","name":"Dashboard","path":"/dashboard","showPathInSidebar":false,"navigationStyle":"temporary"}]

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 April 2024 15:35 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/14 "2024-04-05T15:35:14Z")

</div>

Should be the same scope, the data tracker will apply it for the Vue component on which it is run, it appends common `mounted`/`unmounted` code.

I haven't had a chance to properly investigate this myself - but really appreciate the assists @Colin

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 April 2024 17:41 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/15 "2024-04-05T17:41:55Z")

</div>

So if all other nodes rely fully on data tracker onmount/onunmount, why the template forcibly signs off the socket listening?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 April 2024 18:04 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/16 "2024-04-05T18:04:15Z")

</div>

Its only disabling it for that widget. Data Tracker provides the common subscribe/unsubscribe functions, but the events themselves are bespoke to each widget as it includes the Widget's ID:

> <https://github.com/FlowFuse/node-red-dashboard/blob/main/ui%2Fsrc%2Fwidgets%2Fdata-tracker.mjs#L69>

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 May 2024 18:05 UTC](https://discourse.nodered.org/t/ui-template-fully-kiosk-browser-update-problem-dashboard-2/87003/17 "2024-05-05T18:05:12Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.