jQuery DOM Insertion, Inside & Outside

Posted on 2018-08-01 by hoyo

如何控制插入內容相對於對象的位置

jQuery 插入內容時可以使用 append(), prepend(), before(), after() 四個函式，不同的函式插入的位置不同

<div id="aaa" style="border: 1px solid #aaa;">aaaaa</div>

$('#aaa').before('<div>before 1</div>');

$('#aaa').before('<div>before 2</div>');

$('#aaa').after('<div>after 1</div>');

$('#aaa').after('<div>after 2</div>');

$('#aaa').append('<div>append 1</div>');

$('#aaa').append('<div>append 2</div>');

$('#aaa').prepend('<div>prepend 1</div>');

$('#aaa').prepend('<div>prepend 2</div>');

</script>

—

網頁或網頁內元素是否作用中 (可視)

Posted on 2017-06-09 by hoyo

$(function(){

// 頁面作用才更新資料

window.onfocus = function(){

setInterval(function(){

search();

}, 10000);

};

window.onblur = function(){

for (var i = 1; i < 9; i++) window.clearInterval(i);

};

});

—

元素出現就作用

How to tell if a DOM element is visible in the current viewport?
http://jsfiddle.net/AndyE/d48Cv/1/
jquery.inview2

$('div').bind('inview', function(event, isInView) {

if (isInView) {

$(this).css('background-color', '#f00');

} else {

$(this).css('background-color', '#00f');

}

});

—

元素完整出現才作用

</div>

<hr/>

$(window).scroll(function() {

$('div:in-viewport(-320)').css({

'background-color': '#f00',

'color': '#151612'

}).find('p').text('Now in viewport.');

});

</script>

—

Canvas framework

Posted on 2016-11-24 by hoyo

—

應用

—

hoyo 自己的應用

需求為從主機載入一張圖之後，可以增加箭頭、文字、方框等基本的繪圖需求，編輯完成按儲存後要直接回存。

技術：HTML5 Canvas

使用工具：Fabric.js

參考

Add Delete button on element in Canvas Fabric JS

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var canvas = new fabric.Canvas('c');

var HideControls = {

'tl':true,

'tr':false,

'bl':true,

'br':true,

'ml':true,

'mt':true,

'mr':true,

'mb':true,

'mtr':true

};

var image = new Image();

image.src = 'normal_3206.png';

image.onload = function() {

// create a wrapper around native canvas element (with id="c")

canvas.setHeight(image.width).setWidth(image.height);

canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {

width: canvas.width,

height: canvas.height,

// Needed to position backgroundImage at 0/0

originX: 'left',

originY: 'top'

});

};

canvas.renderAll();

function addDeleteBtn(x, y){

$(".deleteBtn").remove();

var btnLeft = x-10;

var btnTop = y-10;

var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';

$(".canvas-container").append(deleteBtn);

}

canvas.on('object:selected',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('mouse:down',function(e){

if(!canvas.getActiveObject())

{

$(".deleteBtn").remove();

}

});

canvas.on('object:modified',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('object:scaling',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:moving',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:rotating',function(e){

$(".deleteBtn").remove();

});

$(document).on('click',".deleteBtn",function(){

if(canvas.getActiveObject())

{

canvas.remove(canvas.getActiveObject());

$(".deleteBtn").remove();

}

});

// ----------------------------------------

function addBlock(){

var rect = new fabric.Rect({

stroke: 'rgb(255,0,0)',

strokeWidth: 3,

width: 100, height: 40,

fill: false, left: 50, top: 50

}).setControlsVisibility(HideControls);

canvas.add(rect);

}

function addText() {

var t = new fabric.IText('Tap and Type', {

fontFamily: 'arial black',

left: 100,

top: 100

});

var textWithBackground = new fabric.IText('輸入文字', {

left: 50,

top: 50,

textBackgroundColor: 'rgb(255,255,255)'

}).setControlsVisibility(HideControls);

canvas.add(textWithBackground);

}

function addLine2(){

var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {

stroke: 'rgb(255,255,255)',

strokeWidth: 8,

fill: 'rgb(255,0,0)'

}

).scaleToWidth(100).setControlsVisibility(HideControls);

canvas.add(path);

}

// 送出處理後圖像給 PHP

function saveImage() {

request = new XMLHttpRequest();

request.open('POST', 'c1.php', true);

var $Json = {};

$Json['image'] = canvas.toDataURL();

$Json['id'] = 'aa111';

request.send( JSON.stringify($Json) );

}

</script>

</body>

</html>

—

Web Audio API – 使用

Posted on 2016-10-28 by hoyo

參考

—

實作

使用 Canvas 繪圖

<!DOCTYPE html>

<html>

</head>

<body>

</div>

</div>

$(function () {

context = new (window.AudioContext || window.webkitAudioContext)();

// Create the analyser

var analyser = context.createAnalyser();

// https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize

analyser.fftSize = 64;

// Get the frequency data and update the visualisation

function update() {

var canvas = document.getElementById('canvas'),

cwidth = canvas.width,

cheight = canvas.height - 2,

meterWidth = 20, //width of the meters in the spectrum

gap = 2, //gap between meters

capHeight = 2,

capStyle = '#fff',

meterNum = 702 / (10 + 2), //count of the meters

capYPositionArray = []; //store the vertical position of hte caps for the preivous frame

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

gradient = ctx.createLinearGradient(0, 0, 0, 300);

gradient.addColorStop(1, '#0f0');

gradient.addColorStop(0.5, '#ff0');

gradient.addColorStop(0, '#f00');

var drawMeter = function() {

var array = new Uint8Array(analyser.frequencyBinCount);

analyser.getByteFrequencyData(array);

ctx.clearRect(0, 0, cwidth, cheight);

for (var i = 0; i < array.length; i++) {

var value = array[i];

if (capYPositionArray.length < Math.round(meterNum)) {

capYPositionArray.push(value);

}

ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look

ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);

}

requestAnimationFrame(drawMeter);

};

requestAnimationFrame(drawMeter);

}

// Hook up the audio routing...

// player -> analyser -> speakers

// (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)

$("#player").bind('canplay', function() {

var source = context.createMediaElementSource(this);

source.connect(analyser);

analyser.connect(context.destination);

update();

});

</script>

</body>

</html>

analyser.fftSize
設定值除以 2 就是陣列取樣數，預設 2048
analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 0
analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));
數值在 0 – 255 ，沒聲音為 128
requestAnimationFrame 根據瀏覽器設定(一般來說是 60fps) 更新
能量條的高度是根據 0-255 所繪製，所以如果要增減就必須調整 analyser.getByteFrequencyData(array) 的 array 值

