Tutorials

AutoTools Web Screen JSON Visualizer

AutoTools Web Screen JSON Visualizer

Using JSON in Tasker is difficult if you aren’t familiar with it. If viewing as a string, the structure appears daunting and difficult to comprehend. If you use AutoTools or Tasker’s native Javascript and need help, use my AutoTools Web Screen JSON VIsualizer and easily process JSON data.

JSON




To some, JSON is a beautifully structured piece data that is easy for both humans and computers to read and process. It stands for JavaScript Object Notation. It is typically used to send and receive information across servers. While having a nice upside, JSON does have a downside if you are not already familiar it. JSON is not always in the “prettied” format you have probably seen so often. Said “prettied” format is what makes JSON easier to read and process. The problem is seeing the received JSON in this way. This is where my AutoTools Web Screen JSON Visualizer becomes super handy!

JSON Visualizer Features

  • Material Design Lite styling and animation
  • View the formatted version of any JSON
  • Copy the JSON path of any item to the clipboard for use with Tasker’s native JS or any other programming use
  • MDL style Navigation Menu with optional support for AutoTools JSON Read Action



JSON Visualizer Setup Steps

  1. Requires AutoTools and AutoApps
  2. Download, unzip, and import the JSON Visualizer V1 Tasker Project.
  3. Follow the steps from Build A Custom UI With Material Design AutoTools Web Screen (Local Reference) to get all the MDL files into the “MDL Folder” (with no subfolders).
  4. Then download, unzip, and place the JSON Visualizer HTML file into the “MDL Files” folder afterward. Note: the MDL references are already contained within the previously mentioned HTML file.
  5. Open the Task “Open JSON Visualizer” and open the Action with labeled “gets primary color dark variable ‘#455A64’ ”.  If you not using my Material Design Color Hex Values Child Task project, change the Action to a Variable Set for the color hex value of your choice for variable “%primary_color_dark”.
  6. Run the Task “Open JSON Visualizer”.
  7. Finally, Enjoy!



Example JSON Visualizer Outputs

Tapping the hamburger menu opens navigation menu with a few toggles.  Each toggle changes the output depending no your situation.  Below is an explanation for each toggle with example outputs.  They use the following JSON:

{
  "people": [
    {
      "height": "72",
      "weight": 250,
      "name": {
        "first": "Bob",
        "last": "Bobberson"
      },
      "isMale": true,
      "cars": [
        "Ferarri",
        "Minivan",
        "Truck"
      ]
    },
    {
      "height": "60",
      "weight": 115,
      "name": {
        "first": "Jane",
        "last": "Janerson"
      },
      "isMale": false,
      "cars": [
        "Lamborghini",
        "Ford"
      ]
    }
  ]
}

Default Settings

By leaving as-is, the JSON Visualizer outputs the full path, to the devices clipboard, of any item selected to the clipboard. Because of the default settings, this is useful for any standard programming situation. Plug it into a native Tasker JS Action or Google Apps Script code.


Selection:

weight: 250

Web Screen Button Output:

people[0].weight

Selection:

name: {

Web Screen Button Output:

people[0].name

Selection:

0: "Ferarri"

Web Screen Button Output:

people[0].cars[0]

Return Full Path Toggle

This toggle does exactly what it says. However when not toggled, it returns just the key. This is useful for AutoTools JSON Read when the “Simple Mode” is check (which is the default state).


Selection:

weight: 250

Web Screen Button Output:

weight

Selection:

isMale: true

Web Screen Button Output:

isMale

Multiple Instances

The above toggle is for the specific time when wanting multiple occurrences of the specific. It appends a set of parenthesis to the end of the selected item; works best with “Return Full Path” toggle off and AutoTools JSON Read Action “Simple Mode” checked.



Selection:

weight: 250

Web Screen Button Output:

weight()

AutoTools JSON Read Action output flashed:

72,60

Selection:

name: {

Web Screen Button Output:

name()

AutoTools JSON Read Action output flashed:

{"first": "Bob","last": "Bobberson"},{"first": "Jane", "last": "Janerson"}

Selection:

first: "Bob"

Web Screen Button Output:

first()

AutoTools JSON Read Action output flashed:

Bob,Jane

Selection:

cars: [

Web Screen Button Output:

cars()

AutoTools JSON Read Action output flashed:

Ferarri,Minivan,Truck,Lamborghini,Ford

Convert To Tasker Array

Since Tasker arrays do not directly translate as nicely with JS arrays.  This toggle replaces any selected array element with it’s parent array and a set of parenthesis; for use with AutoTools JSON Read.


Selection:

0: "Ferarri"

Web Screen Button Output:

people[0].cars()

AutoTools JSON Read Action output flashed:

Ferarri,Minivan,Truck

The “Ferarri” is accessible via flashing the first element “(1)”.

Conclusion

When JSON data’s structure as a string isn’t useful, one struggles to obtain any relevant data from it. However once formatted correctly, referencing and processing it is simple. Since there is no current plugin to be able to view the formatted JSON data, I decided to do it myself. Please enjoy using my AutoTools Web Screen JSON Visualizer to make your programming life that much easier.



Try using the JSON provided in this Tasker Project: Get Material Design Color Hex Values Child Task to see all the available colors Google uses in their specifications.

2 thoughts on “AutoTools Web Screen JSON Visualizer

  1. This is really nice. I’m still learning how to use AutoTools web screens so I hope this isn’t dumb, but how do i get my json to display? I should be able to read a json file into a tasker variable (Input_json) and then perform this task, right?

  2. Edit: you are correct in using the Read Files Action.

    Mark, First of all thank you so much for your donation.

    Second, at this time the webscreen input (Input JSON) does not support files as inputs. I plan to support JSON files in the future but will need to update the HTML file and associated JS within. Until I have time update it a simple workaround is to use a Tasker “Read File” Action into a variable and use that variable inside the JSON Visualizer Web Screen. I hope that helps!

What did you think???