Web programming 的研究筆記: 2017

2017年12月29日星期五

Install ImageMagick on CentOS 6

Ref : https://www.vultr.com/docs/install-imagemagick-on-centos-6

Ref : https://www.phpini.com/php/rhel-centos-install-imagemagick-imagick

2017年12月26日星期二

2017年12月21日星期四

install opencv3 on python3 on windows

Ref : https://www.solarianprogrammer.com/2016/09/17/install-opencv-3-with-python-3-on-windows/

2017年12月5日星期二

python 簡體轉繁體

Ref : https://pypi.python.org/pypi/hanziconv/0.2.1

2017年12月4日星期一

rpi cam web interface

https://elinux.org/RPi-Cam-Web-Interface

先要安裝 apachpe2 和php

可以參考這一篇

https://www.stewright.me/2016/03/turn-raspberry-pi-3-php-7-powered-web-server/

sudo apt-get update
sudo apt-get dist-upgrade

sudo apt-get install git

git clone https://github.com/silvanmelchior/RPi_Cam_Web_Interface.git
cd RPi_Cam_Web_Interface
./install.sh

2017年12月3日星期日

uv4l tutorials

Ref : https://www.linux-projects.org/uv4l/tutorials/

2017年10月27日星期五

logoless 特製化T-shirt

Ref : https://www.logoless.com.tw/case/designer.asp?page=3&budget=

2017年10月14日星期六

30 days for python

Ref : https://github.com/codingforentrepreneurs/30-Days-of-Python

2017年10月13日星期五

long exposure on photo by opencv

Ref : https://www.pyimagesearch.com/2017/08/14/long-exposure-with-opencv-and-python/

using frame average...

2017年10月2日星期一

口譯機器人

https://chtseng.wordpress.com/2016/06/22/%E5%8D%B3%E6%99%82%E5%8F%A3%E8%AD%AF%E6%A9%9F%E5%99%A8%E4%BA%BAdiy%EF%BC%88%E4%B8%80%EF%BC%89/

1. sudo apt-get install flac

2, sudo pip install PocketSphinx -> error

3. sudo apt-get install swig

4, sudo apt-get install libpulse-dev

5. sudo pip install PocketSphinx

切割成20秒的長度...太常會有問題

https://github.com/Uberi/speech_recognition/issues/132

youtube 上面有人分享用python 來產生srt file

https://www.youtube.com/watch?v=hK6dpTLYlY4

use tensorflow to speech to srt

https://www.youtube.com/watch?v=u9FPqkuoEJ8

2017年9月29日星期五

2017年8月31日星期四

透過 SCSS 客製化 Boostrap 4 樣式

Ref : https://www.youtube.com/watch?v=GxcMdtdelTM&feature=youtu.be

2017年8月29日星期二

How to Install Let’s Encrypt SSL Certificate to Secure Apache on RHEL/CentOS 7/6

Ref : https://www.tecmint.com/install-lets-encrypt-ssl-certificate-to-secure-apache-on-rhel-centos/

2017年8月17日星期四

css :

.status{

position:absolute;
top:0;
height:100%;
opacity:0;
-webkit-transition:opacity 1s ease-in;
moz-transition:opacity 1s ease-in;
o-transition:opacity 1s ease-in;
transition:opacity 1s ease-in;
}
.status h2{
margin-top:130px;
padding: 15px 0px;
width:100%;
background-color:rgb(168,68,163);
color : white;
text-align:center;
}

.status:hover{
opacity:.8;
}

html:

<p>The Mechanic</p>

<h2> Released july 15</h2>

</div>

2017年8月16日星期三

css 進階語法

css:

section.links

表示本身 -> <section class="links"> </section>

css:
section .links (沒有連在一起)

表示子元素 -> <section > <div class="links"></div> </section>

css:
section > .links (沒有連在一起)

表示只看下面一層孫子輩不看

2017年8月14日星期一

Using geolocation

Ref : https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

