Tip1 : Basic javascript animation PART1

สวัสดีครับ หายไปนานเพราะงานเข้าเยอะมากๆ ช่วงนี้ก็เลยได้เวลาปล่อยของ เอ้ย ปล่อย
ความรู้ที่ได้รับจากการทำงานเป็นโปรแกรมเมอร์ให้เกมๆนึงทางฝั่งญี่ปุ่น โดยส่วนที่ทำให้
ผมชะงักมากสุดก็คือส่วน javascript ที่เป็นอนิเมชั่นนั้นเอง (ปกติผมเป็น backend php)
เอาล่ะ ใน Part1 นี้ผมจะมาอธิบายในส่วนหลักการพื้นฐานที่ควรรู้ก่อน นั้นคือเรื่อง
เวลาที่อนิเมชั่นจะแสดงผล หรือ timeline frame นั้นเอง

Concept
ปกติการรันอนิเมชั่นก็จะมีการกำหนดไว้ว่า ที่เวลาเท่านั้นเท่านี้หลังจาก start จะให้
ทำอะไร วัตถุเคลื่อนไปทางไหน มีอะไรโผล่ขึ้นมา อะไรหายไป และอีกมากมายที่เป็น
การเปลี่ยนแปลงที่ทำให้เกิดเป็นการเคลื่อนไหว หรือ effect ต่างๆ ดังนั้นก็จะต้องมีการ
plan ว่าที่วินาที 1 จะให้ทำอะไร วินาทีต่อมาทำอะไรต่อ เพื่อให้เกิดเป็นภาพอนิเมชั่น
ขึ้นมาในที่สุด บางครั้งอาจเซตเป็น 0.5 วินาที, 0.1 วินาที หรือน้อยจนระดับ ms (millisecond)
แล้วแต่ความ smooth ของภาพ โดยถ้าเซตเป็น 0.5 วินาทีก็หมายความว่า ใน 1 วินาทีที่ผ่านไป
จะมีการเปลี่ยนแปลงเกิดขึ้น 2 ครั้ง และถ้าเซตเป็น 0.1 วินาทีก็มีการเปลี่ยนแปลงเกิดขึ้น 10 ครั้ง
ภาพก็จะ smooth ดูต่อเนื่องมากยิ่งขึ้น ตรงนี้ก็แล้วแต่จุดประสงค์ของแต่ล่ะคนเลยครับ

และนี้คือ basic code พื้นฐานที่เป็นหัวใจสำคัญในการรันอนิเมชั่นใน javascript ครับ

