2015년 10월 9일 금요일

우분투(Ubuntu) 마우스 커서 이동 속도 조절하기

Ubuntu System Setting - Mouse & Touchpad 창

우분투만 쓸때는 몰랐는데 윈도우를 깔고 듀얼부트 상태로 쓰니 마우스 속도가 다른게 확 느껴진다. 윈도우에서는 적당히 빨랐는데 우분투에서는 너무 답답하다. System Setting 에서 바꾸려 했는데 마우스 이동속도 설정은 찾아볼수가 없다.

더블클릭 속도, 주-사용버튼 밖에 수정이 불가능하다. 그래서 찾아보니 command-line 에서 1가지 프로퍼티 수정만하면 쉽게 속도를 조정할수가 있었다.
우선 "xinput" 명령을 이용해 모든 input 장차의 리스트를 가져오자.

user@desktop:~$ xinput --list --short
⎡ Virtual core pointer                     id=2 [master pointer  (3)]
⎜   ↳ Virtual core XTEST pointer               id=4 [slave  pointer  (2)]
⎜   ↳ Logitech USB Receiver                    id=10 [slave  pointer  (2)]
⎣ Virtual core keyboard                    id=3 [master keyboard (2)]
    ↳ Virtual core XTEST keyboard              id=5 [slave  keyboard (3)]
    ↳ Power Button                             id=6 [slave  keyboard (3)]
    ↳ Video Bus                                id=7 [slave  keyboard (3)]
    ↳ Power Button                             id=8 [slave  keyboard (3)]
    ↳ Logitech USB Receiver                    id=9 [slave  keyboard (3)]

나 같은 경우는 Logitech 사에서 나온 무선 키보드 마우스 세트인 mk270r 모델을 사용중인데 그 때문에 pointer나 keyboard에 둘다 Logitech US Receiver라고 나온다. 우선 세팅을 수정할건 마우스니 해당 장치의 id인 10을 기억해두자.
그리고 다시 xinput 명령을 이용해 장치의 프로퍼티 세팅을 가져온다.

user@desktop:~$ xinput list-props 10
Device 'Logitech USB Receiver':
 Device Enabled (133): 1
 Coordinate Transformation Matrix (135): 1.000000, 0.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000, 0.000000, 1.000000
 Device Accel Profile (263): 0
 Device Accel Constant Deceleration (264): 1.000000
 Device Accel Adaptive Deceleration (265): 1.000000
 Device Accel Velocity Scaling (266): 10.000000
 Device Product ID (250): 1133, 50484
 Device Node (251): "/dev/input/event3"
 Evdev Axis Inversion (267): 0, 0
 Evdev Axes Swap (269): 0
 Axis Labels (270): "Rel X" (143), "Rel Y" (144), "Rel Horiz Wheel" (260), "Rel Dial" (261), "Rel Vert Wheel" (262)
 Button Labels (271): "Button Left" (136), "Button Middle" (137), "Button Right" (138), "Button Wheel Up" (139), "Button Wheel Down" (140), "Button Horiz Wheel Left" (141), "Button Horiz Wheel Right" (142), "Button Side" (255), "Button Extra" (256), "Button Forward" (257), "Button Back" (258), "Button Task" (259), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253), "Button Unknown" (253)
 Evdev Scrolling Distance (272): 1, 1, 1
 Evdev Middle Button Emulation (273): 0
 Evdev Middle Button Timeout (274): 50
 Evdev Third Button Emulation (275): 0
 Evdev Third Button Emulation Timeout (276): 1000
 Evdev Third Button Emulation Button (277): 3
 Evdev Third Button Emulation Threshold (278): 20
 Evdev Wheel Emulation (279): 0
 Evdev Wheel Emulation Axes (280): 0, 0, 4, 5
 Evdev Wheel Emulation Inertia (281): 10
 Evdev Wheel Emulation Timeout (282): 200
 Evdev Wheel Emulation Button (283): 4
 Evdev Drag Lock Buttons (284): 0

엄청 길게 나온다... 사실 이 명령어는 장치 id 대신 장치 이름으로 실행해도 되는데,나같은 경우에는 키보드와 마우스의 장치 이름이 같아 id로 실행했다.
어쨋든 다른 프로퍼티들은 다 무시하고 마우스 이동속도를 위해 수정해야되는건
Device Accel Constant Deceleration
프로퍼티 이다.

