Support JSON data

[minhvn09]

Can you add JSON support? Thank You

[adrianromero]

Can you give an example of what kind of JSON payloads you want to support? What device you have in mind?

[adrianromero]

Hello

I just published a version with initial JSON support. For example the following JSX Dashboard:

{/* JSON example. */}

<DashboardPage title="JSON example">
  <Card title="Sets JSON data">
    <InputUnit
      topic="myhelloiot/jsonexample"
    />   
  </Card>
  <Card title="JSON value">
    <ViewUnit
      topic="myhelloiot/jsonexample"
      subconvert={JSONConvert(value => value.mylist[1])}
    />     
  </Card>
</DashboardPage>

Generates the following dashboard:

[mhaberler]

Hi Adrian, thanks for this very polished repo!

I'm trying to extract and display a value from a topic which comes as a JSON paylod from the broker (I think a rather common case)

example: OpenMQTT Gateway publishes readings for instance from a Ruuvi Tag like so:

topic: home/OMG_heltec_ble/BTtoMQTT/DB08D33338EF

{
    "id": "DB:08:D3:33:38:EF",
    "mac_type": 1,
    "adv_type": 0,
    "manufacturerdata": "99040513b725fbffff009cfe0cfc80d0562c90c5db08d33338ef",
    "rssi": -96,
    "brand": "Ruuvi",
    "model": "RuuviTag",
    "model_id": "RuuviTag_RAWv2",
    "type": "ACEL",
    "track": true,
    "tempc": 25.235,
    "tempf": 77.423,
    "hum": 24.3075,
    "pres": 1155.35,
    "accx": 0.152984,
    "accy": -0.490333,
    "accz": -0.878676,
    "volt": 3.266,
    "tx": 4,
    "mov": 44,
    "seq": 37061,
    "mac": "DB:08:D3:33:38:EF"
}

how would I display for instance the tempc field in a gauge?

[mhaberler]

to answer my own question: like so

<DashboardPage title="JSON example">
  <Card title="Ruuvi temperature">
    <ViewUnit
      topic="home/OMG_heltec_ble/BTtoMQTT/E691DF7BE54D"
      subconvert={JSONConvert(value => value["tempc"])}
    />     
  </Card>
</DashboardPage>

[mhaberler]

btw - happy to report myhelloiot works perfectly fine with the embedded MQTT Broker PicoMQTT (websockets version)

I cobbled together a rough esp32 app which handles wifi, webserver serving files from an SD card, and MQTT/Websockets server

this means one can view arbitrary sensors as long as they can be hooked to the esp32 - without needing a cloud based server at all

(our use case cannot assume permanent Internet connectivity)