Author Topic: Change color of time-elapsed-since-last data in PiGateway  (Read 156 times)

hickse

  • NewMember
  • *
  • Posts: 8
Change color of time-elapsed-since-last data in PiGateway
« on: June 13, 2021, 12:36:00 PM »
I'd like to change the time at which the color of the seconds/number changes since the last data was received.
I'd like the color to remain green to correspond with the time between data sends programmed into the Moteino, and then change if that time period has been exceed.
Although I would like to control this for all node specific data, right now I am interested in Temp (F), Battery Voltage (V) and RSSI.
What file contains this information?

Felix

  • Administrator
  • Hero Member
  • *****
  • Posts: 6605
  • Country: us
    • LowPowerLab
Re: Change color of time-elapsed-since-last data in PiGateway
« Reply #1 on: June 14, 2021, 11:51:33 AM »
This is done by the following function in index.html:

Code: [Select]
    /// updates the "ago" labels text and color according the to elapsed time since the last update timestamp associated with those labels
    function updateAgos() {

which calls the following function that actually contains the color renderings for timestamped elements in the page:

Code: [Select]
/// calculates a style for an "ago" label based on a given timestamp in the past
    function ago(time, agoPrefix) {

Jason

  • Jr. Member
  • **
  • Posts: 57
Re: Change color of time-elapsed-since-last data in PiGateway
« Reply #2 on: June 15, 2021, 09:11:22 AM »
An example where I changed the timing and color slightly. This is a global change to all nodes.

This code is in the index.html file inside the function ago like Felix mentioned above.

Code: [Select]
      var theColor = "00ee00"; //dark green
      if (s<60) theColor = "00ee00"; //dark green
      else if (s<125) theColor = "33cc33"; // green
      else if (s<365) theColor = "ffbb00"; // light orange
      else theColor = "dd0000"; //red
      theColor = '#'+theColor;
      updated = updated+(agoPrefix && updated!=='now'?' ago':'');
      return {text:updated,color:theColor,tag:'<span data-time="'+time+'" class="nodeAgo" style="color:'+theColor+';">'$    }