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,9 +24,12 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { | ||
24 | {name: 'serie-yaxis', type: 'string'}, | 24 | {name: 'serie-yaxis', type: 'string'}, |
25 | {name: 'serie-resolution', type: 'int'}, | 25 | {name: 'serie-resolution', type: 'int'}, |
26 | {name: 'serie-lines-activated', type: 'boolean'}, | 26 | {name: 'serie-lines-activated', type: 'boolean'}, |
27 | + {name: 'serie-lines-color-activated', type: 'boolean'}, | ||
28 | + {name: 'serie-lines-color-auto', type: 'boolean'}, | ||
27 | {name: 'serie-lines-style', type: 'string'}, | 29 | {name: 'serie-lines-style', type: 'string'}, |
28 | {name: 'serie-lines-width', type: 'float'}, | 30 | {name: 'serie-lines-width', type: 'float'}, |
29 | {name: 'serie-lines-color', type: 'string'}, | 31 | {name: 'serie-lines-color', type: 'string'}, |
32 | + {name: 'serie-lines-color-rgb', type: 'array'}, | ||
30 | {name: 'serie-symbols-activated', type: 'boolean'}, | 33 | {name: 'serie-symbols-activated', type: 'boolean'}, |
31 | {name: 'serie-symbols-type', type: 'string'}, | 34 | {name: 'serie-symbols-type', type: 'string'}, |
32 | {name: 'serie-symbols-size', type: 'float'}, | 35 | {name: 'serie-symbols-size', type: 'float'}, |
@@ -84,15 +87,30 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { | @@ -84,15 +87,30 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { | ||
84 | } | 87 | } |
85 | this.dirty = false; | 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 | setDefaultValues: function () | 102 | setDefaultValues: function () |
89 | { | 103 | { |
90 | this.set('serie-yaxis', amdaPlotObj.PlotObjectConfig.defaultValues.serie.yAxis); | 104 | this.set('serie-yaxis', amdaPlotObj.PlotObjectConfig.defaultValues.serie.yAxis); |
91 | this.set('serie-resolution', amdaPlotObj.PlotObjectConfig.defaultValues.serie.resolution); | 105 | this.set('serie-resolution', amdaPlotObj.PlotObjectConfig.defaultValues.serie.resolution); |
106 | + | ||
92 | this.set('serie-lines-activated', true); | 107 | this.set('serie-lines-activated', true); |
93 | this.set('serie-lines-style', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.style); | 108 | this.set('serie-lines-style', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.style); |
94 | this.set('serie-lines-width', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.width); | 109 | this.set('serie-lines-width', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.width); |
95 | this.set('serie-lines-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.lines.color); | 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 | this.set('serie-symbols-activated', false); | 114 | this.set('serie-symbols-activated', false); |
97 | this.set('serie-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.type); | 115 | this.set('serie-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.type); |
98 | this.set('serie-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.size); | 116 | this.set('serie-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.symbols.size); |
@@ -105,6 +123,7 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { | @@ -105,6 +123,7 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { | ||
105 | this.set('serie-timetick-nbmajor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbmajor); | 123 | this.set('serie-timetick-nbmajor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbmajor); |
106 | this.set('serie-timetick-nbminor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbminor); | 124 | this.set('serie-timetick-nbminor', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.nbminor); |
107 | this.set('serie-timetick-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.color); | 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 | this.set('serie-timetick-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.type); | 127 | this.set('serie-timetick-symbols-type', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.type); |
109 | this.set('serie-timetick-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.size); | 128 | this.set('serie-timetick-symbols-size', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.size); |
110 | this.set('serie-timetick-symbols-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.color); | 129 | this.set('serie-timetick-symbols-color', amdaPlotObj.PlotObjectConfig.defaultValues.serie.timetick.symbols.color); |
@@ -150,10 +169,15 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { | @@ -150,10 +169,15 @@ Ext.define('amdaPlotObj.PlotBaseSerieObject', { | ||
150 | 169 | ||
151 | serieValues['serie-yaxis'] = this.get('serie-yaxis'); | 170 | serieValues['serie-yaxis'] = this.get('serie-yaxis'); |
152 | serieValues['serie-resolution'] = this.get('serie-resolution'); | 171 | serieValues['serie-resolution'] = this.get('serie-resolution'); |
172 | + | ||
153 | serieValues['serie-lines-activated'] = this.get('serie-lines-activated'); | 173 | serieValues['serie-lines-activated'] = this.get('serie-lines-activated'); |
154 | serieValues['serie-lines-style'] = this.get('serie-lines-style'); | 174 | serieValues['serie-lines-style'] = this.get('serie-lines-style'); |
155 | serieValues['serie-lines-width'] = this.get('serie-lines-width'); | 175 | serieValues['serie-lines-width'] = this.get('serie-lines-width'); |
156 | serieValues['serie-lines-color'] = this.get('serie-lines-color'); | 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 | serieValues['serie-symbols-activated'] = this.get('serie-symbols-activated'); | 181 | serieValues['serie-symbols-activated'] = this.get('serie-symbols-activated'); |
158 | serieValues['serie-symbols-type'] = this.get('serie-symbols-type'); | 182 | serieValues['serie-symbols-type'] = this.get('serie-symbols-type'); |
159 | serieValues['serie-symbols-size'] = this.get('serie-symbols-size'); | 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,14 +24,14 @@ Ext.define('amdaPlotObj.PlotSerieObject', { | ||
24 | {name: 'serie-resampling-mode', type: 'string'}, | 24 | {name: 'serie-resampling-mode', type: 'string'}, |
25 | 25 | ||
26 | //Only used for timePlot | 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 | {name: 'serie-errorbar-lines-width', type: 'float'}, | 30 | {name: 'serie-errorbar-lines-width', type: 'float'}, |
31 | {name: 'serie-errorbar-lines-color', type: 'string'}, | 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 | constructor: function(){ | 37 | constructor: function(){ |
@@ -0,0 +1,9 @@ | @@ -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,7 +82,17 @@ Ext.define('amdaPlotComp.PlotSerieForm', { | ||
82 | }); | 82 | }); |
83 | 83 | ||
84 | serieItems.push(this.addStandardFieldSet('Error Bar', 'serie-errorbar-activated', this.getErrorBarItems())); | 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 | return serieItems; | 96 | return serieItems; |
87 | } | 97 | } |
88 | }); | 98 | }); |
js/app/views/PlotComponents/PlotStandardForm.js
@@ -13,7 +13,8 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | @@ -13,7 +13,8 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
13 | 13 | ||
14 | requires: [ | 14 | requires: [ |
15 | 'amdaPlotObj.PlotObjectConfig', | 15 | 'amdaPlotObj.PlotObjectConfig', |
16 | - 'amdaPlotComp.EraseTrigger' | 16 | + 'amdaPlotComp.EraseTrigger', |
17 | + 'amdaPlotComp.PlotColorPicker' | ||
17 | ], | 18 | ], |
18 | 19 | ||
19 | //Object associated to this form | 20 | //Object associated to this form |
@@ -193,13 +194,13 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | @@ -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 | return { | 198 | return { |
198 | xtype: 'fieldset', | 199 | xtype: 'fieldset', |
199 | cls: 'child-fieldset', | 200 | cls: 'child-fieldset', |
200 | title: title, | 201 | title: title, |
201 | collapsible: true, | 202 | collapsible: true, |
202 | - collapsed: true, | 203 | + collapsed: collapsed_, |
203 | checkboxName: checkboxName, | 204 | checkboxName: checkboxName, |
204 | checkboxToggle: checkboxName != '', | 205 | checkboxToggle: checkboxName != '', |
205 | layout: { | 206 | layout: { |
@@ -405,7 +406,8 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | @@ -405,7 +406,8 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
405 | return [ | 406 | return [ |
406 | this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles), | 407 | this.addStandardCombo(namePrefix + '-style', 'Style', amdaPlotObj.PlotObjectConfig.availableLinesStyles), |
407 | this.addStandardFloat(namePrefix + '-width', 'Width', 1, 10), | 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,6 +418,170 @@ Ext.define('amdaPlotComp.PlotStandardForm', { | ||
416 | this.addStandardColor(namePrefix + '-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColors) | 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 | init: function (config) { | 586 | init: function (config) { |
421 | var me = this; | 587 | var me = this; |