How to use Latexdiff to mark changes to Tex documents.

Latexdiff is a tool for highlighting changes between two latex documents. So, I remind myself how to use it.

  1. install Perl click
  2. download latexdiff and unzip it into the Perl > bin folder
  3. Optional: installing the latexdiff package in MiKTek appears to work as well.

How to use it:

  1. cmd
  2. cd to file folder
  3. latexdiff oldfile.tex newfile.tex > diff.tex

Enjoy!

Ref: https://www.overleaf.com/learn/latex/Articles/Using_Latexdiff_For_Marking_Changes_To_Tex_Documents

สร้างกราฟอัตโนมัติใน Excel ด้วย VBA

ได้ช่วยเพื่อนเขียนโค้ด VBA ใน MS Excel เพื่อสร้างกราฟอัตโนมัติ ขอบันทึกเตือนความจำแบบสั้นๆเก็บไว้

ข้อมูลที่ต้องการสร้างกราฟนั้นเป็นชุดข้อมูลที่เหมือนกัน สามารถประยุกต์ใช้ให้เหมาะสมกับงานอื่นๆได้ แกน X เป็นปีที่เก็บข้อมูล เช่น ปี 1990-2017 ส่วนแกน Y เป็นชุดข้อมูลที่แตกต่างกันตามสนใจ อาจจะมีเป็นร้อยชุดข้อมูลเลยก็ได้ ถ้าจะมานั่งทำทีละกราฟ ทีละชุดข้อมูล และกราฟแต่ละอันยังมีรูปแบบเหมือนกัน จะค่อนข้างเสียเวลามาก โค้ด VBA จึงพอจะช่วยลดเวลาในการทำงานลงได้บ้าง

ตัวอย่างกราฟและชุดข้อมูลตัวอย่าง

จะอธิบายตามโค้ดที่เขียนเลย

-เปิด VB editor ของ Excel ขึ้นมา แล้ว insert module ใน sheet ที่มีชุดข้อมูลที่ต้องการสร้างกราฟแล้ว จะจัดให้ข้อมูลวางแนว Row หรือ Column ก็ได้ แล้วค่อยไปกำหนดเองในโค้ด VBA

Option Explicit

Sub WRYChart()

'ประกาศชนิดของตัวแปร
Dim parameterNum As Integer
Dim co As ChartObject
Dim ct As Chart
Dim sc1 As SeriesCollection
Dim ser1 As Series
Dim LC As Long

'ให้สามารถสร้างกราฟตามชุดข้อมูลที่สนใจได้ จึงกำหนดหมายเลขกำกับแล้วอิงจากตัวเลขนั้นเพื่อสร้างกราฟ
parameterNum = InputBox("What parameter would you like to chart?")

'กำหนดหมายเลขของชุดข้อมูลไว้ เท่าไหร่ก็ได้ต้องครอบคลุมจำนวนชุดข้อมูลที่มี เช่น อันนี้มี 100 กราฟที่ต้องสร้าง
If parameterNum > 0 And parameterNum < 100 Then

'ตำแหน่ง(A10) cells ใน excel ที่อยากจะสร้างและวางกราฟลงไป ชื่อและขนาดของกราฟ ในที่นี้มีหลายกราฟ จึงเลือก column ท้ายสุดของข้อมูล และ(offset)เลื่อนลง ตามลำดับชุดข้อมูล 
Set co = Sheet3.ChartObjects.Add(Range("A10").Offset(parameterNum, 1).Left, Range("A10").Offset(parameterNum, 1).Top, 450, 200) 'Chart location
co.Name = "parameter number" & parameterNum & "Chart"