function animation() {  //ชื่อฟังค์ชั่นที่คุมเวลาแสดงอนิเมชั่น

  var scene = 0 //กำหนด scene หรือฉากแรกเป็น 0

  function framerate() {   
      scene++ //ให้ฉากเปลี่ยนไปเรื่อยๆ โดยเพิ่มทีล่ะ 1

      switch(scene) {
      case 1:
          //ใส่ function หรือ code ที่ต้องการให้ run เมื่อถึงวินาทีที่1 ตรงนี้
          break;
      case 2:
         //ใส่ function หรือ code ที่ต้องการให้ run เมื่อถึงวินาทีที่2 ตรงนี้
          break;
      case 3:
         //ใส่ function หรือ code ที่ต้องการให้ run เมื่อถึงวินาทีที่3 ตรงนี้
          break;

      if (scene == 3) 
        clearInterval(t);  //ถ้า scene มาถึงฉากสุดท้าย หรือในที่นี้คือ3 ให้หยุดการทำงาน
       // กรณีที่อยากให้วน loop เรื่อยๆไม่หยุด ให้เซต scene = 0;
   }

    var t = setInterval(framerate,1000); //เรียกใช้ function framerate ทุกๆ1000ms

}

จากข้างบนจะเป็น code สำหรับรันอนิเมชั่น โดยเซตเวลาที่ทำอนิเมชั่นต่อครั้ง = 1 วินาที
(1000ms) และมี timeline การรันอนิเมชั่นอยู่ 3 ครั้ง (ในที่นี้ตามจำนวน case 1-3)
โดยฟังค์ชั่นข้างบนนั้นจะมีการเรียกใช้ได้หลายวิธี ตัวอย่าง เช่น

1.รันเมื่อโหลดหน้าเว็บ พวกรูปภาพ ไฟล์ต่างๆ เสร็จแล้ว
window.onload = function () {
     animation();  
}

2.รันจากฟังค์ชั่นอื่นๆ (สามารถรันจากฟังค์ชั่นอนิเมชั่นตัวอื่นซ้อนอีกทีก็ได้ จะอธิบาย part ต่อไป)
3.รันจาก html element เมื่อคลิก เช่น < img src="xxx.jpg" onclick="animation();">
4.รันจาก html element เมื่อเมาส์ชี้ เช่น < img src="xxx.jpg" onmouseover="animation();">
5.รันจาก html element เมื่อค่าเปลี่ยน เช่น < input type="text" onchange="animation();">


สำหรับวันนี้ก็จะเป็นการอธิบายในส่วนของ concept เบื้องต้นนะครับ
จริงๆในส่วนนี้ก็สามารถนำไปประยุกต์ใช้ได้เยอะ แต่ถ้ายังไม่หนำใจมีตอนหน้าครับ
จะเป็นตัวอย่างการใช้งานจริงแบบง่ายๆ และตอนถัดไปก็จะเป็นการประยุกต์มากขึ้นอีก

ขอบคุณที่ติดตามครับ

[ ANDRIOD ] ไมค์ไม่ดัง แก้ได้ด้วยการปรับค่า mixer_paths.xml , Fix low mic volumn by change value in mixer_paths.xml

**Root request**

ใช้ ES Explorer
1.เข้าไปที่ menu -> Root explorer กดเปิด open แล้วจะเด้งเมนู popup ขึ้นมา
2.เลือก R/W แล้วที่เส้นทาง(path) สองอันแรก (/ กับ /system) ให้เลือก RW
3.เข้าไปที่ system->etc->mixer_paths.xml
4.มองหาบรรทัดดังนี้
//speaker mode call
//normal mode call
//headphone mode call  
แล้วแก้ค่าข้างใน เช่น ="DEC5 Volume" value="60" /> แก้เป็นให้มากกว่า 60
แก้โดยคลิกที่ : มุมบนขวา เลือก แก้ไข (edit) หลังจากแก้ไขแล้วกดย้อนกลับ จะมีให้บันทึก
5.restart จบ ลองทดสอบดู เท่านี้ไมค์ฝั่งเราก็ดังขึ้นแล้ว ฝ่ายคู่สนทนาจะได้ยินเราชัดขึ้น

*****Backup ไฟล์ต้นฉบับเสมอ เพราะอาจทำให้ mic ไม่ทำงานได้ถ้าเซตผิด******

How to upload image from windows phone 8 to web server. c# อัพโหลดรูปในวินโดว์โฟนขึ้นเซริฟ์เวอร์

Step การอัพโหลดรูปขึ้น server ใน windows phone for c#
1.)ใช้ชุดคำสั่ง PhotoChooserTask เลือกรูปในเครื่องแล้วเก็บเป็น bitmapImage
หรือใช้ photoCameraCapture ถ้าต้องการให้ถ่ายรูปทันทีแล้วเก็บเป็นภาพแทน

http://www.geekchamp.com/tips/how-to-use-photochoosertask-and-cameracapturetask-in-windows-phone

2.)นำรูป bitmapImage มาเข้ารหัส แปรเป็น byte[]
public static byte[] ImageToBytes(BitmapImage img)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                WriteableBitmap btmMap = new WriteableBitmap(img);
                System.Windows.Media.Imaging.Extensions.SaveJpeg(btmMap, ms, img.PixelWidth, img.PixelHeight, 0, 100);
                img = null;
                return ms.ToArray();
            }
        }
เรียกใช้เช่น byte[] bit = ImageToBytes(img);

http://stackoverflow.com/questions/22241480/convert-bitmap-image-to-byte-array-windows-phone-8

 
3.)นำ byte[] มาเข้ารหัส base64 แปลเป็น String ความยาวมหาศาล
string strImg = Convert.ToBase64String(bit);

4.)ส่ง String ไปสู่ server เข้าไปที่ไฟล์ upload.php
ดูวิธีได้ที่ www.thaicreate.com/mobile/windows-phone-add-insert-data-into-web-server.html

5.)ที่ไฟล์ upload.php รับและแปล String กลับเป็น image ด้วย base64.decode
 แล้วเซฟภาพเข้าสู่ไดเรกทอรี่ของเว็บไซด์ ในที่นี้ save ลงใน webURL/image

php code

