azaion/ui
1
0
Fork 0
mirror of https://github.com/azaion/ui.git synced 2026-04-22 12:16:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

make README.md

Browse Source 
fix some bugs
This commit is contained in:
Alex Bezdieniezhnykh
2025-03-18 19:48:35 +02:00
parent b078a39097
commit 0fa2c0ddd8
4 changed files with 23 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AnnotationMain.js
+1 -1
View File
@@ -42,7 +42,7 @@ function AnnotationMain() {
const handleAnnotationSave = () => {
const containerRef = { current: { offsetWidth: videoRef.current.videoWidth, offsetHeight: videoRef.current.videoHeight } };
const imageData = AnnotationService.createAnnotationImage(videoRef, detections, null, annotationSelectedClass, containerRef);
const imageData = AnnotationService.createAnnotationImage(videoRef, detections, null, selectedClass, containerRef);
if (imageData) {
setAnnotations(prevAnnotations => ({
...prevAnnotations,
src/components/DetectionClassList.js
+8 -8
View File
@@ -4,7 +4,7 @@ import DetectionClass from '../models/DetectionClass';
function DetectionClassList({ onClassSelect }) {
const [detectionClasses, setDetectionClasses] = useState([]);
const [selectedClassId, setSelectedClassId] = useState(null); // Use an ID for selection
const [selectedClass, setSelectedClass] = useState(null);
const colors = [ // Define colors *inside* the component
"#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#000000",
@@ -30,21 +30,21 @@ function DetectionClassList({ onClassSelect }) {
fetch('config.json') // Make sure this path is correct
.then(response => response.json())
.then(data => {
const classObjects = data.classes.map(cls => {
const detectionClasses = data.classes.map(cls => {
const color = calculateColor(cls.Id, '1'); // Full opacity for border
return new DetectionClass(cls.Id, cls.Name, color);
});
setDetectionClasses(classObjects);
setDetectionClasses(detectionClasses);
if (classObjects.length > 0 && onClassSelect) {
onClassSelect(classObjects[0]); // Select the first class by default
if (detectionClasses.length > 0 && onClassSelect) {
onClassSelect(detectionClasses[0]); // Select the first class by default
}
})
.catch(error => console.error("Error loading detection classes:", error));
}, [onClassSelect]);
});
const handleClassClick = (cls) => {
setSelectedClassId(cls.Id); // Update the selected ID
setSelectedClass(cls); // Update the selected ID
onClassSelect && onClassSelect(cls);
};
@@ -55,7 +55,7 @@ function DetectionClassList({ onClassSelect }) {
{detectionClasses.map((cls) => {
const backgroundColor = calculateColor(cls.Id); // Calculate background color (0.2 opacity)
const darkBg = calculateColor(cls.Id, '0.8'); // Calculate selected background color (0.4 opacity)
const isSelected = selectedClassId === cls.Id;
const isSelected = selectedClass.Id === cls.Id;
return (
<li
src/services/AnnotationService.js
+1 -18
View File
@@ -14,7 +14,7 @@ export const isMouseOverDetection = (x, y, detection, containerRef) => {
};
// Function to create an annotation image
export const createAnnotationImage = (videoRef, detections, currentDetection, selectedClass, containerRef) => {
export const createAnnotationImage = (videoRef, detections, containerRef) => {
const canvas = document.createElement('canvas');
if (!containerRef.current) return null;
const container = containerRef.current;
@@ -24,14 +24,10 @@ export const createAnnotationImage = (videoRef, detections, currentDetection, se
const ctx = canvas.getContext('2d');
ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
const defaultColor = 'rgba(0,0,0,0.4)'
detections.forEach(detection => {
const color = selectedClass && (detection.class.Id === selectedClass.Id) ? selectedClass.Color : detection.class.Color || defaultColor;
ctx.fillStyle = color.replace('1', '0.4');
ctx.fillRect(detection.x1, detection.y1, detection.x2 - detection.x1, detection.y2 - detection.y1);
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.strokeRect(detection.x1, detection.y1, detection.x2 - detection.x1, detection.y2 - detection.y1);
@@ -40,19 +36,6 @@ export const createAnnotationImage = (videoRef, detections, currentDetection, se
ctx.fillText(detection.class.Name, detection.x1, detection.y1 - 5);
});
if (currentDetection) {
const color = selectedClass ? selectedClass.Color : defaultColor;
ctx.fillStyle = color.replace('1', '0.4');
ctx.fillRect(currentDetection.x1, currentDetection.y1, currentDetection.x2 - currentDetection.x1, currentDetection.y2 - currentDetection.y1);
ctx.strokeStyle = color; // Full opacity
ctx.lineWidth = 2;
ctx.strokeRect(currentDetection.x1, currentDetection.y1, currentDetection.x2 - currentDetection.x1, currentDetection.y2 - currentDetection.y1);
ctx.fillStyle = 'white';
ctx.font = '12px Arial';
ctx.fillText(currentDetection.class.Name, currentDetection.x1, currentDetection.y1 - 5);
}
return canvas.toDataURL('image/png');
};