'ใส่รายละเอียดของกราฟที่อยากได้ ชื่อกราฟ รายละเอียดของแกน x,y
Set ct = co.Chart
With ct
.HasLegend = True
.HasTitle = True
.Axes(xlCategory, xlPrimary).HasTitle = True
.Axes(xlCategory, xlPrimary).AxisTitle.Characters.Text = "Jahr" 'กำหนดป้ายของแกน x โดยเขียนเองเป็นข้อความ
.Axes(xlValue, xlPrimary).HasTitle = True
.Axes(xlValue, xlPrimary).AxisTitle.Characters.Text = Range("F3").Offset(parameterNum, 0).Value 'กำหนดป้ายของแกน y กำหนดให้เปลี่ยนตามข้อมูลใน cells ที่กำหนดไว้
.Axes(xlCategory).CategoryType = xlTimeScale 'ชนิดของข้อมูล
.Axes(xlCategory).BaseUnitIsAuto = True
.Axes(xlCategory).MajorUnit = 2 'กำหนดการแบ่งหน่วย
.Axes(xlCategory).TickLabels.Orientation = xlTickLabelOrientationUpward 'กำหนดการวางตัวป้าย

.ChartTitle.Text = Range("G3").Offset(parameterNum, 0).Value 'กำหนดชื่อ ให้เปลี่ยนตามข้อมูลใน cells (เริ่มที่ G3 เลื่อนตามหมายเลขเลือก) ที่กำหนดไว้
Set sc1 = .SeriesCollection 
Set ser1 = sc1.NewSeries

'รายละเอียดข้อมูลของกราฟที่จะสร้าง
With ser1
.Name = Range("G3").Offset(parameterNum, 0).Value 'ชื่อของข้อมูล
.XValues = Range(Range("G3").Offset(0, 1), Range("G3").End(xlToRight)) 'ชุดข้อมูลของแกน x (เลือกที่ตำแหน่ง G3 จนถึงตำแหน่งขาวสุด)
.Values = Range(Range("H3").Offset(parameterNum, 0), Range("L3").Offset(parameterNum, 0)) 'ชุดข้อมูลของแกน x (เลือกที่ตำแหน่ง H3 จนถึง L3)
.ChartType = xlXYScatterSmoothNoMarkers 'ชนิดของกราฟ
.Trendlines.Add(Type:=xlLinear, DisplayRSquared:=True).Select 'เพิ่มเติม การใส่ Trendline และค่า R Square ของเส้น

End With

End With

MsgBox ("That's Perfect!") 'แจ้งเตือนเมื่อกราฟสร้างเสร็จ

Else: MsgBox ("You must enter a parameter number between 1 and 100") 'แจ้งเตือนเมื่อใส่ตัวเลขผิดพลาด
End If

End Sub

ปล. กำหนดชุดข้อมูลของ x, y สามารถกำหนดในรูปแบบนี้ได้เช่นกัน

.Values = Range(Range("G3").Offset(parameterNum, 1), Range("G3").Offset(parameterNum, 1).End(xlToRight))

ข้อดีคือ สามารถเพิ่มชุดข้อมูลต่อไปได้เรื่อยๆ เพราะ End(xlToRight) จะวิ่งคลุมถึงตัวสุดท้ายของข้อมูล
ข้อเสียคือ ถ้าชุดข้อมูลไม่ต่อเนื่องมีขาดหรือหายไปในบาง cells มันจะไม่สามารถดึงข้อมูลทั้งหมดมาได้ ถ้าหากเป็นแบบนี้ต้องใช้การกำหนดระยะของขุดจ้อมูลเองดังตัวอย่างด้านบน

.Values = Range(Range("H3").Offset(parameterNum, 0), Range("AL3").Offset(parameterNum, 0))

ภาพประกอบอื่นๆ

การเรียกใช้ VB และ Macro ใน Excel

ตัวอย่างการใช้งาน

ตัวอย่างการใช้งาน

วิธีแสดงภาพขนาดใหญ่ด้วย Google Maps Viewer

ถ้าหากต้องการแสดงภาพที่มีขนาดใหญ่มากๆ อย่างเช่น ภาพพาราโนมา ภาพแผนที่ขนาดใหญ่ สไลด์ชิ้นเนื้อที่ถ่ายแบบทั้งสไลด์ เป็นต้น ต้องการแสดงผลแบบที่เห็นภาพโดยรวมของภาพทั้งหมดก่อน และเมื่ออยากดูรายละเอียดที่ชัดเจนมากยิ่งขึ้น สามารถซูมเข้าไปดูได้ พูดง่ายๆคือแสดงเหมือนแผนที่ใน Google Maps เมื่อเลือกตำแหน่งที่สนใจได้แล้ว ก็สามารถซูมเข้าไปดูใกล้ๆได้ เพื่อดูรายละเอียดที่ชัดเจนมากยิ่งขึ้น

