There are 5 steps
Step 1. Download framework
Step 2. Get API Key
Step 5. Display CCTV
information on iWebkit framework
Step 4, Retrieve CCTV infomation via traffy API
Step 3. Edit the source codes of main page
of iWebkit framework
1. This demo uses PHP for handle data.
4. HTML/XML background knowledges.
2. The demo uses NOTEPAD editor.
3. Need some Web browser.
Advice
http://snippetspace.com/projects/iwebkit/
Download
Already
Download
Extract file
You have already finished 1st step.
?
Display traffic infomation
via iWebkit on a mobile device.
1st Milestone:
- Downloaded files
Use your registered APP-ID for the next step.
Notice !!
!! Web referrer must be same as your domain IP.
You have already finished 2nd step.
2nd Mile stone:
- Got the key to be used on
the forward steps.
From step 1 you have downloaded the framwork
and extracted files already.
Important parts in file you want to know for editing.
TOP BAR
CONTENT
Top bar
 
 และพิมพ์ชื่อหัวข้อตามต้องการ



has 2 components.
Title
Navigator
1st component : Title
For editing topbar, you edit code underneath

specifically.

 
 และพิมพ์ชื่อหัวข้อตามต้องการ


<div id="topbar">
<div id="title"> Title name </div>
</div>
Edit here
2nd component : Navigator
<div id="topbar">
<div id="title">Traffy</div>
<div id="rightnav"><a href="about.php">RIght</a> </div>
<div id="leftnav"><a href="about.php">Left</a> </div>
</div>
Navigator name
Type of navigator (Left or Right)
Navigate to
Note: There are 2 types of navigator:
rightnav, leftnav.
Content
has 3 components.
1st component:
List Title (Gray Title)
2nd component:
List Detail
3rd component:
List
<div id="content">
<span class="graytitle">My Title</span>
</div>

Title name

<li class="textbox">
<span class="header">Description</span>
<p>คำบรรยาย APP. หรืออื่นๆ ของคุณ</p>
</li>
Description heading
Detail
<li class='store'>
<a href=ใส่ที่ที่ต้องการให้เมื่อคลิ๊ก List นี้แล้วลิงค์ไปเช่น >
<span class='image' style='background-image:url(________แหล่งที่มาของรูปภาพ)'></span>
<span class='name'>ใส่ชื่อของ List นี้</span>
<span class='comment'>ใส่ข้อความรอง</span>
<span class='arrow'></span>
</a>
</li>
 
You have already finished third step.

3rd Milestone:
- Code for displaying data.
Top bar
Content
Finished ! ! !
<div id="topbar">...</div>
For editing topbar, you edit code underneath

specifically.
<div id="content">...</div>
CCTV information format retrieved from traffy api is XML :

	
<info>
<cctv no=”ID” name=”English name” name_th=”Thai name”>
<point lat=”Latitude point” lng=”Longtitude point”/>
<available>Update Status</available>
<url>Iimage</url>
<lastupdate>last update time</lastupdate>
<src>Source</src>
<desc>Description</desc>
<list>Image list</list>
</cctv>
</info>

	
Use PHP extract information
<?php	
	$xmldoc = new DOMDocument();				
	$xmldoc->load('http://athena.traffy.in.th/apis/apitraffy.php?
	   format=XML&api=getCCTV&available=t&key=6itZMbBuWE&appid=00000053'); 
	$elem = $xmldoc->getElementsByTagName('cctv');
foreach($elem as $elem)	{
$name_th = $elem->getAttribute('name_th');

$last_upd_node = $elem->getElementsByTagName('lastupdate');
$last_update_value = $last_upd_node->item(0)->nodeValue;

$url =  $elem->getElementsByTagName('url');
$url_pic = $url->item(0)->nodeValue;
?>
Store list of CCTV in
variable:$elem



keep each CCTV stored in the list
, and extract information of them into
variable.

		
echo "<li class='store'>
<a href=‘YourLink'>
<span class='image' style='background-image:url($url_pic)'></span>
<span class='name'>$name_th</span>
<span class='comment'>อัพเดทล่าสุด $last_update_value</span>
<span class='arrow'></span>
</a>
</li>";
}// จบลูป foreach
?>
Print those information via iWebkit
Then, Interate picking each CCTV from
the list until the last element
From the 4th step we have stored CCTV information in the variable. This step will display those CCTV information via the iWebkit.
This code continues from 4th step.
!! 2nd and 3rd components are in the <ul>tag
<ul class="pageitem">
...
2nd comp.
3rd comp.
...
</ul>
because they are in the same group of list.
Selectionbutton
Tributtons
: is a div. between topbar
and content
<div id="duobutton">
<div class="links">
<a href="A.html">Text</a>
<a href="B.html">Text</a>
</div></div>
4th Milestone:
- Code for retrieving data.
You have already finished forth step.
FINISH!!
We must save the index.html to
index.php and set encoding to
UTF-8, for displaying Thai language.