[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js

1. 연구 모듈/비분류 2017. 7. 17. 00:00

자바스크립트로 되어있는 HTML5 Canvas 라이브러리


사용 준비

  1. 다음 홈페이지에서 Fabric.js 최신 버전들 다운받아 압축을 푼다.


  2. dist/ 디렉토리 밑의 fabric.min.js(배포용) 혹은 fabric.js(개발용) 파일을 포함하여 아래와 같이 뼈대 코드를 작성한다.


    index.html 
    <html>
<head>
    <script src="fabric.min.js"></script>
    <meta charset="utf-8">
</head>

<body>
    <canvas id="c" width="400" height="400" style="border:1px solid #000000"></canvas>
    <script>
        // 이 부분에 fabric js 코드가 들어간다.
    </script>
</body>
</html>


사용 예제


다음은 작은 사각형을 그리는 예제이다. 

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);


다음은 간단히 이미지 파일을 표시하는 예제이다. (같은 경로에 my_image.png 파일이 필요하다.) 
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('my_image.png', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(0.5).setFlipX(true);
  canvas.add(oImg);
});


Canvas vs. StaticCanvas


Fabric.js는 기본적으로 각 오브젝트에 아래와 같이 크기 변경, 이동 및 회전이 가능한 핸들이 붙어서 출력되게 된다.




이를 원하지 않을 경우는 Canvas 대신에 StaticCanvas를 사용하여 Canvas를 생성하면 된다. 
var canvas = new fabric.StaticCanvas('c');


참고 사이트

<테스트 환경>
- OS : Windows 7
- Fabric.js 버전 : 1.7.16


저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

[React Native] react-native init시 Unexpected token ... 에러가 발생하는 경우  (0) 2017.08.06
[겉핥기 프로젝트] React Native 설치 및 샘플 코드 실행 (안드로이드)  (0) 2017.08.03
라즈베리파이 제로 TRAVELShooting  (0) 2017.06.28
테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
,

라즈베리파이 제로 TRAVELShooting

1. 연구 모듈/비분류 2017. 6. 28. 03:22

1. 모니터 / 키보드 없이 USB로 연결하기 ==> 가운데 포트에서만 동작

2. Modmypi Wifi Dongle ==> 가운데 포트에서만 동작

3. 따라서 USB로 연결하여 Modmypi Wifi Dongle 사용하기는 불가 (ㅠㅠ)

   ==> 알고봤더니 가운데 포트만 USB 포트. 가장자리 포트는 단지 전원 포트라고 함.

 

4. Raspian 사용시 디폴트로 SSH가 막혀있다. 이를 Enable 하기 위해서는 윈도우 파티션 루트에 ssh(확장자 없이)라는 이름의 빈 파일을 생성한 후 부팅한다.

 

저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