ในความเป็นจริงถ้าเราแสดงภาพที่มีความละเอียดสูงตั้งแต่แรกจะทำให้การโหลดข้อมูลทำได้ช้ามากเพราะภาพจะมีขนาดใหญ่ วิธีดังกล่าวนี้จะเลือกโหลดภาพเฉพาะส่วนที่จำเป็นมาแสดงทำให้การแสดงผลทำได้ราบรื่นกว่ามาก เช่น ถ้าหากต้องการดูพื้นที่โดยรวมทั้งหมดก็จะโหลดภาพที่มีความละเอียดต่ำมาแสดงผล ถ้าต้องการดูส่วนที่ละเอียดมากขึ้นเมื่อกดซูมระบบจะดึงภาพที่มีความละเอียดสูงกว่ามาแสดงเฉพาะส่วนตรงจุดที่เราสนใจ เมื่อเราคลิกเลื่อนตำแหน่งไปเรื่อยๆก็จะโหลดภาพส่วนนั้นเพิ่มเข้ามาแสดงผล

ตัวอย่างเว็บไซต์ที่ใช้ Google Maps Viewer มาใช้งาน มีหลากหลายเว็บไซต์ ยกตัวอย่างเช่น https://www.pathobin.com

ขั้นตอนการใช้ Google Maps Viewer แสดงภาพขนาดใหญ่

  1. ดาวน์โหลดโปรแกรม GMap Image Cutter  ลงไว้ในเครื่อง แตกไฟล์ที่อยู่ใน zip ออกมา
  2. เปิดโปรแกรมที่ชื่อ GMapImageCutter.jar ขึ้นมา ในเครื่องจะต้องมี Java ติดตั้งไว้ด้วย ถ้าไม่มีดาวน์โหลดและติดตั้งได้ที่ https://java.com/en/download/index.jsp
  3. คลิกเลือก File → Open เลือกไฟล์ภาพที่ต้องการนำมาแสดงด้วย Google Maps Viewer ในส่วนของ Max Zoom Level ควรตั้งไว้ตามค่าเดิม แต่ถ้าต้องการเพิ่มให้ซูมได้มากยิ่งขึ้นสามารถปรับเพิ่มได้ แต่ก็จะทำให้ต้องใช้เวลาในการสร้างไฟล์นานยิ่งขึ้น จากนั้นคลิกปุ่ม Create

    Gmap cutter

  4. เมื่อโปรแกรมสร้างไฟล์เสร็จแล้ว จะได้ไฟล์ HTML และโฟลเดอร์ที่เก็บภาพที่โปรแกรมสร้างขึ้นมาใหม่จำนวนจะมากน้อยตามความละเอียดที่ตั้งไว้ สามารถแสดงผลได้ทันทีโดยการคลิกเปิดไฟล์ HTML ด้วยบราวเซอร์ท่องเว็บไซต์ทั้วไป เช่น Internet Explorer, Google chrome, Safari เป็นต้น สามารถดูในแบบ Offline ได้ทันที

    ภาพที่พร้อมใช้งาน

  5. ถ้าต้องการนำภาพดังกล่าวไปแสดงบนเว็บไซต์สามารถทำได้โดยการอัพโหลดไฟล์ HTML และโฟลเดอร์ภาพขึ้นไปไว้บนเซิร์ฟเวอร์จากนั้นเรียกการแสดงผลโดยการใช้โค้ด

ยกตัวอย่างโค้ด

<iframe src="panorama.html" width="800" height="600" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
 </iframe>

หรืออัพโหลดขึ้น Dropbox ซึ่งสามารถแสดงไฟล์ที่เป็น HTML ได้เลยเช่นกัน ต้องใส่ไว้ใน public folder ยกตัวอย่าง https://dl.dropboxusercontent.com/u/1622318/Tissue-section.html

