tuto – élaboration du nuancier

Tuto : Construction Nuancier

Cette page décrit les étapes à suivre pour élaborer le nuancier de la partie Couleur de JSXGraph développée dans le cadre de ce site.

Objectif de notre échéancier qui parait bien simple mais qui demande quelques adaptations.

On souhaite permettre aux utilisateurs de constituer leur propre nuancier à partir de la liste des couleurs disponibles dans JSXGraph et à partir de deux sources externes

De quoi a t-on besoin pour constituer cet outil :

D’un board.
D’une zone de dépôt des couleurs sélectionnées.
De pouvoir sélectionner les couleurs et les déplacer sur la zone de dépôt.
Extraire de cette sélection, une liste des couleurs sélectionnées.

1/ Board

Définir une zone spécifique dans votre html appelée box3

<div id="box3" class="jxgbox" style="width:100%;height:420px;"></div>

Dans la partie Javascript, il faut initialiser le contenu de cette zone en fixant quelques propriétés classiques :

board3=JXG.JSXGraph.initBoard("box3", {pan: {enabled:false},boundingbox: [-10,20,100,-10],
  withLines:true, keepaspectratio:false, axis:false, showInfobox:false,
  defaultAxes: {
    x: { ticks: {visible: true},withLabel: true,name: '',label: {position: 'rt',offset: [10, -20],anchorX: 'right',layer:20} },
    y: { ticks: {visible: true},withLabel: false,name: '', label: {position: 'rt',offset: [-25, -1],anchorY: 'top',}
  },
  zoom: {min: 0.5,max: 2},  layer:20
}, showNavigation:false,showCopyright:false})};
board3.renderer.container.style.backgroundColor='#C3ADC3';

2/ Zone de dépôt :

L’idée est de constituer une zone dans laquelle l’utilisateur pourra en déplaçant les couleurs constituer son nuancier. Il aura également la possibilité de déplacer les couleurs dans l’ordre de son choix. Mais comment faire en sorte que les couleurs se positionnent correctement les unes par rapport aux autres ?

var centre_attractions=[];
const nb_pts_attract=12;
// --------------------------------------------------------------------
// deuxième partie : on créer la zone d'acceuil des couleurs choisies
// --------------------------------------------------------------------
const creation_zone_acceuil=function() {
  const titre = board3.create('text',[10,18.5,"Votre nuancier"],{cssStyle:"font-family:KaTeX_Math", fixed:true,fontsize:16});
  const col=7, haut=17.5, bas=-8;
  const p1 = board3.create('point', [col, haut],{fixed:true,visible:false});
  const p2 = board3.create('point', [col+26, haut],{fixed:true,visible:false});
  const p3 = board3.create('point', [col+26, bas],{fixed:true,visible:false});
  const p4 = board3.create('point', [col, bas],{fixed:true,visible:false});
  const poly = board3.create("polygon", [p1,p2,p3,p4],{Highlight:false,visible:true,fixed:true,fillColor:"white",opacity:1});
  // -----------------------------------------------------------
  //  on genere les points d'accroche des couleurs nb_pts_attract
  // -----------------------------------------------------------
  centre_attractions=[];  
  for (let i=0; i<nb_pts_attract; i++) {
    let pt_poly=board3.create('point',[20,bas-2+i*2],{name:'',fillColor:'lightslategray',Highlight:false,fixed:true,strokeColor:"lightslategray"});
    // on stocke les points dans une liste pour un usage plus tard 
    centre_attractions.push(pt_poly);
  }
}

3 / Elaboration du dispositif de sélection :

Nous allons définir des rectangles de couleur avec différentes propriétés et voir ce qui se passe dans les différents cas. Pour montrer les configurations possibles pour arriver au résultat attendu, nous avons développé différents cas qui permettent de voir et de comprendre le processus à mettre en place pour atteindre l’objectif fixé. Sélectionnez les différents cas pour observer l’effet d’une configuration et le code correspondant.

Cas 1 Cas 2 Cas 3 Cas 4 Cas 5 Cas 6 Cas 7

4/ Extraction des codes couleurs :

Pour extraire les codes couleurs sélectionnés, c’est à dire positionnes dans la zone de dépôt, une solution serait de stocker toutes les couleurs chargées sur le board à partir des rectangle, et ensuite d’effectuer un filtre sur la liste des objets en fonction de leur position et d’en extraire la couleur.

let list_nuancier= tab_nuancier.filter((e)=>e.centre.X()==20).sort(function(a,b){return b.centre.Y()-a.centre.Y()});
let list_couleurs="";
list_nuancier.forEach((e)=> {
   list_couleurs +=e.centre.visProp.fillcolor +"\n";
})
alert(list_couleurs);

Si vous voulez tester, rendez vous sur Jsfiddle : https://jsfiddle.net/spgoo/57zpdw9k/2/