# \[Announce\] node-red-contrib-ui-state-trail \[Features\]

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539>\
**Category:** Share Your Nodes\
**Created:** [18 January 2020 16:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539 "2020-01-18T16:49:05Z")\
**Posts on this page:** 15\
**Page:** 4

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2022 08:53 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/62 "2022-03-28T08:53:51Z")

</div>

Result is from same flow just viewing dashboard in different PC , you may see some lines missing (hiding? since i can click at approximate area based on other screen and i get output)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78312c5ce7c31c803b7071e18d8119f9f828c790.png)

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

---

<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:** [28 March 2022 08:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/63 "2022-03-28T08:56:15Z")

</div>

So what is the difference of those PC's then?

---

<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:** [28 March 2022 08:58 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/64 "2022-03-28T08:58:43Z")

</div>

Are they using the same browser?

---

<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:** [28 March 2022 09:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/65 "2022-03-28T09:05:44Z")

</div>

It may freely be the some kind of issue related to layout and scaling setup ...

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

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2022 09:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/66 "2022-03-28T09:45:34Z")

</div>

scaling and layout for both PC at their default(100%)  
one is using MS Edge (crisper view PC) other is using google chrome(blur one). the other one MS Edge is also Blurred ) i am installing chrome in other PC and will update soon

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2022 10:07 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/67 "2022-03-28T10:07:30Z")

</div>

> [@smanjunath211](#):
>
> i am installing chrome in other PC

there is no problem with the browser, the PC with good display has it good in both MS Edge and Google Chrome, the PC with ;blur' display is blur in both Browser. so it is clearly something to do with PC setting ?

very difficult to compare since both PC are very different.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2022 10:15 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/68 "2022-03-28T10:15:22Z")

</div>

> [@WeeSeong](#):
>
> From what I've noticed, the line starts to blur when it changes state to 5 times, any less than that amount will have the clear line.

what about this if display settings were 'incorrect' say in one PC, how is it OK if there are less number of status changes ?

---

<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:** [28 March 2022 10:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/69 "2022-03-28T10:19:04Z")

</div>

It is out of reach of my hands anyway if it depends on computer/graphics card or something similar. I can only guess about the issue but I can't see anything to be improved.

---

<div class="post-metadata">

**Author:** ![WeeSeong](https://avatars.discourse-cdn.com/v4/letter/w/e19b73/32.png) [@WeeSeong](https://discourse.nodered.org/u/WeeSeong)\
**Post date:** [28 March 2022 10:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/70 "2022-03-28T10:19:29Z")

</div>

I'm currently using Google Chrome, maybe I should've tested this on a different browser. I'll post the picture once I've gt the settings loaded.

EDIT: huh, apparently switching over to FireFox have clearer line, Chrome and Microsoft Edge will still have the blurred out line. All 3 of the pictures posted are from the same timeline but different browser

 ![Untitled2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/4/e4ceecb16c729ceb4ee857aa9cdea8629dda3bae.png)

---

<div class="post-metadata">

**Author:** ![WeeSeong](https://avatars.discourse-cdn.com/v4/letter/w/e19b73/32.png) [@WeeSeong](https://discourse.nodered.org/u/WeeSeong)\
**Post date:** [28 March 2022 10:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/71 "2022-03-28T10:23:45Z")

</div>

My current resolution is at the recommended settings 150% and 1920 x 1080 settings. Changing those doesn't seem to improve at all.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2022 10:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/72 "2022-03-28T10:39:47Z")

</div>

What is the version of ui-state-trail you are using ?

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2022 10:48 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/73 "2022-03-28T10:48:56Z")

</div>

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

updated to latest version available, but problem still exists.  
looks like i saw another bug with new version, have created another topic for the same.

> [@UI-State-trail mustache template not working in 0.4.4](https://discourse.nodered.org/t/ui-state-trail-mustache-template-not-working-in-0-4-4/60443):
>
> I updated ui-state-trail from 0.4.2 to 0.4.4 and found that the label is not updating where i have used mustache template [image] [image] i was getting the values into this in earlier version. [image] is it a bug ?

---

<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:** [28 March 2022 10:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/74 "2022-03-28T10:55:57Z")

</div>

The colored bar is created as one svg element, color change on the bar is made with the gradient. This is what I found as most performance friendly solution to make such colored bar. As it is known that dashboard is used also on low edge computers, thinking performance wise is one key components of such widgets.

It has its limitations for sure and and one of them you are experiencing with this blurriness. There isn't any simple way out of this issue. If this is too much of issue for your dashboard - It just makes the node incompatible for your dashboard.

To make such bar with every element rendered as rectangle, it is possible but you'll reach similar problems like when width of narrow rectangle is less than your browser can render or when the bar element must be placed at the not pixel perfect position. So the outcome is unpredictable. On top of that, the performance issue also may become into play.

It may be that the svg is not perfect for this job at all...

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2022 11:01 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/75 "2022-03-28T11:01:04Z")

</div>

I am quite happy with the way it is now. I am finding it extremely useful for displaying the status of a process (on/off) and able to get the user to click and get the output in the form of From and To for him to update the reasons for stoppage in a database. in any case, i am trying to filter out the 'off' status more than 10 minutes only for user to update the reasons, and hence it would not matter (blur).  
thanks for building this great widget,

---

<div class="post-metadata">

**Author:** ![WeeSeong](https://avatars.discourse-cdn.com/v4/letter/w/e19b73/32.png) [@WeeSeong](https://discourse.nodered.org/u/WeeSeong)\
**Post date:** [29 March 2022 00:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539/76 "2022-03-29T00:26:49Z")

</div>

Ah, if that's the case, it shouldn't be a problem, I'll try to use the dashboard on FireFox next time since it works well there.

[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-state-trail-features/20539.md?page=3)