밥을먹는선비의 超连接技术 연구소

html5 마크업이 주어가 아닙니다.

정작 중요한것은 바로 canvas 입니다.

그러나 canvas 태그가 아닙니다.

바로 <img> 태그처럼 정해진 이미지말고도 그위에 점을 자유롭게찍을수있고 선을 그릴수있는 점입니다.

그런 철학이 중요한것입니다.

뿐만아닙니다. canvas 의 webgl context는 단순히 쓰리디 랜더링 캔버스가 아닙니다.

바로 웹에서 쉐이더가 되기때문입니다.

이것은 기적입니다.

모세의 기적을보고 광야에서 몇십년을 방황했던것처럼 사람들은 기적을 보고도 믿음 갖지못합니다.

우리는 DOM이라는 우상을 아직도 숭배합니다.

너무도 많은 너저분한 신들을 믿는 원시종교처럼 DOM그렇게 사람들 마음을 현혹합니다.

그런 의미에서 DOM은 극복해야할과제입니다.

DOM은 어둠이며 미신입니다.

DOM은 HTML5의 원죄입니다.

그래서 시멘틱웹떠벌리며 마크업을 팔아먹는이들은 사탄입니다.

html5는 유일신 canvas만 존재합니다. 믿어야합니다. 

오직 canvas입니다.

canvas만이 '주어'이고 사랑이며 빛이며 구원이기 때문입니다.

매순간저도 그냥 DOM을하고 싶은 유혹에빠져듭니다. 나약한 인간의 육체에 의존하다보니 믿음이 자꾸흔들립니다.

그러므로 우리는 하루하루 canvas외에 다른 태그를쓴것에 대해 사죄를 하고 반성을하고 고백을해야합니다.

전능하신 canvas 믿으며 알면서도 <canvas> 부정하며 다른태그들을 쓰는 우리는 그래서 죄인입니다. 

더이상 죄를 지어서는안됩니다. 우리는 canvas만 믿으며 죄를 씻고 구원을 받아야합니다.

ps.

그냥 웃자고한 농담인거아시죠?

대부분의 3디 그래픽스 랜더들은 씬그라프들에 대한 update 콜백을 제공한다.

대부분의 어플리케이션들은 그곳에서 씬그라프상의 오브잭트들을 움직이게된다.

그리고 함수의 마지막 부분에서 updateAll을 하게 되는데

문제는 여기서 발생한다.

주로 물체와 카메라를 동시에 움직일때 발생한다.

카메라의 시점과 오브잭트가 위치가 갱신한 타이밍이 교묘하게 엇갈리기때문에 발생한다.

가장간단한 해결방법은 물체를 움직이기전에 카메라의 메트릭스를 한번 갱신해주는 방법이다(월드행렬)

var self = this;
self.camera.updateMatrixWorld();

var v1 = new THREE.Vector3( 0, 0, 0.5 ).unproject( self.camera );
self.testnode.position.copy(v1)

this.updateAll();

위와 같이 말이다.

wifi.setmode(wifi.STATION) 를 써서  AP에 붙는 스테이션 모드를 지정할 수 있습니다.

그다음 단계로 ssid 와 패스워드를 지정해야합니다.

wifi.sta.config("iptime","")

첫번째 인자는 ssid 두번째 인자는 passwd입니다.

ssid 는 iptime 이고 패스워드는 지정하지않았습니다.

wifi.setmode(wifi.STATION)

wifi.sta.config(ssid,passwd)

위 두개의 함수들은 전원을끄거나 리셋을 해도 값이 날라가지 않고 저장됩니다.

여기까지 하면 기본적으로 wifi.sta..autoconnect(1) 로 되어있으므로 자동으로 ap에 붙게됩니다.

만약 autoconnect(0) 으로 자동 접속이 해제된상태이면 

wifi.sta.connect()  로 수동으로 접속합니다.

ap접속을 끊으려면 wifi.sta.disconnect() 를 사용합니다.

지금까지 AT펌대신에 올리려고 노력하셨던것이 바로 nodemcu 펌웨어 입니다.

esp8266의 nodemcu 펌웨어는 c++라이브러인 espreesif sdk 에  루아 인터프리터를 씌운것입니다.

그래서 펌웨어이면서도 스크립트를 교체하는것으로 손쉽게 기능 업그레이드가 가능하여서 매우 혁신적인 개념의 것이라고 볼수있습니다.

펌웨어를 무사히 올렸다면 씨리얼통신프로그램으로 접속하면 초기화면은 다음과 같습니다.

gpio  포트를 켜기위해서는 모드 세팅을 먼저 해줍니다.

1번 포트를 출력모드로 지정합니다.

gpio.mode(1,gpio.OUPUT)

1번포트를 high 상태로 만들어 줍니다.

gpio.write(1,gpio.HIGH)

esp 써져있는 포트번호와 루아펌에서 쓰는 포트 인덱스는 다릅니다. 여기써 사용한 1번은 esp상 기판상에서는 5번 입니다.