—

RICOH THETA 網頁全景處理

Posted on 2016-05-13 by hoyo

參考

—

360 Degree Interactive Panoramas And Virtual Tours In Html 5 – Multiple Browsers / 360 Easy – Complete Tutorial On 360 Degree Photography

100

101

102

103

104

105

106

107

108

<head>

* { outline : none; -moz-outline : none -moz-mac-focusring; }

#source-img { position: absolute; left: -999em; }

canvas { position: absolute; float:center; top: -90px; }

#screen { position: absolute; float:center; top: 0px; }

#screen div { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;

background: #fffff; }

div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;

width: 630px; }

</style>

var YD = YAHOO.util.Dom,

YE = YAHOO.util.Event;

var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,

stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {

canvas = YD.get('cv');

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

canvas.width = 630;

canvas.height = 815;

canvas.style.width = '630px';

canvas.style.height = '815px';

stage = YD.get('screen-overlay');

YE.on(stage, 'mousedown', startMoveBackground);

YE.on(stage, 'mousemove', moveBackground);

YE.on(stage, 'mouseout', stopMove);

YE.on(stage, 'mouseup', stopMoveBackground);

stagePos = YD.getXY(stage);

stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];

img = YD.get('source-img');

redraw(); }

function startMoveBackground(e) {}

function moveBackground(e) {

dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;

if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {

if(moveDirection === 'left' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}

else

{ if(moveDirection === 'right' || !moveDirection) {

clearInterval(moveInterval);

moveInterval = setInterval(function() { moveLeft(); }, timeInt);

moveDirection = 'left'; }}}

function stopMove() {

clearInterval(moveInterval);

moveDirection = null; }

function moveRight() {

imgOffset += dist;

redraw(); }

function moveLeft() {

imgOffset -= dist;

redraw(); }

function stopMoveBackground(e) {}

function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {

if(typeof offset === 'undefined') offset = 0;

var h = img.height,

w = (img.width - 2) / 2.5;

var polarity = (pixelWidth > 0) ? 1 : -1;

var widthFactor = Math.abs(pixelWidth) / w;

var delta = Math.abs(pixelWidth);

var dHeight, dWidth, dy, dx;

var constant = Math.pow(100000, scalingFactor); //380;

var firstInc = ((delta / 2) * (delta / 2)) / constant;

for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {

(function(m) {

sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +

((inc * m + offset) % img.width) };})(n);

sy = 0;

sWidth = inc;

sHeight = h;

firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;

secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;

dHeight = (n < len / 2) ? firstHalf : secondHalf;

dWidth = inc * widthFactor;

dy = y + (h - dHeight) / 2;

dx = x + (inc * n * widthFactor * polarity);

data.push({

sx: sx,

sy: sy,

sWidth: sWidth,

sHeight: sHeight,

dx: dx,

dy: dy,

dWidth: dWidth,

dHeight: dHeight }); } }

function redraw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }

function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {

if(data.length === 0) {

precalculate(img, x, y, pixelWidth, scalingFactor, offset); }

var slice, sx;

for(var n = 0, len = data.length; n < len; n++) {

slice = data[n];

ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,

slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}

YAHOO.util.Event.on(window, 'load', init);

</script>

</head>

<body>

</body>

—

720全景图

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

<!DOCTYPE html>

<head>

<style>

body {

background-color: #000000;

margin: 0px;

overflow: hidden;

}

#info {

position: absolute;

top: 0px; width: 100%;

color: #ffffff;

padding: 5px;

font-family:Monospace;

font-size:13px;

font-weight: bold;

text-align:center;

}

a {

color: #ffffff;

}

