Skip to content

Commit

Permalink
Adding contrast control button to Visiomatic component (#1212)
Browse files Browse the repository at this point in the history 
* Adding contrast control button to Visiomatic component

* Binding ContrastViewModel's value

* Applying contrast to the tile

* Closed #1216 - Change contrast of tile when configuration is applied.

Co-authored-by: Glauber Costa Vila-Verde <[email protected]>
  • Loading branch information
@matheusallein @glaubervila
matheusallein and glaubervila authored Jan 29, 2020
1 parent 9dfe98b commit 65e2b14
Show file tree
Hide file tree
Showing 6 changed files with 1,329 additions and 997 deletions.
4 changes: 2 additions & 2 deletions frontend/eyeballing/src/components/visiomatic/Visiomatic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ class VisiomaticPanel extends Component {
m = 0;
}
const str = `${(h < 10 ? '0' : '') + h.toString()}:${m < 10 ? '0' : ''}${m.toString()
}:${sf < 10.0 ? '0' : ''}${sf.toFixed(3)}`;
}:${sf < 10.0 ? '0' : ''}${sf.toFixed(3)}`;

const lat = Math.abs(latlng.lat);

Expand Down Expand Up @@ -408,7 +408,7 @@ class VisiomaticPanel extends Component {
style={{
width: '100%',
height: 'calc(100vh - 150px)',
// height: '100%',
// height: '100%',
}}
/>
<ContextMenu
Expand Down
151 changes: 148 additions & 3 deletions frontend/packages/local/visiomatic/src/Visiomatic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Ext.define('visiomatic.Visiomatic', {
'visiomatic.VisiomaticModel',
'visiomatic.VisiomaticController',
'visiomatic.catalog.CatalogOverlayWindow',
'visiomatic.contrast.ContrastWindow',
'visiomatic.download.DescutDownloadWindow',
'common.store.CommentsPosition'
],
Expand Down Expand Up @@ -37,7 +38,8 @@ Ext.define('visiomatic.Visiomatic', {
mapOptions: {
fullscreenControl: true,
zoom: 1,
enableLineaOverlay: true
enableLineaOverlay: true,
enableLineaContrast: true,
},

prefix: null,
Expand Down Expand Up @@ -95,7 +97,8 @@ Ext.define('visiomatic.Visiomatic', {
contrast: 0.7,
gamma: 2.8,
colorSat: 2.0,
channelLabelMatch: '[ugrizY]'
channelLabelMatch: '[ugrizY]',
quality: 100,
},

// Draw Radius Path Options http://leafletjs.com/reference-1.0.3.html#path
Expand Down Expand Up @@ -168,9 +171,66 @@ Ext.define('visiomatic.Visiomatic', {

showCrosshair: false,
mlocate: '',

// Contrast
currentContrast: 'normal',
colorRanges: {
normal: {
displayName: 'Default Contrast',
minMaxValues: [
// g
[-0.390453905, 1000],
// r
[-1.10961807, 1200],
// i
[-1.48952579, 1600],
// z
[-2.25479436, 2400],
// Y
[-0.990383625, 5000],
// det
[0.0486380979, 100],
],
},
medium: {
displayName: 'Medium Contrast',
minMaxValues: [
// g
[-0.390453905, 500],
// r
[-1.10961807, 500],
// i
[-1.48952579, 500],
// z
[-2.25479436, 500],
// Y
[-0.990383625, 1000],
// det
[0.0486380979, 100],
],
},
high: {
displayName: 'High Contrast',
minMaxValues: [
// g
[-0.390453905, 50],
// r
[-1.10961807, 50],
// i
[-1.48952579, 50],
// z
[-2.25479436, 50],
// Y
[-0.990383625, 100],
// det
[0.0486380979, 100],
],
},
}
},

_winCatalogOverlay: null,
_winContrast: null,


bind: {
Expand Down Expand Up @@ -248,6 +308,7 @@ Ext.define('visiomatic.Visiomatic', {
map.on('move', me.onMove, me);
map.on('mousemove', me.onMouseMove, me);
map.on('overlaycatalog', me.showCatalogOverlayWindow, me);
map.on('changecontrast', me.showContrastWindow, me);
map.on('mouseup', me.savePreferences, me);
map.on('keypress', me.savePreferences, me);
map.on('contextmenu', me.onContextMenuClick, me);
Expand Down Expand Up @@ -281,7 +342,7 @@ Ext.define('visiomatic.Visiomatic', {
imageLayer = me.getImageLayer();

var imageOptions = {
credentials: true,
credentials: imageLayer.credentials,
channelLabelMatch: '[ugrizY]',
mixingMode: imageLayer.iipMode,
contrast: imageLayer.iipContrast,
Expand Down Expand Up @@ -314,6 +375,11 @@ Ext.define('visiomatic.Visiomatic', {
if (me._winCatalogOverlay) {
me._winCatalogOverlay.close();
}

// Fechar a Janela de Overlay Contrast caso ela esteja aberta
if (me._winContrast) {
me._winContrast.close();
}
},

getMapContainer: function () {
Expand Down Expand Up @@ -428,12 +494,20 @@ Ext.define('visiomatic.Visiomatic', {
me._winCatalogOverlay = null;
}

// Se tiver com a janela de Contrast aberta deve fechar
if (me._winContrast !== null) {
me._winContrast.close();

me._winContrast = null;
}

// Forcar a remocao da imageLayer
me.removeImageLayer();

options = options || {};

if (imageLayer) {

imageOptions = {
credentials: imageOptions.credentials,
channelLabelMatch: '[ugrizY]',
Expand All @@ -447,6 +521,12 @@ Ext.define('visiomatic.Visiomatic', {
};
}

// Add default Contrast to image layer
colorRanges = me.getColorRanges(me.getCurrentContrast())
if (Ext.isObject(colorRanges)) {
options.minMaxValues = colorRanges.minMaxValues
}

args = Ext.Object.merge(imageOptions, options);

me.image = image;
Expand All @@ -471,6 +551,15 @@ Ext.define('visiomatic.Visiomatic', {
}
},

getColorRanges: function (key) {
var me = this;
if (key) {
return me.colorRanges[key];
} else {
return me.colorRanges;
}
},

createMiniMap: function () {
var me = this,
libL = me.libL,
Expand Down Expand Up @@ -1085,6 +1174,8 @@ Ext.define('visiomatic.Visiomatic', {
return lCatalog;
},



redraw() {
var me = this,
map = me.getMap(),
Expand Down Expand Up @@ -1421,6 +1512,60 @@ Ext.define('visiomatic.Visiomatic', {
}
},

showContrastWindow: function () {
var me = this,
currentContrast = me.getCurrentContrast(),
colorRanges = me.getColorRanges(),
win;

if (me._winContrast !== null) {
me._winContrast.close()
me._winContrast = null;
}

// TODO: verificar se o valor de currentContrast esta disponivel na lista de Contrasts disponiveis.
if (currentContrast !== null) {

win = Ext.create('visiomatic.contrast.ContrastWindow', {
visiomatic: me,
colorRanges: colorRanges
});

// Adiciona a Window como parte do componente Visiomatic,
// Desta forma se o componete nao estiver mais visivel na tela a window tb nao estara.
me.add(win)

win.show();

win.setCurrentContrast(currentContrast);

me._winContrast = win;
} else {
console.log('Nao tem Contrast selecionado ou nao esta na lista de disponiveis');

return false;
}
},
changeContrast: function (contrast, contrastValues) {
var me = this,
imageLayer = me.getImageLayer(),
minValues = [],
maxValues = [];

Ext.Array.each(contrastValues.minMaxValues, function (value) {
minValues.push(value[0])
maxValues.push(value[1])
})

imageLayer.iipMinValue = minValues;
imageLayer.iipMaxValue = maxValues;

imageLayer.updateMix();
imageLayer.redraw();

me.setCurrentContrast(contrast)
},

showDownloadWindow: function () {
var me = this,
currentDataset = me.getCurrentDataset(),
Expand Down
112 changes: 112 additions & 0 deletions frontend/packages/local/visiomatic/src/contrast/ContrastWindow.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
Ext.define('visiomatic.contrast.ContrastWindow', {
extend: 'Ext.window.Window',

xtype: 'visiomatic-contrast',

title: 'Choose Color Ranges',

width: 250,
height: 200,

closeAction: 'destroy',

resizable: false,

constrain: true,

bodyPadding: 10,

config: {
// Instancia atual do visiomatic
visiomatic: null,
// Lista com os contrasts diponiveis e os valores para cada cor.
colorRanges: null,
},

viewModel: {
data: {
currentContrast: { contrast: 'normal' },
}
},

initComponent: function () {
var me = this,
vm = me.getViewModel(),
colorRanges = me.getColorRanges(),
radiogroupItems = [];

// Cria a lista de Radio itens um para cada opcao de contrast
Ext.Object.each(colorRanges, function (contrastName, contrastValues, ranges) {
radiogroupItems.push({
inputValue: contrastName,
boxLabel: contrastValues.displayName,
height: 30,
})
}, me)

Ext.apply(this, {
items: [{
xtype: 'fieldset',
flex: 1,
border: false,
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [
{
xtype: 'radiogroup',
hideLabel: true,
columns: 1,
simpleValue: true,
name: 'contrast',
bind: '{currentContrast}',
items: radiogroupItems,
listeners: {
scope: me,
change: me.onChooseContrast
}
}

]
}]
});

me.callParent(arguments);

},

onChooseContrast: function (radiogroup, value) {
var me = this;
me.setCurrentContrast(value.contrast)
},

getContrastValues: function (contrastName) {
var me = this,
colorRanges = me.getColorRanges();
return colorRanges[contrastName]
},

/**
* Setar o contraste que está disponível,
* esse contraste será usado para modificar o contraste da tile.
* se o constrate for diferente executa o metodo changeContrast do visiomatic.
* se for igual nao faz nada
*/
setCurrentContrast: function (currentContrast) {
var me = this,
vm = me.getViewModel(),
oldContrast = vm.get('currentContrast'),
visiomatic = me.getVisiomatic(),
contrastValues = me.getContrastValues(currentContrast);

if (currentContrast !== oldContrast.contrast) {

vm.set('currentContrast', { contrast: currentContrast });

visiomatic.changeContrast(currentContrast, contrastValues, me)

}
}
});
Loading

0 comments on commit 65e2b14

Please sign in to comment.