Label color (#2014)
* added color to django app and cvat-core * temp * temp * Added label color to mask dump * Fixed UI for label color picker * npm packages and CHANGELOG * fixed models and migrations * Fixed default background color and using normalization * Added setting label color with hash * fixed error * Added close icon to color picker * Fixed CHANGELOG * requested changes * fixed menu visibility * Fixed label hashing and algorithm * Added wheel package to CI * Fixed dockerfile * moved wheel package from dockerfile to requirements * fixed requirements * Fixed requirements Co-authored-by: Nikita Manovich <nikita.manovich@intel.com>main
Dmitry Kalinin
6 years ago
committed by
GitHub
parent
822a3b5578
commit
bee4c3799f
@ -0,0 +1,3 @@
|
||||
<svg width="1em" height="1em" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.7735 2.04722L11.9536 0.227468C11.6503 -0.0758228 11.1603 -0.0758228 10.857 0.227468L8.43052 2.6538L6.92951 1.16845L5.83292 2.26496L6.93729 3.36925L0 10.3061V14H3.69419L10.6315 7.06318L11.7358 8.16748L12.8324 7.07096L11.3392 5.57784L13.7657 3.15151C14.0768 2.84044 14.0768 2.35051 13.7735 2.04722V2.04722ZM3.04867 12.4447L1.55545 10.9515L7.8239 4.68352L9.31712 6.17664L3.04867 12.4447Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 514 B |
@ -1,58 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Button from 'antd/lib/button';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
|
||||
interface Props {
|
||||
shortcut: string;
|
||||
colors: string[];
|
||||
onChange(color: string): void;
|
||||
}
|
||||
|
||||
function ColorChanger(props: Props): JSX.Element {
|
||||
const { shortcut, colors, onChange } = props;
|
||||
|
||||
const cols = 6;
|
||||
const rows = Math.ceil(colors.length / cols);
|
||||
|
||||
const antdRows = [];
|
||||
for (let row = 0; row < rows; row++) {
|
||||
const antdCols = [];
|
||||
for (let col = 0; col < cols; col++) {
|
||||
const idx = row * cols + col;
|
||||
if (idx >= colors.length) {
|
||||
break;
|
||||
}
|
||||
const color = colors[idx];
|
||||
antdCols.push(
|
||||
<Col key={col} span={4}>
|
||||
<Button
|
||||
onClick={(): void => onChange(color)}
|
||||
style={{ background: color }}
|
||||
className='cvat-label-item-color-button'
|
||||
/>
|
||||
</Col>,
|
||||
);
|
||||
}
|
||||
|
||||
antdRows.push(
|
||||
// eslint-disable-next-line react/no-children-prop
|
||||
<Row key={row} children={antdCols} />,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Text>
|
||||
{`Press ${shortcut} to set a random color`}
|
||||
</Text>
|
||||
{antdRows}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(ColorChanger);
|
||||
@ -0,0 +1,131 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
import React, { useState } from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Button from 'antd/lib/button';
|
||||
import Popover from 'antd/lib/popover';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import { SketchPicker } from 'react-color';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
import getCore from 'cvat-core-wrapper';
|
||||
|
||||
const core = getCore();
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
value?: string;
|
||||
visible?: boolean;
|
||||
resetVisible?: boolean;
|
||||
onChange?: (value: string) => void;
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
placement?: 'left' | 'top' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | undefined;
|
||||
}
|
||||
|
||||
function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
|
||||
const {
|
||||
children,
|
||||
value,
|
||||
visible,
|
||||
resetVisible,
|
||||
onChange,
|
||||
onVisibleChange,
|
||||
placement,
|
||||
} = props;
|
||||
|
||||
const [colorState, setColorState] = useState(value);
|
||||
const [pickerVisible, setPickerVisible] = useState(false);
|
||||
|
||||
const colors = [...core.enums.colors];
|
||||
|
||||
const changeVisible = (_visible: boolean): void => {
|
||||
if (typeof onVisibleChange === 'function') {
|
||||
onVisibleChange(_visible);
|
||||
} else {
|
||||
setPickerVisible(_visible);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
content={(
|
||||
<>
|
||||
<SketchPicker
|
||||
color={colorState}
|
||||
onChange={(color) => setColorState(color.hex)}
|
||||
presetColors={colors}
|
||||
ref={ref}
|
||||
disableAlpha
|
||||
/>
|
||||
<Row>
|
||||
<Col span={9}>
|
||||
{resetVisible !== false && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (typeof onChange === 'function') onChange('');
|
||||
changeVisible(false);
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
)}
|
||||
</Col>
|
||||
<Col span={9}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
changeVisible(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Button
|
||||
type='primary'
|
||||
onClick={() => {
|
||||
if (typeof onChange === 'function') onChange(colorState || '');
|
||||
changeVisible(false);
|
||||
}}
|
||||
>
|
||||
Ok
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
title={(
|
||||
<Row type='flex' justify='space-between' align='middle'>
|
||||
<Col span={12}>
|
||||
<Text strong>
|
||||
Select color
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Tooltip title='Cancel'>
|
||||
<Button
|
||||
type='link'
|
||||
onClick={() => {
|
||||
changeVisible(false);
|
||||
}}
|
||||
>
|
||||
<Icon type='close' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
)}
|
||||
placement={placement || 'left'}
|
||||
overlayClassName='cvat-label-color-picker'
|
||||
trigger='click'
|
||||
visible={typeof visible === 'boolean' ? visible : pickerVisible}
|
||||
onVisibleChange={changeVisible}
|
||||
>
|
||||
{children}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.forwardRef(ColorPicker);
|
||||
@ -0,0 +1,79 @@
|
||||
# Copyright (C) 2019 Intel Corporation
|
||||
#
|
||||
# SPDX-License-Identifier: MIT
|
||||
|
||||
import os.path as osp
|
||||
from pyhash import murmur3_32
|
||||
|
||||
from datumaro.cli.util import make_file_name
|
||||
|
||||
hasher = murmur3_32()
|
||||
|
||||
def get_color_from_index(index):
|
||||
def get_bit(number, index):
|
||||
return (number >> index) & 1
|
||||
|
||||
color = [0, 0, 0]
|
||||
|
||||
for j in range(7, -1, -1):
|
||||
for c in range(3):
|
||||
color[c] |= get_bit(index, c) << j
|
||||
index >>= 3
|
||||
|
||||
return tuple(color)
|
||||
|
||||
DEFAULT_COLORMAP_CAPACITY = 2000
|
||||
DEFAULT_COLORMAP_PATH = osp.join(osp.dirname(__file__), 'predefined_colors.txt')
|
||||
def parse_default_colors(file_path=None):
|
||||
if file_path is None:
|
||||
file_path = DEFAULT_COLORMAP_PATH
|
||||
|
||||
colors = {}
|
||||
with open(file_path) as f:
|
||||
for line in f:
|
||||
line = line.strip()
|
||||
if not line or line[0] == '#':
|
||||
continue
|
||||
_, label, color = line.split(':')
|
||||
colors[label] = tuple(map(int, color.split(',')))
|
||||
return colors
|
||||
|
||||
def normalize_label(label):
|
||||
label = make_file_name(label) # basically, convert to ASCII lowercase
|
||||
label = label.replace('-', '_')
|
||||
return label
|
||||
|
||||
def rgb2hex(color):
|
||||
return '#{0:02x}{1:02x}{2:02x}'.format(*color)
|
||||
|
||||
def hex2rgb(color):
|
||||
return tuple(int(color.lstrip('#')[i:i+2], 16) for i in (0, 2, 4))
|
||||
|
||||
def make_colormap(task_data):
|
||||
labels = [label for _, label in task_data.meta['task']['labels']]
|
||||
label_names = [label['name'] for label in labels]
|
||||
|
||||
if 'background' not in label_names:
|
||||
labels.insert(0, {
|
||||
'name': 'background',
|
||||
'color': '#000000',
|
||||
}
|
||||
)
|
||||
|
||||
return {label['name']: [hex2rgb(label['color']), [], []] for label in labels}
|
||||
|
||||
|
||||
def get_label_color(label_name, label_names):
|
||||
predefined = parse_default_colors()
|
||||
normalized_names = [normalize_label(l_name) for l_name in label_names]
|
||||
normalized_name = normalize_label(label_name)
|
||||
|
||||
color = predefined.get(normalized_name, None)
|
||||
offset = hasher(normalized_name) + normalized_names.count(normalized_name)
|
||||
|
||||
if color is None:
|
||||
color = get_color_from_index(DEFAULT_COLORMAP_CAPACITY + offset)
|
||||
elif normalized_names.count(normalized_name):
|
||||
color = get_color_from_index(DEFAULT_COLORMAP_CAPACITY + offset - 1)
|
||||
|
||||
return rgb2hex(color)
|
||||
@ -0,0 +1,33 @@
|
||||
# Generated by Django 2.2.13 on 2020-08-11 11:26
|
||||
from django.db import migrations, models
|
||||
from cvat.apps.dataset_manager.formats.utils import get_label_color
|
||||
|
||||
def alter_label_colors(apps, schema_editor):
|
||||
Label = apps.get_model('engine', 'Label')
|
||||
Task = apps.get_model('engine', 'Task')
|
||||
|
||||
for task in Task.objects.all():
|
||||
labels = Label.objects.filter(task_id=task.id).order_by('id')
|
||||
label_names = list()
|
||||
for label in labels:
|
||||
label.color = get_label_color(label.name, label_names)
|
||||
label_names.append(label.name)
|
||||
label.save()
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('engine', '0027_auto_20200719_1552'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='label',
|
||||
name='color',
|
||||
field=models.CharField(default='', max_length=8),
|
||||
),
|
||||
migrations.RunPython(
|
||||
code=alter_label_colors,
|
||||
reverse_code=migrations.RunPython.noop,
|
||||
),
|
||||
]
|
||||
Loading…
Reference in New Issue