Author Topic: Adding nodeDetailTitle into the header of Metric page  (Read 492 times)

wile1411

  • Jr. Member
  • **
  • Posts: 54
  • Country: au
Adding nodeDetailTitle into the header of Metric page
« on: December 14, 2018, 06:22:42 AM »
I have 6-7 different temperature moteinos scattered around the house and yard.
I've found I get lost at which node I'm currently monitoring the temperatures of and had to flick back to the node page to check.
In case anyone else does this too, this was my 'solution'.

To avoid this, I've added a copy of the nodeDetailTitle span (renamed to nodeDetailTitlemetric) under the metric header. (I only changed the 3rd line)
Code: [Select]
  <div data-role="page" id="metricdetails">
    <div data-role="header">
     <h3><span id="nodeDetailTitlemetric">Node details</span> ( <span id="metricDetailTitle">Metric details</span> <span class="metricUpdated">x</span> )</h3>

I added this code to update the metrics header title with the NodeName.
Code: [Select]
function refreshNodeDetails(node) {
...
      $('.nodeUpdated').html(ago(node.updated, false).tag);     ////Line for location reference
      $('#nodeDetailTitlemetric').html(nodeResolveString(node.label, node.metrics) || 'Node details');

....
}

Felix

  • Administrator
  • Hero Member
  • *****
  • Posts: 6571
  • Country: us
    • LowPowerLab
Re: Adding nodeDetailTitle into the header of Metric page
« Reply #1 on: December 14, 2018, 07:03:44 AM »
Do you have a quick snapshot of how this looks in the UI?

wile1411

  • Jr. Member
  • **
  • Posts: 54
  • Country: au
Re: Adding nodeDetailTitle into the header of Metric page
« Reply #2 on: December 14, 2018, 07:12:45 AM »
sure - see attached.

I also added a few extra button for the chart for various lengths of time.
1/2 = half a day  / 6hours
q = 3months / quarter
y = 12 months / year

Code: [Select]
          <a class="graphControl" href="#" data-role="button" hours="8760" data-icon="calendar" data-theme="b" title="last year">Y</a>
          <a class="graphControl" href="#" data-role="button" hours="2160" data-icon="calendar" data-theme="b" title="last quarter">Q</a>
          <a class="graphControl" href="#" data-role="button" hours="720" data-icon="calendar" data-theme="b" title="last month">M</a>
          <a class="graphControl" href="#" data-role="button" hours="168" data-icon="calendar" data-theme="b" title="last week">W</a>
          <a class="graphControl" href="#" data-role="button" hours="24" data-icon="calendar" data-theme="b" title="last day">D</a>
          <a class="graphControl" href="#" data-role="button" hours="12" data-icon="calendar" data-theme="b" title="half day">�</a>
          <a class="graphControl" href="#" data-role="button" hours="1" data-icon="calendar" data-theme="b" title="last hour">H</a>


Lastly - I've been experimenting with some of Flot markings to add indicator lines for where the Capacitor voltage might got above / below. (Only one is visible on this view)
for this solar mote, I've got:
Blue line at: 5.4V (Capacitor limit)
Dark red at 3.3V (lowest ideal for Moteino)
Bright red at 2V (death lies below this line)

For those interested - this is added to the chartoptions for a specific metric in my userdefined metrics file.
I might see if I can have  this line be dynamic based on a slider setting assigned to the metric. But then again, that might be beyond me code wise.
Code: [Select]
        markings: [
          //Max Capacitor Voltage
          { yaxis: { from: 5.54, to: 5.54 }, color: "#0054b8" },
          //Minimum Ideal Voltage
          { yaxis: { from: 3.3, to: 3.3 }, color: "#751717" },
          //Dead
          { yaxis: { from: 2, to: 2 }, color: "#8b0000" }
       ]
« Last Edit: December 14, 2018, 07:47:51 AM by wile1411 »

wile1411

  • Jr. Member
  • **
  • Posts: 54
  • Country: au
Re: Adding nodeDetailTitle into the header of Metric page
« Reply #3 on: December 14, 2018, 07:28:56 AM »
Extra screenshot with the other bars after forcing the chart min / max values.

Felix

  • Administrator
  • Hero Member
  • *****
  • Posts: 6571
  • Country: us
    • LowPowerLab
Re: Adding nodeDetailTitle into the header of Metric page
« Reply #4 on: December 14, 2018, 08:10:09 AM »
All nice features, you're digging it  8)
I added the metric page node title for v9, i think it makes a lot of sense.
Thanks for sharing all your customizations !