</style>

</head>

<body>

<div id="info">单张图片全景.</div>

var camera, scene, renderer;

var fov = 70,

texture_placeholder,

isUserInteracting = false,

onMouseDownMouseX = 0, onMouseDownMouseY = 0,

lon = 0, onMouseDownLon = 0,

lat = 0, onMouseDownLat = 0,

phi = 0, theta = 0;

init();

animate();

function init() {

var container, mesh;

container = document.getElementById( 'container' );

camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );

camera.target = new THREE.Vector3( 0, 0, 0 );

scene = new THREE.Scene();

mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'http://sandbox.runjs.cn/uploads/rs/232/bpgpj5uv/123.jpg' ) } ) );

mesh.scale.x = -1;

scene.add( mesh );

renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'mouseup', onDocumentMouseUp, false );

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseDown( event ) {

event.preventDefault();

isUserInteracting = true;

onPointerDownPointerX = event.clientX;

onPointerDownPointerY = event.clientY;

onPointerDownLon = lon;

onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

if ( isUserInteracting ) {

lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;

lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

}

function onDocumentMouseUp( event ) {

isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

// WebKit

if ( event.wheelDeltaY ) {

fov -= event.wheelDeltaY * 0.05;

// Opera / Explorer 9

} else if ( event.wheelDelta ) {

fov -= event.wheelDelta * 0.05;

// Firefox

} else if ( event.detail ) {

fov += event.detail * 1.0;

}

camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );

render();

}

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

lat = Math.max( - 85, Math.min( 85, lat ) );

phi = THREE.Math.degToRad( 90 - lat );

theta = THREE.Math.degToRad( lon );

camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );

camera.target.y = 500 * Math.cos( phi );

camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

camera.lookAt( camera.target );

// distortion

camera.position.x = - camera.target.x;

camera.position.y = - camera.target.y;

camera.position.z = - camera.target.z;

renderer.render( scene, camera );

}

</script>

</body>

</html>

—

jQuery Templates – jQuery Templates plugin

Posted on 2016-04-13 by hoyo

jQuery 的模板

jquery-tmpl
jQuery .tmpl(), .template()学习资料小结(http://coolong124220.nidbox.com/diary/read/8045452)
10 JavaScript and jQuery Templates Engines
An Introduction to jQuery Templates
自幹

</table>

<tr>

</tr>

</tbody>

</table>

var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}];

$('#myTemplate').tmpl(users).appendTo('#rows');

</script>

為什麼這麼改？

使用官方預設的 <script id=”” type=”text/x-jquery-tmpl”></script> 寫法，PhpStorm 無法解析語法，無法解析語法就代表程式有可能會犯錯

非用 script 不可

<tr>

</tr>

</script>

如果模板內必須使用到其他功能，那還是必須使用 script tag 才行，調整一下就可以正常執行 jQuery Templates 以及相容 PhpStorm

—

加上 index

http://jsfiddle.net/XCThu/26/

<tr>

<td>${index} ${id}</td>

<td>${Create_Time}</td>

</tr>

</script>

$.post("./?a=<{$smarty.get.a}>&b=Search", {P:P, Pn:$Pn, Search:Search, SearchTrash:SearchTrash}, function(Json) {

if (R.Result==true) {

$('#myTemplate').tmpl(Json).appendTo('#Main').find('tbody');

}

}, 'json');

</script>

—

ajax + Json + jQuery Template 應用

<thead>

<tr>

<td>Email</td>

</tr>

</thead>

</table>

<td>${Create_Time}</td>

<td>${ShortName}</td>

<td>${Email}</td>

<td>${Phone}</td>

<td>${Spend}</td>

<td>${Points}</td>

</td>

</tr>

</script>

$.post("./?a=<{$smarty.get.a}>&b=Search", {P:P, Pn:$Pn, Search:Search, SearchTrash:SearchTrash}, function(Json) {

if (Json.Result==true) {

var $TotalCount = Json.TotalCount;

$("#Main").find("tbody").html('');

// 顯示 Json 資料

$('#myTemplate').tmpl(Json).appendTo('#Main').find('tbody');

}

}, 'json');

</script>

—

使用 String() 自幹模板

其實模板講白就是一個預先設計好的結構，使用流程大概是這樣

設計模板架構
取用
替換變動資料

設計模板架構

</div>

</div>

取用

1	var $Template = $('#Template_HTML').html();

替換變動資料

搜尋 {LandCode} 字串，替代成實際從 Json 取得資料

$.each(DataLand, function (LK, LP) {

var aa = $Template.replace(/\{LandCode\}/i, LP[0]);

$HTML += aa;

});

—

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

Category Archives: 網頁前端

jQuery DOM Insertion, Inside & Outside

如何控制插入內容相對於對象的位置

網頁或網頁內元素是否作用中 (可視)

元素出現就作用

元素完整出現才作用

Canvas framework

hoyo 自己的應用

Web Audio API – 使用

參考

實作

RICOH THETA 網頁全景處理

jQuery Templates – jQuery Templates plugin

jQuery 的模板

ajax + Json + jQuery Template 應用

使用 String() 自幹模板