해당 프로퍼티는 정해진 꼐수만큼 마우스의 속도를 감속시킨다. 그러니 반대로 마우스의 속도를 올리기 위해서는 해당 계수를 낮춰줘야한다. 속도를 현재에서 2배로 올릴려면 0.5로 수정, 1.33배로 올릴려면 0.75로 수정해주자. 난 0.5로 설정해놓으니 조금 빠른거 같아 0.66, 1.5배로 속도를 올리기로 했다.

user@desktop:~$ xinput -set-prop 10 'Device Accel Constant Deceleration' 0.66

위의 명령을 실행하면 바로 마우스가 빨라진다. 하지만 재부팅할경우 기본값으로 리셋되기 때문에 해당 명령을 startup application에 넣어줘야한다.




추가

부팅할때마다 계속 명령을 실행해줘야는게 찝찝해 조금 더 찾아봤더니 dconf 데이터를 수정해서 마우스 이동속도를 조절할 수 있었다.
dconf 데이터 수정은 dconf-editor 를 이용해 간단하게 할 수 있다.

우리가 수정해야할 key 들은 org.gnome.settings-damon.peripherals.mouse 스키마에 존재한다.

dconf-editor 창

마우스 이동속도는 motion-acceleration 키를 수정하면 된다. motion-acceleration는 마우스가 기본 이동속도의 몇배로 움직이는지를 설정하는 계수이다. -1이 시스템 기본설성이며, 이렇게 설정하면 기본 이동속도의 1배로 움직인다. 2, 3, 4 등의 계수를 집어넣으면 그만큼 속도가 빨라지니 편한대로 설정하자.

motion-threshold 키는 몇 픽셀을 이동후 마우스 이동속도가 적용될지 설정하는 키이다. 이것도 편의에 따라 설정해주면 된다.

만약 dconf-editor가 설치되지 않았다면 아래 명령어를 이용해 설치후 수정하면 된다.

user@desktop:~$ sudo apt-get install dconf-editor

dconf-editor 설치를 원하지 않는다면 CLI dconf 수정 툴인 gsettings 를 이용해 수정할 수 있다.


#mouse 관련 스키마 보기
user@desktop:~$ gsettings list-schemas | grep 'mouse'
org.gnome.desktop.a11y.mouse
org.gnome.mousetweaks
org.gnome.settings-daemon.plugins.mouse
org.gnome.settings-daemon.peripherals.mouse

#org.gnome.settings-daemon-peripherals.mouse 스키마에 저장된 키 보기
user@desktop:~$ gsettings list-keys org.gnome.settings-daemon.peripherals.mouse
drag-threshold
motion-threshold
middle-button-enabled
motion-acceleration
double-click
left-handed
locate-pointer

#원하는 키의 현재값 가져오기
user@desktop:~$ gsettings get 'org.gnome.settings-daemon.peripherals.mouse' 'motion-acceleration'
-1.0

#원하는 값으로 키 수정하기
user@desktop:~$ gsettings set 'org.gnome.settings-daemon.peripherals.mouse' 'motion-acceleration' 3.0

이제 진짜 끝~. 이렇게하면 부팅할때마다 명령어를 실행해줘야할 필요가 없어진다~

2015년 10월 6일 화요일

[JavaScript] 문서 객체 모델(DOM, Document Object Model)

문서 객체 모델(DOM, Document Object Model)은 HTML과 XML 문서에 사용되는 API(Application Programming Interface)이다. DOM은 주어진 문서를 노드(node)를로 이루어진 계층구조의 트리(hierarchical tree)로 나타내며, 원하는 노드를 추가, 제거, 그리고 수정할 수 있게 한다. 이런 DOM의 가장 초기 버젼인 DOM Level 1은 1998년 W3C에 처음 표준으로 도입되었으며 현재 거의 모든 웹브라우져들, Chrome, Firefox, Safari, Internet Explorer, Microsoft Edge, Opera 등에 사용된다.

DOM Tree의 Node

각각의 태그들로 구성된 HTML 문서와 XML 문서를 Tree 형태로 표현하기 위해서 Node 들은 각각의 태그들을 구성하게 된다. 이 때문에 각각의 태그들은 그에 알맞는 Type을 가진 Node 행태로 저장되며, 서로 다른 Type의 Node 들은 그만의 특징, 데이터, 메소드, 다른 노드들과의 관계를 가지게 된다.

Document Node 와 Node Type

Document Node는 모든 Node들의 최상위에 위치하는 Root 노드이다.


