12월, 2018의 게시물 표시

div 정가운데 아이콘 배치

이미지
위 그림처럼 정 가운데 아이콘 배치하는 html + css 1. 방법 1 (html) <div class='wrapper'>   <i class='icon'></i> </div> (css) .wrapper{   position: relative;   width: 100%;   height: 100%;   display: inline-flex; } .icon {   margin: auto; }

Python + PIL + pyzbar로 바코드(CODE128)/QR코드 인식

0. 테스트환경 [앱] - React 16 - React native 0.55 - React native camera 현재기준최신 - 갤럭시 S8 [서버] - Ubuntu 16 - Python 3.6 - Flask 현재기준최신 (코드를 세로로 길게 배치하고 -> 앱에서 사진을 찍어 서버로 전송 -> 서버에서 코드를 인식해서 위에서부터 순서대로 decode해서 리턴함) 1. pyzbar https://pypi.org/project/pyzbar/ 에 나와있는대로 설치한다. 인식 자체는 zbar라는 c로 작성된 라이브러리를 사용한다. pyzbar는 zbar를 Python에서 사용할 수 있게 해주고 추가로 이미지 내 코드 위치를 제공한다. 2. Python image library(PIL) https://pillow.readthedocs.io/en/3.1.x/installation.html 에 나와있는대로 설치한다. 단순 인식이라면 이미지 처리를 할 필요는 없다. 한 파일 내에 raw data가 같은 바코드가 여러개 있으면 첫 번째(위)만 인식돼서 파일을 가로로 n개로 잘라서 사용하기로 했다. 3. 바코드/QR코드 인식 QR코드는 한 이미지 내에서 중복 인식하지만 전체적인 인식률이 낮고, 바코드는 중복 인식이 안되지만 인식률이 높은 것 같다. 아래는 이미지를 불러와 n등분하고 흑백이미지로 만들고 크기를 반으로 줄인 각각의 이미지에서 바코드/QR코드를 찾는 코드이다. from pyzbar.pyzbar import decode, ZBarSymbol from PIL import Image img = Image.open(파일이름) width, height = img.size n = (몇 등분 할것인지) unit = int(height/n) result = [] for i in range(n): cropped = img.crop((0, i*unit, width -1, i*unit

Blockly 블럭 만들고 연결하기

1. 새 블럭 만들기 var childBlock = workspace.newBlock('BLOCKNAME') (workspace는 알아서 만들자) 2. 연결할 블럭 찾아오기 1) ID로 찾아오기 var parentBlock = workspace.getBlockById('ID') 2) index로 찾아오기 workspace.getAllBlocks()는 Block array를 리턴하므로 반복문으로 찾으면 된다. 3. 연결 1) 단순 연결 (A; B;) var childBlock = workspace.newBlock('BLOCKNAME') childBlock.initSvg() childBlock.render() parentBlock.nextConnecion.connect(childBlock.previousConnection) 2) 내부 연결(A { B;}) var childBlock  = workspace.newBlock('BLOCKNAME') childBlock.initSvg() childBlock.render() parentBlock.getInput('INPUTNAME').connection.connect(childBlock.previousConnection) INPUTNAME은 custom block을 만들 경우 직접 설정할 수 있고 Blockly demo 기준으로 DO0인 것 같다. block.inputList로 inpupt 목록을 가져올 수 있고 정확한 name을 확인해서 가져오면 된다.