'Program Lang./javascript' 카테고리의 글 목록

sdt version 브라우저에 출력

Program Lang./javascript 2016. 7. 22. 11:57

PAT/PMT와 동작은 동일하다.

1. 소스 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>jQuery treeview</title> <link rel="stylesheet" href="css/jquery.treeview.css" /> <link rel="stylesheet" href="css/screen.css" /> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="lib/jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#tree").treeview({ collapsed: true, animated: "medium", control:"#sidetreecontrol", persist: "location" }); }) </script> <script> var works = [ 'pat', 'pmt', 'sdt' ]; var requests = new Array(); for ( i in works ) { requests[i] = new request(works[i]); } function request(work) { var http_request = new XMLHttpRequest(); var url; if(work == 'pat') url = "pat_json.txt"; else if(work == 'pmt') url = "pmt_json.txt"; else if(work == 'sdt') url = "sdt_json.txt"; http_request.open("GET", url, true); http_request.onreadystatechange = function () { if (http_request.readyState == 4 && http_request.status == 200) { var arr = JSON.parse(http_request.responseText); if(work == 'pat') { parsingPatJson(arr); } else if(work == 'pmt') { parsingPmtJson(arr); } else if(work == 'sdt') { parsingSdtJson(arr); } } }; http_request.send(null); } function parsingPatJson(arr) { var pat = ""; var i; for(i = 0; i < arr.length; i++) { pat += '<li><a href="#">'; pat += "PAT version : " + arr[i].version + ", "; pat += "section : " + arr[i].section_number + ", "; pat += "program number : " + arr[i].program_number + ", "; pat += "pmtPid : " + arr[i].pmtPid + '<br>'; pat += '</a></li>'; } document.getElementById("patList").innerHTML = pat; } function parsingPmtJson(arr) { var pmt = ""; var i; var j; for(i = 0; i < arr.length; i++) { var streamType = ""; pmt +=' <a href="#">'; pmt += "PMT version : " + arr[i].version + ", "; pmt += "section : " + arr[i].section_number + ", "; pmt += "program number : " + arr[i].program_number + ", "; pmt += "pcr_pid : " + arr[i].pcr_pid + '<br>'; // add sub routine pmt += '<ul>'; for(j = 0; j < arr[i].esInfo.length; j++) { streamType += '<li><a href="#">' streamType += "stream type : " + arr[i].esInfo[j].stream_type + ", " streamType += "es_pid : " + arr[i].esInfo[j].es_pid + '<br>'; streamType += '</a></li>'; } pmt += streamType; pmt += '</ul>'; pmt += '</a>'; } list_add_pmt(pmt); } function list_add_pmt(list) { $("#pmtTop").append(list); } function parsingSdtJson(arr) { var sdt = ""; var i; for(i = 0; i < arr.length; i++) { var sdtSub = ""; sdt +=' <a href="#">'; sdt += "SDT version : " + arr[i].version + ", "; sdt += "section : " + arr[i].section_number + ", "; sdt += "service_id : " + arr[i].service_id + ", "; // add sub routine sdt += '<ul>'; { sdtSub += '<li><a href="#">'; sdtSub += "EIT_schedule_flag : " + arr[i].EIT_schedule_flag + '<br>'; sdtSub += "EIT_present_following_flag : " + arr[i].EIT_present_following_flag + '<br>'; sdtSub += "EIT_schedule_flag : " + arr[i].EIT_schedule_flag + '<br>'; sdtSub += "running_status : " + arr[i].running_status + '<br>'; sdtSub += "free_CA_mode : " + arr[i].free_CA_mode + '<br>' sdtSub += "servicProvideeName : " + arr[i].servicProvideeName + '<br>'; sdtSub += "serviceName : " + arr[i].serviceName + '<br>'; sdtSub += '</a></li>'; } sdt += sdtSub; sdt += '</ul>'; sdt += '</a>'; } list_add_sdt(sdt); } function list_add_sdt(list) { $("#sdtTop").append(list); } </script> </head> <div id="sidetree"> <div class="treeheader"> </div> <div id="sidetreecontrol"><a href="?#">fold</a> | <a href="?#">unfold</a></div> <ul id="tree"> <li> <strong>pat</strong> <ul> <div id="patList"></div> </ul> </li> <li> <strong>pmt</strong> <ul> <li id="pmtTop"></li> </ul> </li> <li> <strong>sdt</strong> <ul> <li id="sdtTop"></li> </ul> </li> </ul> </div>

2. 테스트 결과

'Program Lang. > javascript' 카테고리의 다른 글

pmt_json.txt 브라우져에 출력 (0)	2016.07.22
pat_json.txt 파일을 이용한 pat 정보 webbrowser로 출력 (0)	2016.07.21

:

pmt_json.txt 브라우져에 출력

Program Lang./javascript 2016. 7. 22. 10:34

방송정보 PMT Section에서 정보를 추출하고 json 파일 포멧으로 뽑아내서 Apache WebServer 디렉토리에 복사하는 것 까지

수행하는 c++ native code는 "pmt json version" c++ 블로그 턉에 정리해 놓았다.

여기서는 순수하게 PMT json 파일을 브라우져에 출력하는 부분만 정리한다.

모든 내용은 PAT에 정리했던 부분과 동일하다.

내가 자바스크립트 수준이 초보자라 정말 어렵게 동작시키고 있는데 전문가들은 정말 우수은 코드라고 보면된다.

1. 소스 코드

XMLHttpRequest()함수로 PAT/PMT 보다 Json 파일을 요청해야 해서 앞장에서 PAT 처리부분을 수정하였다.

구글링으로 비슷한 코드 찾아서 쑤셔 넣었는데 다행히 잘 동작한다.

자바스크립트 공부가 아니고 c++ native 결과를 브라우져에 출력하는 것을 보기위함이라 완성도는 낮다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>jQuery treeview</title>

var requests = new Array();

for ( i in works )
	{
	    requests[i] = new request(works[i]);
	}

function request(work)
	{
	    var http_request = new XMLHttpRequest();
	    var url;

if(work == 'pat')
	    	url = "pat_json.txt";
	    else if(work == 'pmt')
	    	url = "pmt_json.txt";

http_request.open("GET", url, true);

http_request.onreadystatechange = function () {
		    if (http_request.readyState == 4 && http_request.status == 200) {
		        var arr = JSON.parse(http_request.responseText);

if(work == 'pat')
		        {
		        	parsingPatJson(arr);
		        }

if(work == 'pmt')
		        {
					parsingPmtJson(arr);
				}		        	
		    }
	    };
	    http_request.send(null);
	}

function parsingPatJson(arr) {
	    var pat = "";
	    var i;

for(i = 0; i < arr.length; i++)
		{
			pat += '<li><a href="#">'
			pat += "PAT version : " + arr[i].version + ", "
			pat += "section : " + arr[i].section_number + ", "
			pat += "program number : " + arr[i].program_number + ", "
			pat += "pmtPid : " + arr[i].pmtPid +  '<br>';
			pat += '</a></li>'
		}

document.getElementById("patList").innerHTML = pat;
	}

function parsingPmtJson(arr) {
	    var pmt = "";
	    var i;
	    var j;

for(i = 0; i < arr.length; i++)
		{
			var streamType = "";

pmt +=' <a href="#">';
			pmt += "PMT version : " + arr[i].version + ", ";
			pmt += "section : " + arr[i].section_number + ", ";
			pmt += "program number : " + arr[i].program_number + ", ";
			pmt += "pcr_pid : " + arr[i].pcr_pid + '<br>';

// add sub routine
			pmt += '<ul>';
			for(j = 0; j < arr[i].esInfo.length; j++)
			{
				streamType += '<li><a href="#">'
				streamType += "stream type : " + arr[i].esInfo[j].stream_type + ", "
				streamType += "es_pid : " + arr[i].esInfo[j].es_pid + '<br>';
				streamType += '</a></li>';
			}
			pmt += streamType;
			pmt += '</ul>';
			pmt += '</a>';
		}

list_add(pmt);
	}

function list_add(list)
	{
		$("#pmtTop").append(list);
	}	
</script>

</head>

<div id="sidetreecontrol"><a href="?#">fold</a> | <a href="?#">unfold</a></div>
	<ul id="tree">
		<li>
			<strong>pat</strong>
			<ul>
				<div id="patList"></div>
			</ul>
		</li>

2. 테스트 결과

PMT 트리구조 깨졌다. 아무리 용을 써도 잘되지 않아서 일단 이 정도 수준에서 마무리한다.

'Program Lang. > javascript' 카테고리의 다른 글

sdt version 브라우저에 출력 (0)	2016.07.22
pat_json.txt 파일을 이용한 pat 정보 webbrowser로 출력 (0)	2016.07.21

:

pat_json.txt 파일을 이용한 pat 정보 webbrowser로 출력

Program Lang./javascript 2016. 7. 21. 19:27

MPEG-TS Analyzer들 처럼 treeview로 보여주고 싶어서 인터넷을 뒤지다. 좋은 참고 사이트가 있어서 활용하였다.

상세 정보는 아래 참고 사이트 블로그 참조.

1. 소스 트리

아래 위치는 apache2 root directory인 /Users/hskim/Sites/mpeg/ 아래 소스 트리이다.

pat_json.txt 파일은 c++ native application이 pat을 parsing한 후에 만들어서 저장한 json 파일이다.

이 파일을 웹브라우져에서 읽어본다.

.

├── css

│ ├── images

│ │ ├── ajax-loader.gif

│ │ ├── file.gif

│ │ ├── folder-closed.gif

│ │ ├── folder.gif

│ │ ├── minus.gif

│ │ ├── plus.gif

│ │ ├── treeview-black-line.gif

│ │ ├── treeview-black.gif

│ │ ├── treeview-default-line.gif

│ │ ├── treeview-default.gif

│ │ ├── treeview-famfamfam-line.gif

│ │ ├── treeview-famfamfam.gif

│ │ ├── treeview-gray-line.gif

│ │ ├── treeview-gray.gif

│ │ ├── treeview-red-line.gif

│ │ └── treeview-red.gif

│ ├── jquery.treeview.css

│ └── screen.css

├── index.html

├── lib

│ ├── jquery.cookie.js

│ ├── jquery.js

│ └── jquery.treeview.js

└── pat_json.txt

2. 선수 작업

일단 json 파일을 javascript에서 읽어 드리면 방법은 여러가지가 있지만 javascript공부가 주 목적이 아니므로로

일단 돌아가면 그냥 냅둔다.

treeview.html 파일을 index.html로 바꾸고 거기에 json http parsing 부분만 추가하였다.

3. index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>jQuery treeview</title>

</head>

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var patArry = JSON.parse(xmlhttp.responseText);
        parsingPatJson(patArry);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function parsingPatJson(arr) {
    var pat = "";
    var i;

for(i = 0; i < arr.length; i++)
	{
		pat += '<li><a href="#">'
		pat += "PAT version : " + arr[i].version + ", "
		pat += "section : " + arr[i].section_number + ", "
		pat += "program number : " + arr[i].program_number + ", "
		pat += "pmtPid : " + arr[i].pmtPid +  '<br>';
		pat += '</a></li>'
	}

document.getElementById("patList").innerHTML = pat;
}

</script>

<div id="sidetreecontrol"><a href="?#">fold</a> | <a href="?#">unfold</a></div>
	<ul id="tree">
		<li>
			<strong>pat information</strong>
			<ul>
				<div id="patList">
			</ul>
		</li>
	</ul>
</div>

4. 테스트 결과

5. 참고 사이트

[javascript treeview] - 공유해주셔서 감사. 네가 javascript를 뜸성뜸성 알아서 잘 활용했는지 의문임.

http://yangyag.tistory.com/65

'Program Lang. > javascript' 카테고리의 다른 글

sdt version 브라우저에 출력 (0)	2016.07.22
pmt_json.txt 브라우져에 출력 (0)	2016.07.22

:

CHIPMAKER

'Program Lang./javascript'에 해당되는 글 3건

sdt version 브라우저에 출력

'Program Lang. > javascript' 카테고리의 다른 글

pmt_json.txt 브라우져에 출력

'Program Lang. > javascript' 카테고리의 다른 글

pat_json.txt 파일을 이용한 pat 정보 webbrowser로 출력

'Program Lang. > javascript' 카테고리의 다른 글

티스토리툴바