如何取消Chrome瀏覽器會出現藍色邊框的狀況

程式技術 2016/04/27 14:43
views: 719 times
同事問到, 在 Chrome 瀏覽器中, 一些特定的連結(應該是某些已自訂的 class 狀況下), 在點擊時, 會有藍色邊框(就是 focus時), 要如何取消這個功能, 這個部分在 Firefox 與 IE 都不會發生.

模擬的狀況如下:
用戶插入圖片

上圖的左邊是都還沒有 focus 時, 右邊則是 pink button 在 chrome 瀏覽器下的 focus 狀態, 會出現藍框. 範例連結: http://sample.diary.tw/39/index.htm

如何取消這個藍框, 可以使用以下語法:

.b2:focus{
    outline: 0;
}

也就是在 focus 時, 把 outline 設為 0即可. 上面的範例連結, 其中 pink 為 b1 class, lightblue 為 b2 class, 所以 pink 會有藍框, 而 lightblue 在 focus 時, 不會出現藍框.

參考資料: http://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

top

使用wget進行網站用戶驗證方式

系統技術/FreeBSD/Linux 2016/04/22 11:28
views: 2097 times
今天在設定一個排程作業, 要起動一支程式, 不過該 url 有限定使用 www 驗證的方式, 所以在排程中, 就要給定對應的帳號密碼.

查了一下資料, 可以使用以下語法:

wget [ur] --user=[user] --password=[password]

這樣就可以了, 其實還蠻容易理解與設定.

參考資料:
http://stackoverflow.com/questions/4272770/wget-with-authentication
http://www.ewdna.com/2012/04/wget.html

PS. 若是不要下載檔案, 可以使用 -O (大寫)用來指定輸出檔案至 /dev/null 即可.
top

好用的Android APP-Llama定位與自動化程式

好用軟體 2016/03/31 10:39
views: 9917 times
這個應用程式除了自動化外, 最厲害的地方是利用了基地台定位的方式來進行使用者所在環境的偵測, 為什麼這麼說呢, 相信用過許多自動化程式的朋友們應該知道, 若是要更省手機的用電, 於特定時間或特定地點的特定事件下, 可以關閉藍芽, WIFI 或 Data 與 GPS 等連線, 若要在這樣的條件下偵測地點進而變成 Profile 時, 這個 Llama 就很厲害了.

它是利用了基地台定位方式來判定使用者所在位置, 再來決定地點, 例如工作, 或家中, 就有不同的使用情境, 外出, 或咖啡館, 或圖書館等, 又是不同的情境, 再加上時間條件判斷, 就有組合出許多有用的功能了.

Android 手機下載: https://play.google.com/store/apps/details?id=com.kebab.Llama&hl=zh_TW

這麼強大的功能, 又能強化手機自動化的作業, 真是厲害的設計, 看他的評價就可以知道是很棒的一個軟體.

話說這款軟體好用歸好用, 不過介面可是十分 Geeker 的呢, 深入操作學習, 可以參考以下幾篇教學文:

[Android] 好用的 Android Llama - Location Profiles
http://ephrain.pixnet.net/blog/post/46812060

功能強大的位置設定軟體 - Android Llama
http://darkstorageroom.blogspot.tw/2012/01/llama.html

[教學] Llama - 讓草泥馬幫你完成手機自動化
http://apk.tw/thread-286109-1-1.html



top

Google Static Maps地圖實作

程式技術 2016/03/22 18:10
views: 13889 times
Google Static Maps地圖是用在取得地圖資訊時, 最輕量的使用方式, 之前文章: http://diary.tw/tim/1141 使用的 Google Maps Javascript API 需要引入 javascript library 進行程式操作, 在 Google Static Maps 則僅需要用到 img src 的方式取得圖片即可.

雖然只有圖片, 但是功能還是很強大, 而且應用在低階或網路環境不好的地方特別有用, 尤其是和地圖不互動的狀況下, 只是呈現結果的應用情境, 使用 Google Static Maps 是非常方便好用的.

Google Static Maps 資料可以參考官方網站:
https://developers.google.com/maps/documentation/static-maps/intro

記得一樣要先申請 Google API Key 來使用, 這裡用的就是 Google Static Maps API:
用戶插入圖片

取得 API Key 之後, 就可以來應用了. 基本型如下:

https://maps.googleapis.com/maps/api/staticmap?parameters

其中 parameters 就是要繪製地圖的參數了, 以在地圖上某一地點畫一個座標為例,

https://maps.googleapis.com/maps/api/staticmap?center=25.052019,121.513987&zoom=15&size=320x240&language=zh-TW&maptype=roadmap&markers=color:red|label:A|25.052019,121.513987&key=[your api key]