define('UPLOAD_DIR', 'image/');
    $img = $_POST['sIMG'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.jpeg';
    $success = file_put_contents($file, $data);

ฝึกงาน TCS DAY 37 วันออกไซด์งานครั้งสุดท้าย

(21/5/57) วันนี้ออกไซด์ติด label เป็นหลักครับ ที่ราชมงคลพระนคร เทเวศน์ โชติเวศน์ นางเลิ้ง ครับ
ก็เข้าไป ใช้เครื่องปริ้น laber กดๆแล้วก็ปริ้นมาติดตามสายต่างๆ ต้องไปติดตามตู้ rack ที่เคยมาติด
switch ไว้แล้วด้วย ปีนบันไดยกบันไดกัน แดดร้อนๆด้วย แต่ก็สนุกดีครับ

ราชมงคลพระนคร ทั้งเทเวศน์และนางเลิ้ง ก็มีแมวเยอะมากทั้งคู่ เจอตลอด ^^

ขากลับเนื่องจากม็อปปิดถนน รถเมล์สาย 16 ไม่ผ่านนางเลิ้ง จึงต้องเดินมาโบเบ้ขึ้นสายอื่น

ฝึกงาน TCS DAY 34 35 36

(15,16,20 / 5 / 57) 3 วันนี้ว่างอีกแล้ว แต่ได้รับมอบหมายจากพี่ซันให้
อ่าน Physical layer แล้วมานำเสนอในภายหลัง ดังนั้นเวลาสามวันนี้
ก็หาอ่านพวกสาย fiber,coxial,utp,f-utp,มาตฐานและการตรวจสอบ หัวต่อต่างๆ การเชื่อมสาย
วันที่ 20/5/57 พี่เจนก็เข้ามาถามว่า สรุป LSA TYPE3 มาให้พี่ฟังดิ๊ ก็สรุปไป แล้วพี่เขาก็ถามต่อ
รู้ว่ามันช่วยลด traffic ในการแลกเปลี่ยน LSA แล้วการแบ่ง area กับ type3 เนี่ย ยังมีประโยชน์
อะไรอีกบ้าง การแบ่งกับไม่แบ่ง area มันต่างกันยังไง routing table จะเหมือนกันไหม
การ summary route มีจุดไหนที่ทำไม่ได้บ้าง เป็นต้น วันนั้นก็สั้นๆ เอ๋อ

ฝึกงาน TCS DAY 33 ออกไซด์งาน

(14/5/57) วันนี้ก็เข้าไปที่ราชมงคลพระนครเหนือ นั่งรถสาย 32 จากเทเวศน์ ซิ่งโหดดีแท้
วันนี้เข้าไปดูเพราะว่าเมื่อคราวก่อนทางเจ้าหน้าที่ที่ดูแลระบบบอกว่าภาพ cctv จากศูนย์
พระนครเหนือกระตุกมาก สลับกับขึ้นสัญญาน No signal เป็นช่วงๆ วันนี้ก็เลยต้องมาดูกัน
ซึ่งทางพี่ๆ ก็ใช้ Cacti ในการตรวจสอบ traffic ต่างๆ พบว่าเป็นที่ทางวิศวกรที่ติดตั้ง
server มาต่อ uplink เข้าผิด port โดยไปต่อเข้า fastEthernet แทนที่จะเป็น GigabitEthernet

วันนี้ก็มีเดินสายใหม่ให้เรียบร้อยด้วยบางส่วน

 และก็มีการ remote ผ่าน telnet เข้าไป config switch ให้เป็นชื่อตามสถานที่นั้นๆ

 ที่ราชมงคลพระนคร เทเวศน์ นั้นแมวเยอะมากกกกกกกก น่าร๊ากกกก เดินกี่ทีก็เจอ

TCS DAY 31 32

(8/5/57) วันนี้แทบไม่มีอะไรครับ นั่งทำ lab ospf ของ CCNP ไปเรื่อยๆ
(9/5/57) วันนี้ก็เหมือนเดิม แต่ช่วงสายๆพี่ๆพาไปให้อธิบายแลกเปลี่ยนความรู้
เกี่ยวกับ STP แล้วก็ยิงคำถามโหดๆ ให้พี่ๆรวมทั้งนิสิตฝึกงานตอบกัน สนุกดีครับ
ก็ยิงมันส์จนเย็นๆ ครับ ก็มีพี่เจน พี่เหน่งเข้ามาร่วมแจมด้วย

ฝึกงาน TCS DAY 30 ออกไซด์งาน

7/5/57 งานหลักในวันนี้คือเดินสายบางส่วน จัดสายให้เรียบร้อย
ก็ไปที่ราชมงคลพระนครเหมือนเดิม วันนี้ก็ไปที่พาณิชย์พระนคร แถวๆนางเลิ้ง
เดินจัดสาย แล้วก็มุดๆใต้พื้น Raise Floor ยกมันขึ้นมาด้วยตัวดูด แล้วเดินสาย

ตอนบ่ายดูพี่ๆเขียน diagram network ของระบบ ส่งไปให้ลูกค้าด้วย

ฝึกงาน TCS DAY 28 29

TCS DAY 28 (30/4/57)
วันนี้ว่างๆ ก็อ่าน OSPF LSA Type 1,2 ต่อ โดยลองทำ lab ใน packet tracer ดู
ประเด็นคือ LSA Type1 2 บอกอะไรเรา แล้วออกมาจาก router ไหน
- Type1 เป็น LSA ที่ไว้บอก router ทุกตัวใน area ospf เดียวกันให้ทราบถึงสถานะของ router ตัวที่
ส่ง origin LSA Type1 ออกมา เข้าไปเช็คใน sh ip ospf database ก็ได้ จะมี lsa type1
เป็นจำนวนเท่ากับจำนวน router ใน ospf area นั้นๆ
- Type2 เป็น LSA ที่ออกมาจาก router ที่ทำหน้าที่เป็น DR ใน segment นั้นๆ (แต่ล่ะ segment
หรือ broadclass นึงจะมี DR เพียงตัวเดียว ทำหน้าที่รวม LSA ใน segment แล้วสรุปออกมาเป็น type2 )


TCS DAY 29 (6/5/57)
วันนี้พี่ๆก็จับมาให้อธิบาย OSPF LSA แล้วก็มีการตั้งโจทย์ถามกันเองมันส์ๆ

วันนี้ก็อธิบายตั้งแต่ Type 1-7 แบบคร่าวๆ พี่ๆสนุกกันมาก เฮฮา

How to fix notebook shut off ever exactly 30 minutes. แก้ คอมดับทุก 30 นาที เป๊ะ นับจากเปิดเครื่อง

คำเตือน bios mod ทั้งหลาย ห้ามไปปรับแต่งในส่วน allocate vram ของ vga onboard เด็ดขาด
ปรับแล้วเปิดไม่ติด เข้า crisis mode ได้แต่จะไม่ยอมอ่าน usb flashdrive เลย ทีนี้ต้องพึ่งเครื่อง flash

สาเหตุ
- อัพเกรด cpu
- อยู่ดีๆก็เป็น
- flash bios เอาท่าไหนไม่รู้
- flash bios ผ่านเครื่อง flash บางกรณี จะเป็น (อาการเครื่องผม)

อาการ
- นับจากกด power on เครื่องจะทำงานได้ตามปกติ เล่นอะไรแรงๆ หรือจะปล่อยทิ้งไว้
ก็ 30 นาทีหลังจากเปิดเครื่อง เครื่องจะดับลงไปเหมือนโดนตัดไฟ
- 30 นาที ที่ว่านี้ ถ้าเข้าโหมด sleep ก่อนจะดับ แล้ว wake up ขึ้นมา
เครื่องจะนับเวลาใหม่ไปอีก 30 นาทีถึงจะดับ (เป็นวิธีแก้ที่ง่ายที่สุดอย่างหนึ่ง)
- เครื่องจะไม่ดับใน crisis mode (โหมด flash recover bios ของ acer aspire)
- flash bios ใหม่บนวินโดว์กับ dos ก็ไม่หายจากการดับทุก 30 นาที แม้เปลี่ยนตัวก็แล้ว

วิธีแก้
- Flash your bios with crisis mode only.
- Enter crisis mode by
1.remove ac cord
2.copy file P5WE0x64.fd to your flashdrive (FAT format and size not over 2GB)
3.insert your flashdrive to use 2.0 port
4.press hold fn+esc key
5.insert ac power cord
6.press power buttom
7.when flashdrive led brink. release the fn+esc key.
8.wait for 2-5 minutes. notebook will restart 2time.
and then 30 mins exactly shut down will solved.

นอกจากนี้ crisis mode ยังช่วยกู้ bios ได้ หากเกิดการ flash ที่ผิดพลาดไป
หรือทำอะไรก็ตามที่ทำให้ boot bios ไม่ผ่าน (เครื่องจะดับตั้งแต่ 2 วิที่เปิด ไม่ก็จอดำนิ่งไปเลย)
แค่เข้า crisis mode ก็สามารถ flash กลับมาได้อีกครั้ง
- ถ้า crisis mode ไม่อ่าน usb ให้ลองเปลี่ยนเป็น cd rom แทน ถ้าไม่ได้ถือว่าเสียหายหนัก
ต้องส่งให้ร้าน flash bios ให้ผ่านเครื่อง flash ครับ แนะนำร้านนี้ครับผมใช้บริการมา
แค่ 1200 บาท ครับ พร้อมส่ง ems กลับให้ฟรี แถมทำความสะอาดท่อระบายความร้อนใหม่เอี่ยมฟรี
https://www.facebook.com/comcenter.service
(ผมไป pantip แล้วบอกตรงๆ เซ็ง เหมือนมีแต่พวกจะหลอกฟันเอาเงิน ไม่ค่อยต้อนรับ
บางทีให้ไปหาข้อมูลเอาเองอีก ไม่อยากรับซ่อม ร้านที่ทำให้ได้ก็คิดแพง 2000 เลย)