클릭센스(Qlik Sense)에 워터마크 추가 방법

워터마크란 문서나 사진 등에 저작자 등을 밝히기 위해 흐릿하게 삽입된 이미지 말한다.

대부분의 QlikView 개발자는 차트 혹은 개체에 워터마크를 추가하는 데 익숙합니다. Qlik Sense에서는 기본으로 제공되는 기능은 아닙니다. 그러나 CSS를 사용하여 비교적 간단하게 달성할 수 있습니다. 

워터마크란?

워터 마크는 텍스트 또는 의도적으로 다른 이미지를 객체에 중첩한 로고입니다. 이는 일반적으로 투명한 로고나 텍스트로 이루어지므로 사용자가 추가 정보를 추가하는 동안 원본 개체를 보는 데 방해가 되지 않습니다.

" Qlik Sense 차트에 워터마크를 추가하려는 이유는 무엇입니까?” 워터마크는 비주얼리제이션에 브랜드 아이덴티티를 추가하는 좋은 방법입니다. 이것이 정말 좋은 기능이 되는 다른 시나리오도 있습니다.

 

차트의 워터마크

공개 도메인에서 사용 중인 Qlik Sense 차트가 있다고 상상해 보십시오. 워터마크를 추가하는 것은 차트에 데이터 소스 등에 대한 정보와 같은 더 많은 정보를 차트에 추가하는 간단한 방법입니다. 다른 시나리오는 "개념 증명(PoC)" 응용 프로그램 또는 "UAT(사용자 승인 테스트)" 응용 프로그램 또는 사용자가 공유하기를 원하지 않는 "Confidential" 차트일 수 있습니다. 이 응용 프로그램이 개발 상태 또는 UAT 상태에 있거나 기밀 정보가 포함되어 있다는 것을 사용자에게 시각적으로 알리고 사용자가 차트/스크린샷을 공유할 때도 해당 알림이 남아 있어 다른 사람이 원래 차트/응용 프로그램의 목적을 볼 수 있기를 원합니다.

사용하는 방법

Qlik Sense 애플리케이션에 워터마크를 추가하는 방법을 입니다. 이를 수행할 수 있는 몇 가지 방법이 있습니다.

1.   Qlik Sense Theme에서 CSS 사용

2.   " Qlik Visualization Bundle "의 다중 KPI 차트에서 사용자 정의 CSS 사용

 

Qlik Sense 테마의 CSS

 

 

sensetheme.com – Qlik Sense 테마 생성기

고유한 Qlik Sense 테마를 만들거나 이것은 응용 프로그램의 모든 차트에 워터마크를 추가하려는 경우 가장 좋은 방법입니다.  Sense Theme 에서 다운로드 하여 쉽게 사용할 수 있습니다. Qlik Sense 테마는 2개의 핵심 파일과 일부 선택적 자산으로 구성됩니다.

1.   정의(QEXT) 파일

2.   기본 JSON 파일

3.   기타 선택적 자산(이미지, CSS 스타일 시트 등)

테마에 워터마크를 추가하려면 테마에 CSS 파일을 추가하거나 기존 파일을 수정해야 합니다(테마에 이미 CSS가 포함된 경우). 텍스트 편집기에서 CSS 파일을 열고 맨 아래에 다음 코드를 추가하기만 하면 됩니다.

 

