edc에 유려한 디자인을 입하기 위해서는 이미지가 필수입니다.

아무래도 기본 도형이나 텍스트만으로는 한계가 있겠지요.


이번 포스팅에서는 IMAGE 타입에 대해 살펴보도록 하겠습니다.

이미지 파트를 사용하여 이미지를 원하는대로 배치해보도록 하겠습니다.

이미지는 미리 준비해주세요.



안녕하세요, Tizen 개발자 윤진입니다.


이미지 타입의 파트를 사용하려면 이미지가 있어야겠지요.

이미지는 edc 파일과 하나가 되어 edj 파일을 만듭니다.

edc 내에서 확정하여 사용하는 이미지 파일은 edj로 컴파일될 때 합쳐질 수 있습니다.


블로깅을 하며 edc에서 edj로 컴파일되는 과정을 언급한 적이 없었는데요,

아주 간단하게 언급하자면,

edc는 텍스트 기반의 스크팁트이므로 edj라는 기계가 인지할 수 있는 언어로 컴파일해야하죠.

이 때 edj에는 edc에서 언급한 이미지 파일을 내재할 수 있습니다.

그 때 사용하는 블록이 images 블록입니다.



- images {}

collections와 동일한 레벨로 사용하는 images 블록이 있습니다.

이 블록에서 edj에 포함될 이미지들을 확정하지요.

edje_cc는 컴파일을 진행하며 images 블록을 참고하여 edj와 이미지들이 한 몸이 됩니다.

images 블록에는 image 필드를 넣을 수 있습니다.



- image: [이미지파일] [압축방법] [압축레벨];

이미지 필드에는 이미지파일과 압축방법이 명시됩니다.

이미지 파일은 절대경로/상대경로 어느 방식으로나 적어둘 수 있습니다.

여기에 명시한 경로값을 이미지 파트에서 그대로 사용하면 됩니다.


압축방법으로는 RAW, COMP, LOSSY[0~100], USER를 사용할 수 있습니다.

RAW는 날 것 그대로 사용하는 경우,

COMP는 무손실 압축으로 이미지를 사용하고,

LOSSY는 압축레벨과 함께 이미지를 손실 압축하고,

USER는 edj에 이미지를 포함하지 않습니다.


edc에서 이미지 파트를 사용하기 위한 준비가 완료되었습니다.

이제 이미지를 사용하기 위해,

파트의 타입을 IMAGE로 설정해봅시다.

그리고 세부 설정을 위해 part - description 내에 image 블록을 사용합니다.



- image {}

이미지 블록에는 여러 필드를 사용할 수 있습니다.

normal, tween, border, middle, border_scale, border_scale_by

위의 인자 정도만 익혀도 이미지를 사용하는데 무리가 없습니다.



- normal: "파일이름";

normal 상태에서 사용하는 이미지의 파일이름을 지정합니다.

파일은 절대경로 혹은 상대경로로 지정할 수 있습니다.

만약 edc 파일과 이미지 파일이 같은 위치에 있다면 경로를 써줄 필요가 없겠지요.


이미지 파트에 다수의 이미지를 설정할 수 있습니다.

2개 이상의 이미지가 설정된다면 애니메이션으로 동작하게 됩니다.

이때 normal로 설정하는 이미지가 시작/끝 프레임이 됩니다.

normal이 시작/끝 두 개의 역할을 하기 때문에 뭔가 어색한 애니메이션이 될 수도 있습니다.

차라리 normal을 시작으로 제한하고,

마지막 frame은 다른 이름으로 하는게 더 명확했을 거라 생각이 듭니다.



- tween: "파일이름";

tween에는 애니메이션에서 시작/끝 프레임을 제외한 다른 프레임을 설정합니다.

tween은 몇 개를 사용해도 상관없으며,

tween으로 입력하는 순서대로 애니메이션이 재생됩니다.

각각의 이미지가 재생되는 시간은 program을 이용하여 조절할 수 있습니다.

그 부분은 차후에 program을 설명하며 자세히 살펴보겠습니다.



- border: [왼쪽] [오른쪽] [위] [아래];

border에는 4가지 값을 입력합니다.

단위는 픽셀로써 이미지의 왼쪽/오른쪽/위/아래의 가장자리영역을 지정합니다.

