Internship, Days 22-23 (21-22 May 2012)
Posted on May 23rd, 2012 in cloud, computer, CPE, in English, in Thai, JavaScript, personal, programming | No Comments »
No photo today. Sorry. Read on.
เนื่องจากมีการแก้บั๊กขนานใหญ่เกิดขึ้นซึ่งใช้เวลาสองวัน ผมก็ขออัพรวมไปเลยนะครับ ส่วนที่เป็นสีแดงคือส่วนที่มีการแก้ไขในวันที่สองนะครับ จะได้เห็นว่ามีอะไรเปลี่ยนไปยังไงบ้าง
งานที่ผมทำช่วงสองวันนี้มีสองส่วน ส่วนแรกคือเตรียมเอกสารนำเสนอเรื่อง vCloud Director (vCD) แต่ปัญหาคือผมยังไม่ค่อยเข้าใจสถาปัตยกรรมโดยรวมของ VMware เท่าไหร่ เลยต้องไปอ่านใหม่หมดตั้งแต่ VMware Workstation, VMware ESXi, ฯลฯ จนกระทั่งอ่านไปถึงหัวเรื่องของ vCloud Director เท่านั้น เท่าที่สรุปได้คือ (ไม่ได้บอกว่ารู้แค่นี้นะครับ)
- ESXi เป็น Hypervisor ที่ติดตั้งลงบนฮาร์ดแวร์โดยตรง ไม่ขึ้นกับ OS ใดๆ
- vCenter เป็นระบบควบคุมเครื่องที่ทำ virtualization อีกที
- vSphere Client เป็นตัวที่ต่อไปยัง vCenter หรือโฮสแต่ละเครื่อง
- vCloud Director เป็นตัวที่มา abstract หรือมาครอบ vCenter ตัวหนึ่งหรือหลายตัวอีกที
- vMotion คือระบบและกระบวนการย้าย VM จากเครื่องหนึ่งไปอีกเครื่องหนึ่งโดยไม่มี downtime
จากนั้นพี่ก็มาสับงานผมอีกรอบ โดยต้องแก้ไขตัวเล่นวิดีโออีกหลายอย่าง
- วิดีโอไม่เล่นอัตโนมัติบน iPad สาเหตุเป็นเพราะผมเอาโค้ดที่เคยใช้งานได้ออก แล้วไม่ได้ใส่กลับเข้าไปใหม่ แก้ไขโดยการสั่ง videotag.load(); videotag.get(0).play(); ตามอ้างอิง [1] , [2] ทั้งนี้ iOS เวอร์ชันใหม่ๆ มีการป้องกัน autoplay ที่แข็งแกร่งขึ้นเรื่อยๆ จนวิธีนี้ใช้ไม่ได้ผล
- ผลการค้นหาวิดีโอแสดงแค่คอลัมน์เดียว ไม่สะดวกและไม่สวยด้วย แก้โดยการลดขนาดใน CSS (สิ)
- ลากวัตถุ (object) ไม่สะดวกเมื่อต้องเลื่อนจอไปมา คิดว่าต้องหาพวก autoscroll มาใส่ แต่บั๊กมันเยอะ ต้องค่อยๆ ดูไป ตอนนี้ทำได้แล้ว แต่ถึกมาก ใช้ global เก็บสถานะ แล้วใช้ event ในการ set สถานะของตัวแปรใน global
- การเปิดปิดเสียง พี่ต้องการให้ no mute ตั้งแต่แรก ในขณะที่ผมไปทำ default mute ไว้เพราะรำคาญเสียงในคลิป (นิดเดียวแต่ก็ยังไม่ได้ทำ) (ตอนนี้ทำแล้ว)
- พฤติกรรมของกล่อง drop-down ที่มันจะคอยเลือก default playlist ขึ้นมาตลอด ซึ่งแม้ว่าผมจะเซฟไฟล์ชื่ออื่นไปมันก็ยังเด้งกลับมาเป็น default playlist ทุกครั้ง อันนี้แก้ที่ฟังก์ชันสำหรับ rebuild drop-down list ไปเลย โดยถ้าเป็นการเซฟให้ set ชื่อใน drop-down list กลับมาเป็นชื่อที่เพิ่งเซฟไป ทำเสร็จแล้ว ไม่ค่อยยากเท่าไหร่
- โปรแกรมขาดคำอธิบาย เช่น สัญลักษณ์ที่ใช้บอกว่าวิดีโอ (ทั้งข้อมูลและไฟล์) มาจากฐานข้อมูลหรือจาก YouTube ก็เลยใส่สัญลักษณ์ลงไป
- ให้คลิกบนวิดีโอ MP4 แล้ว play/pause ได้เหมือนกับบน YouTube (ทำแล้ว)
Since there’s a big chunk of bug hunt which spanned two days, I decided to group them into one entry. The red bits indicate changes made during the second day.
I’ve done parts of two jobs during the two days. The first one is vCloud Director (vCD) presentation preparation. Since I did not really understand much about the entire VMware architecture, I had to read everything from start: Workstation, ESXi, etc., until the introduction to vCloud Director (where I left off) and here’s the summary (not “what I know” though)
- ESXi is a Hypervisor installed on top of hardware (bare-metal), which is not OS-dependent
- vCenter controls the virtualization host machines
- vSphere Client connects to vCenter or individual hosts
- vCloud Director abstracts one or more vCenters
- vMotion is the thing that lets you move VM from one host to another without downtime
- Video does not auto-play on iPad. This is because I forgot to add the force-autoplay code back into the main piece. Just a simple videotag.load(); videotag.get(0).play(); as described in [1] , [2] . However, newer iOS versions block autoplay more aggressively, and this method also fails.
- Only one column of search result is displayed on mobile devices, so I reduced each search result’s size in CSS.
- Object cannot be dragged from one part of document to another far side without auto-scroll. I managed to do so, but it’s a lot of kludge like global variables and get-set style of events, very old-fashioned.
- Supervisor wants default playlist to no-mute, so I changed player behavior as required .
- Drop-down list (of playlists) has a quirky behavior because I set it to “snap” to default playlist whenever the drop-down list is regenerated. Even if we save another playlist for example, the drop-down list still snaps to default playlist. I changed it so that when you save, it snaps to the name you just saved. Simple if-then, not really hard.
- Application lacks explanation, such as video legend (video color codes, for example), so I added them in a bit.
- Play/Pause when user clicks on MP4, just like that of YouTube.
Click-to-dismiss (requires jQuery)
Purpose: Ideal for simple message boxes, alert messages, etc.
Syntax: click_to_dismiss(what_to_dismiss [, where_to_click] );
(where_to_click defaults to “document”, which means “anywhere”)
function click_to_dismiss(what_to_dismiss, where_to_click){
if(where_to_click == undefined){
where_to_click = document;
}
$(document).bind('click', function(){
$(what_to_dismiss).hide();
$(what_to_dismiss).unbind();
});
}
Limitation: This function also unbinds everything attached to what_to_dismiss, which is usually not a problem for me because my message boxes don’t have any other bindings attached. Please respond if you manage to make it work better (while readable by beginner because that’s what I am!)
Recommendation for Improvement: Overcome the limitation
Autoscroll page when dragging some element (requires jQuery. VERY BAD CASE OF KLUDGE!)
Purpose: Allows page to scroll up or down when you drag an element near the top or bottom edge of the browser.
Syntax: set_item_detect_drag(selector);
Selector is jQuery element like $(‘img’), $(‘.items’) or $(‘#namebox’)
var autoscroll_mouse_item;
var autoscroll_click_item;
var autoscroll_drag_item;
function set_item_detect_drag(sel){
sel.mouseenter(function(){
autoscroll_mouse_item=this;
set_drag_status();
});
sel.mouseleave(function(){
autoscroll_mouse_item=undefined;
set_drag_status();
});
sel.mousedown(function(){
autoscroll_click_item=this
set_drag_status();
});
sel.mouseup(function(){
autoscroll_click_item=undefined
set_drag_status();
});
}
// Set detection vars
function set_drag_status(){
if(autoscroll_mouse_item==autoscroll_click_item&&autoscroll_mouse_item!=undefined){
autoscroll_drag_item = autoscroll_mouse_item;
} else {
autoscroll_drag_item = undefined;
}
}
$(document).mousemove(function(e){
//if drag_item is acquired and mouse is near edge, scroll.
if(autoscroll_drag_item!=undefined){
//mouse near top
if(e.pageY - $(window).scrollTop() < 40)
{
//scroll a bit up
$(window).scrollTop($(window).scrollTop()-5);
}
else if($(window).scrollTop()+parseInt(window.height)-e.pageY < 40)
{
//scroll a bit down
$(window).scrollTop($(window).scrollTop()+5);
}
}
});
Limitation: Lots.
Recommendation: Use OO, extending jQuery and make it a full-blown plugin instead of a global-var-ridden kludge. Another: Variable, smooth scrolling speed (slow when not very close to edge, for example)
