I want to implement two signature pads in ONE form. One signature is for the applicant and the other one is for the evaluator.
The first pad works but the second pad is unresponsive. I am using JavaScript for the signature pads but it only works for the first pad. The signature will be saved to the database when the submit button is clicked. That is why id="save-signature-btn" is together with the code for the 'Submit' button.
form.blade.php
#extends('layouts.app')
#section('content')
<!doctype html>
<html lang="en">
<head>
</head>
<body>
{!! Form::open(['url' => 'page3/submit']) !!}
<h4 style="text-decoration: underline; font-weight: bold">Approved By:</h4>
<table class="table table-bordered">
<tr>
<th colspan="3">Approved By:</th>
</tr>
<tr>
<th colspan="1">Name</th>
<th colspan="1">Signature</th>
<th colspan="1">Date</th>
</tr>
<tr colspan=4>
<td colspan="1">
<div class="form-group">
{{Form::text('Officer_Name', '', ['class' => 'form-control', 'placeholder' => 'John Smith'])}}
</div>
</td>
<td colspan="1">
<div class="form-group">
<canvas id="signature-canvas" style="width:375px;height:150px;max-width:100%;border:8px #CCC solid;background-color: white;"></canvas>
<div id="signature-message"></div>
<div id="signature-buttons">
<input type="button" id="clear-signature-btn" value="Clear">
</div>
<input type="hidden" name="officer_signature" id="signature-data" value="">
</div>
</td>
<td>
<div class="form-group">
{{Form::date('Approval_Date', '', ['class' => 'form-control'])}}
</div>
</td>
</tr>
</table>
<br/>
<h4 style="text-decoration: underline; font-weight: bold">Applicant Signature:</h4>
<div class="form-group">
<canvas id="signature-canvas2" style="width:375px;height:150px;max-width:100%;border:8px #CCC solid;background-color: white;"></canvas>
<div id="signature-message2"></div>
<div id="signature-buttons2">
<input type="button" id="clear-signature-btn2" value="Clear">
</div>
<input type="hidden" name="applicant_signature" id="signature-data2" value="">
</div>
<br>
<div class="signature_pad_save">
<button type="submit" class="btn btn-primary" id="save-signature-btn">Submit</button>
</div>
<script src="js/signature_pad.js"></script>
<script src="js/signature_data.js"></script>
</body>
</html>
#endsection('content')
signature data.js
var clearButton = document.getElementById('clear-signature-btn'),
saveButton = document.getElementById('save-signature-btn'),
canvas = document.getElementById('signature-canvas'),
signaturePad;
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
signaturePad = new SignaturePad(canvas);
clearButton.addEventListener('click', function (event) {
signaturePad.clear();
});
saveButton.addEventListener('click', function (event) {
if (signaturePad.isEmpty()) {
alert('Signature pad is blank. Please draw your signature.');
} else {
var sdata = signaturePad.toDataURL();
document.getElementById('signature-data').value = sdata;
document.getElementById('signature-form').submit();
}
});
signature pad.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.SignaturePad = factory());
}(this, (function () { 'use strict';
function Point(x, y, time) {
this.x = x;
this.y = y;
this.time = time || new Date().getTime();
}
Point.prototype.velocityFrom = function (start) {
return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 1;
};
Point.prototype.distanceTo = function (start) {
return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
};
Point.prototype.equals = function (other) {
return this.x === other.x && this.y === other.y && this.time === other.time;
};
function Bezier(startPoint, control1, control2, endPoint) {
this.startPoint = startPoint;
this.control1 = control1;
this.control2 = control2;
this.endPoint = endPoint;
}
// Returns approximated length.
Bezier.prototype.length = function () {
var steps = 10;
var length = 0;
var px = void 0;
var py = void 0;
for (var i = 0; i <= steps; i += 1) {
var t = i / steps;
var cx = this._point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
var cy = this._point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
if (i > 0) {
var xdiff = cx - px;
var ydiff = cy - py;
length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
}
px = cx;
py = cy;
}
return length;
};
/* eslint-disable no-multi-spaces, space-in-parens */
Bezier.prototype._point = function (t, start, c1, c2, end) {
return start * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * c1 * (1.0 - t) * (1.0 - t) * t + 3.0 * c2 * (1.0 - t) * t * t + end * t * t * t;
};
/* eslint-disable */
// http://stackoverflow.com/a/27078401/815507
function throttle(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function later() {
previous = options.leading === false ? 0 : Date.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function () {
var now = Date.now();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
}
function SignaturePad(canvas, options) {
var self = this;
var opts = options || {};
this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
this.minWidth = opts.minWidth || 0.5;
this.maxWidth = opts.maxWidth || 2.5;
this.throttle = 'throttle' in opts ? opts.throttle : 16; // in miliseconds
this.minDistance = 'minDistance' in opts ? opts.minDistance : 5;
if (this.throttle) {
this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
} else {
this._strokeMoveUpdate = SignaturePad.prototype._strokeUpdate;
}
this.dotSize = opts.dotSize || function () {
return (this.minWidth + this.maxWidth) / 2;
};
this.penColor = opts.penColor || 'black';
this.backgroundColor = opts.backgroundColor || 'rgba(0,0,0,0)';
this.onBegin = opts.onBegin;
this.onEnd = opts.onEnd;
this._canvas = canvas;
this._ctx = canvas.getContext('2d');
this.clear();
// We need add these inline so they are available to unbind while still having
// access to 'self' we could use _.bind but it's not worth adding a dependency.
this._handleMouseDown = function (event) {
if (event.which === 1) {
self._mouseButtonDown = true;
self._strokeBegin(event);
}
};
this._handleMouseMove = function (event) {
if (self._mouseButtonDown) {
self._strokeMoveUpdate(event);
}
};
this._handleMouseUp = function (event) {
if (event.which === 1 && self._mouseButtonDown) {
self._mouseButtonDown = false;
self._strokeEnd(event);
}
};
this._handleTouchStart = function (event) {
if (event.targetTouches.length === 1) {
var touch = event.changedTouches[0];
self._strokeBegin(touch);
}
};
this._handleTouchMove = function (event) {
// Prevent scrolling.
event.preventDefault();
var touch = event.targetTouches[0];
self._strokeMoveUpdate(touch);
};
this._handleTouchEnd = function (event) {
var wasCanvasTouched = event.target === self._canvas;
if (wasCanvasTouched) {
event.preventDefault();
self._strokeEnd(event);
}
};
// Enable mouse and touch event handlers
this.on();
}
// Public methods
SignaturePad.prototype.clear = function () {
var ctx = this._ctx;
var canvas = this._canvas;
ctx.fillStyle = this.backgroundColor;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
this._data = [];
this._reset();
this._isEmpty = true;
};
SignaturePad.prototype.fromDataURL = function (dataUrl) {
var _this = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var image = new Image();
var ratio = options.ratio || window.devicePixelRatio || 1;
var width = options.width || this._canvas.width / ratio;
var height = options.height || this._canvas.height / ratio;
this._reset();
image.src = dataUrl;
image.onload = function () {
_this._ctx.drawImage(image, 0, 0, width, height);
};
this._isEmpty = false;
};
SignaturePad.prototype.toDataURL = function (type) {
var _canvas;
switch (type) {
case 'image/svg+xml':
return this._toSVG();
default:
for (var _len = arguments.length, options = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
options[_key - 1] = arguments[_key];
}
return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options));
}
};
SignaturePad.prototype.on = function () {
this._handleMouseEvents();
this._handleTouchEvents();
};
SignaturePad.prototype.off = function () {
this._canvas.removeEventListener('mousedown', this._handleMouseDown);
this._canvas.removeEventListener('mousemove', this._handleMouseMove);
document.removeEventListener('mouseup', this._handleMouseUp);
this._canvas.removeEventListener('touchstart', this._handleTouchStart);
this._canvas.removeEventListener('touchmove', this._handleTouchMove);
this._canvas.removeEventListener('touchend', this._handleTouchEnd);
};
SignaturePad.prototype.isEmpty = function () {
return this._isEmpty;
};
// Private methods
SignaturePad.prototype._strokeBegin = function (event) {
this._data.push([]);
this._reset();
this._strokeUpdate(event);
if (typeof this.onBegin === 'function') {
this.onBegin(event);
}
};
SignaturePad.prototype._strokeUpdate = function (event) {
var x = event.clientX;
var y = event.clientY;
var point = this._createPoint(x, y);
var lastPointGroup = this._data[this._data.length - 1];
var lastPoint = lastPointGroup && lastPointGroup[lastPointGroup.length - 1];
var isLastPointTooClose = lastPoint && point.distanceTo(lastPoint) < this.minDistance;
// Skip this point if it's too close to the previous one
if (!(lastPoint && isLastPointTooClose)) {
var _addPoint = this._addPoint(point),
curve = _addPoint.curve,
widths = _addPoint.widths;
if (curve && widths) {
this._drawCurve(curve, widths.start, widths.end);
}
this._data[this._data.length - 1].push({
x: point.x,
y: point.y,
time: point.time,
color: this.penColor
});
}
};
SignaturePad.prototype._strokeEnd = function (event) {
var canDrawCurve = this.points.length > 2;
var point = this.points[0]; // Point instance
if (!canDrawCurve && point) {
this._drawDot(point);
}
if (point) {
var lastPointGroup = this._data[this._data.length - 1];
var lastPoint = lastPointGroup[lastPointGroup.length - 1]; // plain object
// When drawing a dot, there's only one point in a group, so without this check
// such group would end up with exactly the same 2 points.
if (!point.equals(lastPoint)) {
lastPointGroup.push({
x: point.x,
y: point.y,
time: point.time,
color: this.penColor
});
}
}
if (typeof this.onEnd === 'function') {
this.onEnd(event);
}
};
SignaturePad.prototype._handleMouseEvents = function () {
this._mouseButtonDown = false;
this._canvas.addEventListener('mousedown', this._handleMouseDown);
this._canvas.addEventListener('mousemove', this._handleMouseMove);
document.addEventListener('mouseup', this._handleMouseUp);
};
SignaturePad.prototype._handleTouchEvents = function () {
// Pass touch events to canvas element on mobile IE11 and Edge.
this._canvas.style.msTouchAction = 'none';
this._canvas.style.touchAction = 'none';
this._canvas.addEventListener('touchstart', this._handleTouchStart);
this._canvas.addEventListener('touchmove', this._handleTouchMove);
this._canvas.addEventListener('touchend', this._handleTouchEnd);
};
SignaturePad.prototype._reset = function () {
this.points = [];
this._lastVelocity = 0;
this._lastWidth = (this.minWidth + this.maxWidth) / 2;
this._ctx.fillStyle = this.penColor;
};
SignaturePad.prototype._createPoint = function (x, y, time) {
var rect = this._canvas.getBoundingClientRect();
return new Point(x - rect.left, y - rect.top, time || new Date().getTime());
};
SignaturePad.prototype._addPoint = function (point) {
var points = this.points;
var tmp = void 0;
points.push(point);
if (points.length > 2) {
// To reduce the initial lag make it work with 3 points
// by copying the first point to the beginning.
if (points.length === 3) points.unshift(points[0]);
tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]);
var c2 = tmp.c2;
tmp = this._calculateCurveControlPoints(points[1], points[2], points[3]);
var c3 = tmp.c1;
var curve = new Bezier(points[1], c2, c3, points[2]);
var widths = this._calculateCurveWidths(curve);
// Remove the first element from the list,
// so that we always have no more than 4 points in points array.
points.shift();
return { curve: curve, widths: widths };
}
return {};
};
SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) {
var dx1 = s1.x - s2.x;
var dy1 = s1.y - s2.y;
var dx2 = s2.x - s3.x;
var dy2 = s2.y - s3.y;
var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
var dxm = m1.x - m2.x;
var dym = m1.y - m2.y;
var k = l2 / (l1 + l2);
var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
var tx = s2.x - cm.x;
var ty = s2.y - cm.y;
return {
c1: new Point(m1.x + tx, m1.y + ty),
c2: new Point(m2.x + tx, m2.y + ty)
};
};
SignaturePad.prototype._calculateCurveWidths = function (curve) {
var startPoint = curve.startPoint;
var endPoint = curve.endPoint;
var widths = { start: null, end: null };
var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - this.velocityFilterWeight) * this._lastVelocity;
var newWidth = this._strokeWidth(velocity);
widths.start = this._lastWidth;
widths.end = newWidth;
this._lastVelocity = velocity;
this._lastWidth = newWidth;
return widths;
};
SignaturePad.prototype._strokeWidth = function (velocity) {
return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
};
SignaturePad.prototype._drawPoint = function (x, y, size) {
var ctx = this._ctx;
ctx.moveTo(x, y);
ctx.arc(x, y, size, 0, 2 * Math.PI, false);
this._isEmpty = false;
};
SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) {
var ctx = this._ctx;
var widthDelta = endWidth - startWidth;
var drawSteps = Math.floor(curve.length());
ctx.beginPath();
for (var i = 0; i < drawSteps; i += 1) {
// Calculate the Bezier (x, y) coordinate for this step.
var t = i / drawSteps;
var tt = t * t;
var ttt = tt * t;
var u = 1 - t;
var uu = u * u;
var uuu = uu * u;
var x = uuu * curve.startPoint.x;
x += 3 * uu * t * curve.control1.x;
x += 3 * u * tt * curve.control2.x;
x += ttt * curve.endPoint.x;
var y = uuu * curve.startPoint.y;
y += 3 * uu * t * curve.control1.y;
y += 3 * u * tt * curve.control2.y;
y += ttt * curve.endPoint.y;
var width = startWidth + ttt * widthDelta;
this._drawPoint(x, y, width);
}
ctx.closePath();
ctx.fill();
};
SignaturePad.prototype._drawDot = function (point) {
var ctx = this._ctx;
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
ctx.beginPath();
this._drawPoint(point.x, point.y, width);
ctx.closePath();
ctx.fill();
};
SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
for (var i = 0; i < pointGroups.length; i += 1) {
var group = pointGroups[i];
if (group.length > 1) {
for (var j = 0; j < group.length; j += 1) {
var rawPoint = group[j];
var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time);
var color = rawPoint.color;
if (j === 0) {
// First point in a group. Nothing to draw yet.
// All points in the group have the same color, so it's enough to set
// penColor just at the beginning.
this.penColor = color;
this._reset();
this._addPoint(point);
} else if (j !== group.length - 1) {
// Middle point in a group.
var _addPoint2 = this._addPoint(point),
curve = _addPoint2.curve,
widths = _addPoint2.widths;
if (curve && widths) {
drawCurve(curve, widths, color);
}
} else {
// Last point in a group. Do nothing.
}
}
} else {
this._reset();
var _rawPoint = group[0];
drawDot(_rawPoint);
}
}
};
SignaturePad.prototype._toSVG = function () {
var _this2 = this;
var pointGroups = this._data;
var canvas = this._canvas;
var ratio = Math.max(window.devicePixelRatio || 1, 1);
var minX = 0;
var minY = 0;
var maxX = canvas.width / ratio;
var maxY = canvas.height / ratio;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttributeNS(null, 'width', canvas.width);
svg.setAttributeNS(null, 'height', canvas.height);
this._fromData(pointGroups, function (curve, widths, color) {
var path = document.createElement('path');
// Need to check curve for NaN values, these pop up when drawing
// lines on the canvas that are not continuous. E.g. Sharp corners
// or stopping mid-stroke and than continuing without lifting mouse.
if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) {
var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3));
path.setAttribute('d', attr);
path.setAttribute('stroke-width', (widths.end * 2.25).toFixed(3));
path.setAttribute('stroke', color);
path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);
}
}, function (rawPoint) {
var circle = document.createElement('circle');
var dotSize = typeof _this2.dotSize === 'function' ? _this2.dotSize() : _this2.dotSize;
circle.setAttribute('r', dotSize);
circle.setAttribute('cx', rawPoint.x);
circle.setAttribute('cy', rawPoint.y);
circle.setAttribute('fill', rawPoint.color);
svg.appendChild(circle);
});
var prefix = 'data:image/svg+xml;base64,';
var header = '<svg' + ' xmlns="http://www.w3.org/2000/svg"' + ' xmlns:xlink="http://www.w3.org/1999/xlink"' + (' viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '"') + (' width="' + maxX + '"') + (' height="' + maxY + '"') + '>';
var body = svg.innerHTML;
// IE hack for missing innerHTML property on SVGElement
if (body === undefined) {
var dummy = document.createElement('dummy');
var nodes = svg.childNodes;
dummy.innerHTML = '';
for (var i = 0; i < nodes.length; i += 1) {
dummy.appendChild(nodes[i].cloneNode(true));
}
body = dummy.innerHTML;
}
var footer = '</svg>';
var data = header + body + footer;
return prefix + btoa(data);
};
SignaturePad.prototype.fromData = function (pointGroups) {
var _this3 = this;
this.clear();
this._fromData(pointGroups, function (curve, widths) {
return _this3._drawCurve(curve, widths.start, widths.end);
}, function (rawPoint) {
return _this3._drawDot(rawPoint);
});
this._data = pointGroups;
};
SignaturePad.prototype.toData = function () {
return this._data;
};
return SignaturePad;
})));
In your javascript code you are working only with
canvas = document.getElementById('signature-canvas')
So that is the problem.
You should add a class on both signature canvases in html code for example signature like this:
<canvas id="signature-canvas" class="signature" style="width:375px;height:150px;max-width:100%;border:8px #CCC solid;background-color: white;"></canvas>
<canvas id="signature-canvas2" class="signature" style="width:375px;height:150px;max-width:100%;border:8px #CCC solid;background-color: white;"></canvas>
And then in javascript add one more pair of commands for second signature pad for control buttons (submit and reset) for second canvas.
Related
I am trying to recieve data of multiple JSON files. I have the data I need, but multiple times, even though I use a return statement. I need the data from the getData() function. Which needs to progress to the loadImage() function. I have no clue why the code returns the same multiple times.
Thanks in advance.
My Chrome Developer Console:
My Directory Structure:
My code:
// var defaultHairData = require(['json!../character/hair/data.json'], function(data) {
// console.log("1", data);
// });
// var defaultHeadData = require("../character/head/data.json");
// var defaultLeftArmData = require("../character/leftArm/data.json");
// var defaultLegsData = require("../character/legs/data.json");
// var defaultRightArmData = require("../character/rightArm/data.json");
// var defaultTorsoData = require("../character/torso/data.json");
// var defaultHairImage = require("../character/hair/0/hair.png");
// var defaultHeadImage = require("../character/head/0/head.png");
// var defaultLeftArmImage = require("../character/leftArm/0/leftArm.png");
// var defaultLeftArmJumpImage = require("../character/leftArm_jump/0/leftArm_jump.png"); // Jump!
// var defaultLegsImage = require("../character/legs/0/legs.png");
// var defaultLegsJumpImage = require("../character/legs_jump/0/legs_jump.png"); // Jump!
// var defaultRightArmImage = require("../character/rightArm/0/rightArm.png");
// var defaultRightArmJumpImage = require("../character/rightArm_jump/0/rightArm_jump.png"); // Jump!
// var defaultTorsoImage = require("../character/torso/0/torso.png");
var character = {
name: "Homie",
jumping: false
}
var totalResources = 9;
var loadedResources = 0;
var fps = 30;
var characterXPos = 245;
var characterYPos = 185;
var characterEyesOpenTime = 0;
var characterMaxEyesHeight = 14;
var characterCursiveEyeHeight = characterMaxEyesHeight;
var characterTimeBetweenBlinks = 4000;
var characterBlinkUpdateTime = 200;
var characterBlinkTimer = setInterval(updateBlink, characterBlinkUpdateTime);
var FPSInterval = setInterval(updateFPS, 1000);
var characterCanvas;
var characterCanvasContext;
var breathAmount = 0;
var breathMax = 2;
var breathIncrease = 0.1;
var breathDirection = 1;
var breathInterval = setInterval(updateBreathing, 1000 / fps);
var cursiveFPS = 0;
var framesDrawn = 0;
window.defaultHairData = {};
function updateFPS() {
cursiveFPS = framesDrawn;
framesDrawn = 0;
}
// This is where I need the data from \/
function getData(characterPart) {
var xhr = new XMLHttpRequest();
xhr.open("GET", `./character/${characterPart}/data.json`);
xhr.onreadystatechange = function() {
if (xhr.status === 200) {
console.log("Yoink", window.defaultData);
return window.defaultData = JSON.parse(xhr.response);
} else {
throw new Error(`Could not get file with the name "data.json" in the directory "${characterPart}".`);
}
}
xhr.send();
}
async function prepareCharacterCanvas(canvasContainer, canvasWidth, canvasHeight) {
characterCanvas = document.createElement('canvas');
characterCanvas.setAttribute('width', canvasWidth);
characterCanvas.setAttribute('height', canvasHeight);
characterCanvas.setAttribute('id', 'gameCanvas');
canvasContainer.appendChild(characterCanvas);
if (typeof G_vmlCanvasManager != 'undefined') {
characterCanvas = G_vmlCanvasManager.initElement(characterCanvas);
};
characterCanvasContext = characterCanvas.getContext('2d');
characterCanvas.width = characterCanvas.width;
characterCanvasContext.fillText("Loading...", 40, 140);
// This is where the data needs to come from
await getData("hair");
await getData("head");
await getData("leftArm");
await getData("legs");
await getData("rigthArm");
await getData("torso");
loadImage(`${defaultData.filename}`);
loadImage(`${defaultHeadData.filename}`);
loadImage(`${defaultLeftArmData.filename}`);
loadImage(`${defaultLegsData.filename}`);
loadImage(`${defaultRightArmData.filename}`);
loadImage(`${defaultTorsoData.filename}`);
}
function loadImage(datatags, picture) {
var generateButtons = Boolean;
if (datatags.filename !== picture.name) {
throw new Error("Datatag 'filename' must be the same as the picture name!");
} else {
if (datatags.fileExtension !== "png") {
throw new Error("Datatag 'fileExtension' must be png!");
} else {
if (datatags.customizeable === false) {
generateButtons = false;
} else {
generateButtons = true;
}
if (generateButtons === true) {
// Generate buttons here!
}
if (datatags.changesIfJumping === true) {
// Load normal image first here
var pic = new Image();
pic.onload = function() {
resourceIsLoaded();
}
pic.src = `../character/${datatags.filename}/0/${datatags.filename}.png`;
// Load image if jumping next
var jumpingPic = new Image();
jumpingPic.onload = function() {
resourceIsLoaded();
}
jumpingPic.src = `../character/${datatags.filename}_jump/0/${datatags.filename}_jump.png`;
}
var pic = new Image();
pic.onload = function() {
resourceIsLoaded();
}
pic.src = `../character/${datatags.filename}/0/${datatags.filename}.png`;
}
}
var pic = new Image();
pic.onload = function() {
resourceIsLoaded();
};
pic.src = `${pic}`;
};
function resourceIsLoaded() {
loadedResources += 1;
if (loadedResources === totalResources) {
setInterval(redrawCharacter(), 1000 / userFPS);
};
};
function redrawCharacter() {
var x = characterXPos;
var y = characterYPos;
var jumpHeight = 45;
characterCanvas.width = characterCanvas.width;
if (character.jumping === true) {
drawEyes(x + 40, y + 29, 100 - breathAmount, 4);
y -= jumpHeight;
characterCanvasContext.drawImage("leftArm_jump", x + 40, y - 42 - breathAmount);
characterCanvasContext.drawImage("legs_jump", x, y - 6);
characterCanvasContext.drawImage("rightArm_jump", x - 35, y - 42 - breathAmount);
} else {
drawEyes(x + 40, y + 29, 160 - breathAmount, 6);
characterCanvasContext.drawImage("leftArm", x + 40, y - 42 - breathAmount);
characterCanvasContext.drawImage("legs", x, y);
characterCanvasContext.drawImage("rightArm", x - 15, y - 42 - breathAmount);
};
characterCanvasContext.drawImage("torso", x, y - 50);
characterCanvasContext.drawImage("head", x - 10, y - 125 - breathAmount);
characterCanvasContext.drawImage("hair", x - 37, y - 138 - breathAmount);
characterCanvasContext.drawEyes(x + 47, y - 68 - breathAmount, 8, characterCursiveEyeHeight);
characterCanvasContext.drawEyes(x + 58, y - 68 - breathAmount, 8, characterCursiveEyeHeight);
};
function drawEyes(centerX, centerY, width, height) {
characterCanvasContext.beginPath();
characterCanvasContext.moveTo(centerX, centerY - height / 2);
characterCanvasContext.bezierCurveTo(
centerX + width / 2, centerY - height - 2,
centerX + width / 2, centerY + height / 2,
centerX, centerY + height / 2);
characterCanvasContext.bezierCurveTo(
centerX - width / 2, centerY + height / 2,
centerX - width / 2, centerY - height / 2,
centerX, centerY - height / 2);
characterCanvasContext.fillStyle = "black";
characterCanvasContext.fill();
characterCanvasContext.closePath();
};
function updateBreathing() {
if (breathDirection === 1) {
breathAmount -= breathIncrease;
if (breathAmount < -breathMax) {
breathDirection = -1;
};
} else {
breathAmount += breathIncrease;
if (breathAmount > breathMax) {
breathDirection = 1;
};
};
};
function updateBlink() {
characterEyesOpenTime += characterBlinkUpdateTime;
if (characterEyesOpenTime >= characterTimeBetweenBlinks) {
blink();
};
};
function blink() {
characterCursiveEyeHeight -= 1;
if (characterCursiveEyeHeight <= 0) {
characterEyesOpenTime = 0;
characterCursiveEyeHeight = characterMaxEyesHeight;
} else {
setTimeout(blink, 10);
};
};
function jump() {
if (character.jumping === false) {
character.jumping = true;
setTimeout(land, 500);
};
};
function land() {
character.jumping = false;
}
The JSON file structure:
{
"filename": "legs",
"fileExtension": "png",
"changesIfJumping": true,
"customizeable": true
}
Use more modern way - fetch instead xhr
async function getData(characterPart) {
try {
let response = await fetch(`./character/${characterPart}/data.json`);
return response.json()
} catch (e) {
throw new Error(`Could not get file with the name "data.json" in the directory "${characterPart}".`);
}
}
// TEST
async function start() {
window.defaultData = await getData('xxx');
}
start();
I am making a game where it's about clicking on the nearest yellow dot from the green dot.
I got a list named dots.
You can check out my codepen to see the code I'm using.
My problem is that when you're playing the game, sometimes some of the yellow dots are too close to each other. So I am thinking if it's possible to make a collision-detection or something else, to check if the yellow dots collides?
Here is a picture of my game...
I made a red circle around the problem:
The link to my codepen project: /lolkie02/pen/PJVOdy?editors=0010
If you wanna try the game, it only works through iPhone or Android browser since I made the buttons etc. 'touchstart' in the javascript.
function getDistance(obj1, obj2) {
return Math.floor(
Math.sqrt(Math.pow(obj1.cx - obj2.cx, 2) + Math.pow(obj1.cy - obj2.cy, 2))
);
}
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
function comparator(a, b) {
if (a[1] < b[1]) return -1;
if (a[1] > b[1]) return 1;
return 0;
}
function difference(source, toRemove) {
return source.filter(function(value) {
return toRemove.indexOf(value) == -1;
});
}
////////////////
// global vars
////////////////
var svg = document.getElementById("svg");
var dotMatrix = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", "line");
var screenW = window.innerWidth;
var screenH = window.innerHeight;
var totalDist = document.getElementById("distance");
////////////////
// line constructor
////////////////
function Line(x1, y1, x2, y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.el = document.createElementNS("http://www.w3.org/2000/svg", "line");
this.class = "line";
this.update = function(x1, y1, x2, y2) {
this.el.setAttribute("x1", x1 || this.x1);
this.el.setAttribute("y1", y1 || this.y1);
this.el.setAttribute("x2", x2 || this.x2);
this.el.setAttribute("y2", y2 || this.y2);
this.setAttr("class", this.class);
};
this.setAttr = function(attr, value) {
this.el.setAttribute(attr, value);
};
this.append = function() {
svg.insertBefore(this.el, svg.firstChild);
};
}
////////////////
// dot constructor
////////////////
function Dot(r, cx, cy) {
this.r = r;
this.cx = cx;
this.cy = cy;
this.el = document.createElementNS("http://www.w3.org/2000/svg", "circle");
this.class = "dot";
this.update = function() {
this.el.setAttribute("r", this.r);
this.el.setAttribute("cx", this.cx);
this.el.setAttribute("cy", this.cy);
this.setAttr("class", this.class);
};
// activates a dot
this.activate = function() {
for (i = 0; i < dots.num; i++) {
dots.list[i].setAttr("data-selected", "false");
}
this.setAttr("data-selected", "true");
};
this.visited = function() {
this.setAttr("data-visited", "true");
};
// sets attribute to element
this.setAttr = function(attr, value) {
this.el.setAttribute(attr, value);
};
// gets attribute to element
this.getAttr = function(attr) {
return this.el.getAttribute(attr);
};
// appends element to svg and attaches event listeners
this.append = function() {
svg.appendChild(this.el);
this.el.addEventListener("touchstart", this.onClick);
};
// on click on element
this.onClick = function(event) {
//gets the id and the coords of the dot
var thisId = Number(event.target.getAttribute("data-id").substr(3, 2));
var thisCx = dots.list[thisId].cx;
var thisCy = dots.list[thisId].cy;
// calculates the distance between dots
var distances = [];
for (i = 0; i < dots.num; i++) {
distances[i] = [i, getDistance(dots.selected, dots.list[i])];
}
distances.sort(comparator);
distances.splice(0, 1);
var distancesLeft = [];
for (i = 0; i < distances.length; i++) {
if (dots.left.includes(distances[i][0])) {
distancesLeft.push(distances[i][0]);
}
}
//if the element is the nearest
if (thisId == distancesLeft[0] && dots.left.includes(thisId)) {
// calculates distances
var newDistance = getDistance(dots.list[thisId], dots.selected);
app.score.update(1); // punteggio x numero di poi
// app.score.update(newDistance); punteggio x distanza
//sets the active class to the selected dot
dots.list[thisId].activate();
dots.list[thisId].visited();
// creates the line
lines.list.push(
new Line(
dots.selected.cx,
dots.selected.cy,
dots.list[thisId].cx,
dots.list[thisId].cy
)
);
lines.list[lines.list.length - 1].update();
lines.list[lines.list.length - 1].append();
// creates the preview line
//TODO: eliminare le vecchie preline che rimangono vive
svg.addEventListener("mousemove", function prelineMove(e) {
mouseX = e.pageX;
mouseY = e.pageY;
app.preline.update(thisCx, thisCy, mouseX, mouseY);
});
//saves the selected dots coordinates
dots.selected.id = thisId;
dots.selected.cx = thisCx;
dots.selected.cy = thisCy;
//removes the dot from the list of remaining dots
for (i = 0; i < dots.left.length; i++) {
if (dots.left[i] === thisId) {
dots.left.splice(i, 1);
}
}
if (dots.left.length == 0) {
app.end(true);
}
} else {
app.end(false);
}
};
}
////////////////
// lines group
////////////////
var lines = {
list: []
};
////////////////
// dots group
////////////////
var dots = {};
dots.num = 20;
dots.list = [];
dots.start = 0;
dots.selected = {};
dots.selected.id = dots.start;
dots.left = [];
dots.preline;
////////////////
// app
////////////////
var app = {};
app.level = 2;
app.score = {};
app.score.number = 0;
app.score.el = document.getElementById("score");
app.score.update = function(score) {
app.score.number += score;
app.score.el.textContent = app.score.number;
};
app.score.reset = function() {
app.score.number = 0;
app.score.update(0);
};
app.results = function(points) {
if (points == "reset") {
sessionStorage.setItem("results", 0);
} else {
if (!sessionStorage.getItem("results")) {
sessionStorage.setItem("results", points);
} else {
var newscore = points;
sessionStorage.setItem("results", newscore);
}
}
};
app.launchScreen = function(lastScore, title, description, btnText) {
app.launchScreen.el = document.getElementById("launch-screen");
app.launchScreen.el.setAttribute("class", "is-visible");
var launchScreenTitle = document.getElementById("launch-screen__title");
launchScreenTitle.textContent = title;
var launchScreenDescription = document.getElementById(
"launch-screen__description"
);
launchScreenDescription.textContent = description;
app.launchScreen.btn = document.getElementById("start-btn");
app.launchScreen.btn.textContent = btnText;
app.launchScreen.btn.addEventListener("touchstart", function lauch() {
app.launchScreen.el.setAttribute("class", "");
app.start(app.level);
document.getElementById("score2").style.display = "block";
app.launchScreen.btn.removeEventListener("touchstart", lauch);
});
};
app.preline = new Line(0, 0, 200, 200);
app.preline.setAttr("id", "preline");
app.start = function(dotsNum) {
dots.num = dotsNum;
for (i = 0; i < dots.num; i++) {
var cx = getRandomArbitrary(45, screenW - 45);
var cy = getRandomArbitrary(45, screenH - 45);
dots.list[i] = new Dot(14, cx, cy);
dots.list[i].setAttr("data-id", "id-" + i);
dots.list[i].setAttr(
"style",
"animation-delay:" + i / 10 + "s; transform-origin: " + cx + 'px ' + cy + 'px;');
dots.list[i].update();
dots.list[i].append();
dots.left.push(i);
if (i == dots.start) {
dots.selected.cx = dots.list[dots.start].cx;
dots.selected.cy = dots.list[dots.start].cy;
dots.list[dots.start].setAttr("class", "dot dot--starting");
dots.left.splice(i, 1);
}
// adds the preline
app.preline.update(
dots.selected.cx,
dots.selected.cy,
dots.selected.cx,
dots.selected.cy
);
app.preline.append();
svg.addEventListener("mousemove", function prelineMove(e) {
mouseX = e.pageX;
mouseY = e.pageY;
app.preline.update(dots.selected.cx, dots.selected.cy, mouseX, mouseY);
});
}
// sets starting point
dots.list[dots.start].setAttr("data-selected", "true");
};
app.end = function(win) {
if (win) {
app.level += 2;
app.results(app.score.number);
} else {
app.level = 2;
}
dots.list = [];
dots.selected = {};
dots.left.length = 0;
svg.innerHTML = "";
if (win) {
app.launchScreen(
app.score.number,
"", //"Sådan!",
"", //"Din score er nu: " + sessionStorage.getItem("results") + ' Det næste level vil blive endnu hårdere.',
"NÆSTE LEVEL"
);
} else {
app.launchScreen(
0,
"", //"ARGH!",
"", //"Din endelige score blev: " + sessionStorage.getItem("results"),
"PRØV IGEN"
);
app.results("reset");
app.score.reset();
var score2 = document.getElementById('score2');
var number = score2.innerHTML;
number = 0;
score2.innerHTML = number;
document.getElementById("score2").style.display = "none";
}
};
app.launchScreen(
0,
"STIFINDER",
"Find den tætteste gule prik",
"SPIL"
);
$('.btn').on('touchstart',function(e,data) {
var score2 = document.getElementById('score2');
var number = score2.innerHTML;
number++;
score2.innerHTML = number;
});
Use Pythagorean theorem to determine whether the distance of the centers of two dots are closer (or equal) to the sum of their radii - in that case you have collision.
My answer to the similar question :https://stackoverflow.com/a/46973584/4154250
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
<script type="text/javascript">
var ImageUploader = function(config) {
if (!config || (!config.inputElement) || (!config.inputElement.getAttribute) || config.inputElement.getAttribute('type') !== 'file') {
throw new Error('Config object passed to ImageUploader constructor must include "inputElement" set to be an element of type="file"');
}
this.setConfig(config);
var This = this;
this.config.inputElement.addEventListener('change', function(event) {
var fileArray = [];
var cursor = 0;
for (; cursor < This.config.inputElement.files.length; ++cursor) {
fileArray.push(This.config.inputElement.files[cursor]);
}
This.progressObject = {
total : parseInt(fileArray.length, 10),
done : 0,
currentItemTotal : 0,
currentItemDone : 0
};
if (This.config.onProgress) {
This.config.onProgress(This.progressObject);
}
This.handleFileList(fileArray, This.progressObject);
}, false);
if (This.config.debug) {
console.log('Initialised ImageUploader for ' + This.config.inputElement);
}
};
ImageUploader.prototype.handleFileList = function(fileArray) {
var This = this;
if (fileArray.length > 1) {
var file = fileArray.shift();
this.handleFileSelection(file, function() {
This.handleFileList(fileArray);
});
} else if (fileArray.length === 1) {
this.handleFileSelection(fileArray[0], function() {
if (This.config.onComplete) {
This.config.onComplete(This.progressObject);
}
});
}
};
ImageUploader.prototype.handleFileSelection = function(file, completionCallback) {
var img = document.createElement('img');
this.currentFile = file;
var reader = new FileReader();
var This = this;
reader.onload = function(e) {
img.src = e.target.result;
img.onload = function(){
This.scaleImage(img, completionCallback);
}
};
reader.readAsDataURL(file);
};
ImageUploader.prototype.scaleImage = function(img, completionCallback) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
while (canvas.width >= (2 * this.config.maxWidth)) {
canvas = this.getHalfScaleCanvas(canvas);
}
if (canvas.width > this.config.maxWidth) {
canvas = this.scaleCanvasWithAlgorithm(canvas);
}
var imageData = canvas.toDataURL('image/jpeg', this.config.quality);
this.performUpload(imageData, completionCallback);
/*
img = $.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: imageData
}
}).done(function(o) {
console.log('saved');
});
*/
};
ImageUploader.prototype.performUpload = function(imageData, completionCallback) {
var xhr = new XMLHttpRequest();
var This = this;
var uploadInProgress = true;
var headers = this.config.requestHeaders;
xhr.onload = function(e) {
uploadInProgress = false;
This.uploadComplete(e, completionCallback);
};
xhr.upload.addEventListener("progress", function(e) {
This.progressUpdate(e.loaded, e.total);
}, false);
xhr.open('POST', this.config.uploadUrl, true);
if(typeof headers === 'object' && headers !== null) {
Object.keys(headers).forEach(function(key,index) {
if(typeof headers[key] !== 'string') {
var headersArray = headers[key];
for(var i = 0, j = headersArray.length; i < j; i++) {
xhr.setRequestHeader(key, headersArray[i]);
}
} else {
xhr.setRequestHeader(key, headers[key]);
}
});
}
xhr.send(imageData.split(',')[1]);
if (this.config.timeout) {
setTimeout(function() {
if (uploadInProgress) {
xhr.abort();
This.uploadComplete({
target: {
status: 'Timed out'
}
}, completionCallback);
}
}, this.config.timeout);
}
if (this.config.debug) {
var resizedImage = document.createElement('img');
this.config.workspace.appendChild(document.createElement('br'));
this.config.workspace.appendChild(resizedImage);
resizedImage.src = imageData;
}
};
ImageUploader.prototype.uploadComplete = function(event, completionCallback) {
this.progressObject.done++;
this.progressUpdate(0, 0);
completionCallback();
if (this.config.onFileComplete) {
this.config.onFileComplete(event, this.currentFile);
}
};
ImageUploader.prototype.progressUpdate = function(itemDone, itemTotal) {
console.log('Uploaded '+itemDone+' of '+itemTotal);
this.progressObject.currentItemDone = itemDone;
this.progressObject.currentItemTotal = itemTotal;
if (this.config.onProgress) {
this.config.onProgress(this.progressObject);
}
};
ImageUploader.prototype.scaleCanvasWithAlgorithm = function(canvas) {
var scaledCanvas = document.createElement('canvas');
var scale = this.config.maxWidth / canvas.width;
scaledCanvas.width = canvas.width * scale;
scaledCanvas.height = canvas.height * scale;
var srcImgData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
var destImgData = scaledCanvas.getContext('2d').createImageData(scaledCanvas.width, scaledCanvas.height);
this.applyBilinearInterpolation(srcImgData, destImgData, scale);
scaledCanvas.getContext('2d').putImageData(destImgData, 0, 0);
return scaledCanvas;
};
ImageUploader.prototype.getHalfScaleCanvas = function(canvas) {
var halfCanvas = document.createElement('canvas');
halfCanvas.width = canvas.width / 2;
halfCanvas.height = canvas.height / 2;
halfCanvas.getContext('2d').drawImage(canvas, 0, 0, halfCanvas.width, halfCanvas.height);
return halfCanvas;
};
ImageUploader.prototype.applyBilinearInterpolation = function(srcCanvasData, destCanvasData, scale) {
function inner(f00, f10, f01, f11, x, y) {
var un_x = 1.0 - x;
var un_y = 1.0 - y;
return (f00 * un_x * un_y + f10 * x * un_y + f01 * un_x * y + f11 * x * y);
}
var i, j;
var iyv, iy0, iy1, ixv, ix0, ix1;
var idxD, idxS00, idxS10, idxS01, idxS11;
var dx, dy;
var r, g, b, a;
for (i = 0; i < destCanvasData.height; ++i) {
iyv = i / scale;
iy0 = Math.floor(iyv);
// Math.ceil can go over bounds
iy1 = (Math.ceil(iyv) > (srcCanvasData.height - 1) ? (srcCanvasData.height - 1) : Math.ceil(iyv));
for (j = 0; j < destCanvasData.width; ++j) {
ixv = j / scale;
ix0 = Math.floor(ixv);
// Math.ceil can go over bounds
ix1 = (Math.ceil(ixv) > (srcCanvasData.width - 1) ? (srcCanvasData.width - 1) : Math.ceil(ixv));
idxD = (j + destCanvasData.width * i) * 4;
// matrix to vector indices
idxS00 = (ix0 + srcCanvasData.width * iy0) * 4;
idxS10 = (ix1 + srcCanvasData.width * iy0) * 4;
idxS01 = (ix0 + srcCanvasData.width * iy1) * 4;
idxS11 = (ix1 + srcCanvasData.width * iy1) * 4;
// overall coordinates to unit square
dx = ixv - ix0;
dy = iyv - iy0;
// I let the r, g, b, a on purpose for debugging
r = inner(srcCanvasData.data[idxS00], srcCanvasData.data[idxS10], srcCanvasData.data[idxS01], srcCanvasData.data[idxS11], dx, dy);
destCanvasData.data[idxD] = r;
g = inner(srcCanvasData.data[idxS00 + 1], srcCanvasData.data[idxS10 + 1], srcCanvasData.data[idxS01 + 1], srcCanvasData.data[idxS11 + 1], dx, dy);
destCanvasData.data[idxD + 1] = g;
b = inner(srcCanvasData.data[idxS00 + 2], srcCanvasData.data[idxS10 + 2], srcCanvasData.data[idxS01 + 2], srcCanvasData.data[idxS11 + 2], dx, dy);
destCanvasData.data[idxD + 2] = b;
a = inner(srcCanvasData.data[idxS00 + 3], srcCanvasData.data[idxS10 + 3], srcCanvasData.data[idxS01 + 3], srcCanvasData.data[idxS11 + 3], dx, dy);
destCanvasData.data[idxD + 3] = a;
}
}
};
ImageUploader.prototype.setConfig = function(customConfig) {
this.config = customConfig;
this.config.debug = this.config.debug || false;
this.config.quality = 1.00;
if (0.00 < customConfig.quality && customConfig.quality <= 1.00) {
this.config.quality = customConfig.quality;
}
if (!this.config.maxWidth) {
this.config.maxWidth = 480;
}
// Create container if none set
if (!this.config.workspace) {
this.config.workspace = document.createElement('div');
document.body.appendChild(this.config.workspace);
}
};
</script>
<h3>The ImageUploader in all its glory!</h3>
<input id="fileInputElement1" type="file" name="a">
<input id="fileInputElement2" type="file" name="b">
<div id="progress"></div>
<div id="fileProgress"></div>
<div id="progressbar"></div>
<script type="text/javascript">
var uploader = new ImageUploader({
inputElement : document.getElementById('fileInputElement1'),
uploadUrl : 'api/image',
onProgress : function(event) {
$('#progress').text('Completed '+event.done+' files of '+event.total+' total.');
$('#progressbar').progressbar({ value: (event.done / event.total) * 100 })
},
onFileComplete : function(event, file) {
$('#fileProgress').append('Finished file '+file.fileName+' with response from server '+event.target.status+'<br />');
},
onComplete : function(event) {
$('#progress').text('Completed all '+event.done+' files!');
$('#progressbar').progressbar({ value: (event.done / event.total) * 100 })
},
maxWidth: 480,
quality: 0.80,
//timeout: 5000,
debug : true
});
</script>
<script type="text/javascript">
var uploader = new ImageUploader({
inputElement : document.getElementById('fileInputElement2'),
uploadUrl : 'api/image',
onProgress : function(event) {
$('#progress').text('Completed '+event.done+' files of '+event.total+' total.');
$('#progressbar').progressbar({ value: (event.done / event.total) * 100 })
},
onFileComplete : function(event, file) {
$('#fileProgress').append('Finished file '+file.fileName+' with response from server '+event.target.status+'<br />');
},
onComplete : function(event) {
$('#progress').text('Completed all '+event.done+' files!');
$('#progressbar').progressbar({ value: (event.done / event.total) * 100 })
},
maxWidth: 480,
quality: 0.80,
//timeout: 5000,
debug : true
});
</script>
I am not well in JavaScript. But i have to used javascript code for this task. The function of the task is upload image to server before resized.
I find a resized without upload. But can't upload and view it properly.
Problem:
When i click in any image it automatically show in unknown .
And can't find the image temp_location to upload the resized image.
I need to to show the image in specific
Find temp location to upload the image.
NB: To upload the use 'php' move_uploaded_file() function.
Thanks in advance.
I have a code for a slideshow that runs automatically and all I want is to stop the timer when I click on the image and pause it when i hover over it.
I tried the clearinterval function but it didn't work at all, so I need your help please.
This is the JavaScript code:
var m3D = function() {
var e = 4;
var t = [],
n, r, i, s, o,
u = "",
a = "",
f = {
x: 0,
y: 0,
z: -650,
s: 0,
fov: 500
},
l = 0,
c = 0;
f.setTarget = function(e, t, n) {
if (Math.abs(t - e) > .1) {
f.s = 1;
f.p = 0;
f.d = t - e;
if (n) {
f.d *= 2;
f.p = 9
}
}
};
f.tween = function(e) {
if (f.s != 0) {
f.p += f.s;
f[e] += f.d * f.p * .01;
if (f.p == 10) f.s = -1;
else if (f.p == 0) f.s = 0
}
return f.s
};
var h = function(k, l, c, h, p) {
if (l) {
this.url = l.url;
this.title = l.title;
this.color = l.color;
this.isLoaded = false;
if (document.createElement("canvas").getContext) {
this.srcImg = new Image;
this.srcImg.src = u + l.src;
this.img = document.createElement("canvas");
this.canvas = true;
r.appendChild(this.img)
} else {
this.img = document.createElement("img");
this.img.src = u + l.src;
r.appendChild(this.img)
}
function v(e, t) {
return Math.floor(Math.random() * (t - e + 1)) + e
}
function m() {
var e = t.length;
var n = v(0, t.length);
l.src = u + "photo" + n + ".jpg";
if (f.s) return;
try {
if (t[n].canvas == true) {
f.tz = t[n].z - f.fov;
f.tx = t[n].x;
f.ty = t[n].y;
if (s) {
s.but.className = "button viewed";
s.img.className = "";
s.img.style.cursor = "pointer";
s.urlActive = false;
o.style.visibility = "hidden"
}
t[n].img.className = "button selected";
d(false);
s = t[n]
} else {}
} catch (r) {}
}
// this is the Interval timer
var g = setInterval(m, 6e3);
this.img.onclick = function()
{
/*
i want to reset the timer OR increase it when i click here
*/
alert("click");
if (f.s) return;
if (this.diapo.isLoaded) {
if (this.diapo.urlActive) {
top.location.href = this.diapo.url
} else {
f.tz = this.diapo.z - f.fov;
f.tx = this.diapo.x;
f.ty = this.diapo.y;
if (s) {
s.but.className = "button viewed";
s.img.className = "";
s.img.style.cursor = "pointer";
s.urlActive = false;
o.style.visibility = "hidden"
}
this.diapo.but.className = "button selected";
d(false);
s = this.diapo
}
}
};
this.but = document.createElement("div");
this.Img = document.createElement("Img");
this.but.className = "button";
this.Img.src = a + l.src;
this.but.appendChild(this.Img);
i.appendChild(this.but);
this.but.diapo = this;
this.Img.style.left = Math.round(this.but.offsetWidth * 1.2 * (k % e)) + "px";
this.Img.style.top = Math.round(this.but.offsetHeight * 1.2 * Math.floor(k / e)) + "px";
this.Img.style.zIndex = "50";
this.but.onclick = this.img.onclick;
n = this.img;
this.img.diapo = this;
this.zi = 25e3
} else {
this.img = document.createElement("div");
this.isLoaded = true;
this.img.className = "fog";
r.appendChild(this.img);
this.w = 300;
this.h = 300;
this.zi = 15e3
}
this.x = c;
this.y = h;
this.z = p;
this.css = this.img.style
};
h.prototype.anim = function() {
if (this.isLoaded) {
var e = this.x - f.x;
var t = this.y - f.y;
var n = this.z - f.z;
if (n < 20) n += 5e3;
var r = f.fov / n;
var i = this.w * r;
var s = this.h * r;
this.css.left = Math.round(l + e * r - i * .5) + "px";
this.css.top = Math.round(c + t * r - s * .5) + "px";
this.css.width = Math.round(i) + "px";
this.css.height = Math.round(s) + "px";
this.css.zIndex = this.zi - Math.round(n)
} else {
this.isLoaded = this.loading()
}
};
h.prototype.loading = function() {
if (this.canvas && this.srcImg.complete || this.img.complete) {
if (this.canvas) {
this.w = this.srcImg.width;
this.h = this.srcImg.height;
this.img.width = this.w;
this.img.height = this.h;
var e = this.img.getContext("2d");
e.drawImage(this.srcImg, 0, 0, this.w, this.h)
} else {
this.w = this.img.width;
this.h = this.img.height
}
this.but.className += " loaded";
return true
}
return false
};
var p = function() {
l = r.offsetWidth * .5;
c = r.offsetHeight * .5
};
var d = function(e) {
var n = 0,
r;
while (r = t[n++]) {
if (r.but) {
r.css.msInterpolationMode = e ? "bicubic" : "nearest-neighbor";
r.css.imageRendering = e ? "optimizeQuality" : "optimizeSpeed"
}
}
};
var v = function(e) {
r = document.getElementById("screen");
i = document.getElementById("bar");
o = document.getElementById("urlInfo");
p();
var n = 0,
s, u = e.length;
while (s = e[n++]) {
var a = 1e3 * (n % 4 - 1.5);
var f = Math.round(Math.random() * 4e3) - 2e3;
var l = n * (5e3 / u);
t.push(new h(n - 1, s, a, f, l));
var c = t.length - 1;
for (var d = 0; d < 3; d++) {
var a = Math.round(Math.random() * 4e3) - 2e3;
var f = Math.round(Math.random() * 4e3) - 2e3;
t.push(new h(c, null, a, f, l + 100))
}
/*
var d = t.length - 1;
for (var v = 0; v < 3; v++) {
var a = Math.round(Math.random() * 4e3) - 2e3;
var f = Math.round(Math.random() * 4e3) - 2e3;
t.push(new h(d, null, a, f, l + 100))
}
*/
}
m()
};
var m = function() {
if (f.tx) {
if (!f.s) f.setTarget(f.x, f.tx);
var e = f.tween("x");
if (!e) f.tx = 0
} else if (f.ty) {
if (!f.s) f.setTarget(f.y, f.ty);
var e = f.tween("y");
if (!e) f.ty = 0
} else if (f.tz) {
if (!f.s) f.setTarget(f.z, f.tz);
var e = f.tween("z");
if (!e) {
f.tz = 0;
d(true);
if (s.url) {
s.img.style.cursor = "pointer";
s.urlActive = true;
s.img.className = "href";
o.diapo = s;
o.onclick = s.img.onclick;
o.innerHTML = s.title || s.url;
o.style.visibility = "visible";
o.style.color = s.color || "#fff";
o.style.top = Math.round(s.img.offsetTop + s.img.offsetHeight - o.offsetHeight - 5) + "px";
o.style.left = Math.round(s.img.offsetLeft + s.img.offsetWidth - o.offsetWidth - 5) + "px"
} else {
s.img.style.cursor = "default"
}
/*
i want to pause the timer when i hover here
*/
s.img.onmouseover = function(){
alert("mouseover");
};
}
}
var n = 0,
r;
while (r = t[n++]) r.anim();
var g = setTimeout(m, 32)
};
return {
init: v
}
}()
And as you see, on line 90 I have the setInterval timer function and after it the onclick function where I need to "reset" the timer, and on line 270 the onmouseover function where I need to "pause" the timer.
So how to do this?
Try using a flag variable. Add var pauseSlideshow = false; somewhere at the top of the file, so it will be in the global scope. Change the m()function like so:
var m = function() {
if(!pauseSlideshow) {
/*
*
* all of the code already in m()
*
*/
} // make sure to add this additional curly brace
}
And then you need an onmouseover and an onmouseout function to toggle pauseSlideshow, like this:
s.img.onmouseover = function() {
pauseSlideshow = true;
};
s.img.onmouseout = function() {
pauseSlideshow = false;
};
Trying to create a slider class that lets you easily and quickly customize values. You can drag the handle or click on any part of the slider to move the handle there, and it works... sort of. You can click as many times as you want, but... if you even click once or if you drag, then let go and try again, it only goes down (never up) a tiny bit. That probably sounds confusing, so here's the fiddle.
var Slider = createEntity({
init: function (args) {
args = args || {};
this.x = args.x || 0;
this.y = args.y || 0;
this.width = args.width || 10;
this.height = args.height || 100;
this.min = args.min || 0;
this.max = args.max || 100;
this.value = args.value || 50;
this.rotation = args.rotation || 0;
this.on = args.on || function () {};
var backFill = randHsla();
args.back = args.back || {};
this.back = args.back;
args.back.fill = args.back.fill || backFill;
this.back.fill = args.back.fill;
args.back.borderFill = args.back.borderFill || backFill;
this.back.borderFill = args.back.borderFill;
args.back.width = args.back.width || 5;
this.back.width = args.back.width;
args.back.x = args.back.x || this.width / 2 - this.back.width / 2;
this.back.x = args.back.x;
var handleColor = randHsla();
args.handle = args.handle || {};
this.handle = args.handle;
args.handle.fill = args.handle.fill || handleColor;
this.handle.fill = args.handle.fill;
args.handle.borderStroke = args.handle.borderStroke || handleColor;
this.handle.borderStroke = args.handle.borderStroke;
args.handle.height = args.handle.height || 5;
this.handle.height = args.handle.height;
args.handle.y = args.handle.y || 0;
this.handle.y = args.handle.y;
this.updatePos();
},
draw: function (fx) {
fx.save();
fx.translate(this.x, this.y);
fx.rotate(this.rotation);
fx.fillStyle = this.back.fill;
fx.beginPath();
fx.fillRect(this.back.x, 0, this.back.width, this.height);
fx.closePath();
fx.fillStyle = this.handle.fill;
fx.strokeStyle = this.handle.borderStroke;
fx.beginPath();
fx.rect(0, this.handle.y, this.width, this.handle.height);
fx.closePath();
fx.fill();
fx.stroke();
fx.restore();
},
updateVal: function () {
var oldVal = this.value,
handleRange = this.height - this.handle.height,
valRange = this.max - this.min;
this.value = (handleRange - this.handle.y) / handleRange * valRange + this.min;
if (this.on instanceof Function && this.value !== oldVal) {
this.on();
}
return this;
},
updatePos: function () {
var handleRange = this.height - this.handle.height,
valRange = this.max - this.min;
this.handle.y = handleRange - ((this.value - this.min) / valRange) * handleRange;
return this;
},
getMouse: function (map) {
var self = this,
mouse = getMouse(map),
bounds = {};
setBounds();
map.addEventListener('mousedown', function (event) {
if (hasPoint(bounds, mouse.x, mouse.y)) {
map.addEventListener('mousemove', onMouseMove);
map.addEventListener('mouseup', onMouseUp);
} else if (hasPoint(self, mouse.x, mouse.y)) {
var y = mouse.y - self.y;
self.handle.y = Math.min(self.height - self.handle.height, Math.max(y, 0));
self.updateVal();
}
});
function onMouseUp(event) {
map.removeEventListener('mousemove', onMouseMove, false);
map.removeEventListener('mouseup', onMouseUp, false);
}
function onMouseMove(event) {
var y = mouse.y - self.y;
self.handle.y = Math.min(self.height - self.handle.height, Math.max(y, 0));
self.updateVal();
}
function setBounds() {
bounds.x = self.x;
bounds.y = self.y + self.handle.y;
bounds.width = self.width;
bounds.height = self.handle.height;
}
return this;
}
});
External functions such as createEntity and hasPoint can be found here.
How would I make it work after clicking the slider and letting go after the first?
Add the event listeners if the user clicks on the handle as well, to enable dragging.
map.addEventListener('mousedown', function(event) {
if (hasPoint(bounds, mouse.x, mouse.y)) {
map.addEventListener('mousemove', onMouseMove);
map.addEventListener('mouseup', onMouseUp);
} else if (hasPoint(self, mouse.x, mouse.y)) {
map.addEventListener('mousemove', onMouseMove);
map.addEventListener('mouseup', onMouseUp);
var y = mouse.y - self.y;
self.handle.y = Math.min(self.height - self.handle.height, Math.max(y, 0));
self.updateVal();
}
});