Mise en couleurs de Modules Virtuels

[MAM78]

Tuto sur la mise en couleurs de Modules Virtuels :

 

Je compléterais selon les avancées et selon vos contributions

 

Lien utile sur la codification des couleurs selon les languages utilisé (HTML, ...) :

• https://www.w3schools.com/colors/default.asp

 

Pour le moment j'ai réussi à faire fonctionner le VD en mode édition (DEV).

 

Mais :

• En mode execution sur un navigateur internet sur PC : la barre est tronquée à la moitié
• En mode execution sur smartphone ou tablette : les couleurs ne s'affichent pas

 

Je partage néanmoins le résultat de mon investigation :

 

 

Voici le source :

 

HUE_Color_Setting.vfib.json

 

 

Modifié le 22 février 2018 par MAM78

[MAM78]

Hello, j'essai d'égayer mes VDs en mettant en couleur les labels d'un VD.

 

Je rencontre un petit problème sur la visualisation du VD lorsqu'il est en mode execution et en mode modification.

 

Voici mon exemple : Il s'agit d'un VD qui permet de piloter des lampes Philips HUE et de changer la couleur.

 

L'idée étant d'ajoute une ligne de couleur aligné sur le slider permettant de choisir celle-ci.

 

 

En mode modification, j'obtiens ça :

 

 

En mode exécution, j'obtiens ça :

 

 

Serriez-vous m'expliquer pourquoi la moitié du label est tronqué en mode exécution ?

 

Bon pour le visualisation sur un smartphone ou un tablette, je sais que ça ne fonctionnera pas. Sauf si vous avez une idée géniale.

 

Inutile de m'indiquer que le plugin officiel fait déjà le job , je souhaite y ajouter d'autres fonctions non disponible dans le plugin.

Modifié le 9 janvier 2018 par MAM78

[MAM78]

Dans le même registre de la mise en couleur, je souhaite afficher la couleur qui correspond à la valeur sélectionnée.

 

Mais je le souci suivant. Pour piloter la couleur des ampoules Hue, il convient de modifier un paramètre qui peu prendre une valeur de 0 à 65535.

Celle-ci étant calculée selon la valeur du slider 0 à 100 qui est multipliée par 655,35.

 

Mais pour afficher sur le VD la couleur correspondante, il faut utiliser tags et balises HTML, soit par exemple pour le rouge (valeur 0) en :

• RGB -> (255,0,0)
• Hex- > #ff0000

Auriez vous une idée pour transcoder la valeur numérique 0 à 65536, soit en RGB ou Hex ?

Modifié le 9 janvier 2018 par MAM78

[Nico]

Hum, fait un saut sur le fofo officiel, section VD, il y a un paquet de gars qui font des trucs en couleurs etc et compatible smartphone, j'ai jamais pris le temps de trop regarder.

[MAM78]

Ca fait presque 3/4 d'heure que je cherche sur le fofo officiel et j'ai rien trouvé sur les mises en couleurs.

 

Si tu as un lien je suis preneur 

[OJC]

@MAM78 Pour ce qui est de la conversion HSL <> RGB, tu devrais trouver ton bonheur ici, dans le fichier /colors-8.05.26/lua/colors.lua, les fonctions suivantes :

 

