[SOLVED] Catch Openhab event in my Javascript

Apps & Services HABPanel
1

Relative new to Openhab :slight_smile:

I am using Inkscape to make a plan, and showing it in a widget. I am able to switch lights and so, and change the icons. So far so good.

I wonder, if its possible to change the elements within the SVG with java. If you set the ID of the object within Inkscape, would you be able to get the elementID from java, and change color, placement, width, length and so dynamically?

Usefull for eg:

  • Place the sun over my home acording to time of day
  • Having simple graphic bars showing temp/lux or similar
  • Show dimming values of lights as a bar

Anyone done this? Examples would be much apreciated.
Or maybe there is a different way of doing this?
Or maybe its not possible at all. I would like to avoid using 101 icons to show from 0-100% of something graphically :slight_smile:

1 Like
2

Update.

I have learned how to fecth variables from Openhab in my Javascript, using the scope. That works. But I am struggling with catching an event, when the variable changes, so that I do not need to poll it constantly. My code

(function() {

‘use strict’;
angular
.module(‘app’, [])
.controller(‘ngclickCtrl’, [’$scope’, function($scope) {

var handler = $scope.$on(‘smarthome/items/Ude_Temp/statechanged’, UpdateVar);

function UpdateVar() {
	var MyUpdatedItemValue = $scope.itemValue('Ude_Temp');
};

}]);

})();

What I want to do, is fetch the variable (Item) ‘Ude_Temp’, when the variable changes.

What is wrong with the code ? The UpdateVar function is never called. I have some problems finding examples and documentation, how to do this.

My sources, that I struggle to understand:


https://ultimatecourses.com/blog/all-about-angulars-emit-broadcast-on-publish-subscribing

Or is there any other way, to activate a javascript, when an item changes?

3

In your first post, I thought you were talking about a Habpanel widget! Looks like you are looking for Javascript support for scripted automation. Start here (currently being updated with more details) and then take a look at the helper libraries, specifically the examples. I’ve tagged your post with jsr223 (others are subscribed to that tag). If that doesn’t help, come shout back here.

Wait… are you talking about a Habpanel widget?

4

Thanx for your answer :slight_smile:

Yes. I have a habpanel widget, that is mainly one big SVG. I lazy load a js script, css and svg.

And I would like to script this SVG from Hus.js, to make animations, when an event occur. But that means, that I have to catch these events, when a state changes. I do already have access to the items, but it would be nice to detect when they change, and only act upon changes.

5

I moved your topic over to the Habpanel category, which may get some more attention for your question.

6

I think the best way to get it done would be with ngStyle if possible - you can specify an object in your scope and use expressions involving itemState() etc. (example), it should be reactive to changes.
If you really want to subscribe to events though in a standard way, this is possible - inject OHService in your controller and use OHService.onUpdate like this:

7

You are right. What I wanted to do, I can do with something like this:

ng-style = { ‘y’ : 457.8-12.8-(itemState(‘Washer_progress’)*4.578), ‘height’: itemState(‘Washer_progress’)*4.578 }

No need to capture events to update CSS :slight_smile:
I am still learning.

Thank you

1 Like