How to use a template to show first item in a list in a custom state card?

nicmar · March 2, 2018, 11:35pm

I’m making a custom state card, but I have problems with the templates not expanding.

This prints the entire JSON data, enclosed by square brackets, so it’s clearly a list and the data is loaded correctly:

 {{ _toStr(stateObj.attributes.groupList) }}

The code below only prints the template, like it’s written below with curly braces, not the first item as expected:

{{ _toStr(stateObj.attributes.groupList[0]) }}

When I try the same in the template editor, but changed stateObj to the full name it works as expected.

{{ states.sensor.miners.attributes.groupList[0] }}

Why is the state card different, and how do I fix it?

Thanks!

petro · March 3, 2018, 12:37am

Are you putting it in a value_template? Can you post the state card yaml? It’s been a while since i used a state card, IIRC the state cards don’t use jinja… I could be remembering wrong though.

nicmar · March 3, 2018, 11:10am

Thanks for the reply, here’s my code:

#configuration.yaml
frontend:
  extra_html_url:
    - /local/custom_ui/state-card-crypto_profit.html

sensor:
  - platform: rest
    name: Miners
    resource: http://192.168.1.106:17790/api/miners
    json_attributes: 
      - groupList
    value_template: '{{value_json.totalHashrate5s}}'
  - platform: template
    sensors:
      miner_data:
        friendly_name: 'Miner Data'
        value_template: '{{ states.sensor.miners.attributes["groupList"] }}'

#customize.yaml
    sensor.miners:
      custom_ui_state_card: state-card-crypto_profit

#groups.yaml
  dashboard:
    name: Dashboard
    entities:
      - sensor.miners

You could be right that it doesn’t support Jinja, since I used the idea from This thread on the forum and they use this code to loop through an object:

        <template is="dom-repeat" items="{{stateObj.attributes.next_trains}}">

However my issue is still that I can’t get item [0] of the groupList which is a list, and I need to loop through that, either using a for loop or the template dom-repeat as above.

Thank you in advance!

nicmar · March 3, 2018, 11:58am

If Jinja is not available, should I parse the JSON-data with Javascript? If I do, how do I detect changes to it so I can update the UI accordingly?

petro · March 4, 2018, 12:25pm

Can you post the state object for states.sensor.miners? Just go into all the states lists and send a screenshot of it. I want to see its attributes. Also, just place this into the template editor and copy the output:

nicmar · March 4, 2018, 6:41pm

State object:

Template editor:

