Commit ba2fd748ef27c08c42d76c3861baee6799e97f2a
1 parent
9b729ba5
Exists in
master
and in
68 other branches
selector ok
Showing
5 changed files
with
152 additions
and
3 deletions
Show diff stats
js/app/models/PlotObjects/PlotBaseSerieObject.js
... | ... | @@ -24,9 +24,11 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { |
24 | 24 | {name: 'serie-yaxis', type: 'string'}, |
25 | 25 | {name: 'serie-resolution', type: 'int'}, |
26 | 26 | {name: 'serie-lines-activated', type: 'boolean'}, |
27 | + {name: 'serie-lines-color-activated', type: 'boolean'}, | |
27 | 28 | {name: 'serie-lines-style', type: 'string'}, |
28 | 29 | {name: 'serie-lines-width', type: 'float'}, |
29 | 30 | {name: 'serie-lines-color', type: 'string'}, |
31 | + {name: 'serie-lines-color-rgb', type: 'array'}, | |
30 | 32 | {name: 'serie-symbols-activated', type: 'boolean'}, |
31 | 33 | {name: 'serie-symbols-type', type: 'string'}, |
32 | 34 | {name: 'serie-symbols-size', type: 'float'}, |
... | ... | @@ -89,10 +91,13 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { |
89 | 91 | { |
90 | 92 | this.set('serie-yaxis', amdaPlotObj.PlotObjectConfig.defaultValues.serie.yAxis); |
91 | 93 | this.set('serie-resolution', amdaPlotObj.PlotObjectConfig.defaultValues.serie.resolution); |
94 | + | |
92 | 95 | this.set('serie-lines-activated', true); |
93 | 96 | this.set('serie-lines-style', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.style); |
94 | 97 | this.set('serie-lines-width', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.width); |
95 | 98 | this.set('serie-lines-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.color); |
99 | + this.set('serie-lines-color-activated', false); | |
100 | + | |
96 | 101 | this.set('serie-symbols-activated', false); |
97 | 102 | this.set('serie-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.type); |
98 | 103 | this.set('serie-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.size); |
... | ... | @@ -105,6 +110,7 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { |
105 | 110 | this.set('serie-timetick-nbmajor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbmajor); |
106 | 111 | this.set('serie-timetick-nbminor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbminor); |
107 | 112 | this.set('serie-timetick-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.color); |
113 | + this.set('serie-errorbar-lines-color-rgb', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.rgb); | |
108 | 114 | this.set('serie-timetick-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.type); |
109 | 115 | this.set('serie-timetick-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.size); |
110 | 116 | this.set('serie-timetick-symbols-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.color); |
... | ... | @@ -150,10 +156,14 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { |
150 | 156 | |
151 | 157 | serieValues['serie-yaxis'] = this.get('serie-yaxis'); |
152 | 158 | serieValues['serie-resolution'] = this.get('serie-resolution'); |
159 | + | |
153 | 160 | serieValues['serie-lines-activated'] = this.get('serie-lines-activated'); |
154 | 161 | serieValues['serie-lines-style'] = this.get('serie-lines-style'); |
155 | 162 | serieValues['serie-lines-width'] = this.get('serie-lines-width'); |
156 | 163 | serieValues['serie-lines-color'] = this.get('serie-lines-color'); |
164 | + serieValues['serie-lines-color-activated'] = this.get('serie-lines-color-activated'); | |
165 | + serieValues['serie-errorbar-lines-rgb'] = this.get('serie-errorbar-lines-rgb'); | |
166 | + | |
157 | 167 | serieValues['serie-symbols-activated'] = this.get('serie-symbols-activated'); |
158 | 168 | serieValues['serie-symbols-type'] = this.get('serie-symbols-type'); |
159 | 169 | serieValues['serie-symbols-size'] = this.get('serie-symbols-size'); | ... | ... |
js/app/models/PlotObjects/PlotObjectConfig.js
... | ... | @@ -0,0 +1,9 @@ |
1 | +/* | |
2 | + * To change this license header, choose License Headers in Project Properties. | |
3 | + * To change this template file, choose Tools | Templates | |
4 | + * and open the template in the editor. | |
5 | + */ | |
6 | +Ext.define('amdaPlotComp.PlotColorPicker', { | |
7 | + extend: 'Ext.picker.Color', | |
8 | + }); | |
9 | + | ... | ... |
js/app/views/PlotComponents/PlotSerieForm.js
... | ... | @@ -82,7 +82,17 @@ Ext.define('amdaPlotComp.PlotSerieForm', { |
82 | 82 | }); |
83 | 83 | |
84 | 84 | serieItems.push(this.addStandardFieldSet('Error Bar', 'serie-errorbar-activated', this.getErrorBarItems())); |
85 | - | |
85 | + /** | |
86 | + var colorPicker = Ext.create('Ext.menu.ColorPicker', { | |
87 | + value: '000000' | |
88 | + }); | |
89 | + var colorMenu =Ext.create('Ext.menu.Menu', { | |
90 | + items: [{ | |
91 | + text: 'Choose a color', | |
92 | + menu: colorPicker | |
93 | + }] | |
94 | + }).show(); | |
95 | + serieItems.push(colorMenu); */ | |
86 | 96 | return serieItems; |
87 | 97 | } |
88 | 98 | }); | ... | ... |
js/app/views/PlotComponents/PlotStandardForm.js
... | ... | @@ -13,7 +13,8 @@ Ext.define('amdaPlotComp.PlotStandardForm', { |
13 | 13 | |
14 | 14 | requires: [ |
15 | 15 | 'amdaPlotObj.PlotObjectConfig', |
16 | - 'amdaPlotComp.EraseTrigger' | |
16 | + 'amdaPlotComp.EraseTrigger', | |
17 | + 'amdaPlotComp.PlotColorPicker' | |
17 | 18 | ], |
18 | 19 | |
19 | 20 | //Object associated to this form |
... | ... | @@ -405,7 +406,8 @@ Ext.define('amdaPlotComp.PlotStandardForm', { |
405 | 406 | return [ |
406 | 407 | this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles), |
407 | 408 | this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10), |
408 | - this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors) | |
409 | + //this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors), | |
410 | + this.addColorsPicker('serie-lines-color') | |
409 | 411 | ]; |
410 | 412 | }, |
411 | 413 | |
... | ... | @@ -416,6 +418,123 @@ Ext.define('amdaPlotComp.PlotStandardForm', { |
416 | 418 | this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors) |
417 | 419 | ]; |
418 | 420 | }, |
421 | + manageRGBcolors: function(namePrefix){ | |
422 | + var rgb = this.object.get(namePrefix+'-rgb'); | |
423 | + if(rgb && rgb.length ==3 ) | |
424 | + this.object.set(namePrefix, this.rgbToHex(rgb)); | |
425 | + }, | |
426 | + manageHEXcolors: function(namePrefix){ | |
427 | + var hex = this.object.get(namePrefix); | |
428 | + if(hex) | |
429 | + this.object.set(namePrefix+'-rgb', hexToRgb(hex)); | |
430 | + }, | |
431 | + rgbToHex : function(rgb) { | |
432 | + return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase(); | |
433 | + }, | |
434 | + hexToRgb: function(hex) { | |
435 | + var arrBuff = new ArrayBuffer(4); | |
436 | + var vw = new DataView(arrBuff); | |
437 | + vw.setUint32(0,parseInt(hex, 16),false); | |
438 | + var arrByte = new Uint8Array(arrBuff); | |
439 | + | |
440 | + return arrByte[1] + "," + arrByte[2] + "," + arrByte[3]; | |
441 | + }, | |
442 | + addColorsPicker: function (namePrefix) { | |
443 | + | |
444 | + var colorPicker = Ext.create('amdaPlotComp.PlotColorPicker', { | |
445 | + value: '993300', // initial selected color | |
446 | + renderTo: Ext.getBody(), | |
447 | + listeners: { | |
448 | + select: function(picker, selColor) { | |
449 | + this.object.set(namePrefix, selColor); | |
450 | + }, | |
451 | + scope: this | |
452 | + } | |
453 | + }); | |
454 | + var colorItems = [ | |
455 | + colorPicker , | |
456 | + { | |
457 | + xtype: 'toolbar', | |
458 | + bodyStyle: { background: '#dfe8f6' }, | |
459 | + border: false, | |
460 | + | |
461 | + items: [ | |
462 | + | |
463 | + { | |
464 | + xtype: 'numberfield', | |
465 | + name: 'color-R', | |
466 | + fieldLabel: 'R', | |
467 | + labelWidth: 15, | |
468 | + width: 80, | |
469 | + maxValue: 255, | |
470 | + minValue: 0, | |
471 | + value: 0, | |
472 | + listeners: { | |
473 | + change: function (field, newValue, oldValue, eOpts) { | |
474 | + var rgb = this.object.get(namePrefix+"-rgb"); | |
475 | + if(rgb && rgb.length ==3 ) | |
476 | + rgb[0] = newValue; | |
477 | + else | |
478 | + rgb = [newValue,0,0]; | |
479 | + this.object.set(namePrefix+"-rgb", rgb) | |
480 | + this.manageRGBcolors(namePrefix); | |
481 | + }, | |
482 | + scope: this | |
483 | + } | |
484 | + }, | |
485 | + ' ', | |
486 | + { | |
487 | + xtype: 'numberfield', | |
488 | + name: 'color-G', | |
489 | + fieldLabel: 'G', | |
490 | + labelWidth: 15, | |
491 | + width: 80, | |
492 | + maxValue: 255, | |
493 | + minValue: 0, | |
494 | + value: 0, | |
495 | + listeners: { | |
496 | + change: function (field, newValue, oldValue, eOpts) { | |
497 | + var rgb = this.object.get(namePrefix+"-rgb"); | |
498 | + if(rgb && rgb.length ==3 ) | |
499 | + rgb[1] = newValue; | |
500 | + else | |
501 | + rgb = [0, newValue, 0]; | |
502 | + this.object.set(namePrefix+"-rgb", rgb); | |
503 | + this.manageRGBcolors(namePrefix); | |
504 | + }, | |
505 | + scope: this | |
506 | + } | |
507 | + }, | |
508 | + ' ', | |
509 | + { | |
510 | + xtype: 'numberfield', | |
511 | + name: 'color-B', | |
512 | + fieldLabel: 'B', | |
513 | + labelWidth: 15, | |
514 | + width: 80, | |
515 | + maxValue: 255, | |
516 | + minValue: 0, | |
517 | + value: 0, | |
518 | + listeners: { | |
519 | + change: function (field, newValue, oldValue, eOpts) { | |
520 | + var rgb = this.object.get(namePrefix+"-rgb"); | |
521 | + if(rgb && rgb.length ==3 ) | |
522 | + rgb[2] = newValue; | |
523 | + else | |
524 | + rgb = [0,0,newValue]; | |
525 | + this.object.set(namePrefix+"-rgb", rgb); | |
526 | + this.manageRGBcolors(namePrefix); | |
527 | + }, | |
528 | + scope: this | |
529 | + } | |
530 | + }, | |
531 | + | |
532 | + ] | |
533 | + } | |
534 | + ]; | |
535 | + | |
536 | + return this.addStandardFieldSet('Color', namePrefix + '-activated', colorItems); | |
537 | + }, | |
419 | 538 | |
420 | 539 | init: function (config) { |
421 | 540 | var me = this; | ... | ... |