Commit 40d460aacb78aa8647df0ded36c8db36557f5626
Exists in
master
and in
64 other branches
Merge branch 'develop' into amdadev
Showing
6 changed files
with
221 additions
and
11 deletions
Show diff stats
js/app/models/PlotObjects/PlotBaseSerieObject.js
... | ... | @@ -24,9 +24,12 @@ 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'}, | |
28 | + {name: 'serie-lines-color-auto', type: 'boolean'}, | |
27 | 29 | {name: 'serie-lines-style', type: 'string'}, |
28 | 30 | {name: 'serie-lines-width', type: 'float'}, |
29 | 31 | {name: 'serie-lines-color', type: 'string'}, |
32 | + {name: 'serie-lines-color-rgb', type: 'array'}, | |
30 | 33 | {name: 'serie-symbols-activated', type: 'boolean'}, |
31 | 34 | {name: 'serie-symbols-type', type: 'string'}, |
32 | 35 | {name: 'serie-symbols-size', type: 'float'}, |
... | ... | @@ -84,15 +87,30 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { |
84 | 87 | } |
85 | 88 | this.dirty = false; |
86 | 89 | }, |
90 | + getDefaultColor:function(name){ | |
91 | + var defaultClors = new Object(); | |
92 | + defaultClors['serie-lines-color'] = amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.color; | |
93 | + defaultClors['serie-symbols-color'] = amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.color; | |
94 | + defaultClors['serie-timetick-color'] = amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.color; | |
95 | + defaultClors['serie-timetick-symbols-color'] = amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.color; | |
96 | + defaultClors['serie-timetick-firstsymbols-color'] = amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.firstsymbols.color; | |
97 | + defaultClors['serie-intervaltick-color'] = amdaPlotObj.PlotObjectConfig.defaultValues.serie.intervaltick.color; | |
98 | + defaultClors['serie-intervaltick-symbols-color'] = amdaPlotObj.PlotObjectConfig.defaultValues.serie.intervaltick.symbols.color; | |
99 | + return defaultClors[name]; | |
100 | + }, | |
87 | 101 | |
88 | 102 | setDefaultValues: function () |
89 | 103 | { |
90 | 104 | this.set('serie-yaxis', amdaPlotObj.PlotObjectConfig.defaultValues.serie.yAxis); |
91 | 105 | this.set('serie-resolution', amdaPlotObj.PlotObjectConfig.defaultValues.serie.resolution); |
106 | + | |
92 | 107 | this.set('serie-lines-activated', true); |
93 | 108 | this.set('serie-lines-style', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.style); |
94 | 109 | this.set('serie-lines-width', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.width); |
95 | 110 | this.set('serie-lines-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.color); |
111 | + this.set('serie-lines-color-activated', false); | |
112 | + this.set('serie-lines-color-auto', true); | |
113 | + | |
96 | 114 | this.set('serie-symbols-activated', false); |
97 | 115 | this.set('serie-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.type); |
98 | 116 | this.set('serie-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.size); |
... | ... | @@ -105,6 +123,7 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { |
105 | 123 | this.set('serie-timetick-nbmajor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbmajor); |
106 | 124 | this.set('serie-timetick-nbminor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbminor); |
107 | 125 | this.set('serie-timetick-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.color); |
126 | + this.set('serie-errorbar-lines-color-rgb', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.rgb); | |
108 | 127 | this.set('serie-timetick-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.type); |
109 | 128 | this.set('serie-timetick-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.size); |
110 | 129 | this.set('serie-timetick-symbols-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.color); |
... | ... | @@ -150,10 +169,15 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { |
150 | 169 | |
151 | 170 | serieValues['serie-yaxis'] = this.get('serie-yaxis'); |
152 | 171 | serieValues['serie-resolution'] = this.get('serie-resolution'); |
172 | + | |
153 | 173 | serieValues['serie-lines-activated'] = this.get('serie-lines-activated'); |
154 | 174 | serieValues['serie-lines-style'] = this.get('serie-lines-style'); |
155 | 175 | serieValues['serie-lines-width'] = this.get('serie-lines-width'); |
156 | 176 | serieValues['serie-lines-color'] = this.get('serie-lines-color'); |
177 | + serieValues['serie-lines-color-activated'] = this.get('serie-lines-color-activated'); | |
178 | + serieValues['serie-lines-color-auto'] = this.get('serie-lines-color-auto'); | |
179 | + serieValues['serie-errorbar-lines-rgb'] = this.get('serie-errorbar-lines-rgb'); | |
180 | + | |
157 | 181 | serieValues['serie-symbols-activated'] = this.get('serie-symbols-activated'); |
158 | 182 | serieValues['serie-symbols-type'] = this.get('serie-symbols-type'); |
159 | 183 | serieValues['serie-symbols-size'] = this.get('serie-symbols-size'); |
... | ... |
js/app/models/PlotObjects/PlotObjectConfig.js
js/app/models/PlotObjects/PlotSerieObject.js
... | ... | @@ -24,14 +24,14 @@ Ext.define('amdaPlotObj.PlotSerieObject', { |
24 | 24 | {name: 'serie-resampling-mode', type: 'string'}, |
25 | 25 | |
26 | 26 | //Only used for timePlot |
27 | - {name: 'serie-errorbar-activated', type: 'boolean'}, | |
28 | - {name: 'serie-errorbar-type', type: 'string'}, | |
29 | - {name: 'serie-errorbar-lines-style', type: 'string'}, | |
27 | + {name: 'serie-errorbar-activated', type: 'boolean'}, | |
28 | + {name: 'serie-errorbar-type', type: 'string'}, | |
29 | + {name: 'serie-errorbar-lines-style', type: 'string'}, | |
30 | 30 | {name: 'serie-errorbar-lines-width', type: 'float'}, |
31 | 31 | {name: 'serie-errorbar-lines-color', type: 'string'}, |
32 | - {name: 'serie-errorbar-minparam', type: 'string'}, | |
33 | - {name: 'serie-errorbar-maxparam', type: 'string'}, | |
34 | - {name: 'serie-errorbar-deltaparam', type: 'string'} | |
32 | + {name: 'serie-errorbar-minparam', type: 'string'}, | |
33 | + {name: 'serie-errorbar-maxparam', type: 'string'}, | |
34 | + {name: 'serie-errorbar-deltaparam', type: 'string'} | |
35 | 35 | ], |
36 | 36 | |
37 | 37 | constructor: function(){ |
... | ... |
... | ... | @@ -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 |
... | ... | @@ -193,13 +194,13 @@ Ext.define('amdaPlotComp.PlotStandardForm', { |
193 | 194 | }; |
194 | 195 | }, |
195 | 196 | |
196 | - addStandardFieldSet: function (title, checkboxName, items, onChangeCheck) { | |
197 | + addStandardFieldSet: function (title, checkboxName, items, onChangeCheck, collapsed_ = true) { | |
197 | 198 | return { |
198 | 199 | xtype: 'fieldset', |
199 | 200 | cls: 'child-fieldset', |
200 | 201 | title: title, |
201 | 202 | collapsible: true, |
202 | - collapsed: true, | |
203 | + collapsed: collapsed_, | |
203 | 204 | checkboxName: checkboxName, |
204 | 205 | checkboxToggle: checkboxName != '', |
205 | 206 | layout: { |
... | ... | @@ -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', 'Color') | |
409 | 411 | ]; |
410 | 412 | }, |
411 | 413 | |
... | ... | @@ -416,6 +418,170 @@ 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 | + var hexColor = this.rgbToHex(rgb); | |
425 | + this.object.set(namePrefix, hexColor); | |
426 | + this.getForm().findField(namePrefix+'-displayer').setValue(hexColor); | |
427 | + } | |
428 | + }, | |
429 | + manageHEXcolors: function(namePrefix){ | |
430 | + var hex = this.object.get(namePrefix); | |
431 | + if(hex){ | |
432 | + this.object.set(namePrefix+'-rgb', hexToRgb(hex)); | |
433 | + } | |
434 | + }, | |
435 | + rgbToHex : function(rgb) { | |
436 | + return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2] ).toString(16).slice(1).toUpperCase(); | |
437 | + }, | |
438 | + hexToRgb: function(hex) { | |
439 | + var arrBuff = new ArrayBuffer(4); | |
440 | + var vw = new DataView(arrBuff); | |
441 | + vw.setUint32(0,parseInt(hex, 16),false); | |
442 | + var arrByte = (new Uint8Array(arrBuff)); | |
443 | + | |
444 | + return arrByte.slice(1,4); | |
445 | + }, | |
446 | + | |
447 | + /** | |
448 | + * | |
449 | + * @param {type} namePrefix name of the variable in the opbject exp : 'serie-lines-color' | |
450 | + * @param {type} name name of the field exp : Color | |
451 | + * @returns {PlotStandardFormAnonym$0.addStandardFieldSet.PlotStandardFormAnonym$10} | |
452 | + */ | |
453 | + addColorsPicker: function (namePrefix, name) { | |
454 | + var me = this; | |
455 | + | |
456 | + var colorPicker = Ext.create('amdaPlotComp.PlotColorPicker', { | |
457 | + value: '000000', // initial selected color | |
458 | + renderTo: Ext.getBody(), | |
459 | + listeners: { | |
460 | + select: function(picker, selColor) { | |
461 | + this.object.set(namePrefix, selColor); | |
462 | + this.getForm().findField(namePrefix+'-displayer').setValue('#'+selColor); | |
463 | + | |
464 | + rgb = this.hexToRgb(selColor); | |
465 | + if(rgb && rgb.length ==3 ){ | |
466 | + this.getForm().findField(namePrefix+'-R').setValue(rgb[0]); | |
467 | + this.getForm().findField(namePrefix+'-G').setValue(rgb[1]); | |
468 | + this.getForm().findField(namePrefix+'-B').setValue(rgb[2]); | |
469 | + } | |
470 | + }, | |
471 | + scope: this | |
472 | + } | |
473 | + }); | |
474 | + var colorDisplayer = { | |
475 | + xtype: 'displayfield', | |
476 | + name: namePrefix + '-displayer', | |
477 | + border:2, | |
478 | + fieldLabel: 'HEX:', | |
479 | + value:"#000000", | |
480 | + region:'center', | |
481 | + style: { | |
482 | + borderStyle: 'solid', | |
483 | + background: '#000000', | |
484 | + }, | |
485 | + listeners: { | |
486 | + change: function (field, newValue, oldValue, eOpts) { | |
487 | + field.getEl().applyStyles({'background':newValue}); | |
488 | + }, | |
489 | + scope: this | |
490 | + } | |
491 | + }; | |
492 | + var rgbItems = | |
493 | + { | |
494 | + xtype: 'toolbar', | |
495 | + bodyStyle: { background: '#dfe8f6' }, | |
496 | + border: false, | |
497 | + name:namePrefix+'-rgb', | |
498 | + items: [ | |
499 | + | |
500 | + { | |
501 | + xtype: 'numberfield', | |
502 | + name: namePrefix+'-R', | |
503 | + fieldLabel: 'R', | |
504 | + labelWidth: 12, | |
505 | + width: 65, | |
506 | + maxValue: 255, | |
507 | + minValue: 0, | |
508 | + value: 0, | |
509 | + listeners: { | |
510 | + change: function (field, newValue, oldValue, eOpts) { | |
511 | + var rgb = this.object.get(namePrefix+"-rgb"); | |
512 | + if(rgb && rgb.length ==3 ) | |
513 | + rgb[0] = newValue; | |
514 | + else | |
515 | + rgb = [newValue,0,0]; | |
516 | + this.object.set(namePrefix+"-rgb", rgb) | |
517 | + this.manageRGBcolors(namePrefix); | |
518 | + }, | |
519 | + scope: this | |
520 | + } | |
521 | + }, | |
522 | + ' ', | |
523 | + { | |
524 | + xtype: 'numberfield', | |
525 | + name: namePrefix+'-G', | |
526 | + fieldLabel: 'G', | |
527 | + labelWidth: 12, | |
528 | + width: 65, | |
529 | + maxValue: 255, | |
530 | + minValue: 0, | |
531 | + value: 0, | |
532 | + listeners: { | |
533 | + change: function (field, newValue, oldValue, eOpts) { | |
534 | + var rgb = this.object.get(namePrefix+"-rgb"); | |
535 | + if(rgb && rgb.length ==3 ) | |
536 | + rgb[1] = newValue; | |
537 | + else | |
538 | + rgb = [0, newValue, 0]; | |
539 | + this.object.set(namePrefix+"-rgb", rgb); | |
540 | + this.manageRGBcolors(namePrefix); | |
541 | + }, | |
542 | + scope: this | |
543 | + } | |
544 | + }, | |
545 | + ' ', | |
546 | + { | |
547 | + xtype: 'numberfield', | |
548 | + name: namePrefix+'-B', | |
549 | + fieldLabel: 'B', | |
550 | + labelWidth: 12, | |
551 | + width: 65, | |
552 | + maxValue: 255, | |
553 | + minValue: 0, | |
554 | + value: 0, | |
555 | + listeners: { | |
556 | + change: function (field, newValue, oldValue, eOpts) { | |
557 | + var rgb = this.object.get(namePrefix+"-rgb"); | |
558 | + if(rgb && rgb.length ==3 ) | |
559 | + rgb[2] = newValue; | |
560 | + else | |
561 | + rgb = [0,0,newValue]; | |
562 | + this.object.set(namePrefix+"-rgb", rgb); | |
563 | + this.manageRGBcolors(namePrefix); | |
564 | + }, | |
565 | + scope: this | |
566 | + } | |
567 | + }, | |
568 | + | |
569 | + ] | |
570 | + } | |
571 | + | |
572 | + | |
573 | + var items = [ this.addStandardCheck(namePrefix + '-auto','Auto', function(name, value, oldValue){ | |
574 | + me.getForm( ).findField(namePrefix + '-activated').setValue(!value); | |
575 | + me.object.set(namePrefix,me.object.getDefaultColor(namePrefix)); | |
576 | + }), | |
577 | + | |
578 | + this.addStandardFieldSet('Select Color', namePrefix + '-activated',[colorPicker,colorDisplayer, rgbItems], function(name, value, oldValue){ | |
579 | + me.getForm( ).findField(namePrefix + '-auto').setValue(!value); | |
580 | + }), | |
581 | + ]; | |
582 | + | |
583 | + return this.addStandardFieldSet(name,'', items, null, false); | |
584 | + }, | |
419 | 585 | |
420 | 586 | init: function (config) { |
421 | 587 | var me = this; |
... | ... |