이미지가 스케일에 따라 확대/축소된다고 하더라도,

위에 지정된 가장자리는 왜곡없이 표시됩니다.


라운드 형의 버튼 이미지를 사용하는 경우,

가로 혹은 세로가 상대적으로 더 길어지면 라운드 형태가 왜곡될 수 있습니다.

이를 막히 위해 border를 사용하여 가장자리 형태를 유지합니다.


border가 좌우만 설정되어 있다면,

이미지는 좌우로 확대가 가능합니다.

border가 상하로만 설정되어 있다면,

이미지는 상하로 확대가 가능할테지요.

border가 상하좌우로 모두 설정되어 있다면,

border는 9개 영역으로 나뉘게 됩니다.

이 중 좌상/좌하/우상/우하 영역만 고정 되고 다른 영역은 유동적으로 변합니다.



- middle: [0/1/NONE/DEFAULT/SOLID];

border가 설정되어 있을때 사용합니다.

border로 설정된 영역 외에 나머지 영역은 middle이지요.

0이나 NONE을 지정하면 middle 영역이 보이지 않습니다.

1이나 DEFAULT 혹은 SOLID로 지정하면 middle 영역이 보이지요.

아래 예시를 보면, middle에 대한 개념이 확실하게 잡히실 겁니다.


images {
  image: "btn.png" COMP;
}

collections {
   group {
     name: "main";
     parts {

       part {
         name: "bg";
         type: RECT;
         description {
           state: "default" 0.0;
           color: 255 255 255 255;
           visible: 1;
         }
       }

       part {
         name: "example";
         type: IMAGE;
         description {
           state: "default" 0.0;
           image {
             normal: "btn.png";
           }
           rel1.relative: 0.5 0.1;
           rel1.to: "bg";
           rel2.relative: 0.5 0.1;
           rel2.to: "bg";
           min: 61 56;
         }
       }

       part {
         name: "border_example";
         type: IMAGE;
         description {
           state: "default" 0.0;
           image {
             normal: "btn.png";
             border: 20 20 20 20;
           }
           rel1.relative: 0.5 0.3;
           rel1.to: "bg";
           rel2.relative: 0.5 0.3;
           rel2.to: "bg";
           min: 122 56;
         }
       }

       part {
         name: "middle_0_example";
         type: IMAGE;
         description {
           state: "default" 0.0;
           image {
             normal: "btn.png";
             border: 20 20 20 20;
             middle: 0;
           }
           rel1.relative: 0.5 0.5;
           rel1.to: "bg";
           rel2.relative: 0.5 0.5;
           rel2.to: "bg";
           min: 122 56;
         }
       }

       part {
         name: "middle_1_example";
         type: IMAGE;
         description {
           state: "default" 0.0;
           image {
             normal: "btn.png";
             border: 20 20 20 20;
             middle: 1;
           }
           rel1.relative: 0.5 0.7;
           rel1.to: "bg";
           rel2.relative: 0.5 0.7;
           rel2.to: "bg";
           min: 122 56;
         }
       }

       part {
         name: "middle_none_example";
         type: IMAGE;
         description {
           state: "default" 0.0;
           image {
             normal: "btn.png";
             border: 20 20 20 20;
             middle: DEFAULT;
           }
           rel1.relative: 0.5 0.9;
           rel1.to: "bg";
           rel2.relative: 0.5 0.9;
           rel2.to: "bg";
           min: 122 56;
         }
       }

     }
   }
}



- border_scale: [0 혹은 1];

border도 scale factor의 영향을 받을 수 있게 합니다.

scale에 대해선 이전 포스팅에서 언급한 바 있습니다.

화면 해상도가 바뀔 경우 스케일 팩터가 바뀔텐데요,

그에 맞춰 border에서 지정해둔 픽셀값에 스케일 팩터가 곱해져서 적용됩니다.



- border_scale_by: [0.0~];

border_scale을 enable할 때만 의미가 있는 필드입니다.

border 영역에 적용되는 스케일 팩터를 따로 설정할 수 있습니다.

border_scale_by로 설정한 스케일 값에 스케일 팩터를 곱한 값이 최종 적용됩니다.

스케일팩터가 2.0이고 border_scale_by가 0.5라면,