<!DOCTYPE html>
<html>
 <head>
  <title>DOM Example</title>
 </head>
<body>
 <p>This is HTML Example</p>
</body>
</html>


예를들어 위의 html 코드를 DOM Tree 형식으로 표현한다면 아래와 같은 형태를 띄게된다.


Document Node 가 최상위에 위치하며 그 바로 아래 HTML Element Node 가 위치한다. Document Node는 최상위 Node로 문서내 모든 Node들의 ownerDocument 프로퍼티가 가리키는 node이다.
HTML Element Node는 Document Element 라 불리기도 하며, 다른 Element Node들의 최 상위에 위치하는 Element Node이다. 그렇기 때문에 Document Node는 단 1개의 Document Element를 자기 child 로 가지며, Document Element는 다른 element 들을 자기 children으로 가지게 된다.

HTML문서의 경우에는 html 태그가 Document Element이며, 이렇게, 모든 markup들은 Node로 Tree에 저장된다. 대부분의 markup 들은 Element Node 가 되며, attribute 들은 attribute node, markup에 감싸진 텍스트 들은 text node, 주석들은 comment node가 된다. 이렇게 총 12개 타입의 노드들이 존재한다.

  • Node.ELEMENT_NODE - 1
  • Node.ATTRIBUTE_NODE - 2
  • Node.TEXT_NODE - 3
  • Node.CDATA_SECTION_NODE - 4
  • Node.ENTITY_REFERENCE_NODE - 5
  • Node.ENTITY_NODE - 6
  • Node.PROCESSING_INSTRUCTION_NODE - 7
  • Node.COMMENT_NODE - 8
  • Node.DOCUMENT_NODE - 9
  • Node.DOCUMENT_TYPE_NODE - 10
  • Node.DOCUMENT_FRAGMENT_NODE - 11
  • Node.NOTATION_NODE - 12
각각의 타입은 숫자로 표현될 수 있다. 모든 Node 들은 nodeType 프로퍼티를 가지므로 위의 numeric constant로 비교가 가능하다.


if(node.nodeType == Node.ELEMENT_NODE){
 console.log("This is Element Node");
}


nodeType 프로퍼티가 node의 타입을 가르쳐 준다면, nodeName 프로퍼티는 해당 node의 태그이름을 저장하는 값이다.
nodeName 값과 nodeType 값은 node의 타입에 관계없이 모든 node가 가지고 있는 프로퍼티이다.


document.images[0].nodeName
//"IMG"
document.images[0].nodeType
//1


DOM(Document Object Model) 수정하기

모든 tree 구조가 그렇듯, 각각의 node 들은 다른 node 들과 특정 관계(Parent-Child, Siblings, First Child, Last Child)에 있다. 이러한 관계를 통해 개발자는 문서 객체 모델을 조금 더 쉽게 수정 가능하다.
우선 모든 Node 들은 자신의 프로퍼티로 childNodes라는 프로퍼티를 가지는데 이는 자신의 자식 node들의 리스트를 저장하는 프로퍼티 이다.childNodes 프로퍼티는 자식 노드들을 NodeList 타입의 자료구조로 저장한다. NodeList는 Array와 매우 비슷한 자료 구조로, Array와 마찬가지로 괄호([])를 이용해 내부 데이터에 접근이 가능한 구조이다. 하지만 Array Constructor를 통해 생성된 인스턴스는 아님을 염두에 두자. NodeList 객체는 실시간으로 DOM 스트럭쳐와 반응하며, 이때문에 NodeList에 생기는 변화는 곧바로 DOM 구조, 웹문서와 직결된다. NodeList 타입은 Array와 마찬가지로 []를 사용할 수도 있고, item 메소드를 이용해 접근할수도 있다.


node.childNodes[0];
node.childNodes.item(1);
node.childNodes.length;
node.firstChild == node.childNodes[0];//true
node.lastChild == node.childNodes[node.childNodes.length];//true


firstChild, lastChild 프로퍼티를 이용해 NodeList의 처음과 마지막 node에 접근이 가능하다.
또한 childNodes 프로퍼티와 마찬가지로 parentNode는 해당 Node의 상위 Node를 가르키는 포인터 역할을 한다. childNodes 리스트에 속한 Node들은 서로와 sibling 관계에 있으며 nextSibling, previousSibling 프로퍼티를 이용해 전 node, 다음 node로 접근이 가능하다.


node.childNodes[0].previousSibling;//null
node.childNodes[0].nextSibling;// == node.childNodes[1]
node.childNodes[node.childNodes.length-1].nextSibling;//null