위의 사진 좌 상단 rxd 바로 밑에 GPIO5 라고 써져있는 부분이 루아펌(nodemcu)에서는 1번이 되는 것입니다.

GPIO5 -> 1

GPIO4-> 2

두개 포트가 입출력전용으로 사용하도록 만들어진포트입니다. 나머지 포트들도 쓸수는 있으나 다른용도가 있으므로 가급적이면 위의 두개의 포트만 사용하시는 편이 좋을거같습니다.

GPIO16->0

chpd 밑에 GPIO16 으로 표시되는 0번 포트가 하나 더있습니다. 이것은 on off 전용 포트입니다. 그래서 pwm이 필요한 곳에서는 사용할수없습니다.(서보제어)

단순히 켜고끄는 동작이 필요할때는 이포트를 사용하길 권장합니다.

포트값을 읽기 위해서는 gpio.read(port index) 함수를 이용합니다.

print( gpio.read(1) )

방금 write로 출력했던 내용을 읽을수있습니다.

입력모드로 하고싶으면 gpio.mode(1,gpio.INPUT) 을 해주어 입력 전용 모드로 세팅해줍니다.

'

코도바로 프로잭트를 생성하면 기본적으로 설치되는 플러그인입니다.(5.x 버전 확인)

4.0대부터는 http 로 시작하는 주소를 직접입력하거나 location.replace 등으로 주소를 직접 입력하는경우 새창으로 페이지가 열리도록 되어있습니다.

경우에 따라서는 새창에서 열리지않고 웹뷰가 리프레쉬되도록 하고싶을때가 있습니다.

코도바에서 새창에서 페이지가열리지않도록 하려면 whitelist 플러그인을 세팅해주어야합니다.

(참고 : https://github.com/apache/cordova-plugin-whitelist)

아래처럼 config.xml에 allow-navigation 태그를 이용해서 웹뷰에서 해당 페이지가 열리도록 설정할수있습니다.

location.href,replace 뿐만아니라 <a href="..."> 도 마찬가지입니다.

<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />

<!-- Wildcards are allowed for the protocol, as a prefix
     to the host, or as a suffix to the path -->
<allow-navigation href="*://*.example.com/*" />

<!-- A wildcard can be used to whitelist the entire network,
     over HTTP and HTTPS.
     *NOT RECOMMENDED* -->
<allow-navigation href="*" />

<!-- The above is equivalent to these three declarations -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />

반대로 allow-intent 하면 새로운창에서 href=주소에 대한 페이지가 열리게됩니다.

<!-- Allow links to web pages to open in a browser -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

<!-- Allow links to example.com to open in a browser -->
<allow-intent href="http://example.com/*" />

<!-- Wildcards are allowed for the protocol, as a prefix
     to the host, or as a suffix to the path -->
<allow-intent href="*://*.example.com/*" />

<!-- Allow SMS links to open messaging app -->
<allow-intent href="sms:*" />

<!-- Allow tel: links to open the dialer -->
<allow-intent href="tel:*" />

<!-- Allow geo: links to open maps -->
<allow-intent href="geo:*" />

<!-- Allow all unrecognized URLs to open installed apps
     *NOT RECOMMENDED* -->
<allow-intent href="*" />

access  태그 ajax 요청에 대한 허용여부를 설정을 할수있습니다.

<!-- Allow images, xhrs, etc. to google.com -->
<access origin="http://google.com" />
<access origin="https://google.com" />

<!-- Access to the subdomain maps.google.com -->
<access origin="http://maps.google.com" />

<!-- Access to all the subdomains on google.com -->
<access origin="http://*.google.com" />

<!-- Enable requests to content: URLs -->
<access origin="content:///*" />

<!-- Don't block any requests -->
<access origin="*" />

어떠한 access에대한 정의도 없다면 file:// 만 요청이 허용가능해집니다.

크로스워크란?

싸이트주소 https://crosswalk-project.org

하이브리드앱(웹뷰기반의앱) 개발시 쓰는 웹뷰들이 아직은 html5표준을 제대로 지켜지지않는 문제를 해결하기 위해서

웹뷰를 자체를 따로 개발하려는 프로잭트임

그러나...

사실 인텔에서 주관해서 하는 프로잭트인데 사실 이것도 html5표준을 완벽지원하느냐는 또다른 함정일수있음.

그래서 '나루호도' 라는 말을 하기엔 아직은 이를거같다는 생각이듬...

-안드로이드용 사용기정리

1. 환경 세팅

개발환경 macosx 사용함 도규먼트상에는 리눅스용만 나와있으나 osx에서도 비슷하게 세팅할수있음

자바와 ant라는게 설치되어야하는데 자바는 안드로이드 스튜디오가 설치되었다면 별도로 세팅할필요는 없을거같음

ant 파일을 다운받아 압축을 풀고 경로 설정을 해주면됨

http://www.apache.org/dist/ant/binaries/ 이곳에서 다운받아서 압출풀고 패스에 추가해주면됨

리눅스의 경우는 패스를 추가 하려면 ~/.bashrc 이지만 osx 는 ~/.bash_profile 임

vim ~/.bash_profile 

파일을 오픈하고 없으면 만들어짐

ant와 안드로이드 sdk(안드로이드 스튜디오 설치) 경로를 추가해 줌

예>

export ANT_HOME=/Users/gbox3d/Desktop/android/utils/ant

export PATH=${PATH}:${ANT_HOME}/bin

export PATH=/Users/gbox3d/Library/Android/sdk:$PATH

export PATH=/Users/gbox3d/Library/Android/sdk/tools:$PATH

export PATH=/Users/gbox3d/Library/Android/sdk/platform-tools:$PATH

그 다음 터미널창을 다시열거나 아래 커멘드를 실행해서 설정을 반영함

source ~/.bashrc

아래 커멘드들로 제대로 설치되었는지 확인

ant -version

adb  help

https://crosswalk-project.org/documentation/downloads.html  에서  아래빨간색 밑줄쳐진 파일 다운 받아서 압축을 푸세요.

그리고 ~/.bash_profile 에 경로 추가해요

2. 어플 만들기

작업폴더 생성후 이동

mkdir sample

cd sample

icon.png 파일 만들기

이미지크기가 128x128

(샘플 다운받기 wget https://crosswalk-project.org/assets/cw-app-icon.png)

index.html 파일 만들기

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>simple</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

manifest.json 파일 만들기

{
  "name": "simple",
  "xwalk_version": "0.0.1",
  "start_url": "index.html",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "128x128",
      "type": "image/png",
      "density": "4.0"
    }
  ]
}