다른 scale 영역들이 2.0배씩 늘어날때,

border 영역은 2.0 x 0.5로 곱해져서 1.0으로(그대로) 보여지게 됩니다.



이미지에 대한 설명은 여기까지 하겠습니다.

그럼 좋은 하루 보내세요~

끝_

  1. Tizen Develer 2015.11.25 10:49

    상세한 설명 감사합니다 : )

사용자 계정으로 로그인한 후

간혹 관리자 root 권한이 필요할 때가 있습니다.


패키지를 설치하거나,

시스템 설정 파일을 수정하거나,

신규유저를 추가하거나,

다른 계정으로 파일권한을 변경하거나

root 권한을 광범위하게 사용하고 있습니다.


root 권한으로 변경할 때 가장 친숙한 명령어가 su입니다.



su는 substitute user의 줄임말입니다.

현 사용자를 로그아웃하지 않고, 다른 사용자의 권한을 획득할 때 사용하죠.

단일 사용자계정으로 우분투 데스크탑을 사용하고 있는 경우에도,

사용자의 권한을 루트로 변경할때 자주 사용합니다.


사용법 : su [변경하고자 하는 사용자 ID]


su 뒤에 변경할 사용자 ID를 입력하지 않는다면,

su root와 동일하게 동작합니다.


$ su
Password: 
# exit
logout
$


위처럼 일반계정쉘 $이 보이다가,

su root로 변경된 후 관리자계정쉘 #로 변경되는 것을 볼 수 있습니다.


하지만 su 뒤에 -를 붙이면 동작방식이 달라집니다.

‘-’의 의미는 무엇일까요?


‘-’

‘-l’

‘--login’

Make the shell a login shell. This means the following. Unset all environment variables except TERM, HOME, and SHELL (which are set as described above), and USER and LOGNAME (which are set, even for the super-user, as described above), and set PATH to a compiled-in default value. Change to user's home directory. Prepend ‘-’ to the shell's name, intended to make it read its login startup file(s). 


‘-’는 -l 혹은 --login과 동일한 명령어입니다.

곧, su -는 su --login root와 동일한 명령인 셈입니다.

위의 설명에서 언급되어 있듯,

‘-’의 유무는 환경변수와 워킹디렉토리에 영향을 줍니다.



위의 표를 하나씩 살펴보기로 하죠.

환경변수 TERM, HOME, SHELL, USER, LOGNAME는,

su나 su -나 모두 변경된 사용자 ID에 맞게 재설정됩니다.


HOME과 SHELL은  /etc/passwd에서 변경할 사용자의 정보를 가져와서 설정합니다.

USER와 LOGNAME은 변경할 사용자계정을 입력하지요.


PATH는 su에선 변경 전후가 동일하지만,

su -에선 PATH가 컴파일시 설정한 default 값으로 설정됩니다.


그 외의 환경변수는 분명한 차이가 있죠.

su는 기존 사용자 환경에서 설정된 환경변수를 그냥 그대로 유지합니다.

그에 반해, su -는 기존 사용자 환경에서 사용하던 환경변수를 모두 지워버립니다.


$ export hello=tizen
$ su
암호:  # echo $hello tizen # exit $ su - # echo $hello (null)

위의 예를 살펴보시죠.

기존 사용자 계정에서 hello라는 변수에 tizen이라는 값을 넣어두었습니다.

그리고 su로 관리자 계정으로 변경합니다.

su는 기타 환경변수를 유지하기 때문에 hello의 환경변수값이 tizen으로 나오겠지요?

위의 예에서도 echo $hello를 하니 tizen이 나오네요.


그리고 exit하여 원래 계정으로 복귀한 후,

이번엔 su -를 합니다.

그리고 echo $hello를 해봅니다.

이번에는 아무 것도 나오지 않네요.

--login 옵션으로 환경변수가 정리되었기 때문입니다.


그리고, su는 워킹디렉토리를 변경하지 않습니다.

반면 su -는 변경한 사용자 계정의 홈디렉토리로 이동하게 됩니다.


$ pwd
/tmp
$ su
암호: 
# pwd
/tmp
# exit
exit
$ su -
암호: 
# pwd
/root


최초에 /tmp 디렉토리에 있었고,

