Posts: 36
Threads: 19
Joined: Feb 2018
Reputation:
0
Hi guys
Im trying to do custom widgets myself in Touch Config. I've been some documentation about it, but i have some questions.
Do I need to use a specific program to compile a .js file (JavaScript)? or can i use the Tool defined in "Config"?
Futhermore, in Touch Config Panel, there is a upload button. Do I have to use it to upload the .js file where the widget is?
Please I need some help. Thank you.
Posts: 4572
Threads: 23
Joined: Aug 2017
Reputation:
206
Hi
No special tool, notepad++ or similar will just do.
You have to zip it to tra.gz format. You can use 7zip for that.
What is important while uploading the widget ID must be unique for example here
Code: $(function() {
$.i18n.add('mosaic.alarm_fire_alert', {"ru" :{
ctitle:"Датчик задымления с оповещениями",
alert: "Сработал датчик задымления"
}}),
Widget.alarm_fire_alert3 = Widget.extend({
config : {
title : $.tr('mosaic.alarm_fire_alert.ctitle', 'Fire sensor with alerts'),
fields : {
title : {
datatype : "string",
title : $.tr('mosaic.wtitle', 'Title')
}
},
objects : {
object : {
datatype : 1,
title : $.tr('mosaic.alarmobject', 'Alarm Status Object')
}
},
settings : {}
},
changeValue : function(name, value) {
if (value) {
alertShow(
$.tr('mosaic.alarm_fire_alert.alert', 'Smoke detector triggered'),
false,
this,
"danger"
)
}
return this.trigger("changed_value");
}
})
WidgetView.alarm_fire_alert3 = WidgetView.extend({
width : 2,
height : 2,
init : function() {
if($(window).width()<=800) {
this.width=1;
this.height=1;
}
this.listenTo(this.model, "changed_value", this.changed_value);
},
changed_value : function() {
if (this.model.getValue("object")) $(".widget", this.$el).addClass('widget_alarm');
else $(".widget", this.$el).removeClass('widget_alarm');
},
template: _.template(" \
<div class=\"widget widget_protection w-protect widget-fire<%=(getValue('object') ? ' widget_alarm' : '')%>\"> \
<div class=\"widget-title widget-title_fire\"> \
<div class=\"txt\"><%=title() || ctitle()%></div> \
</div> \
<span class=\"indicator-protection\"> \
<span class=\"on\">on</span> \
<span class=\"alarm\">alarm</span> \
</span> \
</div> \
"),
afterRender : function() {
var t = this;
$(window).on('resize', function(){
var w = $(window).width();
if (t.width==2 && w<=800) t.size(1, 1);
else if (t.width==1 && w>800) t.size(2, 2);
});
},
})
})
alarm_fire_alert3 is the ID and it is used twice.
While importing widget in Mosaic the Key field must be widget ID. alarm_fire_alert3 in this case.
BR
------------------------------
Ctrl+F5
Posts: 36
Threads: 19
Joined: Feb 2018
Reputation:
0
28.02.2018, 11:29
(This post was last modified: 28.02.2018, 11:37 by JoseJimenez94.)
Thank you!
But now I have a problem. When i try to modify a widget and upload then, nothing happens.
I have tried to modify just the tittle and when i upload the .tar.gz, the widget doesn't appear (error message doesn't appear neither).
i don't understand what is happens.
I just want to do a widget of two switches (a general switch for one detector and a switch for one light, in parallel) on/off (with their status), but there is no way to get it
Or maybe there is some way to put two different widgets together?
Posts: 4572
Threads: 23
Joined: Aug 2017
Reputation:
206
(28.02.2018, 11:29)JoseJimenez94 Wrote: Thank you!
But now I have a problem. When i try to modify a widget and upload then, nothing happens.
I have tried to modify just the tittle and when i upload the .tar.gz, the widget doesn't appear (error message doesn't appear neither).
i don't understand what is happens.
I just want to do a widget of two switches (a general switch for one detector and a switch for one light, in parallel) on/off (with their status), but there is no way to get it
Or maybe there is some way to put two different widgets together?
Make sure that you use widget ID as Key and it is unique.
------------------------------
Ctrl+F5
Posts: 36
Threads: 19
Joined: Feb 2018
Reputation:
0
(28.02.2018, 11:40)Daniel. Wrote: (28.02.2018, 11:29)JoseJimenez94 Wrote: Thank you!
But now I have a problem. When i try to modify a widget and upload then, nothing happens.
I have tried to modify just the tittle and when i upload the .tar.gz, the widget doesn't appear (error message doesn't appear neither).
i don't understand what is happens.
I just want to do a widget of two switches (a general switch for one detector and a switch for one light, in parallel) on/off (with their status), but there is no way to get it
Or maybe there is some way to put two different widgets together?
Make sure that you use widget ID as Key and it is unique.
Im sure. I just change the tittle (in objects), i dont change Key or nothing more. I use the same widget ID as key.
Posts: 4572
Threads: 23
Joined: Aug 2017
Reputation:
206
but you have to change widget ID as it must be unique.
------------------------------
Ctrl+F5
Posts: 36
Threads: 19
Joined: Feb 2018
Reputation:
0
(28.02.2018, 11:57)Daniel. Wrote: but you have to change widget ID as it must be unique.
Well, i did it and there's no way
Posts: 4572
Threads: 23
Joined: Aug 2017
Reputation:
206
Then try this one https://drive.google.com/file/d/111XC3Ss...sp=sharing
Key: alarm_fire_alert3
Name: as you like
------------------------------
Ctrl+F5
Posts: 36
Threads: 19
Joined: Feb 2018
Reputation:
0
(28.02.2018, 12:43)Daniel. Wrote: Then try this one https://drive.google.com/file/d/111XC3Ss...sp=sharing
Key: alarm_fire_alert3
Name: as you like
yes, when i upload your file, the widget appears.It's ok
But if i change the number 3 in 4 in the code, and i use Key: alarm_fire_alert4, it doesn't appear.
I'm using the program "Brackets", maybe it's the problem? I dont know...
Posts: 4572
Threads: 23
Joined: Aug 2017
Reputation:
206
(01.03.2018, 09:08)JoseJimenez94 Wrote: (28.02.2018, 12:43)Daniel. Wrote: Then try this one https://drive.google.com/file/d/111XC3Ss...sp=sharing
Key: alarm_fire_alert3
Name: as you like
yes, when i upload your file, the widget appears.It's ok
But if i change the number 3 in 4 in the code, and i use Key: alarm_fire_alert4, it doesn't appear.
I'm using the program "Brackets", maybe it's the problem? I dont know...
Remember that widget ID is in two places in JS. Make sure you changed both.
------------------------------
Ctrl+F5
Posts: 36
Threads: 19
Joined: Feb 2018
Reputation:
0
(01.03.2018, 09:18)Daniel. Wrote: (01.03.2018, 09:08)JoseJimenez94 Wrote: (28.02.2018, 12:43)Daniel. Wrote: Then try this one https://drive.google.com/file/d/111XC3Ss...sp=sharing
Key: alarm_fire_alert3
Name: as you like
yes, when i upload your file, the widget appears.It's ok
But if i change the number 3 in 4 in the code, and i use Key: alarm_fire_alert4, it doesn't appear.
I'm using the program "Brackets", maybe it's the problem? I dont know...
Remember that widget ID is in two places in JS. Make sure you changed both.
Well, i discovered that the problem was how i was compressing the files. I used the program PeaZip and it works
Now i'm trying to use the icon "General switch" of Touch Config for my program but i'm not sure how to put into. Is there any special class to use in the template?
Posts: 36
Threads: 19
Joined: Feb 2018
Reputation:
0
Someone knows if it's possible to put together (in the same widget) one general switch and another switch(light) in the app Mosaic. I'm trying to modify the templates to join them, but it doesn't work.
I would greatly appreciate your help.
Posts: 4572
Threads: 23
Joined: Aug 2017
Reputation:
206
Hi
In Touch all the CSS and JS are grouped in to common file. CSS contain all the graphics too. If you want to modify something you have to use it.
Send me your email to PM so I will send you the files. Too big to drop here.
BR
------------------------------
Ctrl+F5
|