<template state sensor.miners=3,51 kH/s; custom_ui_state_card=state-card-crypto_profit, friendly_name=Miners, groupList=[{'id': 0, 'name': 'My Miners', 'minerList': [{'asicList': [], 'hasPool': True, 'poolList': [{'id': 0, 'minerName': 'm06', 'canRemove': False, 'canEnable': True, 'priorityInfo': {'quota': 0, 'priority': 0}, 'name': '', 'progressInfo': {'line2': '2', 'line1': '85', 'line3': '0'}, 'canPrioritize': True, 'coinName': 'Unspecified Equihash', 'canDisable': True, 'additionalInfo': {'displayUrl': 'x', 'worker': 'totaloutline.m01'}, 'statusInfo': {'statusLine3': None, 'statusDisplay': 'Enabled'}, 'minerID': 2}], 'canStart': False, 'speedInfo': {'hashrate': '3,51 kH/s', 'line2': 'Avg: 3,51 kH/s', 'hashrateValue': 3507, 'logInterval': 5, 'avgHashrate': '3,51 kH/s', 'workUtility': '0,00', 'line3': None}, 'hasAsic': False, 'pgaList': [], 'gpuList': [{'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1696, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 1255, 'temperature': 55, 'gpuPowertune': 0, 'fanPercent': 34}, 'name': 'GPU 0', 'progressInfo': {'line2': '0', 'line1': '12', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '442,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '444,00 H/s', 'workUtility': '0,00', 'line3': None}}, {'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1658, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 1177, 'temperature': 54, 'gpuPowertune': 0, 'fanPercent': 32}, 'name': 'GPU 1', 'progressInfo': {'line2': '0', 'line1': '9', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '443,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '442,00 H/s', 'workUtility': '0,00', 'line3': None}}, {'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1671, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 1266, 'temperature': 56, 'gpuPowertune': 0, 'fanPercent': 35}, 'name': 'GPU 2', 'progressInfo': {'line2': '0', 'line1': '17', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '438,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '440,00 H/s', 'workUtility': '0,00', 'line3': None}}, {'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1683, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 915, 'temperature': 54, 'gpuPowertune': 0, 'fanPercent': 25}, 'name': 'GPU 3', 'progressInfo': {'line2': '1', 'line1': '10', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '439,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '439,00 H/s', 'workUtility': '0,00', 'line3': None}}, {'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1607, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 1258, 'temperature': 56, 'gpuPowertune': 0, 'fanPercent': 34}, 'name': 'GPU 4', 'progressInfo': {'line2': '1', 'line1': '9', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '426,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '425,00 H/s', 'workUtility': '0,00', 'line3': None}}, {'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1620, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 1303, 'temperature': 56, 'gpuPowertune': 0, 'fanPercent': 36}, 'name': 'GPU 5', 'progressInfo': {'line2': '0', 'line1': '9', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '440,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '435,00 H/s', 'workUtility': '0,00', 'line3': None}}, {'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1671, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 1162, 'temperature': 55, 'gpuPowertune': 0, 'fanPercent': 32}, 'name': 'GPU 6', 'progressInfo': {'line2': '0', 'line1': '12', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '437,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '442,00 H/s', 'workUtility': '0,00', 'line3': None}}, {'deviceInfo': {'gpuVoltage': '0,00', 'gpuClock': 1633, 'name': None, 'deviceType': 'GPU', 'gpuActivity': 9, 'intensity': None, 'gpuMemoryClock': 4404, 'fanSpeed': 1415, 'temperature': 59, 'gpuPowertune': 0, 'fanPercent': 39}, 'name': 'GPU 7', 'progressInfo': {'line2': '0', 'line1': '7', 'line3': '0'}, 'statusInfo': {'statusLine3': 'Load: 9%<br/>', 'statusDisplay': 'Enabled'}, 'speedInfo': {'hashrate': '442,00 H/s', 'line2': None, 'hashrateValue': 0, 'logInterval': 5, 'avgHashrate': '438,00 H/s', 'workUtility': '0,00', 'line3': None}}], 'hostname': 'localhost', 'updatedUtc': '2018-03-04T18:26:25.4773545Z', 'hardware': None, 'progressInfo': {'line2': 'Rejected: 2', 'line1': 'Accepted: 85', 'line3': 'HW Errors: 0'}, 'updated': '2018-03-04 19:26:25', 'coinInfo': {'profitPerMonth': None, 'profitPerDay': None, 'displayName': '', 'revenuePerDay': '$18,05', 'profitPerDayValue': 0.0, 'revenuePerMonth': '$547,01', 'revenuePerDayValue': 18.05322865912904}, 'canPool': False, 'hasPga': False, 'id': 2, 'canStop': True, 'canRestart': True, 'canReboot': True, 'groupId': 0, 'hasGpu': True, 'name': 'm06', 'temperature': '59 °C', 'pool': '', 'statusInfo': {'statusLine3': '1d 22h 15m ', 'statusDisplay': 'Mining'}, 'hasValidStatus': True}]}] @ 2018-03-04T19:25:44.352045+01:00>

The info after groupList is the same as in my custom state card when I write:

<template>
    <p>[[_toStr(stateObj.attributes.groupList)]]</p>
</template>

I’m considering if I can just extract the groupList[0].minerList[0] object as a value_template, since that’s what I need to use, and I wouldn’t need to extract the [0] from inside the state card.

Thanks for looking into it!

nicmar · March 4, 2018, 10:39pm

I seemed to have figured it out! This code in the state-card gives me m06 which is what I would call states.sensor.miners.attributes.groupList[0].minerList[0].name. I can just walk down the tree, and ignore that there are list items.

  <template is="dom-repeat" items="{{stateObj.attributes.groupList}}" as="item">
      <template is="dom-repeat" items="{{item.minerList}}" as="miner">
        Miner: {{ miner.name }}
        Temp: {{ miner.temperature }}
        <template is="dom-repeat" items="{{miner.gpuList}}" as="gpu">
          - Name: {{ gpu.name }}
        </template>
    </template>
  </template>

Thanks for your help, if you have any other tips for me, feel free to share

petro · March 5, 2018, 6:27pm

That seems odd that calling out the item didn’t work though… it clearly should be [0][0]. The only thing I notice about your code is that it explicitly calls out ‘items’ as the keyword. It might require you to place your objects into a list. Not sure! Glad you figured it out though.

nicmar · March 5, 2018, 9:10pm

Yeah, I got that from the state card example. But haven’t found documentation on how to use the <template…> tag in my state card. Do you know if there is some kind of docs, since jinja doesn’t seem to work here?

petro · March 6, 2018, 11:42pm

Not really, I always snoop around other peoples implementations. There is a huge “share your custom…” thread that I always end up at. Don’t have it book marked but it usually hits front page every now and then.

nicmar · March 7, 2018, 7:06am

I found that I needed to read the docs for Polymer which seems to explain this, with things like IF and other. Pretty advanced stuff, just need a lot of time to read it all