How To: View WebCoRE Variables in SharpTools Dashboards


#1

Following on from the Display data from WebCoRE or other non ST Device Type? thread, here’s an approach that can be used to display data from WebCoRE or other third party services that can publish JSON in SharpTools…

The resulting output looks like the following tile that says ‘hello world’:

image

It’s a bit of a Rube Goldberg way of getting the data out of WebCoRE, but it works! :smiley: For other options, check out the original thread linked above - the most common approach is to feed the data into a supported platform like SmartThings or Hubitat.

The summary is:

  1. Create a WebCoRE piston to generate whatever output you desire (or in your case push the data from the Arduino)
  2. At the end of that piston, create an HTTP call to save the data into a third party JSON storage system
  3. Use a third party image generator to generate the image
  4. Create a Media item from the generated image URL
  5. Add the Media item as a tile on your dashboard

Create the JSON placeholder

  1. Navigate to https://myjson.com
  2. Enter a JSON string and press save to generate your unique bucket
    eg. {"foo": "bar"}
  3. Make note the URL displayed at the bottom of the screen to access the JSON

Create / Edit the WebCoRE Piston

  1. Update your WebCoRE piston to PUT a local variable to myjson.com
    Note: Global variables use ‘@’ in their name and wont work with the image generator, so if you are using global variables, copy those to a local variable
  2. Be sure the piston executes at least once so you can make sure the content in myjson.com is updated as you expect
    Note: You can access the URL provided in Step 2 of the ‘Create the JSON Placeholder’ to view the JSON content in your browser

Create the Media Tile

  1. Use the following URL format for shields.io to create an image that displays your value:
    https://img.shields.io/badge/dynamic/json.svg?label=%20&colorA=333&colorB=616161&query=$.myValue&style=flat-square&uri=https://api.myjson.com/bins/1cekuk
    
    Important: Be sure to update the uri value with your myjson.com uri and the query parameter to match your variable name
    Note: See further below for a breakdown of the format
  2. From the SharpTools.io user page, select Manage ResourcesMedia and Create Media
  3. Enter a name for your media item and paste in the shields.io formatted URL
    Note: Be sure to check the box for enable refresh and set a refresh interval if your content changes periodically. Otherwise it will only ‘refresh’ the value when the dashboard is first loaded.
  4. Navigate to your desired dashboard
  5. Tap the ... in the bottom right corner and select Edit to edit the dashboard
  6. Tap the + icon in the bottom right corner to add a new tile
  7. Expand Media and select your newly created media item
  8. Tap the ... in the top right corner of the newly added media item and adjust the size and scaling to fit your needs

Note: For the original image at the start of this post, I used the following options:

  • Custom Tile Color: default dark gray which matches the color we used in the shields URL (#616161)
  • Media Scaling: Contain

This keeps the image within the tile without distorting it and matches the tile background color to the image color so it looks as if its one consistent tile. As shown in the screenshot above, another option is to use ‘Cover’ scaling, but you’ll need to adjust the tile dimensions to approximately fit your content which can be a bit harder if your dynamic content changes length.

Breaking down the Shields.io format

Using the example provided above:

https://img.shields.io/badge/dynamic/json.svg?label=%20&colorA=333&colorB=666&query=$.myValue&style=flat-square&uri=https://api.myjson.com/bins/1cekuk

Base URL: https://img.shields.io/badge/dynamic/json.svg?
Parameters:

  • label: Displays to the left of the value.
    • We’ve set it to %20 which is a space and means it will be hidden
  • colorA: the color behind the label (hex color)
  • colorB: the color behind the value (hex color)
  • query: the JSONPath query to read the data from your URI
    • This is probably the most complex part of it. If you stick with a simple output of a local variable from WebCoRE, it’s pretty straightforward. $.yourVariable
    • You can use JSONPath.com to test your expression if you have a more complex JSON structure (eg. from something other than WebCoRE)
  • style: sets the style of the generated image - flat works well for media tiles
  • uri: the uri to your JSON content

Display data from WebCoRE or other non ST Device Type?