April 30, 2018

HumHub ก็มีคนสนใจ

เขียนบทความเกี่ยวกับ HumHub ไม่คิดว่าจะมีคนสนใจ

การติดตั้ง HumHub เพื่อสร้าง Social Network ในองค์การ และ การตั้งค่า HumHub เพื่อใช้งาน LDAP คุณ L_S20 ส่งเมล์มาถาม ยินดีที่ได้แลกเปลี่ยนเรียนรู้ครับ

humhubQA

April 30, 2018

มาทำ Kiosk จาก Raspberry Pi กัน « Thai Open Source

Raspberry Pi ถูกเอาไปใช้งานได้หลายอย่าง ครั้งนี้มาลองใช้ Raspberry Pi ทำเป็น Kiosk สำหรับดูข้อมูลกัน สำหรับท่านที่ชอบอยากจะมี Kiosk ที่ใช้สำหรับดูข้อมูลในรูปแบบ Monitoring สามารถประยุกใช้จาก Raspberry Pi ได้ หลักการง่ายๆ คือ boot เข้า LXDE และเรียกใช้งาน browser ได้ หลังจากนี้ก็ขึ้นอยู่กับว่าจะเรียกข้อมูลจากเว็บใด มาลงมือกันได้เลย

ติดตั้ง chromium และ mscorefonts

sudo apt-get install chromium x11-xserver-utils ttf-mscorefonts-installer unclutter

แก้ autostart ของ LXDE

cd /etc/xdg/lxsession/LXDE-pi/

sudo nano autostart

ใส่ comment ตรง screensaver แล้วใส่ข้อมูลดังนี้ต่อท้าย

@xset s off
@xset -dpms @xset s noblank
@chromium –kiosk –incognito http://www.google.com

ใช้ rasp-config ตั้งค่าให้ boot เข้า desktop mode แล้ว reboot เพื่อดูผลลัพท์ได้เลย

Source: มาทำ Kiosk จาก Raspberry Pi กัน « Thai Open Source

April 23, 2018

iOSBadge – iOS style notification badges for modern browsers

iOSBadge – iOS style notification badges for modern browsers

iOSBadge is a small Javascript plugin that allows you to use iOS style notification badges on your icons or menu items in your website or web application.

Big in features, tiny in file size

iOSBadge has lots methods, options, themes and sizes included by default. It is also really small in filesize: the JS and CSS files combined are ~3kb minified and gzipped. There is no extra weight included since the plugin does not require jQuery, but you can link to jQuery inside your page and use iOSBadge like a regular jQuery plugin if you want to.

via iOSBadge – iOS style notification badges for modern browsers.

April 23, 2018

Creating a Notification Badge with HTML5 and CSS3

Creating a Notification Badge with HTML5 and CSS3

I recently wanted to add a notification badge to a website. I wasn’t sure what the best approach was, but I knew I didn’t want to add extra markup and position it with CSS. I also didn’t want to use a jQuery plugin to add this little feature.

I ultimately decided to use the HTML5 data- attribute with the CSS attr() function. It works in most browsers including IE 8+ which was good enough for me because it wasn’t a required feature on the site.

 
HTML Code
[php htmlscript=””true”” smarttabs=””true””]

<ol>
<li>
<a data-notifications="10" class="button" href="#">New Comments on Your Posts</a>
</li>
<li>
<a class="button" href="#">Number of Post Likes :)</a>
</li>
<ol>
[/php]
 
CSS
[php htmlscript=””true”” smarttabs=””true””]

/* make sure the element has position: relative */
[data-notifications] {
position: relative;
}

/* append the notification badge after it */
[data-notifications]:after {

/* the burger */
content: attr(data-notifications);

/* the fries */
position: absolute;
background: red;
border-radius: 50%;
display: inline-block;
padding: 0.3em;
color: #f2f2f2;
right: -15px;
top: -15px;
}
[/php]
 

via Creating a Notification Badge with HTML5 and CSS3 – Baylor Rae’ Baylor Rae’.

April 16, 2018

แนะนำ jSignature : jQuery plugin รองรับการลงนามในเอกสาร

แนะนำ jSignature :  jQuery plugin รองรับการลงนามในเอกสาร โดยสามารถลงนามสดๆ ใน from ได้เลย รองรับ Browser รุ่นใหม่ๆ ทั้ง Firefox Safari และ Google Chrome

*ขอบคุณคุณ ลทีบ์ ที่แนะนำมาด้วยครับ

jSignature is a JavaScript widget (a jQuery plugin) that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger.

Works in all mainstream browsers that support Canvas or Flash

Captures signatures as smooth vector images. (Yes, SVG is supported!)

Ingenious, super-efficient (i.e. not lagging) real-time curve smoothing.

Allows manipulation of signature strokes, like “Undo last stroke”

Automatically adapts to your page’s layout and colors.

Free and Open Source.

via jSignature.

April 16, 2018

แนะนำ jQuery Plugin สำหรับทำ Grid Layout ในการแสดงผลและรองรับการ Drag & Drop

แนะนำ jQuery Plugin สำหรับทำ Layout ในการแสดงผลและรองรับการ Drag & Drop ซึ่งดูแล้วน่าจะเหมาะกับการนำมาใช้ในการแสดงสถานะของเครื่องบริการภายในศกต.

Plug in to the gridThis is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages. Made by Ducksboard.Its so sweet we like to call it drag-and-drool.

via gridster.js.

ตัวที่ 2 Isotope

http://isotope.metafizzy.co

ตัวที่ 3 Packery

http://packery.metafizzy.co

ตัวที่ 4 Freewall

http://vnjs.net/www/project/freewall/

April 3, 2018

มาลองเล่น Arduino ESP IDE กัน « Thai Open Source

มาลองเล่น Arduino ESP IDE กัน

ชุมชน ESP8266 มีการพัฒนา Arduino IDE เพื่อรองรับการพัฒนาโปรแกรมใส่ลงใน ESP8266 โดยไม่ต้องพึ่ง NodeMCU ไม่ต้องหัดเขียนภาษาใหม่ IDE ชุดนี้เพิ่ม esptool ใช้เป็นเครื่องมือในการอัพโหลด firmware ที่ได้จากการคอมไพล์ สำหรับท่านที่อยากลอง ดาวน์โหลดได้ที่หน้าโครงการใน GitHub ครับ ซึ่งมีให้ดาวน์โหลดทั้ง Windows, Linux และ OSX วิธีการใช้งานคุณสามารถใช้คู่กับ FTDI หรือบอร์ด Arduino ก็ได้

ผมใช้บอร์ด Arduino ละกัน เมื่อได้ IDE มาแล้วให้เปิดตัวอย่าง WebServer ขึ้นมา

via มาลองเล่น Arduino ESP IDE กัน « Thai Open Source.