分類
PHP

[PHP]使用file_get_content來進行post request

在 php 程式中, 使用 curl 來進行 web request 是常用的方式, 不過由於在 https://repl.it/ 這個服務中, php webserver 並未安裝 curl, 所以需要改用 file_get_content()這個函數來進行 web request, 然而若為一般的 get request, 直接將網址傳入即可, 但若需要進行 post request 要如何操作呢?

這時會用到一個 http context options:

https://www.php.net/manual/en/context.http.php

範例程式如下:

<?php

$postdata = http_build_query(
    array(
        'var1' => 'some content',
        'var2' => 'doh'
    )
);

$opts = array('http' =>
    array(
        'method'  => 'POST',
        'header'  => 'Content-Type: application/x-www-form-urlencoded',
        'content' => $postdata
    )
);

$context  = stream_context_create($opts);

$result = file_get_contents('http://example.com/submit.php', false, $context);

?>

也就是利用了 http context options 來組合出要傳遞的參數. 如此一來便能很快速地應用在僅有 file_get_contents() 環境而沒有 curl 的 php webserver 環境來進行 post request.

參考資料:

https://stackoverflow.com/questions/2445276/how-to-post-data-in-php-using-file-get-contents

https://www.php.net/manual/en/context.http.php

 

分類
Javascript

hls.js 應用於html video tag播放 HLS功能的外掛

同事介紹的這組 hls.js (https://github.com/video-dev/hls.js/)是應用於 video tag 中的播放 HLS (http live streaming) 的外掛, 可以讓原本的 video tag 增加播放 HLS 功能.

相較於之前介紹的 clappr player (https://diary.tw/archives/1811), 這組 hls.js 是直接使用 video tag 來進行(其實 clappr player 是在 div 下自建 video tag, 只是 hls.js 更直接).

hls.js 可以直接讓 browser 的 video tag 播放 hls 內容, 包含了 vod 與 live streming, 也提供了 web demo lab, 方便大家自行測試開發:

https://hls-js.netlify.app/demo/

(之前的 clappr demo 在這裡: http://clappr.io/demo/)

若需要公開測試的 hls 來源, 可以參考:

相信對於開發實作 hls video player 應用, 能有很大的幫忙.

 

分類
程式技術

使用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/

 

分類
wordpress

[WordPress]快速匯入JSON/CSV/XML內容至wordpress

這裡要介紹的是快速將 JSON/CSV/XML檔案的內容至 wordpress 裡的方法, 介紹使用工具為:

https://wordpress.org/plugins/wp-all-import/

雖然沒有 JSON 檔案格式, 不過可以利用這個線上工具進行:

分類
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), 這樣就好解決了.

分類
wordpress

使用Enlighter於TwentyTwenty Theme的對齊問題

使用 Enlighter 用來做在 WordPress 中顯示程式碼的高亮語法十分方便好用. 不過在 TwentyTwenty Theme 中, 會靠到最左側, 導致閱讀不順利, 檢查一下是 css margin 的問題.

不過在 Enlighter plugin 有回報與解法:

https://github.com/EnlighterJS/documentation/blob/master/wordpress/WPThemeCompatibility.md

只需要自訂 css 中增加:

.enlighter-default{
    margin: 0 auto 1.25em auto;
}

就可以了!

PS. 若在 multi-site環境下的 wordpress , 另外需要這個 plugin 來達成 custom css (附加css) 的功能: https://wordpress.org/plugins/multisite-custom-css/

分類
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');

 

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