分類: 程式技術

分類
程式技術

使用Clappr Video Player時滿版需求(CSS)

之前 Flash Player 因為已經 EOL 下架了. 參考: https://diary.tw/archives/11 (相信很多人也已經改了 html5 的解決方案了).

不過若是以純 video player, 個人建議使用這個 clappr player 是適合的替代品( https://github.com/clappr/clappr) , 用純 html5 的 media element 解決方案來達成 media player 功能, 無論是 mp4 或是 hls 的 live streaming.

目前有個使用上的需求, 就是要能滿版 player , 也就是不要出現比例上不正確時的上下出黑(letterbox)或左右出黑(pillarbox)的狀況.

上下出黑的 letterbox 示意圖:

左右出黑的 pillarbox 示意圖:

而要拉伸視訊至滿版播放器要如何進行設定呢? 原本在查找 clappr doc (http://clappr.github.io/)時, 一直沒有找到對應的設定, 後來發現其實在原本的 css 就有個設定可以達成, object-fit 這個屬性: https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit

當這個屬性設定為 object-fit: fill; 時, 就可以達成 stretch to fit 的功能, 也就是不成比例的拉伸(或壓縮)為對應的尺寸, 而不會出現為了維持比例而出現的 letterbox 或 pillarbox.

可以參考這個範例:

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

繼續閱讀:

https://www.jacksonlin.net/20181218-letterbox-on-youtube/

 

分類
Python

[Python]計算地球上兩個座標點距離

有兩點座標在地球表面上, 要計算兩點的距離, 會用到 haversine (半正矢公式)來進行計算.

其中 Haversine 公式就是用來計算這個球面上的大圓距離, 公式如下:

利用這個公式, 可以建立一個 python function (半徑為地球半徑: 6371km):

import numpy as np

def haversine_distance(lat1, lon1, lat2, lon2):
  r = 6371
  phi1 = np.radians(lat1)
  phi2 = np.radians(lat2)
  delta_phi = np.radians(lat2 - lat1)
  delta_lambda = np.radians(lon2 - lon1)
  a = np.sin(delta_phi / 2)**2 + np.cos(phi1) * np.cos(phi2) * np.sin(delta_lambda / 2)**2
  res = r * (2 * np.arctan2(np.sqrt(a), np.sqrt(1 -a)))
  return np.round(res, 2)

不過其實 python 原本就有函數庫: haversine 也可以直接引用:

import haversine as hs
loc1=(28.426846,77.088834)
loc2=(28.394231,77.050308)
hs.haversine(loc1,loc2)

(上面預設單位就是 km 了)

程式碼範例與執行結果請參考:

https://colab.research.google.com/drive/1Tap7kaY-yG09OvpJKhja9ni2T8yMdxJZ?usp=sharing

 

參考資料:

https://towardsdatascience.com/heres-how-to-calculate-distance-between-2-geolocations-in-python-93ecab5bbba4

https://towardsdatascience.com/calculating-distance-between-two-geolocations-in-python-26ad3afe287b

 

 

 

分類
Python

[Python]中油油價取得

來寫個中油油價取得.

不過一開始原以為這頁是利用靜態的內容產出的 table:

https://www.cpc.com.tw/historyprice.aspx?n=2890

利用 beautifulsoup 時, 使用 selector 雖然可以找到對應的 element, (table#tbHistoryPrice), 但找不到該 table 以下的 tr, td 對 element, 所以無法透過 select 解析並取出資料.

於是仔細看了一下 html source code, 發現原來只有一個空的 table, 而沒有內容, 而表格內容利用是 javascript 動態生成的, 而資料來源仍為靜態的 javascript 中的變數 (pieSeries), 這樣就好解決了.

閱讀全文 “[Python]中油油價取得”
分類
PHP

[PHP]array_filter with preg_match問題

在使用 array_filter 時, 由於原本的內容過濾條件需要用 regular expression 表示, 來將滿足條件的內容整理出來. 不料發現了問題.

問題的來源是在 array_filter 中, 若使用了 anonymous function , 在 anonymous function 中的變數 scope 是拿不到外部已設定好的變數. 也就是若要取得用變數傳入的值, 需要使用 global 指示詞.

$patternstr = "/.*-20200902-.*/";
$myarray4 = array_filter($myarray, function($v){
  global $patternstr;
  return preg_match($patternstr, $v);
});

如此一來才能順利使用動態的變數字串做為 array_filter 中使用 preg_match 的 pattern 參數. 完整測試程式碼請參考:

https://repl.it/@timhuangt/arrayFilter

分類
PHP

php上實作301 Redirect指示方式

在 php 中若需要重導客戶端, 可以使用 302 重導:

header("Location: http://newlocation");

在不指定 response status 時, 上述內容會使用 302 重導.

若需要使用 301 重導, 可以使用如下程式:

1. 先宣告重導指示, 再進行重導:

header("HTTP/1.1 301 Moved Permanently");
header("Location: http://newlocation");

2. 直接使用 header 中的 response status 參數:

header("Location: http://newlocation", TRUE, 301);

以上兩種方式皆可以重導客戶端至指定目標, 並且以 301 Moved Permanently 方式指示.

繼續閱讀:
https://blog.longwin.com.tw/2015/09/php-301-302-redirect-header-2015/
https://stackoverflow.com/questions/7324645/php-header-redirect-301-what-are-the-implications
https://www.php.net/manual/en/function.header.php

分類
Javascript

bs_grid動態給定filter rule

bs_grid 是一個很方便的 data grid 功能介面, 可惜沒有支援 bootstrap 4, 不過在 bootstrap 3 下, 非常方便好用. github 連結: https://github.com/pontikis/bs_grid

今天遇到的問題是需要動態下 filter rules, 但在官方資料上, 僅能做預設, 如: https://www.pontikis.net/labs/bs_grid/demo/set-rules/

於是研究一下 github 上的 source code, 其實可以透過動態設定 filter rules 並使用 init 方法來進行動態更新介面, 程式如下:

$("#mygrid").bs_grid('getOption', 'filterOptions').filter_rules.push({
    "condition": {
        "filterType": "text",
        "field": "dataid",
        "operator": "equal",
        "filterValue": [
            "2"
        ]
    },
    "logical_operator": "AND"
});
$("#mygrid").bs_grid('init');

 

如此一來便能進行在動態下新增過濾器功能, 達成所需.

 

分類
程式技術

有趣的iOS上Safari播放mp4問題

今天在測試一個 nginx reversed proxy 上, 代理 upstream server mp4 檔案時的播放問題.

之前沒特別有這個狀況, 但今天開始不能播放(感覺應該是在ios 12.4起發生), 十分有趣, 從 nginx server log 也看不出來原因, 只知道 nginx server 在 ios safari request 時, sent-byte 大小小於原始的 mp4 檔案, 所以也只能從 ios safari 的 developer mode 來著手.

先進行 ios safari developer mode, 可以參考:

https://unrealnavigation.com/blog/web-inspector-with-ios-simulator

然後發現原來 safari 會 request byte-range 0-1 這樣的狀況, 難怪都不會送出完整結果, 這樣一來原因就明確了, 實務上的狀況可以參考這篇:

https://www.stirtingale.com/guides/2018/10/mp4-not-working-cloudflare

若是原本的 server 沒有支援 byte-range 時, 會導致 status 200 而非 safari 預期的 206, 而導致失敗. 接下來就可以來找解決方案.

以 nginx proxy_pass 的反向代理結構來看, 可以利用這個方案:

https://stackoverflow.com/questions/22728016/nginx-is-not-accepting-range-of-bytes

使用 proxy_force_ranges on; 即可.

當然, 原本的 upstream 也需要有支援才能解決.

如此一來, 便能在 ios safari 於 request mp4 資源時, 下達的 byte-range 於快取或未快取內容皆可正常工作.

PS. 於查找過程找到一篇介紹 nginx revered proxy hash key 算法資料可供參考:
https://tomme.me/nginx-proxy-cache-server/

分類
Database

選擇適合的資料庫-Choosing The Right Database

這篇文章很棒, 仔細地介紹了資料庫的種類與特性, 給在選擇應用資料庫的朋友們, 有個較為完整的概念與取捨:

https://towardsdatascience.com/choosing-the-right-database-c45cd3a28f77

簡單整理一下重點:

CAP: https://zh.wikipedia.org/wiki/CAP%E5%AE%9A%E7%90%86

在分散式的系統架構下, 不能同時滿足這三個條件的 CAP定理:

  1. Consistency: 一致性, 所有分散的節點都能有一致的資料
  2. Availability: 可用性, 每次查詢皆可取得正確(但不一定最新)的結果.
  3. Partition tolerance: 分區容錯性, 部分節點異常或資料異常, 系統仍能保持運作.

(也請參考這篇: https://ithelp.ithome.com.tw/articles/10158554)

而傳統資料庫管統系統需要能滿足 ACID 的部分如下:

https://zh.wikipedia.org/wiki/ACID

  1. Atomicity: 原子性, 在一個交易內的異動是不會被分割的.
  2. Consistency: 一致性.
  3. Isolation: 獨立性, 在各交易操作的狀況下, 是不會互相影響的.
  4. Durability: 持續性, 在未異動的資料, 是能持續保持不變的.

傳統 ACID 在現代資料庫是無法同時滿足的, 所以在分散架構下的 CAP 是另一個檢視要件, 主要應用在 NoSQL 環境.

另外各式資料庫的特性如同原文介紹, 有 key-value, document, graph 不同的資料存放型態.

而其中最重要的部分是應用情境的問題:

  • How many relationships are in your data?
  • What is the level of complexity in your data?
  • How often do the data change?
  • How often does your application query the data?
  • How often does your application query the relationship underlying the data?
  • How often do your users update the data?
  • How often do your users update the logic in the data?
  • How critical is your Application in a disaster scenario?

若是能妥善理解與處理這些可能的問題, 就能找到適合的資料庫, 而實務上也是有可能互相混搭應用的, 區分為不同的資料庫應用方式, 但更重要的是適當的搭配與選擇.

繼續閱讀:
https://blog.longwin.com.tw/2013/03/nosql-db-choose-cap-theorem-2013/

分類
Javascript

holder.js圖片佔位器

之前介紹過 fakeimg 利用圖片來進行假圖佔位:

https://diary.tw/archives/1266

這裡介紹另一種方式來進行圖片佔位, holder.js 工具:

http://holderjs.com/

使用方式十分容易簡便, 引用 holder.js 後, 直接下達參數即可順利使用, 也可以指定寬高與文字內容, 中文字也可以哦. 生成的方式是動態的 SVG 進行, demo 程式如下:

<img src="holder.js/300x200">
<img src="holder.js/300x200?theme=sky">
<img src="holder.js/300x200?bg=2a2025&text=Hello">
<img src="holder.js/300x200?bg=f3f2fe&fg=001100&text=中文字也可以哦!">

於 codepen.io 上的 demo 請參考:

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

分類
Javascript

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

在製作一些 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