리스트의 처음과 끝에 있는 node들은 previousSibling, nextSibling 프로퍼티로 null 값을 가지게 된다. 이런 포인터들은 모두 read-only 값을 가진 프로퍼티이기 때문에 위 프로퍼티들을 통해 직접적은 node 수정은 불가능하다.
그 때문에 수정시에는 DOM 수정을 위핸 메소드들을 이용해야한다.

Node 추가, 수정, 제거하기

appendChild() 메소드는 해당 노드의 childNodes 리스트의 마지막에 새로운 Node를 추가하고 추가된 node를 반환하는 메소드이다.


var newlyAddedNode = node.appendChild(newNode);
newlyAddedNode == newNode//true
node.lastChild == newNode//true


insertBefore() 메소드는 원하는 노드의 앞에 새로운 노드르 삽입하는 메소드이다. 새로 추가하는 노드, 삽입 위치의 뒤에있는 노드, 이렇게 2개의 argument를 가지며 새로 삽입된 노드를 반환한다.


var newlyAddedNode = node.insertBefore(newNode,node.childNodes[0]);
newlyAddedNode == newNode//true
node.firstChild == newNode//true
//만약 두번째 argument가 주어지지 않거나 null이 되면 nodeList의 마지막에 삽입된다.


replaceNode() 메소드는 원하는 노드를 새로운 노드로 교체하는 메소드 이다. 새로 교체할 노드, 교체될 노드, 이렇게 2개의 argument를 받으며 교체된 노드가 반환된다.


var oldNode = node.replaceNode(newNode,node.childNodes[0]);


removeNode() 메소드는 원하는 노드를 제거하는 노드이다. argument로는 제거할 노드를 가리키는 포인터를 받으며, 제거된 노드가 반환된다. 이렇게 제거된 node들은 제거된 이후에도 document에 의해 소유된다. 하지만 HTML Element 하위 트리에 속해있지 않기 때문에 사용자에게 보여지지 않는다.


var removed = node.removeNode(node.childNodes[0]);


Node 복사하기

문서 객체 모델 구조의 특성상 1개의 노드는 2개의 위치에 존재할 수 없다. 만약 그렇다면 이는 해당 노드의 포인터 프로퍼티가 2개의 값을 가지고 있음을 뜻하며 현실적으로 불가능한 일이다. 그렇기 때문에 이미 문서에 추가된 노드를 다른 위치에 삽입하려 시도하게 되면 원래 추가되었던 노드가 제거되는 일이 발생한다.


var oldNode = node.childNodes[0];
node.appendChild(oldNode);
node.childNodes[0] == oldNode;// false
node.lastChild == oldNode;// true


이러한 이유 때문에 이미 추가된 node를 문서의 다른 위치에 추가하기 위해서는 같은 프로퍼티를 가진 새로운 node 인스턴스를 생성해야할 필요가 있다. cloneNode() 메소드는 이러한 작업을 충실하게 수행하는 메소드이다. 이 메소드는 boolean 값 1개만을 argument로 받으며 이 boolean 값은 node의 하위 sub-tree까지 모두 포함하여 복사할지(true), 아니면 해당 node만 복사할지(false)를 정하는 argument 이다.


var clone1 = node.cloneNode(true);
var clone2 = node.cloneNode(false);


normalize() 메소드

normalize() 메소드는 메소드가 실행된 노드의 sub-tree에서 empty text node를 제거하는 메소드이다.normalize 메소드는 이런 empty text node를 제거하고, 여러개의 text node가 sibling 관계로 존재할시 해당 node들을 병합(merge)하는 메소드 이다.


<!DOCTYPE html>
<html>
 <head>
  <title>DOM Example</title>
 </head>
<body>
 <p id = "paragraph">
  This is HTML Example.
 </p>
</body>
</html>


위의 html 코드에서 p태그에 새로운 text를 추가한후에 childNodes 리스트를 보게되면 2개의 text node가 sibling 관계로 존재하는걸 알 수 있다.이를 normalize 메소드를 이용해 합쳐주자


document.getElementById("paragraph").appendChild(document.createTextNode("NewLine"));
document.getElementById("paragraph").childNodes;//["This is HTML Example.", "NewLine"]
//이를 normalize 메소드를 이용해 합쳐주자
document.getElementById("paragraph").normalize();
document.getElementById("paragraph").childNodes;//["This is HTML Example.NewLine"]