ข้อมูลจาก https://www.labnol.org

ปลั๊กอิน WordPress ทำ Sitemap แสดงบนหน้าเว็บไซต์

WP Multilingual Sitemap

WP Multilingual Sitemap เป็นปลั๊กอิน ที่เอาไว้สร้าง Sitemap ที่เป็น HTML ไม่ใช่  Sitemap ที่เป็นไฟล์ XML เอาไว้ให้ boot มาดึงไปใช้ หรือเอาไว้ submit พวก search engine ที่แทบจะทุกเว็บต้องลงไว้ แต่ตัวนี้เอาไว้แสดงหน้าเว็บไซต์ให้คนที่เข้ามาที่เว็บไซต์ง่ายต่อการค้นหา ข้อดีของมันคือ เมื่อติดตั้งปลั๊กอินตัวนี้แล้ว เราต้องการให้ Sitemap แสดงที่หน้าไหน ก็ใส่ Short code เข้าไปได้เลย โดยเลือกแสดงลิสต์ที่เป็น Page, เป็น Post, หรือแสดงลิสต์ Post แยกตาม Category ก็ได้

ตัวอย่างการใส่ค่า ในหน้า Page

WP Multilingual Sitemap

ลองใช้มาได้ 2-3 วันแล้ว แต่ยังไม่ได้เขียนถึง มันแสดงผลออกมาได้ดีตามที่อยากให้เป็น ส่วนเว็บใครที่มี sub category เยอะ คิดว่าจะถูกใจเลยทีเดียว สนใจอยากดูตัวอย่างการใช้งานดูที่นี้ได้เลยครับ https://www.amphur.in.th/sitemap/

WordPress เลือกแสดงแค่บาง Category

Biomed.in.th

ช่วงนี้ในเว็บ Biomed.in.th มีข่าวประชาสัมพันธ์ทั่วไป กับข่าวเปิดรับสมัครทุน และสมัครงานผู้ช่วยวิจัยเยอะหน่อย ซึ่งมันก็ถือว่าดีเลยล่ะถ้ามันจะเป็นแหล่งหางานให้กับคนที่จบด้านนี้ แต่แค่รู้สึกว่าการแสดงข่าวประชาสัมพันธ์รับสมัครงานปนกับบทความวิชาการอื่นๆ ในหน้าหลักเรียงกันหลายๆอันมันรู้สึกว่าดูไม่ค่อยดีเท่าไหร่ มันให้ความรู้สึกว่าจะกลายเป็นเว็บสมัครงานแทนซะงั้น เลยลองเปิดดูใน codex.WordPress ดูว่ามีส่วนของการจัดการโพสอย่างไรบ้าง ก่อนหน้านี้ก็เคยเขียนเกี่ยวกับ Sticky ของ WordPress ไว้เหมือนกัน ซึ่งลักษณะการเขียนก็คล้ายๆกัน ผมเอามาบันทึกเก็บไว้เผื่อได้เรียกใช้งานในครั้งหน้า ส่วนใครที่รู้อยู่แล้วก็ผ่านไป

ปกติแล้วการเรียกวนลูปให้แสดงโพสใน WordPress มี โค้ดสั้นๆดังนี้

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
.....
<?php endwhile; ?>

แต่ในกรณีของเว็บ Biomed.in.th เราไม่ต้องการให้โพสที่อยู่ใน Category ของกลุ่มโพสสมัครงาน(ต้องสร้างไว้ก่อนแล้ว) แสดงในหน้าแรก ให้เปลี่ยนโค้ดด้านบนเป็น แบบนี้ครับ

<?php query_posts($query_string . '&cat=-3,-8'); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
.....
<?php endwhile; ?>

ตรงเลข -3,-8 คือ ID ของ Category ที่เราไม่ต้องการให้มันแสดง ใส่ได้ตามต้องการ
นอกจากนี้ยังมีวิธีการใส่ Style แยกตาม Category การวนหลายลูป ลองเข้าไปอ่านเพิ่มเติมได้ที่ ที่นี้ https://codex.WordPress.org/The_Loop

