PyQt and HiDPi Scaling

ROS1 관련 도구들 (rqt 시리즈, rviz 등)은 Qt 특히 PyQt를 사용하여 만들어졌는데, 일반 상황에선 괜찮으나, 4k 모니터 등 고해상도 모니터에서 HiDPi 설정을 켠 경우에 레이아웃이 깨지는 경우가 발생한다.

폰트 크기는 정상적이지만, 버튼 등 나머지 레이아웃은 그렇지 않음으로 인해, 이상하게 보인다.

간단히 환경변수를 셋팅함으로서 이 문제는 해결이 된다.

$ export QT_AUTO_SCREEN_SCALE_FACTOR=1

위와 같이 실행한 후, 다시 rviz 등을 실행해 보면,

UI의 비율 및 크기가 잘 맞춰져 있음을 볼 수 있다. 터미널을 실행할 때마다 설정되어야 하므로, .bashrc 등 사용자의 환경변수 설정 파일에 추가하면 편리하게 사용이 가능하다.

$ echo "export QT_AUTO_SCREEN_SCALE_FACTOR=1" >> ~/.bashrc

끝!

추가.

Qt 관련 환경 변수 중, 위와 비슷한 QT_SCALE_FACTOR도 있는데, 이는 폰트 크기를 포함한 모든 UI 컴포넌트를 조정한다. 또한 QT_SCREEN_SCALE_FACTORS 도 있는데, 이는 QT_AUTO_SCREEN_SCALE_FACTOR와 유사하게 동작하고, 사용자가 Scale Factor를 임의로 조정할 수 있다.

Advertisements

WordPress 옮기기 & AWS Lightsail 관련 설정

이전엔 DigitalOcean의 VPS에 LEMP (Nginx, MySQL, PHP)를 설치하고, 여기에 WordPress를 설치해서 사용하고 있었는데, 막상 사용하다보니 해외서버라서 그런지 좀 느렸다.Amazon Lightsail 역시 VPS로 아마존 서버를 사용하고, 서울에 있는 서버를 사용하니 꽤 빠르더라. 그리고 같은 가격에 DigitalOcean의 같은 가격대의 상품보단 쪼~~~~끔 더 나았고.

쓸데없는 삽질임에도 뭐… 연습 겸 ㅋㅋㅋ WordPress 서버 이전!!

Lightsail에 인스턴스를 하나 생성하고, 기본적인 LEMP 환경을 구축한다. 참고 링크 (https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-ubuntu-18-04)

그런 다음엔

  1. 기존 wordpress의 wp-content 폴더를 백업한다. (압축파일, 꽤 용량이 크다)
  2. 데이터베이스를 백업한다.
$ mysqldump -u {your_database_id} -p {your_database_name} > backup_mysql_db.sql
  1. 백업한 파일을 일단 로컬PC로 옮기고… (scp를 사용하면 편함)
  2. 이것을 Lightsail VPS로 옮겨준다.

새로운 서버에 WordPress를 설치하고 (새로 설치하는 것처럼), 데이터베이스와 사용자 환경은 기존 사용자와 같게 끔 설치한다.

다음으로,

  1. 백업한 wp-content 파일을 같은 디렉토리에서 압축을 풀어서 복구
  2. 백업한 데이터베이스를 다시 복구
$ mysql -u {your_database_id} -p {your_database_name} < backup_mysql_db.sql

이렇게 하면 일단은 완료.


Lightsail은 Static IP도 일단은 공짜로 제공.

DNS 관련해선 DNS zone를 생성해서 설정

그 다음 Firewall은 서버 내부에서도 설정가능하지만, 외부도 해줘야 함. (서버 인스턴스에서 설정) 요걸로 좀 많이 삽질함.

이렇게 하면 끝!

iCloud Drive 강제 동기화 하기

맥북, 아이패드, 아이폰 등에서 파일 및 데이터를 공유하여 사용하기 위해서 iCloud Drive를 사용 중입니다. 요 근래 맥북에 업데이트되는 과정에서 iCloud Drive의 데이터가 동기화되지 않거나, 특정 프로그램에서 링크가 깨지는 등의 증상이 나타나서 해결책을 찾아보았습니다.

에러증상 #1

“documents” can’t be opened because the original item can’t be found

에러증상 #2

맥북의 iCloud Drive의 파일과 다른 기기와의 파일 리스트가 서로 다름

이를 해결하기 위해선,

먼저 ~/Library/Application Support/CloudDocs 폴더를 지운다. 그리고, bird, cloudd 프로세스를 중지한다.

$ rm -rf ~/Library/Application Support/CloudDocs
$ killall bird
$ killall cloudd

