Farbtastic is not a function

rombautsdidier · Octobre 14, 2019, 1:23

Bonjour,
Je fais face à un petit soucis depuis le passage à la v4.0.21.
Je veux utiliser le widget core circle (qui est visible dans la liste customtemp/circle).
Lorsque je l’applique à la commande couleur, j’ai le message suivant dans la console javascript:
farbtastic is not a function
Ce problème est présent aussi bien dans le dashboard que sur le design.
Suis-je le seul à avoir ce soucis?
Merci

bernardfr.caron · Octobre 14, 2019, 1:44

changer le widget non compatible V4

rombautsdidier · Octobre 14, 2019, 1:57

N’est-ce pas un widget du core?

bernardfr.caron · Octobre 14, 2019, 2:07

possible mais juste pour dire que le plugin n’y est pour rien (il y a juste le tag wifilightV2)

rombautsdidier · Octobre 14, 2019, 2:35

Ok, j’ai déplacé mon post dans une autre catégorie. Si c’est bien lié au core…

bernardfr.caron · Octobre 14, 2019, 3:01

C’est sûr que ce n’est pas le plugin car il n’embarque plus ses propres widgets (mais d’anciens périphériques peuvent l’avoir gardé).
Sinon ce n’est pas plus mal qu’il y ait la police sur les widgets, je l’avais demandé, car à chaque MAJ tout partait en vrille, j’espère que c’est la dernière fois. Bon courage.

rombautsdidier · Octobre 16, 2019, 4:53

Je pense avoir compris la problématique. Lors du passage en v4, le widget Circle est passé en custom template mais le code appelle un fichier js du plugin widget (que j’ai enlevé) ainsi que du CSS. Où devrais-je placer ce css et ce js dans l’arborescence de fichiers?

rombautsdidier · Octobre 16, 2019, 5:43

J’ai trouvé le chemin pour le customTemplates mais le circle ne s’affiche pas…

rombautsdidier · Octobre 16, 2019, 5:59

Ben voici ce que j’ai… On dirait que je n’ai pas accès au fichier…

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /data/customTemplates/dashboard/cmd.action.color.circle/farbtastic.css
on this server.<br />
</p>
</body></html>

Salvialf · Octobre 16, 2019, 6:11

Salut,

C’est quel fichier exactement?

Je n’ai pas du tout testé la migration de widgets de la V3 vers la V4 mais si tu sais où se situe le fichier html de ton widget tu peux copier le code ici le chemin doit y être indiqué.

Sinon t’as regardé si t’as un répertoire plugins/widget ? C’est pas là que les fichiers sont attendus?

Édit: ou un F12 sur le widget pour voir où il cherche le fichier?

rombautsdidier · Octobre 16, 2019, 6:18

Je pense avoir été trop vite dans ma migration car j’ai déinstallé le plugin Widget dans lequel était le fichier en question.

Voici le chemin avec le plugin widget:

plugins/widget/core/template/dashboard/cmd.action.color.circle/farbtastic.js

Lors du passage à la v4, tout ce petit monde a été copié (ou déplacé) vers un autre répertoire:

data/customTemplates/dashboard/cmd.action.color.circle/farbtastic.js

Malgré cela, après avoir modifié le chemin dans le code (via le nouveau menu widget de la v4), je n’ai plus d’erreur javascript mais le circle ne s’affiche pas et j’ai ce message dans la console de Firefox.

Salvialf · Octobre 16, 2019, 6:21

Hésites pas à partager le code et les fichiers je check ça si tu veux…

rombautsdidier · Octobre 16, 2019, 6:22

Voici, sympa, merci

