Scientific Computing & Data Science

Written by Geol Choi | Oct. 28, 2017 이번 포스팅은 Windows의 Python 환경에서 Open Source Computer Vision Library인 OpenCV 개발환경을 구축하는 방법에 대해 알아보겠습니다. 이 포스팅에 설명된 방법 외에도 다양한 방법들이 존재하지만 가급적 쉽게 따라할 수 있는 방식을 소개하도록 하겠습니다.1. Python 2.7 환경에 구축하기Python 2.7 환경에 구축하는 방법은 가장 간단한 방법이며, 다음과 같은 절차로 진행합니다: (1) OpenCV 공식사이트(https://opencv.org)에서 원하는 버전의 OpenCV Windows Package를 다운받아 설치합니다. (2) 설치는 사실 상 압축파일을 해제하는 것에 불과한데, 설치된..

이번 글에서는 Canvas 태그에 웹캠 화면을 출력하는 방법을 알아보도록 하겠다. [Project File Download] [webcam.html] [/stylesheets/main.css] .booth { width: 800px; background: #ccc; border: 10px solid #ddd; margin: 0 auto; } [/javascripts/video.js] (function() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), video = document.getElementById('video'), vendorUrl = window.URL || window.webkitURL;..

"Pug"는 Express Framework의 Template Engine으로 이전에 "Jade"라는 이름을 가지고 있었으나, "Jade"가 상표권이 걸려 있어 부득이하게 "Pug"라는 이름으로 개명(?)하게 되었다. 따라서, 기존의 "Jade" 문법에 익숙한 개발자들은 "Pug"에 금방 익숙해 질 수 있다. 간단하게 Pug의 문법과 활용법에 대하여 살펴보도록 하자. Pug 설치하기여타 Node Packages처럼 Command Line Tool의 "npm" 명령을 통해 Pug Node Package Manage로 설치가 가능하다.$ npm install pug또는 Node.js의 최신 버전이 설치되어 있으면,$ npm install pug-cli -g과 같이 명령을 입력하면 된다.위의 설치 옵션 "-g..

이번 글에서는 HTML 페이지에서 페이지를 스크롤 다운(Scroll Down) 시 일정 이상이 스크롤 다운되면 콘텐츠가 고정되는 예제입니다.웹페이지를 스크롤 다운하다가 상단의 메뉴가 사라지면 메뉴를 클릭하기 위해 다시 웹페이지를 스크롤 업(Scroll Up)해야 하는 불편함이 있습니다.본 예제는 이러한 불편함을 제거해 주는 기능 구현에 관한 것이며, 대다수의 모던 웹페이지들이 채택하는 것이기도 합니다.HTML다음 HTML 문서는 예제용 문서이며, 핵심은 JavaScript 코드임을 명심하길 바랍니다. scroll-fixed.html Example - Fixed Content While Scrolling 1st Menu 2nd Menu 3rd Menu SassCSS의 전처리기인 Sass 파일로 작성하였습니..

이번 글에서는 Modal Dialog를 작성하는 방법에 대해 알아보고자 한다.본 예제는 W3Schools.com의 예제를 기반으로 jQuery로 동작하도록 작성한 것이며, 버전 3.0.0을 이용하여 작성되었지만, 이전 버전에서도 큰 문제없이 동작하리라 생각된다. 편의를 위해 jQuery 3.0.0 소스를 첨부한다: HTML다음과 같이 index.html 파일을 작성한다: [index.html] Modal Example Open Modal × Some text in the Modal.. CSSCSS 파일을 다음과 같이 작성한다: [modal-dialog.css]/* The Modal (background) */ .modal { display: none; /* Hidden by default */ posit..

원본: http://www.zdnet.co.kr/news/news_view.asp?artice_id=20151201024656&type=det&re= "자바스크립트가 세상을 먹어치우고 있다(Javascript Is Eating The World)” ​세상에 나온지 20년 가까이 된 언어인 자바스크립트가 재조명받고 있다. 다양한 자바스크립트 프레임워크와 라이브러리가 등장하고 또 발전하면서 웹부터 서버, PC 및 모바일 네이티브 앱 개발까지 안 쓰이는 곳이 없어졌기 때문이다.​소프트웨어가 세상을 먹어치우고 있다면 소프트웨어를 먹어치우고 있는 건 자바스크립트다는 말도 들린다. 자바스크립트가 어디에나 있다는 의미로 '자바스크립트 유비쿼터스'라고 하는 사람도 있다.​■ 워드프레스닷컴은 왜 PHP를 버리고 자바스크..

이번 글에서는 지난 글(Creating Desktop Apps with Electron)에 이어 Electron Desktop App에서 메뉴를 만드는 방법에 대하여 알아보도록 하겠다.App 초기화Terminal에 "npm init" 명령을 통해 다음과 같이 입력한다. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use ..

이번 글은 node.js(nodejs.org) 기반 Cross Platform Desktop App을 만드는 도구인 Electron(http://electron.atom.io)을 이용하여 기본앱(Hello World)을 만드는 방법에 대하여 알아보도록 하겠습니다. 우선 App을 만들 폴더를 하나 만듭니다(비어 있어야 합니다).Terminal에 다음 명령을 실행하여 App 초기화를 합니다(node.js가 설치되어 있어야 합니다). $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See ..

이번 글에서는 CreateJS를 이용하여 간단한 오브젝트들을 생성하고, 오브젝트들을 마우스 드래그 또는 터치 드래그(터치패드의 경우)하고, 클릭(터치)하는 동안 각각의 사운드가 출력되도록 하는 예제를 살펴 보도록 한다. Part 1 - CreateJS 라이브러리 로딩하기 CreateJS Suite는 HTML5의 Canvas 기술을 기반으로하여 Web Browser에서 풍부한 상호작용(interactive) 콘텐츠 기술을 표현하기 위한 JavaScript 라이브러리로써 gskinner가 처음 개발한 후 Adobe, MS, Mozilla 재단 등이 post-Flash를 위하여 적극적으로 후원하고 있다.(ActionScript와 유사하여 기존의 Flash 개발자들은 금방 적응할 것이다.)CreateJS Sui..