전체 글 80

Vue 개발 환경 설정

개발툴 VS Code 추천 플러그인 - vue(jcbuisson) : Vue문법 확인해주는 기능 - Auto Close Tag(Jun Han) : HTML 태그 자동으로 닫아주는 기능 - Auto Rename Tag : HTML 태그 변경시 연관된 태그의 이름을 자동으로 변경해주는 기능 Chrome 추천 플러그인 - vue.js devtools : vue 구조에 맞게 디버깅 가능 개발 방식 SFC(Single File Component) 구조로 개발(확장자 .vue) 하나의 파일에 HTML, CSS, JavaScript를 묶어서 관리개발하는 방식 해당 내용에 대한 설명 https://vuejs.org/guide/scaling-up/sfc.html#introduction Composition API 방식으..

Web/Vue 2022.05.29

vtkRenderWindow를 div에 연결하기 - Vue

vtkRenderWindow를 HTML에 출력하려고 하면 가장 좋은 태그는 div 일 것입니다. 그런데 div에 연결하는것이 조금 복잡합니다.  아래의 그림이 div를 vtkRenderWindow에 연결하는 구조도입니다.  HTML의 div 태그는 먼저 vtkOpenGLRenderWindow의 setContainer 함수를 통해 설정됩니다. 그 후에 vtkRenderWindow의 addView 함수를 통해서 VTK 구조와 연결됩니다. PC기반의 VTK를 사용할때에 비하면 vtkRenderWindow와 vtkOpenGLRenderWindow가 함께 존재해서 햇갈리기는 하지만, vtk.js는 이렇게 쓴다고 하니 적응해야죠 ㅠㅠ.  아래는 div에 vtk.js를 연결한 코드입니다.(Vue3 Compositio..

ETC 2022.05.24

FFmpeg을 활용한 화면 녹화(2/2)

녹화 방법 FFmpeg(v5.0)는 커맨드라인으로 실행가능하므로, C#의 외부 프로세스 실행하는 함수를 이용하여 처리함. 저장포멧: mkv 녹화 시작 방법 ProcessStartInfo psi = new ProcessStartInfo(); psi.FileName = "bin경로\\ffmpeg.exe"; psi.Arguments = "-f gdigrab -framerate 15 -video_size 1920x1080 -i desktop 출력파일경로"; psi.RedirectStandardInput = true; // 종료시 q 커맨드를 넣기 위한 옵션 psi.CreateNoWindow = true; myProcess = Process.Start(psi); 녹화 종료 방법 FFMpeg는 키보드q를 입력해야 ..

FFmpeg을 활용한 화면 녹화(1/2)

개발 목적 현재 작업하는 장면을 자동으로 녹화하는 프로그램을 제작하려고 함. 예를 들어서 자동으로 프로그램을 실행한 후, 실행되는 화면을 자동으로 녹화해 놓으면, 나중에 녹화된 화면을 보고 빠르게 테스트(재생시 2배속이나 건너뛰기 등등의 기능을 이용하여) 및 디버깅이 가능함. 개발 개요 1. GUI 베이스의 프로그램을 제작하고자 하므로 C#으로 화면 구성. 2. 녹화 및 재생을 Script로 실행할 수 있는 FFmpeg(v5.0)으로 녹화 기능 구성. 3. 녹화를 수행하고자 할 때, C#의 Process 실행함수를 이용하여 FFmpeg를 실행하여 수행함 녹화 프로그램 개발시 시도해 본 다른 방식 - C# + OpenCvSharp4 장점은 C#에서 라이브러리를 이용하여 개발하므로, 프레임 단위로 디버깅이 ..

Lightsail의 Window 버전에서 Django 배포

고정 IP 설정 외부 고정 IP가 있어야 윈도우 원격도 동일한 IP로 접속할 수 있고, 웹서버 주소도 고정되어 서비스가 원활하다. 아마존의 Lightsail에서 Networkding 탭에서 public IP를 생성하여 attach 하자. Django settings.py의 allow_hosts 설정 모든 ip에서 접속할수 있도록 설정해 주자 ALLOWED_HOSTS = ['*'] Django 시작 접속하는 ip와 port를 모든 ip로 하고 80 포트로 서비스 하도록 설정함 주의 윈도우가 아닌 리눅스에서는 0:80 이렇게 하면 되는데, 앞에 붙는 숫자가 윈도우와 리눅스가 다름에 주의 python manage.py runserver 0.0.0.0:80

Web/AWS 2022.01.01

BCI 관련 자료들

뇌관련 장비들 설명해놓은 곳 뇌파(EEG)측정 기기 선정하기 : 네이버 블로그 (naver.com) 괜찮아 보이는 장비 업체 https://www.gtec.at/product-configurator/g-nautilus-pro/ https://shop.openbci.com/collections/frontpage 제품 비교 사이트 https://imotions.com/blog/eeg-headset-prices/ 사용 제품 비교 문서 제목 EEG-based emotion recognition: Review of commercial EEG devices and machine learning techniques Emotiv 비교 문서 https://biomedical-engineering-online.biomed..

ETC 2021.12.20

Simple Volume Rendering App - React

개요 vtk.js와 bootstrap을 이용하여, 간단히 볼륨템플릿을 바꿔보는 프로그램을 만들어 보겠습니다. 먼저, 준비사항으로써 본 프로젝트에서 사용할 첨부 파일을 public/leonhong.vti 에 놓습니다. ps. pptx 파일은 개인정보가 있어서 첨부하지 않으므로 임으로 pptx 파일을 만들어서 사용하세요. 소스코드는 아래와 같습니다. import pptFile from './leonhong.pptx' import 'bootstrap/dist/css/bootstrap.min.css'; import { Container, Button, Row, Col, Card, Navbar } from 'react-bootstrap'; import { useRef, useEffect } from 'react'..

ETC 2021.12.11