Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Je teste l'app et je la termine ======
Mon application doit me permettre de **colorier un rectangle** en **choisissant** les valeurs de rouge, de vert et de bleu.

Pour cela, je dois **utiliser un canevas**, en anglais **canvas**, pour pouvoir dessiner.

  * l'interface de mon application doit me permettre de **choisir** la valeur des couleurs rouge, vert et bleu. Voici l'interface de mon app que je dois réaliser :
{{ :icn:codeorg:couleur01.png |}}

  * J'utilise les **noms de composants** suivant :

^Nom des couleurs^Nom du slider^Nom des labels affichant les valeurs^ 
|labeRouge|sliderRouge|labelRougeValeur|
|labeVert|sliderVert|labelVertValeur|
|labeBleu|sliderBleu|labelBleuValeur|

<WRAP center round info >
Par défaut, le composant slider génère un nombre compris entre 0 et 100. Il est alors nécessaire de **modifier** les **propriétés** des composants slider pour **définir 255 comme valeur maximale**.
</WRAP>

====== Tester l'app ======

Voici le lien vers l'**app partiellement réalisée** et qui est **à finir** :
  * [[https://studio.code.org/projects/applab/SDbk5g6SV9_M7am_9WpKzg|App à tester puis à finir]]

====== Commentaires du code de l'app ======
  * J'active le canevas,
  * et je dessine un grand rectangle de couleur noire : rgb(0,0,0)
{{ :icn:codeorg:couleur03.png |}}
  * dès que le **slider** gérant l'**intensité du rouge** est modifié, je redessine mon rectangle avec la nouvelle couleur. La **valeur numérique** du slider est **mémorisée** dans une **variable** qui est ici appelé **rouge** :  
{{ :icn:codeorg:couleur04.png |}}

<WRAP center round important>
Attention, le composant **slider** génère un **chiffre de 0 à 100**. Il est important de **modifier les propriétés** des composants slider pour que la **valeur maximale** soit **255**. 
</WRAP>

===== Quelques explications ... =====

La fonction **setFillColor()** permet de définir  la couleur de remplissage des dessins. En paramètre, on définit une couleur au **format rgb** de la manière suivante : **setFillColor("rgb(0,0,0)")**.

<WRAP center round tip>
Pour définir le paramètre couleur de la fonction setFilColor() en **fonction de l'intensité du rouge**, je **concatène** des caractères et le **contenu** de la variable **rouge** :
  * "rgb(" + rouge + ",0,0"
{{ :icn:codeorg:dessine07.png |}}
  * ce qui donne setFilColor("rgb(" + rouge + ",0,0");
{{ :icn:codeorg:dessine08.png |}}
</WRAP>

====== Je termine l'app======
  * Je clique sur le bouton **Make my own** pour enregistrer l'application,
  * je **modifie** l'application pour pouvoir définir l'**intensité des autres couleurs verte et bleue**.

==== Retour à l'activité : la codification des couleurs dans les images====
  * [[:icn:codeorg:imagecouleur|Activité Code.org : la codification des couleurs dans les images]]