-----------------------------------------------------------------------------
-- Converts an HSL triplet to RGB
-- (see http://homepages.cwi.nl/~steven/css/hsl.html).
-- 
-- @param h              hue (0-360)
-- @param s              saturation (0.0-1.0)
-- @param L              lightness (0.0-1.0)
-- @return               an R, G, and B component of RGB
-----------------------------------------------------------------------------

function hsl_to_rgb(h, s, L)
   h = h/360
   local m1, m2
   if L<=0.5 then 
      m2 = L*(s+1)
   else 
      m2 = L+s-L*s
   end
   m1 = L*2-m2

   local function _h2rgb(m1, m2, h)
      if h<0 then h = h+1 end
      if h>1 then h = h-1 end
      if h*6<1 then 
         return m1+(m2-m1)*h*6
      elseif h*2<1 then 
         return m2 
      elseif h*3<2 then 
         return m1+(m2-m1)*(2/3-h)*6
      else
         return m1
      end
   end

   return _h2rgb(m1, m2, h+1/3), _h2rgb(m1, m2, h), _h2rgb(m1, m2, h-1/3)
end

-----------------------------------------------------------------------------
-- Converts an RGB triplet to HSL.
-- (see http://easyrgb.com)
-- 
-- @param r              red (0.0-1.0)
-- @param g              green (0.0-1.0)
-- @param b              blue (0.0-1.0)
-- @return               corresponding H, S and L components
-----------------------------------------------------------------------------

function rgb_to_hsl(r, g, b)
   --r, g, b = r/255, g/255, b/255
   local min = math.min(r, g, b)
   local max = math.max(r, g, b)
   local delta = max - min

   local h, s, l = 0, 0, ((min+max)/2)

   if l > 0 and l < 0.5 then s = delta/(max+min) end
   if l >= 0.5 and l < 1 then s = delta/(2-max-min) end

   if delta > 0 then
      if max == r and max ~= g then h = h + (g-b)/delta end
      if max == g and max ~= b then h = h + 2 + (b-r)/delta end
      if max == b and max ~= r then h = h + 4 + (r-g)/delta end
      h = h / 6;
   end

   if h < 0 then h = h + 1 end
   if h > 1 then h = h - 1 end

   return h * 360, s, l
end

Il faut juste que tu convertisses ta valeur hue retournée par l'ampoule sur une base 360° puisque si j'ai bien compris, l'API Philips Hue utilise 0-65535 pour l'angle hue. De même, la saturation et la luminosité sont normalement un pourcentage (0-100) là où l'API Philips Hue, si je ne me trompe pas, utilise l'intervalle 0-255.

[MAM78]

Hello @OJC

 

Merci beaucoup, c'était bien la solution, il a fallu adapter un peu le code puisque le code ci-dessus est en base 360 alors que la valeur pour les lampe est sur un échelle de 0 à 65535.

 

J'arrive bien à afficher sur la dernière linge la couleur correspondant à la selection (Couleur, Luminosité et Saturation) 

 

Voici le résultat :

 

Maintenant, j'ai toujours le problème d'affichage des couleurs sur une smartphone ou une tablette.

 

@Nico a laissé entendre que sur le fofo, certaines personnes arrivait rendre l'affichage des couleurs possible.

 

Si vous avez identifié des posts sur le sujet, je suis preneur. Merci d'avance.

 

 

 

[Talwayseb]

@MAM78,

J'avais pas vu ce post !!!

J'ai essayé de faire ça aussi... en vain !!!

As-tu avancé sur le sujet ?

tu as posté ce VD ?

@++

[MAM78]

En mode édition (dev), il fonctionne très bien

En mode execution sur un navigateur internet sur PC : la barre est tronquée à la moitié

En mode execution sur smartphone ou tablette : les couleurs ne s'affichent pas

 

 

Modifié le 22 février 2018 par MAM78

[Talwayseb]

Ok !!!

Ca serait possible de le posté ou de me l'envoyer par MP pour voir le code ?

En te remerciant !!! ;-)

[Kana-chan]

Bonjour,

 

Pour le tronquage en mode exécution, j'ai le même problème avec du texte simple, il retourne à la ligne à la moitié de la fenêtre.

Si tu trouves, je serai heureux d'avoir la solution, je penche pour un problème de rendue html/css ou un truc du genre.

 

Voilà ...

 

[MAM78]

Il y a 1 heure, Talwayseb a dit :

Ok !!!

Ca serait possible de le posté ou de me l'envoyer par MP pour voir le code ?

En te remerciant !!! ;-)

C'est dispo dans le premier POST 

 

Si tu trouves un solution en mode exécution (sur navigateur ou smartphone/tablette), évidement ça m'intéresse

 

[Talwayseb]

 Merci !!!