이렇게 되면, iCloud Drive의 리스트가 업데이트 되고, 다시 재동기화하는 과정을 진행한다.

끝.

Fix Screen Flickering of Dell Laptop on Ubuntu 18.04.3

현재 작업용으로 델 XPS15 9570 모델을 사용하고 있습니다. 처음 Ubuntu를 설치하여 사용할 때는 큰 문제는 없었는데, 최근들어 Ubuntu 설치때부터 사용중에도 화면이 계속 깜빡이거나 픽셀이 깨지는 등의 에러가 발생하였습니다.


덧: 검색해 본 결과, i915 (인텔 그래픽 드라이버)의 문제로, 4K 모니터를 가진 인텔 랩탑에서 대부분 발생하는 문제로 보임.


마치 하드웨어 (디스플레이 부분)의 불량인듯 보였지만, 윈도우로 부팅하게되면 이런 증상은 나타나지 않았기에 서비스를 맡기기에도 애매하였는데요. 검색을 해보니 (키워드: kernel 5.0, screen flickering) 리눅스 커널이 5.0 버전으로 올라가면서 eDP (아마도 디스플레이 패널 관련) 드라이버의 코드가 변경됨에 따라 일부 LCD 패널에서 발생하는 문제라고 합니다.

It was introduced by an optimization for eDP 1.4+ (“link config fast and narrow”) in the 5.x kernel; the patch doesn’t work for some panels, including that of the XPS 15, and had to be rolled back.

이 문제를 해결하는 방법으론 커널 버전을 이를 해결한 버전으로 올려야 한다고 하는데, 찾아보고 설치해 본 결과 커널 버전을 올려도 이와 같은 문제가 해결되진 않았습니다.

다음 방법으론 커널 소스를 직접 받아, 문제되는 부분을 수정하고, 커널을 빌드하여 사용하는 방법이 있습니다. 다음의 과정은 이와 같은 과정을 정리하였습니다.

먼제 커널 빌드에 필요한 패키지를 설치합니다. (Install necessary packages)

$ sudo apt install git build-essential kernel-package fakeroot libncurses5-dev libssl-dev ccache flex bison

작업을 위한 디렉토리를 생성하고, 커널 소스를 받아옵니다. 현재 사용하고 있는 커널 버전과 가장 유사한 버전을 가져오면 됩니다. 사용하고 있는 커널 버전은 “uname -r” 명령을 통해 확인 가능합니다.

make directory for kernel build and clone kernel source

업데이트: 현재 (2010/01) LTS 최신 커널 버전은 5.3.0-26이다.

$ cd ~
$ mkdir kernel_build 
$ cd kernel_build 
$ git clone -b linux-5.3.y git://git.kernel.org/pub/scm/linux/kernel/git/stable/linux-stable.git
Cloning into 'linux-stable'...

remote: Enumerating objects: 8131608, done.
remote: Counting objects: 100% (8131608/8131608), done.
remote: Compressing objects: 100% (1204105/1204105), done.
Receiving objects: 100% (8131608/8131608), 1.30 GiB | 2.21 MiB/s, done.
remote: Total 8131608 (delta 6878708), reused 8130931 (delta 6878032)
Resolving deltas: 100% (6878708/6878708), done.
Checking out files: 100% (63144/63144), done.

소스를 받아오는데 좀 시간이 걸립니다. 해외망 속도가 빠르면 빨리 받아오기도…

다음으로 현재 사용중인 커널 버전의 빌드 configuration 파일을 복사해옵니다. move linux-stable directory, and copy current configuration of your current kernel.

$ cd linux-stable
$ cp /boot/config-`uname -r` .config

이제, 복사해온 configuration 파일을 현재 받은 커널 소스의 빌드 환경에 적용해 주도록 합니다. Now you have to adapt the old configuration to the new kernel.

$ yes '' | make oldconfig

이제 문제가 된 eDP 관련 소스 파일을 수정해 줍니다.

$ vi drivers/gpu/drm/i915/display/intel_dp.c

대략 2120번 라인으로 가보면, intel_dp_compute_link_config 함수 내에 다음의 라인을 수정해줍니다.

업데이트: 커널 버전이 바뀌면서 소스 파일의 위치 및 라인 변경

        if (intel_dp_is_edp(intel_dp)) {
		/*
		 * Use the maximum clock and number of lanes the eDP panel
		 * advertizes being capable of. The panels are generally
		 * designed to support only a single clock and lane
		 * configuration, and typically these values correspond to the
		 * native resolution of the panel.
		 */
		limits.min_lane_count = limits.max_lane_count;
		limits.min_clock = limits.max_clock;
	}

