OSS 가이드

이 화면은 https://github.com/davidshimjs/qrcodejs 사이트에서 제공하는 라이브러리를 이용한 QR 코드 생성 샘플 화면이다.
템플릿이 저장된 디렉토리의 qrcode.min.js 파일을 활용하세요.
템플릿 위치: /HTML5/OSS/qrcode_basic
템플릿 파일
// 화면 로드 이벤트
function screen_on_load()
{
	// QR 코드 생성 처리용 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
	// 템플릿이 저장된 디렉토리의 qrcode.min.js 파일을 활용하세요.
	// screen.loadjs("./project/terminal/ext/qrcode/qrcode.min.js");
	screen.loadjs("./ext/lib/qrcode.min.js");

	// QR 코드 생성용 데이터 설정
	this.fld_text.settext("http://www.softbase.co.kr");
}

// "QR 코드 생성" 버튼 이벤트
function btn_make_qrcode_on_mouseup(objInst)
{
	var qrcode, qrcode_prop, qrcode_target_dom;

	// DIV 컴포넌트 내부 모든 HTML Element를 삭제
	this.btn_clear_qrcode_on_mouseup();

	// QR 코드 생성 속성 오브젝트 생성
	qrcode_prop = {
		width: this.fld_width.gettext(),
		height: this.fld_height.gettext(),
		colorDark : "#000000",
		colorLight : "#ffffff",
		correctLevel : QRCode.CorrectLevel.H
	};

	// QR 코드 생성 대상 DOM 오브젝트를 DIV 컴포넌트를 이용하여 구함
	qrcode_target_dom = this.div_qrcode.getdom();

	// QR 코드 오브젝트 생성
	qrcode = new QRCode(qrcode_target_dom, qrcode_prop);

	// QR 코드 데이터 설정
	qrcode.makeCode(this.fld_text.gettext());
}

// "QR 코드 삭제" 버튼 이벤트
function btn_clear_qrcode_on_mouseup(objInst)
{
	// DIV 컴포넌트 내부 모든 HTML Element를 삭제
	this.div_qrcode.empty();
}

// "QR 코드 데이터 저장"
function btn_save_qrcode_on_mouseup(objInst)
{
	var qrcode_image_base64_data;

	// QR코드가 생성된 DIV 컴포넌트 내부 이미지 DOM의 이미지 데이터를 구함
	qrcode_image_base64_data = this.div_qrcode.getjdom().find("img").attr("src");

	// QR코드 이미지 데이터를 멀티라인 컴포넌트에 설정
	this.fld_qrimagedata.settext(qrcode_image_base64_data);
}

// "QR 코드 데이터를 이용하여 이미지 컴포넌트에 QR 코드 생성" 버튼 이벤트
function btn_load_qrcode_on_mouseup(objInst)
{
	this.img_qrcode.setimagedata(this.fld_qrimagedata.gettext());
}

// "이미지 초기화" 버튼 이벤트
function btn_init_qrcode_on_mouseup(objInst)
{
	this.img_qrcode.setimagedata("");
}

// "QR 코드 데이터를 이용하여 QR 코드 인쇄" 버튼 이벤트
function btn_print_qrcode_on_mouseup(objInst)
{
	var arr_line;

    arr_line = [];

	arr_line.push('<!doctype html>');
	arr_line.push('<html lang="ko">');
	arr_line.push('<head>');
	arr_line.push('<meta charset="utf-8">');
	arr_line.push('<meta name="viewport" content="width=device-width, initial-scale=1">');
	arr_line.push('<meta http-equiv="cache-control" content="no-cache">');
	arr_line.push('<meta http-equiv="pragma" content="no-cache">');
	arr_line.push('<link rel="stylesheet" type="text/css" href="./xf5/html/report.css"/>');
	arr_line.push('<link rel="shortcut icon" href="./xframe5.ico"/>');
	arr_line.push('<style>');
	arr_line.push('.qrcode_div {');
    arr_line.push('	position: absolute;');
    arr_line.push('	left: 10px;');
    arr_line.push('	top: 10px;');
    arr_line.push('	z-index: 1;');
	arr_line.push('}');
	arr_line.push('</style>');
	arr_line.push('<script type="text/javascript">');
	arr_line.push('function onbodyload() {');
	arr_line.push('}');
	arr_line.push('</script>');
	arr_line.push('<title>xFrame5 Report</title>');
	arr_line.push('</head>');

	arr_line.push('<body oncontextmenu="return false;" onload="onbodyload();">');
	arr_line.push('<div class="qrcode_div">');
	arr_line.push('<img src="');
	arr_line.push(this.fld_qrimagedata.gettext());
	arr_line.push('"');
	arr_line.push(' style="display:block;"');
	arr_line.push('>');
	arr_line.push('</div>');
	arr_line.push('</body>');
	arr_line.push('</html>');
	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 HTML 기본 하단부 끝
	/////////////////////////////////////////////////////////////////////////////////

	// 웹브라우저 컴포넌트 내부 HTML 내용 설정,
    // 페이지 로드 완료시, on_pageload 이벤트 발생함
	this.web.sethtml(arr_line.join(''));
}

// QR 코드 인쇄용 웹브라우저 컴포넌트 로드 이벤트
function web_on_pageload(objInst)
{
	// 웹브라우저 컴포넌트 내부 HTML window DOM 오브젝트를 구함
	var browser_window = this.web.getbrowserwindow();

	// HTML window DOM 오브젝트의 print 함수 호출
	browser_window.print();
}
QR코드 가이드

예시

화면 스크립트
