진행중인 프로젝트의 GUI 부분에서 애로사항이 발생했습니다.
전부터 눈여겨 보던 dat.GUI 라이브러리를 이용해 해결하려 합니다.
<dat.GUI란?>
- 구글 데이터 아트팀 개발.
- 경량 그래픽 사용자 인터페이스.
- 사용하기 쉽다.
<사용 코드>
<!DOCTYPE html>
<html>
<head>
<title>Dat.GUI</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<body>
</body>
<script>
const params = {
OC: false,
knn_label : "ID1",
knn_train : () => {
console.log(`Added ${params.knn_label}.`); //params.Label 오타 수정
},
Delete_Item : () => {
console.log(`Added ${params.knn_label}.`); //params.Label 오타 수정
},
OD: false,
}
const gui = new dat.GUI();
const classifier = gui.addFolder("Object Classification");
classifier.add(params, "OC").listen().name("Activate").onChange(e => {
if (params.OC == true) console.log("Object classification activated");
params.OD = false;
});
classifier.add(params, "knn_label").listen().name("Label");
classifier.add(params, "knn_train").listen().name("Train");
const detector = gui.addFolder("Object Detection");
detector.add(params, "OD").listen().name("Activate").onChange(e => {
if (params.OD == true) console.log("Object detection activated");
params.OC = false;
});
</script>
</html>훨씬 보기 좋고 사용하기에도 좋아보입니다.
조금씩 업데이트해서 기존 GUI와 비교해보도록 하겠습니다.
[끝].
2021.03.31 - 코드 안의 params.Label을 params.knn_label로 오타 수정했습니다.
728x90
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] WebRTC 카메라 해상도 변경하기 (dat.gui 응용) (0) | 2021.04.13 |
|---|---|
| [자바스크립트] dat.GUI - GUI 응용 #1 (0) | 2021.03.30 |
| [자바스크립트] Node.js - Tensorflow.js Generator를 이용한 데이터셋 만들기 (0) | 2021.01.23 |
| [자바스크립트] Node.js - 이미지파일 불러오기 (pureimage) (0) | 2021.01.23 |
| [자바스크립트] Node.js - 하위경로 이미지 파일의 경로 읽기 (0) | 2021.01.23 |
댓글