su를 해도 여전히 /tmp에 머물고 있습니다.

하지만, su -를 하면, 관리자 계정의 홈디렉토리인 /root로 이동하게 됩니다


위의 차이점을 알고 사용하면 됩니다.

워킹디렉토리는 cd로 변경하면 그만이니,

환경변수 설정부분만 유의하면 되겠네요.

환경변수는 빌드/실행에 영향을 줄 수 있으니까요.


끝_



* References

http://ko.wikipedia.org/wiki/Su_%28%EC%9C%A0%EB%8B%89%EC%8A%A4%29

http://www.gnu.org/software/coreutils/manual/html_node/su-invocation.html



대학교 여름특강으로 리눅스 강의를 들었던 기억이 나네요.

말총머리를 한 꽤나 마른 강사분이 열심히 수업을 하셨었죠.


강의 첫 날, 두꺼운 리눅스 책을 한 권 던져주시며 한달 동안 전부 다룰거라고 하셨죠.

그 두꺼운 리눅스 책의 한 챕터가 삼바서버였습니다.

당시에는 서버를 구축할 필요가 없어서 건성으로 흘리며 수업을 들었습니다.


하지만, 시간이 흘러 신입사원이 되었을때,

회사에서 제일 먼저 한 일 중 하나가 삼바서버를 구축하는 것이었습니다.


개인용으로 지급된 컴퓨터가 2대였는데,

한 대는 윈도우, 다른 한 대는 리눅스 PC로 활용하였습니다.


업무를 하다보면,

윈도우와 리눅스 PC 간에 데이터를 교환을 해야할 일이 생기더군요.

그래서 리눅스 PC에 삼바 서버를 설치하였습니다.


현재 집에서도 회사에서처럼 한 대는 윈도우를 다른 한 대는 우분투를 사용하고 있습니다.

따라서 이 포스팅에서는 우분투 14.04와 윈도우7을 기준으로,

삼바서버 설정방법을 정리해볼까 합니다.


우분투 PC에 삼바서버를 설치하면,

윈도우 PC의 파일탐색기로 우분투 PC에 접근하여 파일을 읽고 쓸 수 있습니다.


이러한 일이 가능한 것은,

MS사가 윈도우 운영체제 간에 혹은 이종의 운영체제와 네트워크를 통해 파일을 공유하려고 분산 파일시스템 프로토콜을 개발하였고,

삼바서버는 그러한 분산 파일시스템을 지원하기 위해 개발되었기 때문이죠.


우선 리눅스 PC에 삼바서버를 설치해보죠.

$ sudo apt-get install samba



삼바를 설치하면 삼바설정파일이 생성됩니다.

삼바설정파일을 열어봅니다.

$ sudo vi /etc/samba/smb.conf


삼바설정파일은 크게 두 부분으로 구성되어 있습니다.

[global] 항목은 삼바서버 전체에 대한 설정을 할 수 있습니다.

[share] 항목은 개별적인 공유영역에 대한 설정을 할 수 있습니다.


[global] 항목에서 주의깊게 고민해야 하는 부분은 두 가지입니다.

1. hosts allow = 192.168.1.

삼바서버에 접근가능한 IP 대역을 선택할 수 있습니다.

위의 예는 192.168.1.0 ~ 192.168.1.255에서 오는 IP만 공유영역에 접근할 수 있습니다.

만약 모든 IP에 대해 접근을 가능하게 하려면 위의 항목을 주석처리해야만 합니다.


2. security = [share|user]

security 정책을 결정할 수 있습니다.

일반적으로 share 아니면 user를 사용합니다.

share는 인증받지 않은 사용자에게도 공유영역을 열어줍니다.

user는 오직 인증받은 사용자만 삼바서버에 접근할 수 있게 합니다.


[share] 항목은 [global]의 security를 무엇으로 설정했느냐에 따라 내용이 달라집니다.

security = share로 설정하면 공유영역을 아래처럼 설정하면 됩니다.

 

[share]

  comment = Share Directories

  path = [공유하고자 하는 디렉토리 절대경로]

  read only = no

  guest = ok


공유하고자 하는 디렉토리 절대경로를 적어주고,

read 권한만 열어주려면 read only = yes로 하고,