Ref : https://developer.mozilla.org/en-US/Apps/Fundamentals/gather_and_modify_data/Plotting_yourself_on_the_map

<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>

function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}

bootstrap v4 的介紹

Ｒef : http://muki.tw/tech/bootstrap4-grid-introduce/

垂直對齊

前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。

align-items-start：置頂
align-items-center：置中
align-items-end：置底

▼ 直接在row裡面寫上align-items-*的 CLASS 即可。

Markup

<div class="row align-items-start">
  <div class="col">A<br />A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>
<div class="row align-items-center">
  <div class="col">A</div>
  <div class="col">B<br />B</div>
  <div class="col">C</div>
</div>
<div class="row align-items-end">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C<br />C</div>
</div>

另外我們也可以改用align-self-*在col裡面單獨針對 Column 做對齊的動作

align-self-start：置頂
align-self-center：置中
align-self-end：置底

Markup

<div class="row">
  <div class="col align-self-start">A</div>
  <div class="col align-self-center">B</div>
  <div class="col align-self-end">C</div>
</div>

透過範例可以發現 A, B, C 三個 column 不會相互影響，A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例，輸入多行文字後，他真的就是從中間平均的往上下展開唷！

水平對齊

有垂直對齊就一定會有水平對齊(廢話XD)，所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

justify-content-start：靠左對齊
justify-content-center：置中對齊
justify-content-end：靠右對齊
justify-content-around：分散對齊(含左右)
justify-content-between：分散對齊(不含左右)

Markup

<div class="row justify-content-start">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-center">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-end">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-around">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-between">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

移除 gutter

Bootstrap 的row跟column分別有使用margin以及padding當作 gutter，讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求，我們希望 column 是緊密黏在一起的，所以 V4 新增了no-gutters這個 class，可以讓我們移除 gutter

Markup

<div class="row no-gutters">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

直接將no-gutters放在row就可以囉，因為語法跟效果很直覺，所以就不上 codepen 範例惹

Column 排序

以前如果要將排序會用pull跟push在那邊推來推去的，現在一樣因為使用了 Flexbox 的關係，在使用上也更方便了！

flex-unordered：不排序
flex-first：第一個
flex-last：最後一個

Markup

<div class="row">
  <div class="col flex-unordered">
    我應該是第一個，但我不排序
  </div>
  <div class="col flex-last">
    我應該是第二個，但我會排在最後
  </div>
  <div class="col flex-first">
    我應該是第三個，但我會排在最前面
  </div>
</div>

這邊要特別注意的是，如果使用 flex 排序，寬度縮小時也會持續這個排序模式，column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%，還是可以使用 V3 的push以及pull，不過在 V4 的寫法有一點調整，將前綴位置放到後面(原本是col-md-push-*)：

Markup

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

☞補充：offset也一樣將前綴往後放，但使用方法相同所以就不特別介紹了。

訂閱：文章 (Atom)

2017年12月29日 星期五

2017年12月26日 星期二

2017年12月21日 星期四

2017年12月5日 星期二

2017年12月4日 星期一

2017年12月3日 星期日

2017年10月27日 星期五

2017年10月14日 星期六

2017年10月13日 星期五

2017年10月5日 星期四

2017年10月2日 星期一

2017年9月29日 星期五

2017年8月31日 星期四

2017年8月29日 星期二

2017年8月17日 星期四

2017年8月16日 星期三

2017年8月14日 星期一

垂直對齊

水平對齊

移除 gutter

Column 排序

2017年12月29日星期五

2017年12月26日星期二

2017年12月21日星期四

2017年12月5日星期二

2017年12月4日星期一

2017年12月3日星期日

2017年10月27日星期五

2017年10月14日星期六

2017年10月13日星期五

2017年10月5日星期四

2017年10月2日星期一

2017年9月29日星期五

2017年8月31日星期四

2017年8月29日星期二

2017年8月17日星期四

2017年8月16日星期三

2017年8月14日星期一