Static JSON files for devices - templates/examples?

parkerc · July 16, 2021, 7:36am

For a while now, I’ve made various attempts to work out how to create/update the static json files used on Vera and failed every time.

I’ve tried to follow the various guides

http://wiki.mios.com/index.php/Luup_plugins:_Static_JSON_file
http://wiki.micasaverde.com/index.php/UI4_UI5_Migration#SceneGroup

multiple times, but it’s just not getting through …

They’ve also been some good posts on the subject too, http://forum.micasaverde.com/index.php?topic=28594.0. Etc. But I was wondering does anyone have some generic json templates / examples that they could share, maybe something with buttons, others with just additional text ?

parkerc · July 16, 2021, 7:44am

The documentation seems to suggest I start with this in my D_MyPlugin.json file…

{
	"default_icon": "../../../icons/power2.png",
	"state_icons": [],
	"inScene":"1",
	"Tabs": [
		{
          "Label": {
                "lang_tag": "About",
                "text": "About"
          },
          "TopNavigationTab": "1",
          "Position": "4",
          "TabType": "javascript",
          "ScriptName": "J_MyPlugin.js",
          "Function": "MyPlugin.about"
	  }
	],

Within that referenced J_MyPlugin.js file, needing to include something like the following (example)

var MyPlugin = (function(api){
    return {
        about: function() {
            try {              
                var html = '<div>This is all about me !</div>';
             api.setCpanelContent(html);
            } catch (e) {
                Utils.logError('Error in MyPlugin.about(): ' + e);
            }
        }
    };
})(api);

And then back to the json file again, it seems i need to add a ‘scene group’ ?

"SceneGroup": [
   {
       "id": "1",
       "top": "1",
       "left": "0",
       "x": "2",
       "y": "3"
   }
],
"ControlGroup": [
   {
       "id": "1",
       "isSingle": "1",
       "scenegroup": "1"
   }
]

Followed by a ‘Button’ control type ?

{
   "ControlGroup": 1,
   "ControlType": "button",
   "ControlCode": "my_button",
   "top": 0,
   "left": 0,
   "Label": {
       "lang_tag": "my_first_button",
       "text": "My First Button"
   },
   "Display": {
       "Service": "urn:micasaverde-com:serviceId:MyPlugin1",
       "Variable": "Status",
       "Value": "1",
       "Top": 200,
       "Left": 50,
       "Width": 100,
       "Height": 20
   },
   "Command": {
       "Service": "urn:micasaverde-com:serviceId:MyPlugin1",
       "Action": "SetStatus",
       "Parameters": [
           {
               "Name": "Status",
               "Value": "1"
           }
       ]
   }
},

I’ve tried all of these together and running it through a JSON validator, https://jsonlint.com/. But it just gives me errors, and it’s also not clear how do i should look to end the file ? !!!???

D_ MyPlugin1.json.zip (1.3 KB)

rigpapa · July 16, 2021, 1:56pm

Your attachment doesn’t seem to be an archive despite the archive suffix/type. It’s plain JSON text, not a compressed archive containing the text. It’s also a fraction of the whole file, so it cannot be validated or repaired as posted. The jsonlint.com tool is great, but you can’t post a fragment to it; you have to post a complete file to validate.

The other thing evident in your post thread (and the broken fragment you posted) is that the "Control" section key is missing. This would be the lead-in to the subsection containing controls (with ControlGroup, ControlType, etc.). So that’s a big break in the required file structure. The Control section is an array of objects. I suspect you are struggling with learning how JSON represents data at the same time you are trying to learn how the data works/what it means to Luup/UI7, so that’s a doubling of the learning curve. Go look at a few tutorials on JSON as a starting point, before worrying about what Vera is doing with the data.

The static JSON files are very poorly documented. Lots of errors and gaping holes. It’s a steep learning curve and a lot of exploration and discovery (trial and error) is involved. You are more than welcome to look at the static JSON in any of my plugins as a reference/starting point. When writing new plugins, I never start from scratch, I just pick something I’ve already done and modify it. I suggest D_DelayLightTimer_UI7.json, since it has a small mix of controls in a rather vanilla structure (it’s the UI for DelayLight’s timer child devices).

parkerc · July 16, 2021, 2:11pm

As always many thanks @rigpapa

Regarding …

As you can’t upload / .txt or .json file, I just added an approved extension - so it would work. (I had a feeling it might confuse things)

I’ll work on your feedback later when I have more time.

rigpapa · July 16, 2021, 2:17pm

No worries. If your goal is just to fix icons, that’s a simpler task since it’s fairly isolated in the file. The further you venture from that point, though, the more mysterious things become.

parkerc · July 16, 2021, 2:24pm

Not sure about others but I seem to learn so much better when I’m trying to rework/deconstruct a working example , rather than starting from a blank piece of paper. (Just as long as that example is not too complex )

I understand elements of how a json is structured - and I’ve been trying to find some simple ui7 compatible examples that I can work from.

Something like the following would be amazing e.g

a basic switch.json with 4 UI buttons that I can name each of them and assign Vera actions to.
a basic motionsensor.json with a place to show some additional variable information. E.g a date last tripper time stamp

parkerc · July 16, 2021, 8:50pm

Hi @rigpapa

Looking around your Luaview.json might be a better one for me to start with?

I like the simplicity of the json, although the J_LuaView1_UI7.js is whole other situation but I the javascript function angle it takes feels easier to get my head around … (sadly I don’t know any javascript, but I’ll try to learn some )

github.com

toggledbits/LuaView/blob/master/D_LuaView1.json

{
	"default_icon": "https://www.toggledbits.com/assets/luaview/luaview-icon.png",
	"state_icons": [{
		"img": "https://www.toggledbits.com/assets/luaview/luaview-icon.png",
		"conditions": []
	}],
	"x": 2,
	"y": 4,
	"inScene": 1,
	"Tabs": [{
			"Label": {
				"lang_tag": "tabname_control",
				"text": "Control"
			},
			"Position": 0,
			"TopNavigationTab": 1,
			"TabType": "flash",
			"ControlGroup": [{
				"id": 1,
				"scenegroup": 1

This file has been truncated. show original

rigpapa · July 16, 2021, 9:03pm

It really depends on what you are after. If it’s the UI for the dashboard card and device control panel, LuaView is not a great example because it doesn’t really have any controls in either of those places. The entire UI is custom JavaScript.

Have you seen the VirtualPanel plugin? That might be an option, rather than learning how the static JSON works and generates the dashboard cards and control panels; definitely easier than learning JS for the custom work.

I’m not at all clear what your goals are at this point, what problem you’re trying to solve.

parkerc · July 16, 2021, 9:30pm

Sorry, my initial objectives were just to see if I could create a sort of dummy UI tile/widget, one that had buttons to run Lua scripts/scenes etc. and another that would have a customisable, label and can show a variable.

For the latter one, here are some domoticz widget examples

rigpapa · July 16, 2021, 10:19pm

For either of these, you can do it without any custom JavaScript, but unfortunately you likely won’t have much luck with the first example without writing a plugin to back it. The buttons will want to send actions to the device that owns that dashboard card, so without an implementation for those actions, nothing’s going to happen. I have never seen the ability for a button to send an action to a different (any arbitrarily specified) device, and I don’t think it exists natively – it wouldn’t make much sense to have/do that because you’d have to hard code the target device number in the static JSON, which severely limits the use case. Your plugin would act as a proxy of sorts, receiving a custom action it defines (e.g. urn:mydomain:serviceId:MyButtonTool/Button1Press) and then the plugin invoking whatever configured actions are necessary on other devices (configured separately, with or without a JavaScript UI depending on how fancy). I’m thinking you’re in VirtualPanel territory with this.

The second example is, sadly, not much different. You can easily display data from state variables on the device that owns the dashboard card, but there needs to be a device, and you need to get the data in there from wherever it’s going to come from. In this case, since it’s display only, you could be purely virtual, and use an existing device type and just supply no device implementation. You would still have to get the values into the state variables on the device to be displayed, though, because again, the static JSON will only display state variable values from states on its own device, not any arbitrary device. You could use HTTP requests or Lua in other places, for example, to poke the values you want into the device so they can be displayed, and that’s not difficult. This is how both SiteSensor and VirtualSensor handle their child objects – no implementation, the mother ship (parent/plugin device) is just stuffing data into the child devices and it gets displayed.

And of course, because these are all custom UIs, you have little hope of seeing them in their full glory in the mobile apps. I suppose this is why so many people use third party dashboards.

parkerc · July 18, 2021, 8:46am

I think I have a working version to meet my second objective now, which as a non-plug-in and something I’m trying to keep simple - I’m calling it a “Vera Widget”. .

This first one will just present you with your external IP address.

To do it, I’ve used the light sensor device as the basis, and after uploading the following new Widget1.json file to Vera and added some Lua code to the LuaStartUp (the code leverages things like the luup.create_device() and the luup.call_timer() functions ) it will try to find the widget, if not there it’ll create it and then keep it updated going forward checking every hour.

D_Widget1.json

{
	"default_icon": "light_sensor_default.png",
	"x":"2",
	"y":"4",
	"inScene":"0",
	"Tabs": [
		{
			"Label": {
				"lang_tag": "ui7_tabname_control",
				"text": "Control"
			},
			"Position": "0",
			"TabType": "flash",
			"top_navigation_tab": 1,
			"ControlGroup":[
				{
					"id": "1",
					"scenegroup": "1"
				}
			],
			"SceneGroup":[
				{
					"id": "1",
					"top": "1.5",
					"left": "0.25",
					"x": "1.5",
					"y": "2"
				}
			],
			"Control": [
				{
					"ControlGroup":"1",
					"ControlType": "variable",
					"top": "1",
					"left": "0",
					"Display": {
						"Service": "urn:nodecentral-net:serviceId:Widget1",
						"Variable": "ExternalIP",
						"Top": 60,
						"Left": 145,
						"Width": 75,
						"Height": 20
					}
				}
			]
		},
		{
			"Label": {
				"lang_tag": "ui7_settings",
				"text": "Settings"
			},
			"Position": "1",
			"TabType": "javascript",
			"ScriptName": "shared.js",
			"Function": "simple_device"
		},
		{
			"Label": {
				"lang_tag": "ui7_advanced",
				"text": "Advanced"
			},
			"Position": "2",
			"TabType": "javascript",
			"ScriptName": "shared.js",
			"Function": "advanced_device"
		}
	],
	"eventList2": [],
	"device_type": "urn:schemas-micasaverde-com:device:LightSensor:1"
}

@rigpapa - I know it’s no where near as comprehensive as your plugins, but as a learning exercise and a simple dashboard item, I’m quite please with myself

If anyone can think of any ways to further polish the .json, please let me know

parkerc · July 24, 2021, 10:02pm

On the Tab wiki page it says “ The dashboard box for a device has room for two rows of information and controls. These are called Control Groups .”

OK, so my next objective is to have a two line UI widget… (ideally with two labels and values)