Custom Widgets-Touch Config

[JoseJimenez94]

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.

[Daniel]

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

[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?

[Daniel]

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.

[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?

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.

[Daniel]

but you have to change widget ID as it must be unique.

[JoseJimenez94]

but you have to change widget ID as it must be unique.

Well, i did it and there's no way

[Daniel]

Then try this one https://drive.google.com/file/d/111XC3Ss...sp=sharing
Key: alarm_fire_alert3
Name: as you like

[JoseJimenez94]

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...

[Daniel]

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.

[JoseJimenez94]

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?

[JoseJimenez94]

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.

[Daniel]

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