How To: View WebCoRE Variables in SharpTools Dashboards

Following on from the Display data from WebCoRE or other non ST Device Type? - #4 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

:information_source: With the introduction of HTTP Triggers to SharpTools Rules, it’s now possible to directly send WebCoRE variables to SharpTools. You can find more details in the reply a couple posts down showing how to do this.

I’ve left the original instructions in tact immediately below in case you still want to reference them, but the HTTP Triggers + SharpTools variables approach is much more efficient.

Original Outdated Approach (tap to expand)

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: custom badge: invalid query parameter: url, query?
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
1 Like

Hi!

I have recently been facing a similar issue myself and tried to use the above workaround within my capabilities but got stuck on the following: In trying to create the JSON placeholder, I found out the site myjson.com dos not seem to be working. I thought I could find an alternative and found this might be https://jsonbin.io/. However, I have been unable to complete the step there. Can anyone help?

From what I gather, the main difference would be tweaking WebCoRE piston side of things where it stores the JSON value and updating the image URL to point to the ‘latest’ version of the jsonbin that you create. I poked around with jsonbin.io and it looks like you’ll need to create an account, create a bin, and then use that in your pistons…

Out of curiosity, what kind of things are you using WebCoRE variables for? I’m curious if there’s some way to accomplish something similar with the native SharpTools.io variables that have been introduced since this post was originally created.

Here’s some high level steps:

  • Create an account on jsonbin.io
  • Create a new public ‘bin’ in jsonbin
    • I just stubbed in some dummy data, tapped the ‘Private Bin’ button to toggle it to Public, and clicked Create
    • From a search of the WebCoRE forums, there’s allegedly a way to pass in authorization headers to use with a private bin, but I didn’t see that in my version of WebCoRE (maybe it just needs an update though? :man_shrugging:)
  • Grab the URL from the bottom of your newly created bin:
  • Go back to WebCoRE and update the Piston like the following:
    image
  • When you create the Media Tile, you can use the URL from jsonbin to read the value, but make sure to use tack on /latest so it grabs the latest version of the bin. In my example, it’s something like:
    https://img.shields.io/badge/dynamic/json.svg?label=%20&colorA=333&colorB=666&query=$.myValue&style=flat-square&uri=https://api.jsonbin.io/b/5f6dff5f7243cd7e824372b2/latest
    

image

1 Like

Check out the posts in this thread over at the webCoRE forums… it might be something you can use.

Thanks for the suggestion! It doesn’t look like the image placeholder service is available anymore and I’m not sure how it would work in this context where you would need a static URL for a Media Resource wherein the returned content is dynamic.

@James this is another potential use case for HTTP Triggers for SharpTools Rules combined with context variables.

It would be neat if WebCoRE or IFTTT could post data to a SharpTools Rule directly via a web request and the rule could then store that in a variable for display in a dashboard. :sunglasses:

1 Like

That would eliminate all the middle men :slight_smile:

I didn’t realize that imageplaceholder is not there anymore, I will have to find another one with similar features.

1 Like

Thanks @josh !

Things worked fine based on your suggestions! The critical issue was to toggle the bin into Public to get things working.

Regarding the need to use WebCore variables instead of using SharpTools ones, the reason I found myself doing that is simply that I was trying to get information from my IotaWatt power monitoring system Query API, which as far as I understand is not possible to do directly in SharpTools. With the assistance of @eibyer, I was able to get information from the API into WebCore. I then needed to pass on information to SharptTools tiles, which has now been accomplished, albeit in a very round-about manner. If that might have been possible to do directly in SharptTools, I would be glad to know (My SharpTools get device info from my SmartThings hub which does not support IotaWatt).

3 Likes

Hi! I was able to get things working into SharpTools along the lines of my post with the support provided by @josh. Thanks for your prompt willingness to help too!

2 Likes

What are the pros/cons to using json placeholder vs media tile to display a webCore variable?

With the recent introduction of HTTP Triggers to the SharpTools Rule Engine, that’s probably the most direct way of copying WebCoRE variables over to SharpTools variables for display.

That looks like what I need but I am inexperienced and cannot quit figure out how to accomplish this.

I want to pull a webcore variable to sharptools so that it will display the time on a tile. Any videos or instructions on this process you can point me to? I read the post linked above as well as how to trigger http rules but am still at a loss.

You should be able to use the same WebCoRE steps from the first post, but instead of posting to myjson.com, you would POST to a SharpTools Rule which has an HTTP Trigger:

So in my case, I created a new SharpTools rule with an HTTP Trigger and an action to copy the value that is received from WebCoRE into a SharpTools variable.

In this example, WebCoRE is sending over a variable called myValue and I’m copying it into a SharpTools variable called $myText.

Note that it’s completely optional to define the parameter name in the Trigger section, but sometimes it’s helpful almost as a form of documentation to yourself for what you’re expecting to receive.

Then I updated the existing WebCoRE piston and changed the ‘Method’ to POST and the URL to the HTTP Trigger URL for my new SharpTools Rule (make sure to save the SharpTools rule first so the HTTP trigger becomes active!).

As noted in the original post above, WebCoRE global variables use ‘@’ in their name and wont work, so if you are using global WebCoRE variables, copy those to a local WebCoRE variable to send across.

3 Likes

@josh Thank you. I was able to follow the example and get these set up and displaying properly!

Quick question, does the variable nape in Sharptools need to be the same name as in Webcore? I’m only asking because once I changed the variable names to match in both apps they started working.

1 Like

No the SharpTools variable’s name doesn’t need to be the same as webCoRE’s variable name, but the variable name after $context.event.param, which is the myValue in Josh’s example, must match the local variable name passed from webCoRE.

2 Likes

I can’t get this up running.


But cannot figure out what I’m doing wrong.
I’m followed your tutorial as well as possible. But don’t know if anything is missing.
I made a tile, choosing the rule, but no output.

Can you clarify what you’re trying to do? Are you trying to have WebCoRE send data over to SharpTools?

If so, you shouldn’t need to add a Rule to a Dashboard at all… in fact, that would just trigger the rule directly and would not pass any parameters (effectively bypassing the triggers). In your WebCoRE example, that seems like a reasonable way to get WebCoRE to push data over to SharpTools, but of course that WebCoRE piston would need to get triggered somehow so it would run,

I figure it out myself.
Sorry for the inconvenience!

1 Like

Thanks for the update! Was there anything you figured out that you feel might be helpful to someone else who runs into this problem in the future?

The main thing is to setup the rule as you mentioned:

Trigger:
HTTP Trigger (generated)

Flow:
Set Variable $yourVariable to $context.event.params.yourProperty

Then over in WebCoRE you would need to have some action that causes the piston to run and sends an HTTP Request to the URL that’s generated for your HTTP Trigger in SharpTools.

Then in SharpTools, you can add the $yourVariable directly to a dashboard to display. Or Super Tiles are a really neat way to use variables if you want to have more control over how things are laid out.

Hi again,
Yes, it was just me being a dumb-ass :slight_smile:
I needed to set the right type of tile. Haven’t tried Super Tile, but will look into it.

1 Like