JS'ed SVG for Siemens RDG1x0KN thermostats - lpala - 12.01.2017
Hi All,
I spent today trying to reproduce Siemens thermosta in SVG, scripted in JS for getting values.
Please use it as image and not icon and edit with a text editor to adjust group addresses.
Enjoy
Luca
UPDATE: I'm using it with a two pipes plant in two-stage configuration. Object from thermostat are:
1) primary heating -> 25 Heating output primary
2) secondary heating -> 26 Heating output secondary
3) primary cooling -> 27 Cooling output primary
4) speed -> 35 Fan output
5) mode -> 16 Room operating mode: State
6) temperature -> 21 Room temperature
7) setpoint -> 24 Room temp: Current setpoint
RE: JS'ed SVG for Siemens RDG1x0KN thermostats - buuuudzik - 12.01.2017
Please check this example of svg controlled via js:
http://forum.logicmachine.net/showthread.php?tid=275&page=4
I can also prepare something to start for you. If this wouldn't work please change '0' to '1' or other value, it depends on how many other images do you have in your visualisation.
Code: $(function(){
$('object').load(function() {
var svg = $('.siemens')[0].firstChild; // Choosing svg
var svgDoc = svg.contentDocument; // Choosing content from svg
var temperature = svgDoc.getElementById("temperature"); // Choosing temperature from content
var setpoint = svgDoc.getElementById("setpoint"); // Choosing setpoint from content
var primary = svgDoc.getElementById("primary"); // Choosing primary from content
var secondary = svgDoc.getElementById("secondary"); // Choosing secondary from content
var radiator = svgDoc.getElementById("radiator"); // Choosing radiator from content
var speed0_16 = svgDoc.getElementById("speed0_16"); // Choosing speed0_16 from content
var speed16_33 = svgDoc.getElementById("speed16_33"); // Choosing speed16_33 from content
var speed33_50 = svgDoc.getElementById("speed33_50"); // Choosing speed33_50 from content
var speed50_83 = svgDoc.getElementById("speed50_83"); // Choosing speed50_83 from content
var speed83_100 = svgDoc.getElementById("speed83_100"); // Choosing speed83_100 from content
var fan = svgDoc.getElementById("g24"); // Choosing fan from content
var heat = svgDoc.getElementById("g39"); // Choosing heat from content
var cool = svgDoc.getElementById("g34"); // Choosing cool from content
// Update temperature
actual_temp = Scada.encodeGroupAddress('1/1/10'); // temperature
objectStore.addListener(actual_temp, function(obj, type) {
console.log(temperature, obj.value)
temperature.textContent= obj.value
});
});
});
At this moment I have only time for such little help Maybe tomorrow
I see also some buttons, can you describe how do you change parameters on real thermostat?
RE: JS'ed SVG for Siemens RDG1x0KN thermostats - lpala - 13.01.2017
(12.01.2017, 21:54)buuuudzik Wrote: Please check this example of svg controlled via js:
http://forum.logicmachine.net/showthread.php?tid=275&page=4
I can also prepare something to start for you. If this wouldn't work please change '0' to '1' or other value, it depends on how many other images do you have in your visualisation.
Code: $(function(){
$('object').load(function() {
var svg = $('object')[0]; // Choosing svg
var svgDoc = svg.contentDocument; // Choosing content from svg
var temperature = svgDoc.getElementById("temperature"); // Choosing temperature from content
var setpoint = svgDoc.getElementById("setpoint"); // Choosing setpoint from content
var primary = svgDoc.getElementById("primary"); // Choosing primary from content
var secondary = svgDoc.getElementById("secondary"); // Choosing secondary from content
var radiator = svgDoc.getElementById("radiator"); // Choosing radiator from content
var speed0_16 = svgDoc.getElementById("speed0_16"); // Choosing speed0_16 from content
var speed16_33 = svgDoc.getElementById("speed16_33"); // Choosing speed16_33 from content
var speed33_50 = svgDoc.getElementById("speed33_50"); // Choosing speed33_50 from content
var speed50_83 = svgDoc.getElementById("speed50_83"); // Choosing speed50_83 from content
var speed83_100 = svgDoc.getElementById("speed83_100"); // Choosing speed83_100 from content
var fan = svgDoc.getElementById("g24"); // Choosing fan from content
var heat = svgDoc.getElementById("g39"); // Choosing heat from content
var cool = svgDoc.getElementById("g34"); // Choosing cool from content
// Update temperature
actual_temp = Scada.encodeGroupAddress('1/1/10'); // temperature
objectStore.addListener(actual_temp, function(obj, type) {
console.log(temperature, obj.value)
temperature.textContent= obj.value
});
});
});
At this moment I have only time for such little help Maybe tomorrow
I see also some buttons, can you describe how do you change parameters on real thermostat?
HI @buuuudzik,thanks for your hints. I've used embedded js at the moment. I'm not so familiar with js. I've used edgars example and tried to adapt it to my use case. I'll have a look at you example for custom js. It would be better because we can use only one instance of the image. I don't really know how to identify them from custom js.
I actually change parameters with standard visualization objs. The thermostat is read only at the moment.
Buttons and rotatory are not yet used (really i don't know how to get events from SVG and make them change objs status). Could you give some other hint for both questions?
Thanks
PS: I've updated the image in first post.
RE: JS'ed SVG for Siemens RDG1x0KN thermostats - buuuudzik - 13.01.2017
I've updated above script and now when you use it and add Custom class "siemens" to your svg image i visualisation editor, script should work.
This is for writing value from Group address(1/1/10) to svg element(temperature), but user can't change this value:
Code: // Update temperature
actual_temp = '1/1/10'; // temperature
grp.listen(actual_temp, function(obj, type) {
temperature.textContent= obj.value
});
The problem(for me) is how to prepare the edit function. At this moment I can prepare this by adding some special buttons + and minus or clicking on symbols.
Maybe Edgars can tell how it is possible in other way(e.g. like it is with changing temperature on default visualisation)
|