แล้วถ้าเอาออกจากหน้าแรกแล้ว จะเข้าไปดูยังไง ผมก็เลยสร้างลิงค์ของ Category ข่าวกับงาน ขึ้นมาโดยเฉพาะ ใครสนใจจะได้คลิกเข้าไปดูได้เลย

เพิ่มเมนู News & Jobs ให้ Biomed.in.th

แล้วนอกจากนั้นยังเพิ่ม Widget ที่เลือกแสดงแค่บาง Category ได้ มันคือปลั๊กอินที่ชื่อ List Category ก็ติดตั้งแล้วดึงมาโชว์ไว้ Sidebar ด้วยอีกอัน

WordPress Cheat Sheet

WordPress cheat

เหมาะสำหรับคนที่คิดอยากเขียนธีม และอ่านโค้ดในธีม ของ WordPress สรุปไว้แค่แผ่นเดียว ที่ต้นฉบับของเว็บไซต์ ทำไว้ทั้ง JPG และ PDF แต่แบบ PDF ไฟล์เล็กว่าเลยเอามาให้โหลด อยากได้ท้้งสองเข้าไปเอาที่ลิงค์ที่มา

ดาวน์โหลด WordPress Cheat Sheet (PDF)

ที่มา: https://www.onextrapixel.com

HTML5 Elements ในแบบตารางธาตุ

HTML5 ในแบบตารางธาตุ

HTML5 Elements ตารางแสดง Tags ของ HTML5 ใช้สีแยกหมวด เวลาคลิกก็จะแสดงรายละเอียดสั้นๆให้ดู และมีลิงค์ไปที่ Guide ให้อ่านแบบละเอียด แต่ก่อนเจอเฉพาะแบบที่เป็นตาราง รูปนี้เพิ่งเคยเห็นเจ๋งดี ดูง่ายดี

Color Wizard โปรแกรมเลือกสีออนไลน์

โปรแกรมเลือกสี สำหรับเว็บไซต์

คิดไม่ออกว่าจะใช้สีอะไรในการทำเว็บไซต์ โปรแกรมนี้ช่วยได้ครับ ใช้งานค่อนข้างง่าย และไม่ต้องติดตั้งด้วย ทำให้ผมทำงานค่อนข้างสะดวก และง่าย ที่จริงที่เว็บเขามีทั้งหมดสามโปรแกรมที่เป็น tools เกี่ยวกับ การจัดการสีในเว็บไซต์ Color Contrast, Color Wheel และ Color Wizard ทีผมใช้ประจำ มีโทนสีให้เลือกมากมายเข้าไปดูได้ที่ https://www.colorsontheweb.com

ลองใช้ดูเลยครับ

อะไรใหม่ใน Firefox 3.5

Icon Firefox 3.5

icon ใหม่ของ Firefox 3.5 ที่มีการเปลี่ยนแปลง

ดาวน์โหลด Firefox 3.5 https://www.firefox.com

Biomedical Engineering Center Labs on Google Maps


ดู Biomedical Engineering Center Labs ในแผนที่ขนาดใหญ่กว่า

ลองเอา Google Maps มาใส่ในบล็อกดูไม่รู้จะเอาที่ไหนงั้นก็เลยเอาตรงที่ตัวเองอยู่ตอนนี้เลยแล้วกัน Biomedical Engineering Center Labs เป็นห้องรวมพบกันทำกิจกรรมเรียน ตลอดจนการทำ Labs ของนิสิตหลักสูตร Biomedical Engineering ทุกๆคนเหมือนเป็นห้องอเนกประสงค์ วิธีการนำ Maps มาใส่นั้นง่ายมากๆ แค่เราเข้าไปที่ Google Maps แล้วค้นหาที่อยู่ของเราว่าอยู่ไหนจากนั้นก็ปักหมุดเอาไว้ จากนั้นคลิกตรงตำแหน่ง Link ตามภาพ

Google-maps-code

copy เอาโค้ดภายในมาวางที่ html page ใน WordPress เพียงเท่านี้ก็เรียบร้อยแล้วครับ

Exit mobile version