spectrum learns to dig

http://www.lexaloffle.com/pico-8.php?page=manual  를 읽다보니 재밌는 부분이 있다. 그건 바로 pico-8이 GPIO(General Purpose Input Output)를 지원한다는 점인데 CHIP/Pocket CHIP 뿐만 아니라 Raspberry Pi에도 대응하고 심지어 HTML으로 export했을 때도 된다는 사실. pico-8에는 가상의 메모리 맵이 있고 PEEK/POKE 명령으로 해당 주소를 읽고 쓸 수 있다. 메모리 맵은 아래와 같은데 0x0    gfx 0x1000 gfx2/map2 (shared) 0x2000 map 0x3000 gfx_props 0x3100 song 0x3200 sfx 0x4300 user data 0x5e00 persistent cart data (256 bytes) 0x5f00 draw state 0x5f40 hardware state 0x5f80 gpio pins (128 bytes) 0x6000 screen (8k) 이 0x5f80영역이 GPIO랑 붙는다. PEEK(0x5f80), POKE(0x5f81, 0xff)와 같이 접근 가능하다. CHIP류에선 0~7번 핀을 0x5f80~0x5f87까지 (PocketCHIP은 0,1 생략) RaspberryPi류에선 0x5f80~0x58f8f까지 사용할 수 있다. WiringPi Pin 번호에 주의하자 여튼 GPIO를 사용할 땐 pico8을 반드시 sudo 로 구동하여야 원활하게 사용할 수 있는 점을 명심하자. 재미있는 점은 HTML을 export 했을 때 pgio8_gpio 란 글로벌 변수로 GPIO를 시뮬레이션 할 수 있다. var pico8_gpio = Array(128); 이와 같이 미리 선언하고 PEEK, POKE하면 외부에서 pico-8 모듈로 읽고 쓰기가 가능해서 매우 유용하니 꼭 기억해두자.

http://jsbin.com/cikuga/edit?html,css,output IE 호환을 위해 jQuery를 사용했다. 안해도 되지만 이 편이 그래도 좀 읽기 쉽지 않나 싶다. 접히고 펼쳐지는 트리구조를 만드는 데 있어 핵심 아이디어는 같은 깊이에 인접한(sibling ) 요소들끼리는 radio button을 사용하면 된다는 것이다. 가령 <input type="radio" name="group1"> <input type="radio" name="group1"> <input type="radio" name="group1"> 이렇게 했을 경우 같은 이름(name)을 가지고 있으므로 셋 중 하나만 radio 버튼이 들어오고 <input type="radio" name="group1"> <input type="radio" name="group2"> <input type="radio" name="group2"> <input type="radio" name="group2"> <input type="radio" name="group1"> <input type="radio" name="group1"> 이와 같이 구성하면 group2는 group2끼리 group1은 group1끼리 각각 구성할 수 있다. 따라서 각각의 radio button에 대한 id가 1   1-1   1-2 2   2-1     2-1-1     2-1-2 3 일 경우엔 1,2,3을 top 1-1, 1-2는 1 2-1은 2 ...

contenteditable은 말 그대로 해당 tag의 content를 수정가능한 상태로 만드는 태그인데 https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480 사실 WYSWYG이 이 글대로 쉬운 작업은 아니다. 최종적으로 Meteor의 reactive data 연동하는 것까지를 목표로 잡아보자. 일단 div[contenteditable=true]를 하나 만들고 테두리를 제거하기 위해 [contenteditable=true] {   outline: none; } 를 css에 잡자. contenteditable의 테두리는 레이아웃을 깨뜨리지 않기 때문에 border를 사용하지 않고 있다는 걸 알 수 있다. 하고보니 버튼 등등이 눌렀을 때 테두리가 생기는 것도 싫어서 * {   outline: none; } [contenteditable=true] {   outline: solid 1px #cbcbcb;   padding: 0.5em; } 이렇게 일단 해보자. 빠르게 버튼을 만들어서 기능을 더해보는데 대부분의 기능은  https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands  에서 구현할 수 있다. Bold, 정렬 이런 건 괜찮은데 image가 제일 중요. 손을 좀 건드려야하는데 그 이유는 이미지 실제는 항상 엄청 크기가 큰게 들어올 수 있기 때문에 아무래도 불편하다. 크기를 지정해서 해주면 좋은데 그러려면 그냥 insertImage를 쓰면 안되고 해당 커맨드가 들어왔을 때 createElement를 통해서 image 객체를 만들고 현재 커서 위치에 넣도록 하는게 좋다.   insertImage : (url)->     console.log "#{url...