[자바스크립트] dat.GUI - GUI 응용 #1

안녕하세요? 만들오 입니다.

 

기존의 메뉴를 dat.GUI를 이용해 업데이트한 결과를 공유합니다.

 

아래 빨간 점선 안의 버튼을 dat.GUI로 정리했습니다.

 

변경 전

변경 후

 

심지어 Object Detection 관련 기능들을 추가했는데도 더욱 깔끔한 모습입니다.

빈 공간이 많이 남아 변경 후에는 Command line처럼 화면을 꾸밀 수 있었습니다.

 

//dat.GUI
params = {
    OC: false,
    OD: false,
    OT: false,
    knn_label: "ID1",
    knn_train: knn_add,
    knn_save: knn_save,
    knn_load: knn_load,
    ssd_tresh: 0.5,
    ssd_max: 20,
}
const classifier = gui.addFolder("Object Classification");
classifier.add(params, "knn_load").name("Load model");
classifier.add(params, "knn_save").name("Save model");
classifier.add(params, "knn_label").listen().name("Label");
classifier.add(params, "knn_train").listen().name("Train");
classifier.add(params, "OC").listen().name("Run").onChange(e => {
    if (params.OC == true) cli("Object classification activated");
    params.OD = false;
    params.OT = false;
    ctx.clearRect(0, 0, width, height);
});

const detector = gui.addFolder("Object Detection");
detector.add(params, "ssd_tresh", 0.0, 1.0).step(0.1).listen().name("Treshold");
detector.add(params, "ssd_max", 0, 50).step(1).listen().name("Max count");
detector.add(params, "OD").listen().name("Run").onChange(e => {
    if (params.OD == true) cli("Object detection activated");
    params.OC = false;
    params.OT = false;
    ctx.clearRect(0, 0, width, height);
});
const tracker = gui.addFolder("Object Tracking");
tracker.add(params, "OT").listen().name("Run").onChange(e => {
    if (params.OT == true) cli("Object tracking activated");
    params.OC = false;
    params.OD = false;
    ctx.clearRect(0, 0, width, height);
});

 

레고테크닉 인공지능 RC카 프로젝트에 응용하여 활용할 계획입니다.

 

기타 문의사항은 댓글을 남겨 주세요.

 

감사합니다.

[끝].