apk빌드하려면 아래와 같이 make_apk.py 스크립트를 실행합니다.

make_apk.py --package=org.crosswalkproject.example --manifest=./manifest.json --enable-remote-debugging

make_apk.py 는 크로스워크를 다운받아서 압축을 풀면 폴더안에 있습니다. 

~/.bash_profile (또는 bashrc) 에 export 로 PATH를 지정해주거나 직접 경로를 써주면서 실행시켜주면됩니다.

상기 내용은 계속 추가할예정입니다. 혹시 공유하고싶은 내용이 있으시면 댓글남겨두시면 감사하겠습니다.

파이와 궁합이 좋은것을 화이트리스트라고 하고 그렇지않으면 블랙리스트로 하겠습니다.

1. 화이트리스트

-iptime N100 mini

-iptime N100 miniAP

2. 그레이 리스트 

-iptime N300UA

 : 직접확인은 아직안해보았지만  (http://zzulog.tistory.com/category/Embedded%20Software/Rasberry%20Pi)

확인결과 station 모드로는 동작하지만 dhcp 데몬이동작하지않아서 AP세팅은 되지않는것같음

2.블랙리스트

-iptime N150UA

: 구글링해보면 어찌어찌 붙였다고 하는 분들몇분계시는데 글읽어보시면알겠지만...그냥 버리고 다른거 사시는 편이...

(http://www.slideshare.net/juhyeonyeom9/iptime-150u-a)

-iptime A2000U 

: 드라어버를 잡지못함 동작하지않음

파일->new -> new module

import JAR/AAR Package 선택

파일선택

여기까지하면 좌측 트리뷰에 원하는 모듈이 등록된걸볼수있다.

project structure-> 좌측 모듈탭에서 app 선택 -> dependency 탭 ->  +버튼 -> 3 Module dependency 선택

방금 추가한 모듈을 리스트에 뜨면 선택한다.

ok 하면 디펜던시리스트에 추가된것을 볼수있다.

페어링되지않는 상태에서 씨리얼모듈과 연결합니다.

(당연한 이야기지만 페어링이 되면AT모드는 동작하면안되겠지요?)

사진처럼 rx,tx 를 서로 교차해서 연결해주고 5v,grd 에 서로 연결합니다.

아두이노 ide를 실행합니다.

블루투스모듈에 연결된 씨리얼포트를 지정합니다.

씨리얼모니터를 실행시킵니다.(우상단 돋보기아이콘 클릭~)

이렇게 하면 페어링접속이 아니므로 비밀번호는 없습니다.

AT 라고 입력하셔셔 OK가 나오는지 확인합니다.

대부분의 hc06 모듈은 초기 보더레이트가 9600입니다. 만약 보더레이트가 다르면 동작하지않습니다.(자세한 내용은 구입처에 문의 하시기바랍니다.)

일단 이렇게 접속이 성공하면 당신은 관리자권한으로 접속을 하게된 것입니다.

그리고 한가지 주의하실점이 No line ending 을 선택하셔야합니다. 그렇지않으면 AT다음에 개행문자가 넘겨져서 AT커멘드가 명령을 처리하지않습니다.

간단하게 AT명령어를 정리 하면 다음과 같습니다.

--[[

]]--