[🇫🇷] Générer une couleur en fonction d'une valeur/nombre

[vnihoul77]

Salut!
Dans ce tuto étape par étape, nous allons voir comment permettre de générer dynamiquement une couleur en fonction d’une valeur et d’une valeur max (pourcentage).

Un super exemple de cas concret d’utilisation serait d’afficher des offres avec des prix, et de changer la couleur selon le prix. Ou afficher une note sur 10 visuellement.

Exemple ici

FACILE Ce tutoriel est à la portée de tous.

---

PRÉREQUIS

Nous aurons besoin du plugin Pourcent Color, disponible pour 3$ par mois.
Ce tutoriel fonctionne sur n’importe quel plan Bubble.

POURCENT COLOR

---

1. Ajoutez le plugin Pourcent Color à votre application

Dans l’onglet “Plugin” de votre éditeur d’application, cliquez sur “Add a plugin” et recherchez “Pourcent Color”
Abonnez-vous ou achetez le plugin.

2. Configuation initiale

Le plugin Percent Color fonctionne à travers un élément de page et vous donne la couleur finale à travers un état de cet élément. Une fois que vous avez ajouté le plugin à votre application, placez l’élément Color Percent sur la page.

Dans la fenêtre contextuelle des propriétés des éléments du plugin, vous pouvez définir les valeurs et les couleurs utilisées pour générer votre couleur finale.

La couleur de départ et la couleur de fin correspondent au dégradé sur lequel vous souhaitez générer une couleur.

La valeur max correspond à la valeur où la couleur de fin sera atteinte. (La couleur de début est la couleur de la valeur 0 et la couleur de fin est la valeur de la valeur maximale)

Vous pouvez laisser la valeur maximale à 100 si vous utilisez la valeur actuelle formatée en pourcentage.

3. Récupper et utiliser la couleur finale

L’élément expose la couleur finale en tant qu’état.

Pour accéder à cet état, recherchez Color Percent'Render Color (hex) . La valeur est formatée sous la forme d’une couleur hexadécimale (#ff22fe) avec le # inclus.

Voici un exemple avec un texte qui utilise la couleur de résultat comme couleur du texte.

4A. Cas concret

Je veux travailler sur un dégradé qui va de BLEU à ROUGE.
Je veux que la couleur réponde à un input, et qu’elle soit basée sur l’entrée maximale de toutes les entrées.

→ Je souhaite générer une couleur pour la valeur dynamique INPUT sur une échelle dynamique de 0 à MAX INPUT.

Voici la configuration requise:

LIENS

---

Application de démonstration: https: //plugin-demo-iframe.bubbleapps …
Éditeur de démonstration: https://bubble.io/page?name=index&id…

Si vous avez besoin d’aide ou pour aller plus loin avec le plugin, veuillez vous référer à la documentation complète.
Documentation: https://www.notion.so/Embed-iFrame-Detector-…

---

Ce tutoriel est réalisé par la plateforme française Ottho.
Progressez plus vite.