이 부분을,

        if (false && intel_dp_is_edp(intel_dp)) {
		/*
		 * Use the maximum clock and number of lanes the eDP panel
		 * advertizes being capable of. The panels are generally
		 * designed to support only a single clock and lane
		 * configuration, and typically these values correspond to the
		 * native resolution of the panel.
		 */
		limits.min_lane_count = limits.max_lane_count;
		limits.min_clock = limits.max_clock;
	}

와 같이 수정합니다.


이제 커널을 빌드합니다.

$ make -j8 deb-pkg

시간이 꽤 걸린 후에 빌드가 완료되면 상위 디렉토리에 몇개의 deb 파일이 생성됩니다. 이를 설치해주면 됩니다.

$ ll *.deb
-rw-r--r-- 1 byeongkyu byeongkyu  11204740 Jan 18 07:20 linux-headers-5.3.18+_5.3.18+-1_amd64.deb
-rw-r--r-- 1 byeongkyu byeongkyu  59519512 Jan 18 07:21 linux-image-5.3.18+_5.3.18+-1_amd64.deb
-rw-r--r-- 1 byeongkyu byeongkyu 841223388 Jan 18 07:26 linux-image-5.3.18+-dbg_5.3.18+-1_amd64.deb
-rw-r--r-- 1 byeongkyu byeongkyu   1057176 Jan 18 07:20 linux-libc-dev_5.3.18+-1_amd64.deb

linux-libc-dev, linux-headers, linux-image 요 세개의 패키지를 설치하고 완료된 이후 재부팅하면 적용됨을 볼 수 있습니다.

물론 화면의 깜빡임 역시 해결되었습니다.

Change the category title color and thickness of scrollbar on Blockly

Blockly의 처음 인상은 굉장히 단순해 보인다. 몇가지만 수정하면 좀더 이쁘게 보일수 있을 것 같은데, 일단은 코드 상에서 해결해야 하는 제목에서 보이는 두 내용을 적용하도록 수정해본다.

소스 파일의 내용 기준은 현재 가장 최신버전인 blockly-3.20191014.4를 기준으로 한다. 추후 업데이트 되더라도 큰 차이는 없을테니 잘 찾아서 적용하면 될듯.

Scrollbar Thickness

blockly-3.20191014.4/core/scrollbar.js [301:305]

Blockly.Scrollbar.scrollbarThickness = 15;
if (Blockly.Touch.TOUCH_ENABLED) {
  Blockly.Scrollbar.scrollbarThickness = 25;
}

위 두 값 (15, 25)를 원하는 값으로 수정. 대략 4, 8 정도면 적당한 듯.

Category Title Color

blockly-3.20191014.4/core/toolbox.js [259:275]

Blockly.Toolbox.prototype.handleBeforeTreeSelected_ = function(node) {
  if (node == this.tree_) {
    return false;
  }
  if (this.lastCategory_) {
    this.lastCategory_.getRowElement().style.backgroundColor = '';
    this.addColour_(); // add
  }
  if (node) {
    var hexColour = node.hexColour || '#57e';
    node.getRowElement().style.backgroundColor = hexColour;
    node.getRowElement().getElementsByTagName('span')[1].style.color = '#fff'; // add
    // Add colours to child nodes which may have been collapsed and thus
    // not rendered.
    this.addColour_(node);
  }
  return true;
};

blockly-3.20191014.4/core/toolbox.js [605:627]

Blockly.Toolbox.prototype.addColour_ = function(opt_tree) {
  var tree = opt_tree || this.tree_;
  var children = tree.getChildren(false);
  for (var i = 0, child; child = children[i]; i++) {
    var element = child.getRowElement();
    if (element) {
      if (this.hasColours_) {
        var border = '8px solid ' + (child.hexColour || '#ddd');
        var colour = child.hexColour || '#000'; // add
      } else {
        var border = 'none';
        var colour = '#000'; // add
      }
      element.getElementsByTagName('span')[1].style.color = colour; // add
      if (this.workspace_.RTL) {
        element.style.borderRight = border;
      } else {
        element.style.borderLeft = border;
      }
    }
    this.addColour_(child);
  }
};

위와 같이 // add 라고 되어 있는 줄을 함수 내에 추가하고, blockly 디렉토리 내에서 빌드를 해보면,

$ ./build.py

압축된 javascript 파일이 생성된다. 이를 이용하여 데모페이지를 보게 되면,

정해진 카테고리의 테마 색상에 따라, 카테고리의 타이틀 색상과 스크롤바의 크기 역시 세련되게 변경 됨을 볼 수 있다.