[겉핥기 프로젝트] React Native 설치 및 샘플 코드 실행 (안드로이드)  (0) 2017.08.03
[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js  (0) 2017.07.17
테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
,

테스트용 웹 서버 간단히 구동하기 (Node.js 사용)

1. 연구 모듈/비분류 2017. 6. 9. 06:38

HTML과 자바스크립트 등으로 구성된 웹 서버 소스가 있을 때, 간단히 테스트용 웹서버 구동하기 (Node.js 사용)

  1. 설치 
    npm install -g http-server
  2. 실행 
    http-server <폴더명>


또 다른 방법 (global로 설치 필요없음)

npx http-server <폴더명>
저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

[겉핥기 프로젝트] 자바스크립트 Canvas 라이브러리 Fabric.js  (0) 2017.07.17
라즈베리파이 제로 TRAVELShooting  (0) 2017.06.28
Atom 에디터에서 Markdown -> 마인드맵 변환하기  (0) 2017.02.12
Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (이클립스 개발환경)  (0) 2016.12.02
,

[wxPython] 외부 프로그램의 표준 출력/에러를 표시하는 template

1. 연구 모듈/Python 2017. 5. 13. 12:40
외부 프로그램을 실행하고 그 표준 출력/에러를 텍스트 컨트롤에 표시하는 어플의 Template입니다.


template2.py 
# -*- coding: utf-8 -*-
#!/usr/bin/python
 
import wx
import subprocess
import threading
import sys
 
COMMAND_PATH = "test.py" # 실행할 외부 프로그램 경로

def stdout_thread(pipe, callback):
    for line in iter(pipe.stdout.readline, b''):
        callback(line.rstrip())

def exec_command(cmd, callback, cwd=None):
    p = subprocess.Popen(cmd, 
                         stdout=subprocess.PIPE, 
                         stderr=subprocess.STDOUT, cwd=cwd)
    out_thread = threading.Thread(name='stdout_thread', target=stdout_thread, args=(p, callback))

    out_thread.start()
 
class MainWindow(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size = (480, 320),
            style = wx.DEFAULT_FRAME_STYLE|wx.NO_FULL_REPAINT_ON_RESIZE)
             
        vbox = wx.BoxSizer(wx.VERTICAL)

        self.tc = wx.TextCtrl(self, 1, size = (-1, 200), style = wx.TE_MULTILINE)
        vbox.Add(self.tc, 0, wx.EXPAND | wx.ALL)

        self.SetSizer(vbox, True)
        self.Layout()
         
def callback_stdout(msg):
    print("}}} " + msg)
    frame.tc.AppendText(msg + "\n")
             
app = wx.App(False)
frame = MainWindow(None, -1, u"Title")
frame.Show(1)

exec_command([sys.executable, COMMAND_PATH], callback_stdout)

app.MainLoop()


test.py 
# -*- coding: utf-8 -*-
#!/usr/bin/python

import sys

print "blah;blah;"
sys.stdout.flush()


[주의사항] 실행하려는 외부 프로그램이 python 코드일 때, 외부 프로그램에서 메세지 출력 후 sys.stdout.flush()를 해줘야 메세지가 그때 그때 출력된다. 그렇지 않으면 메세지가 마지막에 한꺼번에 출력된다.


template2.py 실행 화면


 


<테스트 환경>
OS : Windows 7
Python 버전 : 2.7
wxPython 버전 : 2.8.12.1


저작자표시 비영리 동일조건

'1. 연구 모듈 > Python' 카테고리의 다른 글

[Python] Pymunk 사용 예제 - 1. 기본 예제  (0) 2018.09.01
[Python] 파이썬 3에서 문자열 처리  (0) 2018.02.07
[Python] 파이썬에서 문자열 처리 (파이썬 2.X)  (0) 2017.05.04
[Python] HTML 파싱하기 (Beautiful Soup 모듈 사용)  (0) 2017.02.01
[Python] HTTP 요청하기 (requests 모듈 사용)  (0) 2016.12.29
,

[Python] 파이썬에서 문자열 처리 (파이썬 2.X)

1. 연구 모듈/Python 2017. 5. 4. 05:46

파이썬에서 문자열은 바이트 코드와 유니코드로 나뉜다.


바이트 코드는 euc-kr, UTF–8 등과 같이 특정 인코딩이 적용된 문자열을 말한다. 파이썬에서 유니코드는 어떤 특정 인코딩에 속하지 않는 유니버셜한 어떤 것을 나타낸다. (다른 언어에서 흔히 UTF–8을 유니코드로 일컫는 것과는 다름에 유의)

  • 유니코드 >>> 바이트 코드로 변환하기 위해서는 encode() 함수가 사용된다.

  • 바이트 코드 >>> 유니코드로 변환하기 위해서는 decode() 함수가 사용된다. 

    str = ustr.encode("UTF–8") # 유니코드에서 UTF–8 바이트 코드로 변환
ustr = str.decode("UTF–8") # UTF–8 바이트 코드에서 유니코드로 변환

  • type() 함수를 사용하여 어떤 문자열이 유니코드인지 바이트 코드인지 알아낼 수 있다. 

    print type(str) # 바이트 코드일 경우
-> <type 'str'>

print type(ustr) # 유니코드일 경우
-> <type 'unicode'>


소스 코드 상에서 대입시,


[1]

# -*- coding: utf-8 -*-

myStr = "가나다"

myStr의 타입 -> utf-8의 <type 'str'>

[2]

# -*- coding: cp949 -*-

myStr = "가나다"

myStr의 타입 -> cp949의 <type 'str'>

[3]

myStr = u"가나다"

myStr의 타입 -> <type 'unicode'>

'# -*- coding: ~' 을 붙이지 않을 경우, 시스템 로케일인 cp949의 <type 'str'>로 적용되어야 할 것 같은데, 실제 테스트 결과는 utf-8로 적용된다??


[참고] 이것은 파이썬 2.X 대에서 적용되는 내용이고, 파이썬 3.X 대에서는 방식이 약간 달라지게 되는데...


테스트 환경
- OS : Windows 7
- Python 버전 : 2.7


저작자표시 비영리 동일조건

'1. 연구 모듈 > Python' 카테고리의 다른 글

[Python] 파이썬 3에서 문자열 처리  (0) 2018.02.07
[wxPython] 외부 프로그램의 표준 출력/에러를 표시하는 template  (0) 2017.05.13
[Python] HTML 파싱하기 (Beautiful Soup 모듈 사용)  (0) 2017.02.01
[Python] HTTP 요청하기 (requests 모듈 사용)  (0) 2016.12.29
[Python] HTTP 요청하기 (httplib 모듈 사용)  (0) 2016.12.13
,

텔레그램 봇으로 채널 포스팅 - 6. Python 사용 예제 (2)

1. 연구 모듈/텔레그램 2017. 3. 21. 06:55

위의 두 글을 참고하면 웹페이지의 특정 class에 해당하는 부분을 추출하여 텔레그램 채널로 보내는 것이 가능하다. (두둥)


Python 2 : 
# -*- coding: utf-8 -*-
  
import requests
from bs4 import BeautifulSoup
    
r = requests.get('http://httpbin.org')
   
# beautiful soup 초기화
soup = BeautifulSoup(r.text, "html.parser")
   
# class로 찾기
mr = soup.find(class_="bash")
result = mr.get_text()
result_utf8 = result.encode("UTF-8")
  
# 텔레그램 채널로 전송
url = "https://api.telegram.org/bot<텔레그램 봇 토큰>/sendMessage"
headers = {"Content-type": "application/json"}
params = '{"chat_id": "@<채널 ID>", "text": "텍스트 추출 : %s"}' % result_utf8
r = requests.post(url, headers = headers, data = params)
   
print(r.text)
Python 3 : 
# -*- coding: utf-8 -*-
  
import requests
from bs4 import BeautifulSoup
    
r = requests.get('http://httpbin.org')
   
# beautiful soup 초기화
soup = BeautifulSoup(r.text, "html.parser")
   
# class로 찾기
mr = soup.find(class_="bash")
result = mr.get_text()

# 텔레그램 채널로 전송
url = "https://api.telegram.org/bot<텔레그램 봇 토큰>/sendMessage"
headers = {"Content-type": "application/json"}
params = '{"chat_id": "@<채널 ID>", "text": "텍스트 추출 : %s"}' % result
r = requests.post(url, headers = headers, data = params.encode("UTF-8"))
   
print(r.text)




테스트 환경
 - OS : Windows 7
 - Python 버전 : 2.7, 3.6


저작자표시 비영리 동일조건

'1. 연구 모듈 > 텔레그램' 카테고리의 다른 글

텔레그램 봇으로 채널 포스팅 - 8. Python 사용 예제 (3)  (0) 2018.02.20
텔레그램 봇으로 채널 포스팅 - 7. Clojure 사용 예제 (2)  (0) 2017.09.14
텔레그램 봇으로 채널 포스팅 - 5. Clojure 사용 예제 (1)  (0) 2016.12.14
텔레그램 봇으로 채널 포스팅 - 4. Python 사용 예제 (1)  (1) 2016.12.13
텔레그램 봇으로 채널 포스팅 - 3. Node.js 사용 예제 (2)  (0) 2016.10.06
,

[겉핥기 프로젝트] Clojure에서 GUI 프로그래밍

1. 연구 모듈/Lisp - Clojure 2017. 2. 24. 01:00

사전 준비사항

  1. app template을 사용하여 프로젝트를 생성한다.


  2. seesaw 모듈 사용을 위해서 project.clj 파일의 dependencies 부분에 아래와 같이 추가해준다. (버전은 참고사이트에서 최신 버전을 확인하자) 

    :dependencies [[org.clojure/clojure "1.8.0"] [seesaw/seesaw "1.4.5"]]


사용 예제


다음은 간단한 윈도우 창을 표시하는 예제이다.

(ns web.core
   (:gen-class)
   (:require [seesaw.core :as seesaw]))
(def window (seesaw/frame
   :title "First Example"
   :content "hello world"
   :width 200
   :height 50))
(defn -main
   [& args]
   (seesaw/show! window))


참고 사이트

저작자표시 비영리 동일조건

'1. 연구 모듈 > Lisp - Clojure' 카테고리의 다른 글

[Lisp/Clojure] 아무 Clojure 실행방법 대잔치  (0) 2018.04.13
[Lisp/Clojure] HTTP 파싱하기 (enlive 모듈 사용)  (0) 2017.09.14
[Lisp/Clojure] Clojure에서 커맨드 파라미터 처리  (0) 2017.02.11
[Lisp/Clojure] default template 프로젝트 app template 프로젝트로 변환하기  (0) 2017.01.03
[Lisp/Clojure] 비 Eclipse 프로젝트 Eclipse에서 Import하기  (0) 2016.12.22
,

Atom 에디터에서 Markdown -> 마인드맵 변환하기

1. 연구 모듈/비분류 2017. 2. 12. 01:05

사전 준비사항


Atom 에디터에서 Markdown -> 마인드맵 변환하기 위해서는 markdown-mindmap 패키지 설치가 필요하다.


사용 방법


아래와 같이 헤드라인 요소를 사용하여 작성한 내용을 마인드맵으로 변환할 수 있다. <h1> ~ <h6>까지만 존재하므로 최대 깊이는 6으로 제한된다.

# Root Node
## Node 1
### Node 1-1
### Node 1-2
## Node 2
### Node 2-1


Packages 메뉴에서 Mindmap view를 켜면 아래와 같이 변환된 내용을 볼 수 있다.



저작자표시 비영리 동일조건

'1. 연구 모듈 > 비분류' 카테고리의 다른 글

라즈베리파이 제로 TRAVELShooting  (0) 2017.06.28
테스트용 웹 서버 간단히 구동하기 (Node.js 사용)  (0) 2017.06.09
Perl을 사용하여 Markdown -> HTML로 변환하기  (0) 2017.02.11
[겉핥기 프로젝트] Vaadin 샘플 코드 실행하기 (이클립스 개발환경)  (0) 2016.12.02
[C++] STL map 사용시 주의사항  (0) 2016.11.22
,

티스토리툴바