.qv-object-content-container::after {     content: "Qliker Sample"; /* Whatever you want to show in the watermarks */     position: absolute;     bottom: 5px;     right: 5px;     background-image: linear-gradient(120deg, #eaee44, #33d0ff);     /* Legacy and some vendor prefixes that you probably don't need... */     background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);     background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);     background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);     opacity: .7; }

그러면 Qlik Sense 응용 프로그램의 모든 차트에 배경 그라데이션이 있는 오른쪽 하단 모서리에 작은 워터마크가 추가됩니다.

모든 차트의 워터마크

이 접근 방식에는 몇 가지 단점이 있습니다. 예를 들어 사용자가 모든 차트에서 동일한 워터마크를 보고 싶어하지 않을 수 있으며 "Qlik Dashboard Bundle"에 있는 컨테이너 확장에도 작동하지 않습니다. 일을 단순화하기 위해 화면을 대각선으로 가로지르는 시트당 하나의 워터마크를 추가할 수 있습니다. 다음은 이를 수행하는 방법에 대한 예제 코드입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.qvt-sheet-container::after {     content: "Qliker"; /* Whatever you want to show in the watermarks */     position: absolute;     top: 45%;     left: 45%;        opacity: .7;     z-index: 999;     font-size: 30px;     font-weight: 900;     transform: rotate(-40deg);     background-image: linear-gradient(120deg, #eaee44, #33d0ff);     /* Legacy and some vendor prefixes that you probably don't need... */     /* Safari */     -webkit-transform: rotate(-40deg);     background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);     /* Firefox */     -moz-transform: rotate(-40deg);     background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);     /* IE */     -ms-transform: rotate(-40deg);     /* Opera */     -o-transform: rotate(-40deg);     background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);     /* Internet Explorer */     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ }

 

다중 KPI 차트의 CSS

Qlik Sense 다중 KPI 차트

다중 KPI 차트설치와 함께 제공되는 "Qlik Visualization Bundle"의 일부인 확장입니다(추가 확장 팩을 설치하기로 선택한 경우. 조직에서 아직 설치하지 않은 경우 설치하는 것이 좋습니다). 이 차트를 사용하면 사용자 정의 CSS를 추가할 수 있습니다. 이 확장을 사용하여 시트 또는 이 확장이 사용되는 모든 차트에 워터마크를 추가할 수 있습니다. 위의 예를 복사하여 붙여넣기만 하면 됩니다. 이 차트의 범위는 이 차트가 속한 시트로만 제한되며 이 방법을 사용하는 다른 시트에는 워터마크가 표시되지 않습니다. 이것은 기존 애플리케이션의 PoC 또는 UAT 시트에 메시지를 표시하는 좋은 방법입니다. 그러면 사용자는 이것이 시트의 테스트/개발 버전임을 한 눈에 알 수 있으므로 더 나은 경험을 갖게 됩니다.

 

추가 내용

사용자 정의 CSS와 관련하여 우리가 할 수 있는 일이 훨씬 더 많습니다. 예제는 우리가 이것을 달성할 수 있는 많은 방법 중 하나를 보여줍니다. 우리가 추가하는 워터마크는 개체/차트 상단에 그려지고 있습니다. 즉, 워터마크 텍스트 바로 아래에 있는 개체를 클릭할 수 없는 경우가 있습니다. 항상 qv-object-contentCSS에서 " " 클래스를 대상으로 ::before하여 워터마크를 그리는 데 사용할 수 있습니다. 그러면 차트 뒤에 워터마크가 표시됩니다. 다음은 해당 코드의 예입니다.

 

.qv-object-content::before {     content: "Data on the rocks";     position: absolute;     bottom: 10px;     left: 10px;        opacity: .7;     background-image: linear-gradient(120deg, #eaee44, #33d0ff);     /* Legacy and some vendor prefixes that you probably don't need... */     background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);     background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);     background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);  }

CSS로 할 수 있는 또 다른 트릭과 우리가 살펴본 두 번째 접근 방식(다중 KPI 차트)입니다. 궁극적으로 확장을 사용하여 사용자에게 KPI 개체를 표시하지 않고 앱의 시트에 영향을 줄 수 있습니다. CSS에 다음을 추가하기만 하면 됩니다.

 

.qv-object-qlik-multi-kpi {     visibility: hidden; }

다중 KPI 차트 숨기기

개체 크기를 단일 그리드로만 조정했는지 확인합니다. 이렇게 하면 여전히 편집 모드 에서 KPI 차트를 클릭할 수 있지만 사용자 지정 CSS가 시트에 계속 적용되는 동안 사용자에게 빈 그리드만 표시됩니다.

 

.qvt-sheet-container::after {

    content: "Qliker Sample";

    position: absolute;

    top: 30%;

    left: 30%;   

    opacity: .7;

    z-index: 999;

    font-size: 200px;

    font-weight: 900;

    transform: rotate(-40deg);

}

 

.qvt-sheet-container::after {

    content: "Qliker"; /* Whatever you want to show in the watermarks */

    position: absolute;

    top: 45%;

    left: 45%;   

    opacity: .7;

    z-index: 999;

    font-size: 300px;

    font-weight: 900;

    transform: rotate(-40deg);

    background-image: linear-gradient(120deg, #eaee44, #33d0ff);

    /* Legacy and some vendor prefixes that you probably don't need... */

    /* Safari */

    -webkit-transform: rotate(-40deg);

    background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);

    /* Firefox */

    -moz-transform: rotate(-40deg);

    background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);

    /* IE */

    -ms-transform: rotate(-40deg);

    /* Opera */

    -o-transform: rotate(-40deg);

    background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);

    /* Internet Explorer */

}

 

.qv-object-content::before {

    content: "Qliker Sample";

    position: absolute;

    bottom: 10px;

    left: 10px;   

    opacity: .7;

    font-size: 100px;

    font-weight: 100;

}

 

.qv-object-content::before {

    content: "Qliker";

    position: absolute;

    bottom: 10px;

    left: 10px;   

    opacity: .7;

    /* background-image: linear-gradient(120deg, #eaee44, #33d0ff);  */

    /* Legacy and some vendor prefixes that you probably don't need... */

    background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);

    background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);

    background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff); 

}

 

// Multi KPI Chart Hidden

.qv-object-qlik-multi-kpi {

    visibility: hidden;

}

 

Water Mark 추가.pdf

0.66MB

 

클릭센스 기술자료들은 

https://qliksense.tistory.com/

클릭커

 

기술문의는 

Qliker@kakao.com