其中 center 為地圖中心點, zoom 為放大層級, 以台北市為例, 15級或16級都OK, 看應用的狀況, size 為產出的圖片尺寸, 而 language 為地圖的語系, maptype 為地圖的格式, roadmap 為街道地圖(另有 satellite, terrain, hybrid), markers 為要標註的位置, 其中 color 為顏色, 用 | (pipe符號)區隔 marker 的參數, label 為單英數字標籤, 最後則是位置, 再來是最重要的 key 就是要輸入你的 api key, 效果如下:



這個地圖不能互動, 不過可以呈現所需要的資訊, 十分方便, 另外若是希望自訂 marker 的 icon, 可以將 markers 參數改為 icon:[url]|[position]的方式即可, 如下:

markers=icon:http://maps.google.com/mapfiles/kml/shapes/schools_maps.png|25.052019,121.513987

以上圖放到地圖中的效果如下:



另外, 若是想要畫出區域圖, 也可以用這個 Google Static Maps, 以之前文章 (http://diary.tw/tim/1141)為例, 座標點如下:
    {lat: 25.0416515, lng:121.5437222}, 
    {lat: 25.0333111, lng:121.543529}, 
    {lat: 25.033116700000004, lng:121.5526271}, 
    {lat: 25.036052399999996, lng:121.55267000000002}, 
    {lat: 25.0374716, lng:121.55146840000002}, 
    {lat: 25.038016, lng:121.5513396}, 
    {lat: 25.0415348, lng:121.5474987}, 
    {lat: 25.0416515, lng:121.5437222}

使用的參數就是 path, 語法如下,

path=pathStyles|pathLocation1|pathLocation2|... etc.

其中 pathStyles 有 wight, color, fillcolor, geodesic 4種參數, 其中 color 與 fillcolor 都是用 0xRRGGBBAA 其中 AA 由 00(不透明)到 FF(全透明) 這樣設定即可.

可以參考: https://developers.google.com/maps/documentation/static-maps/intro#Paths

產生的結果如下:



程式碼如下:
https://maps.googleapis.com/maps/api/staticmap?center=25.037789,121.547375&zoom=15&size=360x360&language=zh-TW&maptype=roadmap&path=color:0xFF0000|fillcolor:0xFF000033|25.0416515,121.5437222|25.0333111,121.543529|25.033116700000004,121.5526271|25.036052399999996,121.55267000000002|25.0374716,121.55146840000002|25.038016,121.5513396|25.0415348,121.5474987|25.0416515,121.5437222&key=[your api key]

十分好用, 但要注意不要超過 url 網址的長度上限, 參考舊文: http://diary.tw/tim/64, 在文件內說明也有, 不要超過 2048bytes: https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction

另外, 這組 API 每日免費上限為 25,000, 若要更多可以付費方式使用.

[2016/4/20 10:15]
補充一下自訂 marker 的部分, 必須是用 http 而非 https 的方式, 否則將無法正常輸出該自訂 marker, 參考資料:
http://stackoverflow.com/questions/12324996/custom-marker-icon-not-showing-google-static-maps-v2
top

使用Google Spreadsheets進行自動翻譯

好用軟體 2016/03/15 16:00
views: 17061 times
在開發軟體時, 若有多國語系的需求時, 可以請人翻譯, 當然也可以請 Google 翻譯, 不過一則一則翻譯太慢以外, 也不夠系統化, 有沒有更快速的方式呢? 有的, 可以使用 Google spreadsheets進行自動翻譯.

熟悉 excel 的朋友們, 應該不難理解使用公式來計算小計, 加總, 統計等功能, 在 Google spreadsheets 中, 有個 GOOGLETRANSLATE 函數, 可以用來做"計算"翻譯的結果, 使用方式如下:

GoogleTranslate(文字, 來源語言,目標語言)

所以若是要做自動翻譯也就容易了, 如以下畫面的設計:
用戶插入圖片

其中的B2翻譯內容公式為:

=GOOGLETRANSLATE($A3,"zh-tw",B$2)

其他B2:E9就只是複製這個公式就可以得到結果了. 範例檔案可以參考這個線上連結:
https://goo.gl/bejxJP

如何發揮更多功能, 看你的巧思了.

其中支援語言與代碼參考這裡:
https://cloud.google.com/translate/v2/using_rest#language-params

繼續閱讀:
http://www.playpcesor.com/2015/12/google-excel-translate.html
top

PREV : [1] : [2] : [3] : [4] : [5] : ... [87] : NEXT



ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 快譯通EC208 電子辭典 翻譯機 美國 VORNADO 533 渦流空氣循環機 (黑色) 35合1掌上型麻將機2代 每朝健康 黃金燕麥茶-無糖(550mlx24入) 御茶園 每朝健康烏龍茶(650mlx24入) 御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入) ★羅技有線滑鼠M105-三色選 【賽先生科學】Pin Art大搞創意複製針【中型】


 Waiting...