selector ok

Hacene SI HADJ MOHAND
1 parent 9b729ba5
Showing 5 changed files with 152 additions and 3 deletions Show diff stats
js/app/models/PlotObjects/PlotBaseSerieObject.js
js/app/models/PlotObjects/PlotObjectConfig.js
js/app/views/PlotComponents/PlotColorPicker.js
js/app/views/PlotComponents/PlotSerieForm.js
js/app/views/PlotComponents/PlotStandardForm.js
@@ -24,9 +24,11 @@ Ext.define(&#39;amdaPlotObj.PlotBaseSerieObject&#39;, {
         {name: 'serie-yaxis', type: 'string'},
         {name: 'serie-resolution', type: 'int'},
         {name: 'serie-lines-activated', type: 'boolean'},
+        {name: 'serie-lines-color-activated', type: 'boolean'},
         {name: 'serie-lines-style', type: 'string'},
         {name: 'serie-lines-width', type: 'float'},
         {name: 'serie-lines-color', type: 'string'},
+        {name: 'serie-lines-color-rgb', type: 'array'},
         {name: 'serie-symbols-activated', type: 'boolean'},
         {name: 'serie-symbols-type', type: 'string'},
         {name: 'serie-symbols-size', type: 'float'},
@@ -89,10 +91,13 @@ Ext.define(&#39;amdaPlotObj.PlotBaseSerieObject&#39;, {
     {
         this.set('serie-yaxis', amdaPlotObj.PlotObjectConfig.defaultValues.serie.yAxis);
         this.set('serie-resolution', amdaPlotObj.PlotObjectConfig.defaultValues.serie.resolution);
+        
         this.set('serie-lines-activated', true);
         this.set('serie-lines-style', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.style);
         this.set('serie-lines-width', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.width);
         this.set('serie-lines-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.color);
+        this.set('serie-lines-color-activated', false);
+        
         this.set('serie-symbols-activated', false);
         this.set('serie-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.type);
         this.set('serie-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.size);
@@ -105,6 +110,7 @@ Ext.define(&#39;amdaPlotObj.PlotBaseSerieObject&#39;, {
         this.set('serie-timetick-nbmajor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbmajor);
         this.set('serie-timetick-nbminor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbminor);
         this.set('serie-timetick-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.color);
+         this.set('serie-errorbar-lines-color-rgb', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.rgb);
         this.set('serie-timetick-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.type);
         this.set('serie-timetick-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.size);
         this.set('serie-timetick-symbols-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.color);
@@ -150,10 +156,14 @@ Ext.define(&#39;amdaPlotObj.PlotBaseSerieObject&#39;, {
         serieValues['serie-yaxis'] = this.get('serie-yaxis');
         serieValues['serie-resolution'] = this.get('serie-resolution');
+        
         serieValues['serie-lines-activated'] = this.get('serie-lines-activated');
         serieValues['serie-lines-style'] = this.get('serie-lines-style');
         serieValues['serie-lines-width'] = this.get('serie-lines-width');
         serieValues['serie-lines-color'] = this.get('serie-lines-color');
+        serieValues['serie-lines-color-activated'] = this.get('serie-lines-color-activated');
+        serieValues['serie-errorbar-lines-rgb'] = this.get('serie-errorbar-lines-rgb');
+           
         serieValues['serie-symbols-activated'] = this.get('serie-symbols-activated');
         serieValues['serie-symbols-type'] = this.get('serie-symbols-type');
         serieValues['serie-symbols-size'] = this.get('serie-symbols-size');
@@ -138,6 +138,7 @@ Ext.define(&#39;amdaPlotObj.PlotObjectConfig&#39;, {
 				}
 			},
 			projection: 'XY',
+                                                            'rgb' : [0,0,0]
 		},
 		spectro: {
@@ -0,0 +1,9 @@
+/* 
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+Ext.define('amdaPlotComp.PlotColorPicker', {
+	extend: 'Ext.picker.Color',
+    });
+
@@ -82,7 +82,17 @@ Ext.define(&#39;amdaPlotComp.PlotSerieForm&#39;, {
 		});
 		serieItems.push(this.addStandardFieldSet('Error Bar', 'serie-errorbar-activated', this.getErrorBarItems()));
-		
+                                   /**
+                var colorPicker = Ext.create('Ext.menu.ColorPicker', {
+                                                    value: '000000'
+                            });
+                var colorMenu =Ext.create('Ext.menu.Menu', {
+                                items: [{
+                                    text: 'Choose a color',
+                                    menu: colorPicker
+                                }]
+                            }).show();
+		serieItems.push(colorMenu); */
 		return serieItems;
 	}
 });
@@ -13,7 +13,8 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, {
 	requires: [
 		'amdaPlotObj.PlotObjectConfig',
-		'amdaPlotComp.EraseTrigger'
+		'amdaPlotComp.EraseTrigger',
+                                        'amdaPlotComp.PlotColorPicker'
 	],
 	//Object associated to this form
@@ -405,7 +406,8 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, {
 		return [
 			this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles),
 			this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10),
-			this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors)
+			//this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors), 
+                                                            this.addColorsPicker('serie-lines-color')
 		];
 	},
@@ -416,6 +418,123 @@ Ext.define(&#39;amdaPlotComp.PlotStandardForm&#39;, {
 			this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors)
 		];
 	},
+                     manageRGBcolors: function(namePrefix){
+                         var rgb = this.object.get(namePrefix+'-rgb'); 
+                         if(rgb && rgb.length ==3 )
+                             this.object.set(namePrefix, this.rgbToHex(rgb));
+                     },
+                     manageHEXcolors: function(namePrefix){
+                         var hex = this.object.get(namePrefix);
+                         if(hex)
+                              this.object.set(namePrefix+'-rgb', hexToRgb(hex));
+                     },
+                     rgbToHex : function(rgb) {
+                                return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase();
+                    },
+                      hexToRgb: function(hex) {
+                          var arrBuff = new ArrayBuffer(4);
+                          var vw = new DataView(arrBuff);
+                          vw.setUint32(0,parseInt(hex, 16),false);
+                          var arrByte = new Uint8Array(arrBuff);
+
+                          return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
+                        },
+                    addColorsPicker: function (namePrefix) {
+                        
+                                        var colorPicker =  Ext.create('amdaPlotComp.PlotColorPicker', {
+                                                value: '993300',  // initial selected color
+                                                renderTo: Ext.getBody(),
+                                                listeners: {
+                                                    select: function(picker, selColor) {
+                                                        this.object.set(namePrefix, selColor);
+                                                    },
+                                                    scope: this
+                                                }
+                                            });
+		var colorItems = [
+                                                                                  colorPicker ,
+                                                                                {
+				xtype: 'toolbar',
+				bodyStyle: { background: '#dfe8f6' },
+				border: false,
+                                                                              
+				items: [
+                                                                                                  
+					{
+						xtype: 'numberfield',
+						name: 'color-R',
+						fieldLabel: 'R',
+						labelWidth: 15,
+						width: 80,
+						maxValue: 255,
+						minValue: 0,
+						value: 0,
+						listeners: {
+							change: function (field, newValue, oldValue, eOpts) {
+                                                                                                                                                                var rgb = this.object.get(namePrefix+"-rgb");
+                                                                                                                                                                if(rgb && rgb.length ==3 )
+                                                                                                                                                                    rgb[0] = newValue;
+                                                                                                                                                                else
+                                                                                                                                                                    rgb = [newValue,0,0];
+								this.object.set(namePrefix+"-rgb", rgb)
+                                                                                                                                                                this.manageRGBcolors(namePrefix);
+							},
+							scope: this
+						}
+					},
+					' ',
+                                                                                                     {
+						xtype: 'numberfield',
+						name: 'color-G',
+						fieldLabel: 'G',
+						labelWidth: 15,
+						width: 80,
+						maxValue: 255,
+						minValue: 0,
+						value: 0,
+						listeners: {
+							change: function (field, newValue, oldValue, eOpts) {
+								var rgb = this.object.get(namePrefix+"-rgb");
+                                                                                                                                                                if(rgb && rgb.length ==3 )
+                                                                                                                                                                    rgb[1] = newValue;
+                                                                                                                                                                else
+                                                                                                                                                                    rgb = [0, newValue, 0];
+								this.object.set(namePrefix+"-rgb", rgb);
+                                                                                                                                                                this.manageRGBcolors(namePrefix);
+							},
+							scope: this
+						}
+					},
+                                                                                                    ' ',
+                                                                                                    {
+						xtype: 'numberfield',
+						name: 'color-B',
+						fieldLabel: 'B',
+						labelWidth: 15,
+						width: 80,
+						maxValue: 255,
+						minValue: 0,
+						value: 0,
+						listeners: {
+							change: function (field, newValue, oldValue, eOpts) {
+								var rgb = this.object.get(namePrefix+"-rgb");
+                                                                                                                                                                if(rgb && rgb.length ==3 )
+                                                                                                                                                                    rgb[2] = newValue;
+                                                                                                                                                                else
+                                                                                                                                                                    rgb = [0,0,newValue];
+								this.object.set(namePrefix+"-rgb", rgb);
+                                                                                                                                                                this.manageRGBcolors(namePrefix);
+							},
+							scope: this
+						}
+					},
+					
+				]
+			}
+		];
+
+		return this.addStandardFieldSet('Color', namePrefix + '-activated', colorItems);
+	},
 	init: function (config) {
 		var me = this;