<div class="cmd cmd-widget" data-type="action" data-subtype="color" data-cmd_id="#id#" data-cmd_uid="#uid#" style="width: 146px;height: 146px;">
    <div class="action_colorpicker"></div>
    <script>
        $.include(['data/customTemplates/dashboard/cmd.action.color.circle/farbtastic.js', 'data/customTemplates/dashboard/cmd.action.color.circle/farbtastic.css'], function() {
            $('.cmd[data-cmd_id=#id#] .action_colorpicker').off();
            if ($('.cmd[data-cmd_id=#id#] .action_colorpicker').length > 0) {
                $('.cmd[data-cmd_id=#id#] .action_colorpicker').farbtastic();
            	$.farbtastic($('.cmd[data-cmd_id=#id#] .action_colorpicker')).setColor(('#state#' != '') ? '#state#'.substring(0,7) : '#000000');
                $('.cmd[data-cmd_id=#id#] .action_colorpicker').on('mouseup', function() {
                    jeedom.cmd.execute({id: '#id#', value: {color: $.farbtastic($(this)).color}});
                });
            }
        });
    </script>
</div>

Salvialf · Octobre 16, 2019, 6:26

Il va me falloir les 2 fichiers aussi stp… si ça passe pas change l’extension par .txt ou dans un fichier zippé si léger

Salvialf · Octobre 16, 2019, 6:29

Au fait t’as redimensionné la tuile sur le dashboard après avoir modifié le code?

rombautsdidier · Octobre 16, 2019, 6:33

Voici un lien pour télécharger:

J’ai tenté le redimensionnement de la tuile mais rien n’y fait.

Salvialf · Octobre 16, 2019, 7:15

Me revoilà !

Voici le code fonctionnel mis à jour V4:

<div class="colorCircle cmd cmd-widget" data-type="action" data-subtype="color" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div class="action_colorpicker"></div>
  <style>
.colorCircle {
  width: 146px;
  height: 146px;
}
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 146px;
  height: 146px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 36px;
  left: 36px;
  width: 75px;
  height: 75px;
}
.farbtastic .wheel {
  background: url(data/customTemplates/dashboard/cmd.action.color.circle/wheel.png) no-repeat;
  width: 146px;
  height: 146px;
}
.farbtastic .overlay {
  background: url(data/customTemplates/dashboard/cmd.action.color.circle/mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url(data/customTemplates/dashboard/cmd.action.color.circle/marker.png) no-repeat;
    }
  </style>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        $.include(['data/customTemplates/dashboard/cmd.action.color.circle/farbtastic.js'], function() {
            $('.cmd[data-cmd_id=#id#] .action_colorpicker').off();
            if ($('.cmd[data-cmd_id=#id#] .action_colorpicker').length > 0) {
                $('.cmd[data-cmd_id=#id#] .action_colorpicker').farbtastic();
            	$.farbtastic($('.cmd[data-cmd_id=#id#] .action_colorpicker')).setColor((_options.display_value != '') ? _options.display_value.substring(0,7) : '#000000');
                $('.cmd[data-cmd_id=#id#] .action_colorpicker').on('mouseup', function() {
                    jeedom.cmd.execute({id: '#id#', value: {color: $.farbtastic($(this)).color}});
                });
            }
        });
      }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
    </script>
</div>

Effectivement il ne veut pas accéder au fichier farbtastic.css j’imagine peut-être à tort du fait du contenu du fichier .htaccess ?! Bref du coup plus besoin de ce fichier car j’ai intégré la feuille de cascade dans le code du widget directement + diverses petites mises à jour V4.

Très sympa ce petit widget au passage je vais sûrement y regarder de plus près bientôt

rombautsdidier · Octobre 16, 2019, 7:23

Que dire… Un tout grand merci, c’est nickel.
J’ai dupliqué ton code pour la partie mobile en changeant Dashboard en mobile.
J’ai ensuite sauvegardé le tout, retourner dans la commande et sauvegarder l’onglet affichage et cela fonctionne…!!!

Cela servira à d’autres… Merci encore
Mon design va tout doucement atteindre la perfection

Salvialf · Octobre 16, 2019, 7:58

Si t’as besoin sur d’autres widgets n’hésites pas …surtout des widgets dans ce style là ! J’ai voulu regarder une roue chromatique à intégrer à Jeedom mais je n’ai jamais eu le temps

rombautsdidier · Octobre 16, 2019, 8:00

J’essaie au max d’utiliser ceux qui sont dans le core en appliquant simplement des couleurs via le menu widget… Mais je n’hésiterai pas. Encore MERCI