pCloud Partner Program

Ajax透過cors-anywhere服務取得跨網域內容

程式技術/Javascript 2019/04/11 18:35
views: 8612 times
在製作一些 demo 效果於 codepen (或其他網站), 要取得非同源(cross-domain)資料, 可以透過 cors-anywhere 服務來達成, 說明如下:

https://cors-anywhere.herokuapp.com/

這對於在實作測試時, 有很大的幫助, 例如在 codepen 上取得空氣盒子的一個盒子資訊:

https://airbox.edimaxcloud.com/query_history?id=74DA38EBF830&token=2cf933ee-4d2f-4a87-b146-6ef4ac344769

於 codepen 上, 直接透過 Ajax 方式配合 cors-anywhere 即可順利取得資料, 進行應用輸出, 如 demo :

https://codepen.io/timhuang/pen/vMmeVE

工作原理為透過 cors-anywhere 服務, 可以多增加上

Access-Control-Allow-Origin: *

這個 response header 供跨網域存取而不受同源政策限制.

繼續閱讀:
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS
top
TAG AJAX, Codepen, CORS

於linux command line下進行主機網路測速

系統技術/FreeBSD/Linux 2019/03/21 10:12
views: 33093 times
在有 GUI 的環境下, 可以使用 browser 訪問 https://www.speedtest.net/ 進行測速, 若在 linux 下沒有 GUI 與 browser 的狀況下, 進行測速, 一樣使用 speedtest 的服務來測試, 需要這個 speedtest-cli 工具.

這裡將介紹的工具是需要 python runtime 的, speedtest-cli 工具, github 連結:

https://github.com/sivel/speedtest-cli

操作方式有許多種, 最簡便的就是下載執行 (需注意執行安全性, 此列執行無須 root):

curl -s https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py | python -

結果就是在主機下執行對應網路速度的速度, 範例結果如下:

用戶插入圖片

很容易理解目前主機的網路速度概況.

其他參數, 例如列出所有測速主機, 使用 --list 如下:

curl -s https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py | python - --list

就會列出許多對應測速主機, 還列出了距離(由近至遠).

Retrieving speedtest.net configuration...
17383) Windstream (Ashburn, VA, United States) [0.98 km]
 5132) Shentel Service Company (Ashburn, VA, United States) [0.98 km]
 3810) BroadAspect (Ashburn, VA, United States) [0.98 km]
....
 9662) Foxtel Broadband (Perth, Australia) [18575.84 km]
 2171) Internode (Perth, Australia) [18575.84 km]
 3414) Optus (Perth, Australia) [18575.84 km]
17109) Pentanet (Perth, AU) [18575.84 km]
 3254) Vodafone Hutchison Australia (PH) (Perth, Australia) [18575.84 km]
22904) Superloop (Perth, Australia) [18575.84 km]
 1931) IX Australia (Perth, Australia) [18575.84 km]
10613) Optus (Rockingham, Australia) [18607.31 km]

十分有趣呢.


繼續閱讀:
https://blog.gtwang.org/linux/speedtest-cli-linux-command/
https://askubuntu.com/questions/104755/how-to-check-internet-speed-via-terminal

top

Dropbox免費版限制三個設備連結

好用軟體 2019/03/15 17:39
views: 40290 times
來了. Dropbox 限制免費版只能有三個設備連結了.

https://help.dropbox.com/account/computer-limit

plus, profession, business 則維持沒有特別限制.

當然也不能說對與不對, 就是生意嘛, 套養殺, 這還蠻合理的, 只是限制三個似乎有點少, (因為也包含了行動設備, 若同時有四個或以上, 就得買 plus 或 profession 來用囉.


top

360環景圖的標籤

好用軟體 2019/03/11 14:50
views: 45834 times
之前使用了 DJI 的 Mavic Air 進行 360 環景圖拍攝. 完成後, 導入手機使用 Google 相簿並無法使用環景檢視, 於是進行檢查與了解有關這個功能啟動的方式.

經檢查比對後, 主要是一個 XMP 標籤需要寫入, 若在手機上, 可以使用這個 APP 開啟後即可, 它會自行產生新圖含對應的標籤.

Android APP: Cover art Panorama 360 Camera:360 Photos for FB:Photosphere
https://play.google.com/store/apps/details?id=com.vtcreator.android360

iOS: Panorama 360 Camera
https://itunes.apple.com/tw/app/panorama-360-camera/id1034161360

若是在 PC 上可以使用一個小工具即可達成, 不過要注意該全景圖比例應為2:1 (如 4000x2000), 工具:

http://exiftool.sourceforge.net/

要寫入的標籤為 Projection Type 為 equiretangular 即可, 指令如下:

exiftool -ProjectionType=equiretangular test.jpg

這樣一來, 在 Google 相簿中, 即可順利辨識為 360環景, 也可以在 Line 與 FB 中分享對應的 360 環景圖.

參考資料:
https://developers.theta360.com/en/forums/viewtopic.php?f=4&t=2243
https://en.wikipedia.org/wiki/Extensible_Metadata_Platform

另外有 GUI for PC 的工具也可以參考:
https://www.colorpilot.com/exif.html
top

於指定table下第n個列後的內容隱藏

程式技術/Javascript 2019/03/07 10:52
views: 52105 times
使用 jQuery + 指定的 selector 達成, 其實很容易, 原則上只是要把第 n列後的內容先隱藏, 於需要時再顯示的概念.

當然, 若是從後端也是很容易實現, 不過目前是打算從前端做的話, 方式如下:


就這樣? 對, 就是這樣, 指定第 4筆 tr 起(含, 與之後), 會被選出來進行 toggle, 這樣一來就可以容易地在前端進行 table 內, 指定行之後的內容隱藏與顯示.

可以參考範例:

https://codepen.io/timhuang/pen/PLWrap

另外可以參考有用的選擇器方式:

https://css-tricks.com/useful-nth-child-recipies/
top
TAG rows, table, toggle, TR

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



AGI 亞奇雷 240GB 2.5吋 SATA3 SSD 固態硬碟
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)
UNITEK TYPE-C 轉VGA/HDMI/PD充電/HUB 鋁合金多功能轉接器
亞果元素 CASA Hub VH1 Type-C 轉 VGA - HDMI二合一顯示轉接器


 Waiting...