read / write 권한을 모두 주려면 read only = no로 해야 합니다.

write 권한을 주려면 공유영역에 아래처럼 리눅스 권한을 주어야 합니다.

$ chmod +w [공유하고자 하는 디렉토리 절대경로]


security = user로 설정하면,

- 공유영역을 아래처럼 설정하고

- 인증사용자가를 등록해야 합니다.


[share]

  comment = Share Directories

  path = [공유하고자 하는 디렉토리 절대경로]

  read only = no

  valid users = [허용하고자 하는 리눅스 유저ID]


공유영역을 설정하는 방식은 security = share와 대동소이하지만,

valid users로 인증받은 사용자만 접근하도록 설정할 수 있습니다.

valid users에는 윈도우 ID를 적는 것이 아니라

리눅스 ID를 적어놓아야 합니다.

모든 삼바 윈도우 ID는 설정시부터 리눅스 ID와 매핑되게 되어 있기 때문에,

매핑되는 리눅스 ID를 적어놓으면 됩니다.


삼바서버를 위한 사용자 계정관리는 GUI 툴을 사용하는 것이 편리합니다.

$ sudo apt-get install system-config-samba



$ sudo system-config-samba

위의 명령어를 치면 삼바설정을 위한 GUI 툴이 나타납니다.



여기서는 사용자에 대한 설정을 합니다.

설정 > Samba 사용자



위에서 사용자 추가를 선택합니다.

새로운 창이 나오며 삼바사용자를 추가/편집할 수 있는 창이 나옵니다.



Unix 사용자명은 이미 생성된 리눅스 사용자 계정을 넣으면 됩니다.

향후 윈도우즈에서 삼바서버로 접근을 하면 여기서 설정한 사용자 계정 권한으로 파일을 읽고/쓰죠.

Windows 사용자명은 윈도우 로그인 ID를 입력하면 됩니다.


사용자계정까지 설정을 완료했다면 삼바서버를 restart 합니다.

$ sudo service smbd restart


그리고 윈도우즈에서 "실행"을 띄운 후,

아이피를 입력해서 삼바서버에 접근을 해보세요.



공유설정을 해놓은 디렉토리가 표시됩니다.

디렉토리에 진입하고자 더블클릭을 하면,

사용자 계정과 암호를 입력하라는 창이 나옵니다.

여기에 위에서 설정한 Windows 사용자명과 Samba 암호를 입력합니다.

접속에 성공하면 Unix 사용자명의 권한을 가지고 파일에 접근합니다.


여기까지 설명한 설정파일을 붙여놓습니다.

smb.conf


도움이 되면 좋겠군요. :)


+ 추가, 2015. 6. 4

윈도우에서 네트워크 드라이브로 설정하여 윈도우 탐색기에 바로 노출할 수 있습니다.

위의 '실행'에서 삼버서버에 접속하면 아래와 같이 공유된 디렉토리가 나옵니다.

공유된 디렉토리 위에서 마우스 오른 버튼을 누르면 메뉴가 나옵니다.



네트워크 드라이브 연결을 누르면,

아래와 같은 팝업이 나옵니다.



윈도우 탐색기서 표시될 드라이브를 설정합니다.

그리고 "로그온할 때 다시 연결"에 체크해둡니다.

그러면 매번 네트워크 드라이브에 접속하기 위해 아이피를 적을 필요가 없어집니다.

이미 윈도우탐색기에 위에서 설정한 드라이브로 표시될테니까요. :)


끝_


  1. 맛소금 2016.02.11 11:00

    그냥 검색해서 들어온 사이트가 아는분 사이트.ㅎ 멋져요~ :)

    • 안녕하세요! :)
      별고없이 잘 지내시는지요?
      여기서 뵙게 되다니!!! 엄청 반갑습니다!!!
      3월에 뵙겠습니다! 히히.

  2. 누더기 2016.05.24 17:46 신고

    감사히 잘 봤습니다. 필요할 때 간간히 참고하기 좋네요~

  3. zecq 2016.10.10 20:54

    좋은 자료 잘 봤습니다! 잘 쓸게요^^

  4. 번개 2018.01.12 13:45

    감사합니다. 좋은 지식 얻고 갑니다^^

+ Recent posts