Plugins for Z-Way/Z-Cloud

Tips, Tricks and Scripts to enhance your home automation and workaround known device bugs, limitations and incompatibilities
Locked
User avatar
PoltoS
Posts: 5061
Joined: 26 Jan 2011 19:36

Plugins for Z-Way/Z-Cloud

Post by PoltoS » 25 May 2012 11:09

This post will describe newly introduced Plugins for Z-Way/Z-Cloud. Plugins consist of JavaScript code stored in user configuration and loaded on Z-Way interface load. Here is an example:// Custom types list
var device_types_list = ["Test", "Fan", "SwitchToggle"];

// Custom icon for devices
function device_type_icon(deviceId, deviceType) {
var dev = ZWaveAPIData.devices[deviceId]
if (deviceType == 'Test')
return 'unknown.png';

if (deviceType == 'Fan') {
switch(dev.data.genericType.value) {
case 0x10:
if (0x25 in dev.instances[0].commandClasses && dev.instances[0].commandClasses[0x25].data.level.value)
return 'fan_100.gif';
else
return 'fan_0.png'; // non-animated

case 0x11:
if (0x26 in dev.instances[0].commandClasses && dev.instances[0].commandClasses[0x26].data.level.value > 50)
return 'fan_100.gif';
else if (0x26 in dev.instances[0].commandClasses && dev.instances[0].commandClasses[0x26].data.level.value > 0)
return 'fan_50.gif';
else
return 'fan_0.png'; // non-animated
};
};
};

// Custom UI for switches
function device_type_switch_ui(deviceId, instanceId, deviceType) {
if (deviceType == 'Test')
return $('<button>Test</button>').button().click(function() { runCmd('devices[' + deviceId + '].instances[' + instanceId + '].Basic.Set(0)'); });
if (deviceType == 'SwitchToggle')
return $('<button id="custom_type_SwitchToggle" class="intl"></button>').
translate({custom_type_SwitchToggle: "Toggle"}).
button().
click(function() {
runCmd('devices[' + deviceId + '].instances[' + instanceId + '].Basic.Set(' + (ZWaveAPIData.devices[deviceId].instances[instanceId].commandClasses[0x25].data.level.value ? '0' : '255') + ')');
});
};

// Array of objects used by GUI to load custom obejects
var custom_map_objects = [
// Object syntax:
//{
// icon: <url string of icon image>, <DOM object (with bindings)> or <function returning DOM (to make more bindings)>,
// top: <offset from map top border in pixels, number>,
// left: <offset from map top border in pixels, number>,
// onclick: <function to be executed>, <DOM object> or <string of HTML code>
//},

// Uncomment three examples below to test (remove lines with /* and */)

// Example 1:
/*
{
icon: "http://www.stopcity.com/img/pocasi/4.gif",
top: 100,
left: 100,
onclick: $('<button>Button</button>').click(function() {
alert('Wheather is good!');
}),
},
*/

// Example 2:
/*
{
icon: $('<span></span>').html('Click<br/>me'),
top: 100,
left: 150,
onclick: function() { alert(' Clicked!'); }
},
*/

// Example 3:
/*
{
icon: function() {
var ico = $('<img src="http://google-youtube-gadget.googlecode ... outube.png"/>');

var blink;
blink = function() {
ico.fadeOut(1000).fadeIn(1000, blink);
};
blink();

return ico;
},
top: 100,
left: 200,
onclick: '<iframe width="560" height="315" src="http://www.youtube.com/embed/LWtjnE9EUHE" frameborder="0" allowfullscreen></iframe>'
},
*/

// More objects here...
];Z-Way will use device_types_list array to get the list of available custom types (you can change the type in Devices Configuration tab). Function device_type_icon will be called to get custom icon for the device: /pics/icons/device_icon_ + (value returned). Function device_type_switch_ui will be called to provide custom user interface for custom type (only switches support custom interface for now). If these functions returns null (or just exit), the default icon/interface is used.Object custom_map_objects consists of an array of objects like{
icon: <url string of icon image>, <DOM object (with bindings)> or <function returning DOM (to make more bindings)>,
top: <offset from map top border in pixels, number>,
left: <offset from map top border in pixels, number>,
onclick: <function to be executed>, <DOM object> or <string of HTML code>
}
The approach is very flexible: for icon you can use an url (including external), DOM object or function, returning DOM object. jQuery is allowed here ($ object). onclick can be a function to be called on click, a DOM object or an HTML code to be shown in a popup. Some ideas for a plugin:IP camera n the map: use small image from your camera as the icon and big image for onclick HTML code.Same as previous, but add Open/Close button in popup to operate your doorAdd local weather forcast informer and go to the website of your weather provider on click to get detailed info.Use trafic jam informer as icon and open Yandex or Google Maps in a new tab on click.Share your favorite custom objects in comments below!

JORDI
Posts: 1
Joined: 11 May 2011 11:56

COSTUM MAP ICON IT'S SHOWN ON EVERY MAP

Post by JORDI » 25 May 2012 11:09

First of all, thanks for your examples.
I have been using them to view an IP camera on map view. It uses Java and I get the video image openning a web page with the java code.
Is it possible that the icon appears only on the map that you want to show?
Thanks,
Jordi

giaza
Posts: 1
Joined: 16 Jul 2014 16:10

Re: Plugins for Z-Way/Z-Cloud

Post by giaza » 16 Jul 2014 16:21

Hi I'm new to z-wave develpment,
I am interested in this type of customization.
Can you please explain exactly the steps necessary?
Is this server javascript or client?
What do you mean with "user configuration"? excuse me if these seem like obvious questions.
Thanks in adavance.

User avatar
PoltoS
Posts: 5061
Joined: 26 Jan 2011 19:36

Re: Plugins for Z-Way/Z-Cloud

Post by PoltoS » 18 Jul 2014 11:38

Forget about this post. It is outdated. Please check the new UI and new Automation engine

Locked