Posts: 184
Threads: 39
Joined: Sep 2015
Reputation:
4
(11.12.2017, 11:15)Daniel. Wrote: I do it always in private browsing then you are sure all is fresh. Good practice is to clear browser cache when strange things start to happen.
Thanks! Reloading the browser did the trick. I had to do this even in private mode.
Another question: the addresses I use are boolean. Now when it is set to 1, the plan is shown. If I then go to another page on my visualization, and then the value returns to 0, the plan is shown again. Is there a way to avoid this?
So the plan should only show when the variable is set to 1 and not when it returns to 0.
BR
Posts: 7309
Threads: 41
Joined: Jun 2015
Reputation:
419
Code: $(function(){
if (typeof grp != 'undefined') {
grp.listen('1/1/2', function(object, state) {
if (object.value) {
showPlan(42);
}
});
grp.listen('1/1/3', function(object, state) {
if (object.value) {
showPlan(42);
}
});
}
});
Posts: 184
Threads: 39
Joined: Sep 2015
Reputation:
4
(11.12.2017, 11:52)admin Wrote: Code: $(function(){
if (typeof grp != 'undefined') {
grp.listen('1/1/2', function(object, state) {
if (object.value) {
showPlan(42);
}
});
grp.listen('1/1/3', function(object, state) {
if (object.value) {
showPlan(42);
}
});
}
});
Perfect!
Thanks.
Posts: 152
Threads: 12
Joined: Sep 2015
Reputation:
10
(16.12.2016, 14:58)admin Wrote: Please post in English next time ![Smile Smile](https://forum.logicmachine.net/images/smilies/smile.png)
The task is to show a specific plan depending on a certain object value.
Code: $(function(){
if (typeof grp != 'undefined') {
grp.listen('1/1/1', function(object, state) {
var value = object.value;
if (state == 'value') {
if (value == 1) {
showPlan(11);
}
else if (value == 2) {
showPlan(12);
}
else if (value == 3) {
showPlan(13);
}
}
});
}
});
Hi admin, I have some problems with this script.
I use boolen object, I changed value == 1 to value == true/false.
When I'm changing value from false to true, my visu page is switching.
But when I Send True once again nothing happens. to make it works I nedd to switch my object to false and then to true.
whats the reason of this behavour? (tested on 20170620 FW)
the second thing I need is the opposite task. I need to write some value to object when specific plan is Opened. could you help me?
Posts: 1746
Threads: 6
Joined: Jul 2015
Reputation:
115
22.01.2018, 08:35
(This post was last modified: 22.01.2018, 08:36 by Erwin van der Zwart.)
Hi,
Change line 16 with extra parameter to execute on same object value like this:
},true);
BR,
Erwin
Posts: 152
Threads: 12
Joined: Sep 2015
Reputation:
10
(22.01.2018, 08:35)Erwin van der Zwart Wrote: Hi,
Change line 16 with extra parameter to execute on same object value like this:
},true);
BR,
Erwin
Thanks, Erwin. what about my second question?
"the second thing I need is the opposite task. I need to write some value to object when specific plan is Opened. could you help me?"
Posts: 1746
Threads: 6
Joined: Jul 2015
Reputation:
115
22.01.2018, 09:09
(This post was last modified: 22.01.2018, 09:40 by Erwin van der Zwart.)
Hi,
Try this:
Code: $(function(){
var previousPlanId = 0;
$(document).on('vclick click', function() {
writecurrentpage();
});
function writecurrentpage(){
if ( currentPlanId == 1 && currentPlanId != previousPlanId ) {
grp.write('1/1/1', currentPlanId);
previousPlanId = currentPlanId;
}
}
});
Or
Code: $(function(){
var previousPlanId = 0;
setInterval(function(){
if ( currentPlanId != previousPlanId ) {
grp.write('1/1/1', currentPlanId);
previousPlanId = currentPlanId;
}
}, 1000);
});
BR,
Erwin
Posts: 7309
Threads: 41
Joined: Jun 2015
Reputation:
419
There's a showplan event that can be used:
Code: $(function(){
$('body').on('showplan', function(e, id) {
console.log('current plan id is', id);
});
});
As for value comparison, can you post whole code?
Posts: 250
Threads: 67
Joined: May 2017
Reputation:
0
Hi,
is there the possibility to hide/show a specific object from visualization on an event accours?
Thanks
Peppe
Posts: 1746
Threads: 6
Joined: Jul 2015
Reputation:
115
02.03.2018, 11:07
(This post was last modified: 02.03.2018, 11:08 by Erwin van der Zwart.)
Hi,
Use custom JS like below and add custom class 'hidebyknx' to your elements that needs to be included:
Code: $(function(){
grp.listen('1/1/1', function(object, state) {
if (state == 'value' && object.value == true) {
$(".hidebyknx").addClass("hide");
} else if (state == 'value' && object.value == false) {
$(".hidebyknx").removeClass("hide");
}
}, true);
});
BR,
Erwin
Posts: 250
Threads: 67
Joined: May 2017
Reputation:
0
(02.03.2018, 11:07)Erwin van der Zwart Wrote: Hi,
Use custom JS like below and add custom class 'hidebyknx' to your elements that needs to be included:
Code: $(function(){
grp.listen('1/1/1', function(object, state) {
if (state == 'value' && object.value == true) {
$(".hidebyknx").addClass("hide");
} else if (state == 'value' && object.value == false) {
$(".hidebyknx").removeClass("hide");
}
}, true);
});
BR,
Erwin
It works, thank you so much!
is there a list of applicable custom classes (knx and not knx)?
eg. I would need to refresh the values of the objects contained in a plan or widget when it is displayed and I do not want to bore you with too many requests
Posts: 1746
Threads: 6
Joined: Jul 2015
Reputation:
115
Hi,
Objects are always refreshed on changes so i don’t see why you need to do that..
There is no list of classnames and they have nothing to do with KNX ...
BR,
Erwin
Posts: 250
Threads: 67
Joined: May 2017
Reputation:
0
(02.03.2018, 19:42)Erwin van der Zwart Wrote: Hi,
Objects are always refreshed on changes so i don’t see why you need to do that..
There is no list of classnames and they have nothing to do with KNX ...
BR,
Erwin
sorry for not explaining better: when I open a widget containing objects, often the values of the objects (feeds) are not updated and I have to do a group reading - myobject:read() by clicking a button.
I would like to know if it is possible to read automatically when the page is opened. Thank you.
Posts: 1746
Threads: 6
Joined: Jul 2015
Reputation:
115
Yes i understand, but you should not need it..
There must be a reason why your objects are not in sync, you need to find out why instead of implementing a bandage that should not be there..
BR,
Erwin
Posts: 12
Threads: 3
Joined: Jun 2017
Reputation:
0
(11.10.2016, 09:59)buuuudzik Wrote: Here is some svg image and custom script which can be used for learning manipulating svg images by custom javascript. I used Inkscape for editing svg image(e.g. adding new elements).
1. Copy to "Custom javascript":
Code: $(function(){
$('object').load(function() {
var svg = $('object')[0]; // Choosing svg
var svgDoc = svg.contentDocument; // Choosing content from svg
var svgItem = svgDoc.getElementById("rect4136"); // Choosing blind from content
var svgItem1 = svgDoc.getElementById("g4136"); // Choosing window from content
var svgItem2 = svgDoc.getElementById("rect4154-4"); // Choosing light from content
position_plus = Scada.encodeGroupAddress('6/0/54'); // Position
objectStore.addListener(position_plus, function(obj, type) {
height = Number( svgItem.getAttribute("height") ) + 10;
if ( height >= 100 ) { svgItem.setAttribute('height', '100') } else if ( height < 100 ) { svgItem.setAttribute('height', height) }
height = svgItem.getAttribute("height");
if (height > 50) {svgItem.style.fill='black'; svgItem2.style.opacity= '0'} else {svgItem.style.fill='red'; svgItem2.style.opacity= '80'}
});
position_minus = Scada.encodeGroupAddress('6/0/53'); // Position
objectStore.addListener(position_minus, function(obj, type) {
height = Number( svgItem.getAttribute("height") ) - 10;
if ( height <= 0 ) { svgItem.setAttribute('height', '0') } else if ( height > 0 ) { svgItem.setAttribute('height', height) }
height = svgItem.getAttribute("height");
if (height > 50) {svgItem.style.fill='black'; svgItem2.style.opacity= '0'} else {svgItem.style.fill='red'; svgItem2.style.opacity= '80'}
});
// onclick blind-up
svgItem.addEventListener('click', function (event) {
}, false);
svgItem.addEventListener('click', function (event) {
svgItem.setAttribute('height', '0')
}, true);
// onclick blind-down
svgItem1.addEventListener('click', function (event) {
}, false);
svgItem1.addEventListener('click', function (event) {
svgItem.setAttribute('height', '100');
}, true);
});
});
2. Upload 'interactive.svg' to /Images/Backgrounds'.
3. You can also add some buttons which change +/-10% height.
Currently they should be created in this way:
For +10%: '6/0/54' which send 0 and 1
For -10%: '6/0/53' which send 0 and 1
4. Try manipulating this svg![Wink Wink](https://forum.logicmachine.net/images/smilies/wink.png)
Hello buuuudzik, and everyone,
I'm trying your script with svg but it's doesn't work, I think I failed to link svg to script, I don't understand this line :
var svg = $('object')[0]; // Choosing svg
Can you explain me how to choose svg please ?
Thanks a lot
Adrien
Posts: 940
Threads: 161
Joined: Jul 2015
Reputation:
33
04.03.2018, 21:14
(This post was last modified: 04.03.2018, 21:42 by buuuudzik.)
was for selecting the container of your svg element but better way(because you probably have more than one svg image or object) is to add Additional class 'blind1' to this svg image in the visualisatiuon editior and select in this way:
Code: $('.blind1 > object')
I've tested a minute ago and it seems to work but now I propose to generate HTML via Custom Javascript or create simple app for same task.
Full code:
Code: // Manipulating SVG images
$(function(){
$('.blind1 > object').load(function() {
var svg = $('.blind1 > object')[0]; // Choosing svg
var svgDoc = svg.contentDocument; // Choosing content from svg
var svgItem = svgDoc.getElementById("rect4136"); // Choosing blind from content
var svgItem1 = svgDoc.getElementById("g4136"); // Choosing window from content
var svgItem2 = svgDoc.getElementById("rect4154-4"); // Choosing light from content
position_plus = '32/1/15'; // Position
grp.listen(position_plus, function(obj, type) {
if (type == 'init') return false;
let height = Number( svgItem.getAttribute("height") ) + 10;
console.log('plus, nowa: ', height)
if (height >= 100) svgItem.setAttribute('height', '100');
else if (height < 100) svgItem.setAttribute('height', height);
if (height > 50) {
svgItem.style.fill='black';
svgItem2.style.opacity= '0';
} else {
svgItem.style.fill='red';
svgItem2.style.opacity= '80';
};
}, true);
position_minus = '32/1/16';
grp.listen(position_minus, function(obj, type) {
if (type == 'init') return false;
let height = Number( svgItem.getAttribute("height") ) - 10;
console.log('minus, nowa: ', height)
if (height <= 0) svgItem.setAttribute('height', '0');
else if (height > 0) svgItem.setAttribute('height', height);
if (height > 50) {
svgItem.style.fill='black';
svgItem2.style.opacity= '0';
} else {
svgItem.style.fill='red';
svgItem2.style.opacity= '80';
};
}, true);
// onclick blind-up
svgItem.addEventListener('click', function (event) {
}, false);
svgItem.addEventListener('click', function (event) {
svgItem.setAttribute('height', '0')
}, true);
// onclick blind-down
svgItem1.addEventListener('click', function (event) {
}, false);
svgItem1.addEventListener('click', function (event) {
svgItem.setAttribute('height', '100');
}, true);
});
});
Done is better than perfect
Posts: 12
Threads: 3
Joined: Jun 2017
Reputation:
0
Thank you ! It work perfect, now i can learn about Js and svg manipulation !
Posts: 940
Threads: 161
Joined: Jul 2015
Reputation:
33
(05.03.2018, 07:45)Alphaplasti Wrote: Thank you ! It work perfect, now i can learn about Js and svg manipulation !
Good luck, if you have some question please ask
Done is better than perfect
Posts: 12
Threads: 3
Joined: Jun 2017
Reputation:
0
05.03.2018, 11:02
(This post was last modified: 06.03.2018, 07:04 by Alphaplasti.)
(05.03.2018, 08:13)buuuudzik Wrote: (05.03.2018, 07:45)Alphaplasti Wrote: Thank you ! It work perfect, now i can learn about Js and svg manipulation !
Good luck, if you have some question please ask![Wink Wink](https://forum.logicmachine.net/images/smilies/wink.png)
Thanks sooo a last question about svg manipulation, How to change a transform function, like "transform="rotate(140, 24, 24)" of a svg ?
I tried to adapt Js embedded scrip from svg but It dont work in JS, I've make a mistake or it's not the same JS ? ( I'm a noob on JS..)
Thanks!
Edit: It's okay, all work, a little mistake in my script thanks !
Posts: 940
Threads: 161
Joined: Jul 2015
Reputation:
33
Done is better than perfect
|