jQuery – jBox

官網 jBox by Stephan Wagner : http://stephanwagner.me/jBox

 

使用 Modal 強制使用關閉按鈕、弱化背景、標題拖曳視窗

應用

jBox 的物件化必須注意 DOM 的載入順序,如果發生無法載入 content 的情況,可能就是 DOM 的問題。

將 new jBox 放在 $( document ).ready() 內再試試看

重新設定

關閉按鈕阻止其他事件觸發

511 total views, no views today

使用 PHPWord 產生 MySQL 資料庫結構文件

開發一個含資料庫的網站,不論是個人興趣或是工作需求,事後的文件製作都是「神煩」的。

至少我就不喜歡另外寫資料結構說明文件,尤其是使用 phpMyAdmin 這種 GUI 界面操作資料庫後,就覺得如果還要花很多時間來做多餘的事情,所以我就要花更多的時間來寫一個自動產生資料庫結構文件的程式 …

大致上的想法就是把所有的說明都直接寫在資料庫內,MySQL 的資料表、欄位都有 Comment 欄位可以填寫,phpMyAdmin 的預設快速匯出也會把 Comment 匯出,因此備份以及說明可以達成一致性同步。

列出該資料庫所有資料表

資料表說明

參考: changing mysql table comment

修改資料表說明

顯示完整的資料表欄位資訊

使用 PHP 產出 docx, odt, rtf, HTML 文件

使用套件 PHPWord ,最好的學習方式就是看 samples code

觀看範例結果 samples results

  1. 下載 PHPWord 並解壓縮到網站
  2. 將 PHPWord-develop\samples\results 目錄修改為可讀寫權限
  3. 瀏覽 PHPWord-develop\samples 下拉選擇項目,點選文件類別下載

單位轉換查詢

PHPWord 預設使用的數值單位是 Twip ,想要更進一步了解可以參考 https://en.wikipedia.org/wiki/Twip

這裡有單位轉換,可以在文書編輯軟體設計後取得大致距離後再進行換算 → Topography Conversion

設定預設字型

參考至:Default font

 

完成品

Image 256

1,483 total views, no views today

在 CentOS 6.7 上安裝 Tesseract OCR

安裝

參考至: Centos5.5 安装Tesseract-OCR (本機備份)

CentOS 5.5 和 6.7 實在有些差距,不過還好要安裝的軟體變化不大,最後安裝的選擇是

  1. leptonica-1.69.tar.gz
  2. tesseract-ocr-3.02.02.tar.gz
  3. tesseract-ocr-3.02.eng.tar.gz
  4. tesseract-ocr-3.02.chi_tra.tar.gz

確實按照安裝步驟將相依性程式先安裝後編譯即可順利安裝

特別寫出來是因為,我以為我的環境安裝一堆軟體應該不缺這種基礎元件,結果還是少了 …. = =a

使用

就敲指令就對了

tesseract 辨識圖檔 產生文字檔案名稱 -l 使用辨識字體

輸出的檔案會自動加上 .txt 副檔名

phototest.tif 是內附的測試圖檔,可以到 這裡

因為有安裝正體中文字體辨識檔案,當然也可以換成這樣辨識

不過辨識正確率就相當差了,結果如

看不懂的人請看 eng 辨識結果,如

 

有關辨識率提昇

免安裝

安裝後的檔案即可複製出來使用,使用上會遇到的問題就是 tessdata 路徑指定

測試結果

  • 不同的版本語言辨識檔案無法共用
  • 不同的辨識檔辨識率不同
  • 以上的問題可以藉由免安裝的方式解決
  • 4.0 程式可以套用 3.05 辨識檔案

Windows 以及訓練

 

554 total views, 1 views today

CSS:display, opacity,HighCharts 自訂 Y 軸

display : 改變元素顯示特性

  • none 從網頁消失,不佔空間
  • block 塊,<div> 就是該屬性
  • inline 行內, <span>

opacity : 透明,隱身還是有體積並且可互動

  • 1 不透明
  • 0 完全透明
  • 0.5 50% 透明

範例: A Not-so-slow JavaScript Face Detector 點選作用在 <input type=”file”> 之上,該 tag 使用 opacity:0 完全透明

HighCharts 自訂 Y 軸

 

  • title: {text: ‘標題’} 標題字
  • alignTicks: false 取消多線時對齊判斷,主要是讓 max 設定值可以作用
  • max:50 最大值
  • min: 0 最小值
  • minRange: 20 最小範圍
  • opposite: true 顯示於另一側 (右側)

 

339 total views, no views today

簡潔寫 script src, border-collapse

現在的網站程式代碼工作比重已經從後端轉移到了前端,不是後端的份量減少了,而是前端的工作增加到了比後端更多。

參考資源

以下的代碼應該不陌生

 

HTML JavaScript 載入

js/script.js

jQuery

JavaScript -2 擷取至 Blockly Games

  1. 建立一個 script 的元素
  2. 設定 src 路徑
  3. 將組裝好的 <script src=””> 字串附加在載入的 script 之後

Blockly Games 從上面載入的 JavaScript 也是一個簡潔加載的技巧

JavaScript -3

進階使用者可以朝    這類的工具邁進,將 JavaScript 打包壓縮,可以增加傳輸以及執行效能。

 

CSS border-collapse

是否將表格的框線合併

 

308 total views, 1 views today

Google Map v3 使用一:定位、標注、標注說明

參考資源

擁有自己的 API KEY

現在的 Google Map 都需要使用的 API KEY  才能使用,以前的 signed_in=true 已經沒有作用了

程式範例一:將地圖移動到想要的位置

 

程式範例二:加上一個標記

 

程式範例三:標記點選顯示詳細資訊

 

  1. 在指定地點加上自訂圖案標注
  2. 該標注可點擊跳出資訊視窗
  3. 取消其他控制地圖操作,例如拖曳、滾輪放大縮小等。參考 How to disable mouse scroll-wheel scaling with Google Maps API

 

選擇地點上傳及嵌入網頁

回傳 Json

 

網頁 HTML

將查詢到的經緯度 lat, lng 套入到 Google maps embedded 的網址內

 

1,533 total views, no views today

人臉辨識 – 使用 OpenBR 實作

OpenBR

軟體安裝

安裝 OpenCV

參考 Build OpenCV with Video Support on Ubuntu

 

安裝相依軟體

參考 Ubuntu 13.04 – GCC 4.7.3 – x64

 

安裝 OpenCV 2.4.10

 

Install Qt 5.0.1

 

從 Github 取得 OpenBR

 

安裝 OpenBR

 

基本指令

 

algorithm 選項

  • FaceDetection :生物特徵
  • FaceRecognition :特徵比對
  • ShowFaceDetection :顯示人臉,必須搭配 -gui 參數
  • AgeEstimation :年齡
  • GenderEstimation :性別

 

454 total views, no views today

Apache 上的 IP base Virtualhost 設定

因為是以 IP 為基礎,所以 virtualhost 就是使用 port 來區隔

HTTP 預設使用 80 port ,輸入網址時可省略。

也就是說,在輸入網址時,我們可能只輸入

其實「比較完整」的網址應該是

加上剛剛說的省略掉的 port ,其實「更完整」的網址是

當然還有「宇宙完整」的版本,那就當作本次的功課好了

Apache httpd.conf 設定

使用 IP base 當作 virtualhost 比 Name base 需要多一個監聽 port 的設定

以上的設定案例,增加了一個位於 9000 port 的網站,此數字的範圍建議在 1024 ~ 65535 之間,為什麼是這個數字可以參考

最後重新啟動 Apache 就可以了

 

380 total views, 2 views today