Category Archives: HTML5

HTML5 Video

<video class="swiper-slide-img" loop playsinline="" autoplay="" muted="" id="bgvid" src="{{ img_url($item->video) }}"></video>

Reference

Web Site Icon for mobile shortcut

The image size is key. At least 192×192

<link rel="icon" href="{{ url('/images/icons/icon-tea.png') }}" type="image/png" />

<link rel="apple-touch-icon" href="{{ url('/images/icons/icon-tea.png') }}" />

Reference:

Form HTML

<form id="iform" name="iform" action="/test/video/upload" method="post" enctype="multipart/form-data">
                    <input type="file" name="file">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

Twig Tips

Print variable and objects

{{ feature|json_encode }}

1	{{ feature\|json_encode }}

https://www.branchcms.com/learn/docs/developer/twig/filters

Comments

{# This will be a comment #}

1	{# This will be a comment #}

HTML Table Example

<table class="table">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">First</th>
			<th scope="col">Last</th>
			<th scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
	</tbody>
</table>

<thead>

<tr>

<th scope="col">First</th>

<th scope="col">Handle</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

Bootstrap:

https://getbootstrap.com/docs/4.1/content/tables/

Draw on Image using canvas

let initCanvas = function(){
    // Canvas DOM 元素
    let canvas = document.getElementById('canvas_cxr')
    let ctx = canvas.getContext('2d')

    // 使用中的圖
    var img = $targetImg ? $targetImg.get(0) : document.getElementById("p_cxr_preview")
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

    //起始點座標
    let x1 = 0
    let y1 = 0

    // 終點座標
    let x2 = 0
    let y2 = 0

    // 畫筆
    ctx.strokeStyle = 'blue'
    ctx.lineWidth = 2
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'

    // 宣告 isDrawing 為滑鼠點擊的狀態，因為我們需要滑鼠在 mousedown 的狀態時，才會監聽 mousemove 的狀態
    let isDrawing = false

    // 透過上方的 hasTouchEvent 來決定要監聽的是 mouse 還是 touch 的事件
    let upEvent = hasTouchEvent ? 'touchend' : 'mouseup'
    let outEvent = hasTouchEvent ? 'touchcancel' : 'mouseout'
    let downEvent = hasTouchEvent ? 'touchstart' : 'mousedown'
    let moveEvent = hasTouchEvent ? 'touchmove' : 'mousemove'

    canvas.addEventListener(upEvent, function(e){
      isDrawing = false
    })

    canvas.addEventListener(outEvent, function(e){
      isDrawing = false
    })

    canvas.addEventListener(downEvent, function(e){
      isDrawing = true

      x1 = e.offsetX
      y1 = e.offsetY
    })

    canvas.addEventListener(moveEvent, function(e){
      if (!isDrawing) {
        return
      }

      // 取得終點座標
      if (hasTouchEvent) {
        e.preventDefault();

        var touch = e.touches[0] || e.changedTouches[0];
        var elm = $(this).offset();
        x2 = touch.pageX - elm.left;
        y2 = touch.pageY - elm.top;
      } else {
        x2 = e.offsetX
        y2 = e.offsetY
      }

      // 開始繪圖
      ctx.beginPath()
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.stroke()

      // 更新起始點座標
      x1 = x2
      y1 = y2
    })
};

let initCanvas = function(){

// Canvas DOM 元素

let canvas = document.getElementById('canvas_cxr')

let ctx = canvas.getContext('2d')

// 使用中的圖

var img = $targetImg ? $targetImg.get(0) : document.getElementById("p_cxr_preview")

ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

//起始點座標

let x1 = 0

let y1 = 0

// 終點座標

let x2 = 0

let y2 = 0

// 畫筆

ctx.strokeStyle = 'blue'

ctx.lineWidth = 2

ctx.lineCap = 'round'

ctx.lineJoin = 'round'

// 宣告 isDrawing 為滑鼠點擊的狀態，因為我們需要滑鼠在 mousedown 的狀態時，才會監聽 mousemove 的狀態

let isDrawing = false

// 透過上方的 hasTouchEvent 來決定要監聽的是 mouse 還是 touch 的事件

let upEvent = hasTouchEvent ? 'touchend' : 'mouseup'

let outEvent = hasTouchEvent ? 'touchcancel' : 'mouseout'

let downEvent = hasTouchEvent ? 'touchstart' : 'mousedown'

let moveEvent = hasTouchEvent ? 'touchmove' : 'mousemove'

canvas.addEventListener(upEvent, function(e){

isDrawing = false

})

canvas.addEventListener(outEvent, function(e){

isDrawing = false

})

canvas.addEventListener(downEvent, function(e){

isDrawing = true

x1 = e.offsetX

y1 = e.offsetY

})

canvas.addEventListener(moveEvent, function(e){

if (!isDrawing) {

return

}

// 取得終點座標

if (hasTouchEvent) {

e.preventDefault();

var touch = e.touches[0] || e.changedTouches[0];

var elm = $(this).offset();

x2 = touch.pageX - elm.left;

y2 = touch.pageY - elm.top;

} else {

x2 = e.offsetX

y2 = e.offsetY

}

// 開始繪圖

ctx.beginPath()

ctx.moveTo(x1, y1)

ctx.lineTo(x2, y2)

ctx.stroke()

// 更新起始點座標

x1 = x2

y1 = y2

})

};

Import (Link) CSS File

<link rel=stylesheet type="text/css" href="css/style.css">

1	<link rel=stylesheet type="text/css" href="css/style.css">

favicon

<link rel="icon" href="demo_icon.png" type="image/png" />

1	<link rel="icon" href="demo_icon.png" type="image/png" />

Reference:

http://www.w3schools.com/tags/att_link_sizes.asp

Unexpected line break in on iOS

This is because of the phone number format and here is the solution:

<meta name="format-detection" content="telephone=no">

1	<meta name="format-detection" content="telephone=no">

Reference:

iPhone Safari Viewport Scale Bug

In some situation, Safari will scale web page to show some special effect, e.g. Dropdown box (<select>).

Solution:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

1	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

The key is “maximum-scale” property to stop Safari scaling web page.

Reference:

http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: HTML5

HTML5 Video

Web Site Icon for mobile shortcut

Form HTML

Twig Tips

HTML Table Example

Draw on Image using canvas

Import (Link) CSS File

favicon

Unexpected line break in on iOS

iPhone Safari Viewport Scale Bug