My Amazon EC2 instance has been hacked, the index.php file on the attached volume was replaced to the attached code, and the screen display the attached image
I solved it quickly by replacing the index.php to the original one
My question is: how can I prevent similar attack in the future? i.e. what security step should I take to secure my: srv, volume, login, firewall, console, etc.
FYI this hack was a result of a Trojan in guiminer
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<!DOCTYPE html><html>
<link rel="SHORTCUT ICON" href="https://s-media-cache-ak0.pinimg.com/736x/96/32/00/963200f696520af71661e4587f48c95d.jpg">
<head>
<title>HACKED BY MAGIC_404</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}body,html{margin:0;padding:0;font:16px/1.4 Lato,sans-serif;color:#fefeff;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;font-family:Comic Sans MS}body{background:#080510;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1{font:2.75em Cinzel,serif;font-weight:400;letter-spacing:.35em;text-shadow:0 0 25px rgba(254,254,255,.85)}h2{font:1.45em Cinzel,serif;font-weight:400;letter-spacing:.5em;text-shadow:0 0 25px rgba(254,254,255,.85);text-transform:lowercase}[class^=letter]{-webkit-transition:opacity 3s ease;-moz-transition:opacity 3s ease;transition:opacity 3s ease}.letter-0{transition-delay:.2s}.letter-1{transition-delay:.4s}.letter-2{transition-delay:.6s}.letter-3{transition-delay:.8s}.letter-4{transition-delay:1s}.letter-5{transition-delay:1.2s}.letter-6{transition-delay:1.4s}.letter-7{transition-delay:1.6s}.letter-8{transition-delay:1.8s}.letter-9{transition-delay:2s}.letter-10{transition-delay:2.2s}.letter-11{transition-delay:2.4s}.letter-12{transition-delay:2.6s}.letter-13{transition-delay:2.8s}.letter-14{transition-delay:3s}h1,h2{visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}h1.transition-in,h2.transition-in{visibility:visible}h1 [class^=letter],h2 [class^=letter]{opacity:0}h1.transition-in [class^=letter],h2.transition-in [class^=letter]{opacity:1}#container{display:table;position:absolute;z-index:20;width:100%;height:100%;text-align:center;cursor:none}#container>div{display:table-cell;vertical-align:middle}#container p{position:absolute;width:100%;left:0;bottom:25px;font-size:.8em;letter-spacing:.1em;font-weight:300;color:#76747a;-webkit-font-smoothing:subpixel-antialiased;font-smoothing:subpixel-antialiased}#container p strong{color:#b3abc5}#container p span{font-size:.75em;padding:0 2px}#canvas{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;cursor:none}#stats{position:absolute;z-index:10;left:10px;top:10px}.dg.ac{z-index:100!important}.STYLE4{color:#FFF}
</style>
</head>
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
<div id="container">
<div><br><br><br><br>
</object>
<h1 id="h1">HACKED BY MAGIC_404</h1>
</br>
<h2 id="h2">T.I SNIPER</h2>
<h3 id="h3"><br></h3>
<h4 id="h4">Sorry admin your security is less secure, increase the security of your website and do not forget to increase faith also </h4>
<br><br><br><br><br><br><br><br>
<p class="style14" align="center"> <font color="#ffffff" face="courier new" size="3"> Family :</font><marquee scrolldelay="20" scrollamount="2" direction="left" behavior="scroll" width="50%">
<font color="#ff0000" face="Tahoma" size="3">HUMAN_CRAZY99|/Hookers|Wak-Lay|36015| Ustazah |/RzCyber48|MickeyMouse|DewaSEX|Mr.Q|MR.bla|C4pt.danzm! |P.E.K.K.404|Z0NK_|Mr_V1ru5 |Member Show-off Zone Sniper Cyber
</font></marquee><br></p><p align="center">
</div>
</div>
<canvas id="canvas"></canvas>
<script>
var Stats=function(){var e=Date.now(),t=e,i=0,n=1/0,r=0,s=0,o=1/0,a=0,l=0,h=0,c=document.createElement("div");c.id="stats",c.addEventListener("mousedown",function(e){e.preventDefault(),v(++h%2)},!1),c.style.cssText="width:80px;opacity:0.9;cursor:pointer";var u=document.createElement("div");u.id="fps",u.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002",c.appendChild(u);var d=document.createElement("div");d.id="fpsText",d.style.cssText="color:#0ff;font-family:Comic Sans MS;font-size:9px;font-weight:bold;line-height:15px",d.innerHTML="FPS",u.appendChild(d);var p=document.createElement("div");for(p.id="fpsGraph",p.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff",u.appendChild(p);74>p.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#113",p.appendChild(f)}var m=document.createElement("div");m.id="ms",m.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none",c.appendChild(m);var g=document.createElement("div");g.id="msText",g.style.cssText="color:#0f0;font-family:Comic Sans MS;font-size:9px;font-weight:bold;line-height:15px",g.innerHTML="MS",m.appendChild(g);var y=document.createElement("div");for(y.id="msGraph",y.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0",m.appendChild(y);74>y.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#131",y.appendChild(f)}var v=function(e){switch(h=e){case 0:u.style.display="block",m.style.display="none";break;case 1:u.style.display="none",m.style.display="block"}},b=function(e,t){var i=e.appendChild(e.firstChild);i.style.height=t+"px"};return{REVISION:11,domElement:c,setMode:v,begin:function(){e=Date.now()},end:function(){var h=Date.now();return i=h-e,n=Math.min(n,i),r=Math.max(r,i),g.textContent=i+" MS ("+n+"-"+r+")",b(y,Math.min(30,30-30*(i/200))),l++,h>t+1e3&&(s=Math.round(1e3*l/(h-t)),o=Math.min(o,s),a=Math.max(a,s),d.textContent=s+" FPS ("+o+"-"+a+")",b(p,Math.min(30,30-30*(s/100))),t=h,l=0),h},update:function(){e=this.end()}}};
</script>
<script>
;(function(window) {
var ctx,
hue,
logo,
form,
buffer,
target = {},
tendrils = [],
settings = {};
settings.debug = true;
settings.friction = 0.5;
settings.trails = 20;
settings.size = 50;
settings.dampening = 0.25;
settings.tension = 0.98;
Math.TWO_PI = Math.PI * 2;
// ========================================================================================
// Oscillator
// ----------------------------------------------------------------------------------------
function Oscillator(options) {
this.init(options || {});
}
Oscillator.prototype = (function() {
var value = 0;
return {
init: function(options) {
this.phase = options.phase || 0;
this.offset = options.offset || 0;
this.frequency = options.frequency || 0.001;
this.amplitude = options.amplitude || 1;
},
update: function() {
this.phase += this.frequency;
value = this.offset + Math.sin(this.phase) * this.amplitude;
return value;
},
value: function() {
return value;
}
};
})();
// ========================================================================================
// Tendril
// ----------------------------------------------------------------------------------------
function Tendril(options) {
this.init(options || {});
}
Tendril.prototype = (function() {
function Node() {
this.x = 0;
this.y = 0;
this.vy = 0;
this.vx = 0;
}
return {
init: function(options) {
this.spring = options.spring + (Math.random() * 0.1) - 0.05;
this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
this.nodes = [];
for(var i = 0, node; i < settings.size; i++) {
node = new Node();
node.x = target.x;
node.y = target.y;
this.nodes.push(node);
}
},
update: function() {
var spring = this.spring,
node = this.nodes[0];
node.vx += (target.x - node.x) * spring;
node.vy += (target.y - node.y) * spring;
for(var prev, i = 0, n = this.nodes.length; i < n; i++) {
node = this.nodes[i];
if(i > 0) {
prev = this.nodes[i - 1];
node.vx += (prev.x - node.x) * spring;
node.vy += (prev.y - node.y) * spring;
node.vx += prev.vx * settings.dampening;
node.vy += prev.vy * settings.dampening;
}
node.vx *= this.friction;
node.vy *= this.friction;
node.x += node.vx;
node.y += node.vy;
spring *= settings.tension;
}
},
draw: function() {
var x = this.nodes[0].x,
y = this.nodes[0].y,
a, b;
ctx.beginPath();
ctx.moveTo(x, y);
for(var i = 1, n = this.nodes.length - 2; i < n; i++) {
a = this.nodes[i];
b = this.nodes[i + 1];
x = (a.x + b.x) * 0.5;
y = (a.y + b.y) * 0.5;
ctx.quadraticCurveTo(a.x, a.y, x, y);
}
a = this.nodes[i];
b = this.nodes[i + 1];
ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
ctx.stroke();
ctx.closePath();
}
};
})();
// ----------------------------------------------------------------------------------------
function init(event) {
document.removeEventListener('mousemove', init);
document.removeEventListener('touchstart', init);
document.addEventListener('mousemove', mousemove);
document.addEventListener('touchmove', mousemove);
document.addEventListener('touchstart', touchstart);
mousemove(event);
reset();
loop();
}
function reset() {
tendrils = [];
for(var i = 0; i < settings.trails; i++) {
tendrils.push(new Tendril({
spring: 0.45 + 0.025 * (i / settings.trails)
}));
}
}
function loop() {
if(!ctx.running) return;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(8,5,16,0.4)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.globalCompositeOperation = 'lighter';
ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
ctx.lineWidth = 1;
if(ctx.frame % 60 == 0) {
console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
}
for(var i = 0, tendril; i < settings.trails; i++) {
tendril = tendrils[i];
tendril.update();
tendril.draw();
}
ctx.frame++;
ctx.stats.update();
requestAnimFrame(loop);
}
function resize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function start() {
if(!ctx.running) {
ctx.running = true;
loop();
}
}
function stop() {
ctx.running = false;
}
function mousemove(event) {
if(event.touches) {
target.x = event.touches[0].pageX;
target.y = event.touches[0].pageY;
} else {
target.x = event.clientX
target.y = event.clientY;
}
event.preventDefault();
}
function touchstart(event) {
if(event.touches.length == 1) {
target.x = event.touches[0].pageX;
target.y = event.touches[0].pageY;
}
}
function keyup(event) {
switch(event.keyCode) {
case 32:
save();
break;
default:
// console.log(event.keyCode);
}
}
function letters(id) {
var el = document.getElementById(id),
letters = el.innerHTML.replace('&', '&').split(''),
heading = '';
for(var i = 0, n = letters.length, letter; i < n; i++) {
letter = letters[i].replace('&', '&');
heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : ' ';
}
el.innerHTML = heading;
setTimeout(function() {
el.className = 'transition-in';
}, (Math.random() * 500) + 500);
}
function save() {
if(!buffer) {
buffer = document.createElement('canvas');
buffer.width = screen.availWidth;
buffer.height = screen.availHeight;
buffer.ctx = buffer.getContext('2d');
form = document.createElement('form');
form.method = 'post';
form.input = document.createElement('input');
form.input.type = 'hidden';
form.input.name = 'data';
form.appendChild(form.input);
document.body.appendChild(form);
}
buffer.ctx.fillStyle = 'rgba(8,5,16)';
buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);
buffer.ctx.drawImage(canvas,
Math.round(buffer.width / 2 - canvas.width / 2),
Math.round(buffer.height / 2 - canvas.height / 2)
);
buffer.ctx.drawImage(logo,
Math.round(buffer.width / 2 - logo.width / 4),
Math.round(buffer.height / 2 - logo.height / 4),
logo.width / 2,
logo.height / 2
);
window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);
// form.input.value = buffer.toDataURL().substr(22);
// form.submit();
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(fn) { window.setTimeout(fn, 1000 / 60) };
})();
window.onload = function() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.stats = new Stats();
ctx.running = true;
ctx.frame = 1;
logo = new Image();
logo.src = 'http://labs.nikrowell.com/lightsandmotion/ultraviolet/images/logo.png';
hue = new Oscillator({
phase: Math.random() * Math.TWO_PI,
amplitude: 85,
frequency: 0.0015,
offset: 285
});
letters('h1');
letters('h2');
document.addEventListener('mousemove', init);
document.addEventListener('touchstart', init);
document.body.addEventListener('orientationchange', resize);
window.addEventListener('resize', resize);
window.addEventListener('keyup', keyup);
window.addEventListener('focus', start);
window.addEventListener('blur', stop);
resize();
if(window.DEBUG) {
var gui = new dat.GUI();
// gui.add(settings, 'debug');
settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);
document.body.appendChild(ctx.stats.domElement);
}
};
})(window);
</script>
<embed src="https://www.youtube.com/v/Vx0kE5kBNxk&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="1" height="1"></embed>
</body>
</html>
You cannot trust your instance or anything on it now, even if you have "fixed" the first hint of intrusion.
Things you should do immediately:
Stop that instance and install a new one from scratch. The intruder could have changed system files, left themselves a backdoor, or done who knows what.
If you have any passwords, SSL certificates with keys, or API keys stored on the instance, those are compromised, and must be changed immediately.
Without knowing how you set up the original instance, it's impossible to say exactly how it was hacked, but you should ALWAYS do the following:
Make sure you keep your application versions (web server, php, sshd) up-to-date with the latest security patches.
Make sure you're following security best practices for your web server
Use a php security scanner regularly.
Do not open any ports to the world. If you're serving HTTP on a public website, it's generally better to put that behind an ELB.
Disable password logins for sshd. Use keys only.
I found the following https://www.youtube.com/watch?v=HXbDNPh0aTc
This is a prestashop hack caused by simpleslideshow, I removed this module completely.
Related
Working with this plugin. Demo here https://www.jqueryscript.net/demo/animated-lines-elements-bezier/
On this demo when you resize the page it redraws. When I use this locally it doesn't redraw and the reason seems to be the this.selector is undefined when I run locally so after it clears the svg's it can't recreate them. Anyone have any idea why this might be?
See // Bug: comment below. Is this.selector a special variable for jquery plugins because I don't see it defined anywhere here, but the demo works so not sure how.
(function ($) {
$.fn.extend({
bezier: function (options) {
var defaults = {
strokeColor: '#999',
strokeWidth: 2,
opacity: 1,
fill: 'none',
animate: true,
animationDirection: 'right',
animationDuration: 0.75
};
// Color wheel stuff
var color_wheel = [];
var frequency = .3;
for (var i = 0; i < 32; ++i) {
red = Math.sin(frequency * i + 0) * 127 + 128;
green = Math.sin(frequency * i + (2 * Math.PI / 3)) * 127 + 128;
blue = Math.sin(frequency * i + (4 * Math.PI / 3)) * 127 + 128;
color_wheel.push(RGB2Color(red, green, blue));
}
var color_index = 0;
function RGB2Color(r, g, b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1);
}
// Color wheel stuff
//override default options with user set options
var settings = $.extend(defaults, options);
var me = {};
me.init = function (initObj) {
if (initObj) {
$.each(initObj, function (index, value) {
settings[index] = value;
});
}
};
me.set = function (prop, val) {
settings[prop] = val;
};
me.on = function (el1, el2) {
var $el1 = $(el1);
var $el2 = $(el2);
if ($el1.length && $el2.length) {
var svgheight, p, svgleft, svgtop, svgwidth;
var el1pos = $(el1).offset();
var el2pos = $(el2).offset();
var el1H = $(el1).outerHeight();
var el1W = $(el1).outerWidth();
var el2H = $(el2).outerHeight();
var el2W = $(el2).outerWidth();
svgleft = Math.round(el1pos.left + el1W);
svgwidth = Math.round(el2pos.left - svgleft);
var curvinessFactor, cpt;
////Determine which is higher/lower
if ((el2pos.top + (el2H / 2)) <= (el1pos.top + (el1H / 2))) {
// console.log("low to high");
svgheight = Math.round((el1pos.top + el1H / 2) - (el2pos.top + el2H / 2));
svgtop = Math.round(el2pos.top + el2H / 2) - settings.strokeWidth;
cpt = Math.round(svgwidth * Math.min(svgheight / 300, 1));
p = "M0," + (svgheight + settings.strokeWidth) + " C" + cpt + "," + (svgheight + settings.strokeWidth) + " " + (svgwidth - cpt) + "," + settings.strokeWidth + " " + svgwidth + "," + settings.strokeWidth;
}
else {
// console.log("high to low");
svgheight = Math.round((el2pos.top + el2H / 2) - (el1pos.top + el1H / 2));
svgtop = Math.round(el1pos.top + el1H / 2) - settings.strokeWidth;
cpt = Math.round(svgwidth * Math.min(svgheight / 300, 1));
p = "M0," + settings.strokeWidth + " C" + cpt + ",0 " + (svgwidth - cpt) + "," + (svgheight + settings.strokeWidth) + " " + svgwidth + "," + (svgheight + settings.strokeWidth);
}
$ropebag = $('#ropebag').length ? $('#ropebag') : $('main').append($("<div id='ropebag' />")).find('#ropebag');
var svgnode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var newpath = document.createElementNS('http://www.w3.org/2000/svg', "path");
var color_to_use = (settings.strokeColor != 'rainbow') ? settings.strokeColor : color_wheel[color_index];
color_index = color_index + 1;
if (color_index == 32) {
color_index = 0;
}
newpath.setAttributeNS(null, "d", p);
newpath.setAttributeNS(null, "stroke", color_to_use);
newpath.setAttributeNS(null, "stroke-width", settings.strokeWidth);
newpath.setAttributeNS(null, "opacity", settings.opacity);
newpath.setAttributeNS(null, "fill", settings.fill);
svgnode.appendChild(newpath);
$(svgnode).css({
left: svgleft,
top: svgtop,
position: 'absolute',
width: svgwidth,
height: svgheight + settings.strokeWidth * 2,
minHeight: '20px'
});
$ropebag.append(svgnode);
if (settings.animate) {
var pl = newpath.getTotalLength();
// Set up the starting positions
newpath.style.strokeDasharray = pl + ' ' + pl;
if (settings.animationDirection == 'right') {
newpath.style.strokeDashoffset = pl;
}
else {
newpath.style.strokeDashoffset = -pl;
}
// IE sucks, dont expect this to work.
newpath.getBoundingClientRect();
newpath.style.transition = newpath.style.WebkitTransition = 'stroke-dashoffset ' + settings.animationDuration + 's ease-in-out';
newpath.style.strokeDashoffset = '0';
}
}
};
me.off = function () {
$("#ropebag").empty();
};
// Redraw upon resizing the window
var selector = this.selector;
$(window).resize(function () {
me.off();
// BUG: selector is undefined
console.log(selector);
$(selector).each(function () {
console.log("looping over eac comp");
var theID = this.id;
$("." + theID).each(function (i, e) {
var rand = Math.random() * 0.7 + 0.3;
me.set('animationDuration', rand);
me.on($("#" + theID), e);
console.log("Window resize" + theID);
});
});
});
// Loop through each parent and draw the lines connecting children
return this.each(function () {
var theID = this.id;
$("." + theID).each(function (i, e) {
var rand = Math.random() * 0.7 + 0.3;
me.set('animationDuration', rand);
me.on($("#" + theID), e);
});
});
}
});
})(jQuery);
I have been trying to figure out what I am doing wrong when calculation the position and size of the mask rectangle once the target image has been resized.
Below is the documentation from fabric JS:
clipPath :fabric.Object
a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas. If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center'
Type:
fabric.Object
Source:
fabric.js, line 12991
The code I have works perfectly when the image is not resized (scale 1:1 X & Y). In the code's function named rescaleMask I attempt to position the mask to a zero center X & Y and when I run my math manually on a piece of graph paper it appears the math is correct. Obviously there is a piece that I am unaware of that is causing the positioning to be off in different ways depending on the quadrant in which the crop is being performed. There is quite a bit of code here but it is important that the mask is created dynamically and not hard coded. The problem must be in the rescaleMask function so hopefully the rest of the code can be ignored.
I created a test image graph with numbered squares which I will crop by clicking the mask button, drawing a rectangle around one of the boxes with the mouse left button and then clicking the crop button. The problem occurs when you resize the image before creating the mask and cropping.
Here is the test image:
Here is a jsfiddle fabric Creating rect with a mouse dynamic js 2.4.1 sent as fix #4
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="mask">Mask</button>
<button id="crop">Crop</button>
JS
var lastSelectedPicture = null;
var isInsertingCropRectangle = false;
var canvas = new fabric.Canvas('c', {
selection: true,
preserveObjectStacking: true,
height: 700,
width: 800
});
var crop_rect, isDown, origX, origY, mask, target;
var done = false;
var src = "https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";
fabric.Image.fromURL(src, function(img) {
img.selectable = true;
img.id = 'target';
img.top = 30;
img.left = 30;
canvas.add(img);
});
canvas.on('object:added', function(e) {
target = null;
mask = null;
canvas.forEachObject(function(obj) {
//alert(obj.get('id'));
var id = obj.get('id');
if (id === 'target') {
target = obj;
canvas.setActiveObject(obj);
}
if (id === 'mask') {
//alert(done);
//alert('mask');
mask = obj;
}
});
});
canvas.on('object:modified', function(e) {
e.target.setCoords();
canvas.renderAll();
});
//////////////////////////////////////////////////////////
// MASK
//////////////////////////////////////////////////////////
document.getElementById("mask").addEventListener("click", function() {
isInsertingCropRectangle = true;
canvas.discardActiveObject();
lastSelectedPicture.selectable = false;
lastSelectedPicture.setCoords();
lastSelectedPicture.dirty = true;
canvas.renderAll();
canvas.discardActiveObject();
isInsertingCropRectangle = true;
});
//////////////////////////////////////////////////////////
// CROP
//////////////////////////////////////////////////////////
document.getElementById("crop").addEventListener("click", function() {
if (target !== null && mask !== null) {
target.setCoords();
// Re-scale mask
mask = rescaleMask(target, mask);
mask.setCoords();
// Do the crop
target.clipPath = mask;
target.dirty=true;
canvas.setActiveObject(target);
canvas.bringToFront(target);
target.selectable = true;
canvas.remove(mask);
canvas.renderAll();
console.log(target);
}
});
//////////////////////////////////////////////////////////
// RE-SCALE MASK FOR CROPPING
// P R O B L E M I N T H I S F U N C T I O N
//////////////////////////////////////////////////////////
function rescaleMask(target, mask){
mask.scaleX = 1;
mask.scaleY = 1;
var targetCenterX = target.width * target.scaleX / 2;
var targetCenterY = target.height * target.scaleY / 2;
var maskOverlapX = mask.left - target.left;
var maskOverlapY = mask.top - target.top;
var centerBasedX = maskOverlapX - targetCenterX;
var centerBasedY = maskOverlapY - targetCenterY;
if( maskOverlapX >= targetCenterX){
centerBasedX = maskOverlapX - targetCenterX;
}
else{
centerBasedX = -(targetCenterX) + maskOverlapX;
}
if( maskOverlapY >= targetCenterY){
centerBasedY = maskOverlapY - targetCenterY;
}
else{
centerBasedY = -(targetCenterY) + maskOverlapY;
}
console.log('targetleft = '+target.left);
console.log('targettop = '+target.top);
console.log('targetCenterX = '+targetCenterX);
console.log('targetCenterY = '+targetCenterY);
console.log('maskleft = '+mask.left);
console.log('masktop = '+mask.top);
console.log('maskOverlapX = '+maskOverlapX);
console.log('maskOverlapY = '+maskOverlapY);
console.log('centerBasedX = '+centerBasedX);
console.log('centerBasedY = '+centerBasedY);
mask.left = centerBasedX;
mask.top = centerBasedY;
mask.originX = 'left';
mask.originY = 'top';
mask.setCoords();
mask.dirty=true;
canvas.renderAll();
//var newMask = mask;
return(mask);
}
canvas.on('mouse:down', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse down done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
crop_rect = new fabric.Rect({
left: origX,
top: origY,
width: pointer.x - origX,
height: pointer.y - origY,
opacity: .3,
transparentCorners: false,
selectable: true,
id: 'mask'
});
canvas.add(crop_rect);
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:move', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse move done = '+done);
if (done) {
canvas.renderAll();
return;
}
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
crop_rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
crop_rect.set({
top: Math.abs(pointer.y)
});
}
crop_rect.set({
width: Math.abs(origX - pointer.x)
});
crop_rect.set({
height: Math.abs(origY - pointer.y)
});
crop_rect.setCoords();
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:up', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse up done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = false;
crop_rect.set({
selectable: true
});
done = true;
}
else{
}
});
canvas.on('selection:created', function(event) {
console.log("canvas.on('selection:created'");
selectionChanged(event);
});
canvas.on('selection:updated', function(event) {
console.log("canvas.on('selection:updated'");
selectionChanged(event);
});
function selectionChanged(event){
console.log("selectionChanged");
console.log("selectionChanged type = "+event.target.type);
switch(event.target.type) {
case 'textbox':
break;
case 'image':
lastSelectedPicture = event.target;
break;
case 'rect':
break;
case 'group':
break;
default:
break;
}
}
You need to take in consideration the target.scaleX and target.scaleY for mask.
var lastSelectedPicture = null;
var isInsertingCropRectangle = false;
canvas = new fabric.Canvas('c', {
selection: true,
preserveObjectStacking: true,
height: 700,
width: 800
});
var crop_rect, isDown, origX, origY, mask, target;
var done = false;
var src = "https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";
fabric.Image.fromURL(src, function(img) {
img.selectable = true;
img.id = 'target';
img.top = 30;
img.left = 30;
canvas.add(img);
});
canvas.on('object:added', function(e) {
target = null;
mask = null;
canvas.forEachObject(function(obj) {
//alert(obj.get('id'));
var id = obj.get('id');
if (id === 'target') {
target = obj;
canvas.setActiveObject(obj);
}
if (id === 'mask') {
//alert(done);
//alert('mask');
mask = obj;
}
});
});
canvas.on('object:modified', function(e) {
e.target.setCoords();
canvas.renderAll();
});
//////////////////////////////////////////////////////////
// MASK
//////////////////////////////////////////////////////////
document.getElementById("mask").addEventListener("click", function() {
isInsertingCropRectangle = true;
canvas.discardActiveObject();
lastSelectedPicture.selectable = false;
lastSelectedPicture.setCoords();
lastSelectedPicture.dirty = true;
canvas.renderAll();
canvas.discardActiveObject();
isInsertingCropRectangle = true;
});
//////////////////////////////////////////////////////////
// CROP
//////////////////////////////////////////////////////////
document.getElementById("crop").addEventListener("click", function() {
if (target !== null && mask !== null) {
target.setCoords();
// Re-scale mask
mask = rescaleMask(target, mask);
mask.setCoords();
// Do the crop
target.clipPath = mask;
target.dirty=true;
canvas.setActiveObject(target);
canvas.bringToFront(target);
target.selectable = true;
canvas.remove(mask);
canvas.renderAll();
console.log(target);
}
});
//////////////////////////////////////////////////////////
// RE-SCALE MASK FOR CROPPING
// P R O B L E M I N T H I S F U N C T I O N
//////////////////////////////////////////////////////////
function rescaleMask(target, mask){
mask.scaleX = 1;
mask.scaleY = 1;
mask.scaleX/=target.scaleX;
mask.scaleY/=target.scaleY;
var targetCenterX = target.width * target.scaleX / 2;
var targetCenterY = target.height * target.scaleY / 2;
var maskOverlapX = mask.left - target.left;
var maskOverlapY = mask.top - target.top;
var centerBasedX = maskOverlapX - targetCenterX;
var centerBasedY = maskOverlapY - targetCenterY;
if( maskOverlapX >= targetCenterX){
centerBasedX = (maskOverlapX - targetCenterX)/target.scaleX;
}
else{
centerBasedX = (-(targetCenterX) + maskOverlapX)/target.scaleX;
}
if( maskOverlapY >= targetCenterY){
centerBasedY = (maskOverlapY - targetCenterY)/target.scaleY;
}
else{
centerBasedY = (-(targetCenterY) + maskOverlapY)/target.scaleY;
}
console.log('targetleft = '+target.left);
console.log('targettop = '+target.top);
console.log('targetCenterX = '+targetCenterX);
console.log('targetCenterY = '+targetCenterY);
console.log('maskleft = '+mask.left);
console.log('masktop = '+mask.top);
console.log('maskOverlapX = '+maskOverlapX);
console.log('maskOverlapY = '+maskOverlapY);
console.log('centerBasedX = '+centerBasedX);
console.log('centerBasedY = '+centerBasedY);
mask.left = centerBasedX;
mask.top = centerBasedY;
mask.originX = 'left';
mask.originY = 'top';
mask.setCoords();
mask.dirty=true;
canvas.renderAll();
//var newMask = mask;
return(mask);
}
canvas.on('mouse:down', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse down done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
crop_rect = new fabric.Rect({
left: origX,
top: origY,
width: pointer.x - origX,
height: pointer.y - origY,
opacity: .3,
transparentCorners: false,
selectable: true,
id: 'mask'
});
canvas.add(crop_rect);
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:move', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse move done = '+done);
if (done) {
canvas.renderAll();
return;
}
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
crop_rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
crop_rect.set({
top: Math.abs(pointer.y)
});
}
crop_rect.set({
width: Math.abs(origX - pointer.x)
});
crop_rect.set({
height: Math.abs(origY - pointer.y)
});
crop_rect.setCoords();
canvas.renderAll();
}
else{
}
});
canvas.on('mouse:up', function(o) {
if( isInsertingCropRectangle == true ){
console.log('mouse up done = '+done);
if (done) {
canvas.renderAll();
return;
}
isDown = false;
crop_rect.set({
selectable: true
});
done = true;
}
else{
}
});
canvas.on('selection:created', function(event) {
console.log("canvas.on('selection:created'");
selectionChanged(event);
});
canvas.on('selection:updated', function(event) {
console.log("canvas.on('selection:updated'");
selectionChanged(event);
});
function selectionChanged(event){
console.log("selectionChanged");
console.log("selectionChanged type = "+event.target.type);
switch(event.target.type) {
case 'textbox':
break;
case 'image':
lastSelectedPicture = event.target;
break;
case 'rect':
break;
case 'group':
break;
default:
break;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="mask">Mask</button>
<button id="crop">Crop</button>
I tried this to search dom elements and display matching rows,but it doesnt work in some columns like duration and bytes.It works for elements which repeat for example if there are 507 value twice in bytes it works but dont work for 411. I am reading file contents and tabulating it, then need to sort rows when header is clicked and apply a filter.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
margin: auto;
empty-cells: hide;
}
table th
{
background-color: GREY;
color: #333;
font-weight: bold;
cursor:pointer;
}
table th, table td
{
padding: 5px;
border: 1px solid #ccc;
border-color: #ccc;
}
#sear
{
background-color: black;
height:30px;
width:105%;
align : center;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
tr:hover {
background-color: silver;
}
</style>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="sear" align = center>
<input type="text" id="filter" placeholder="Search" title="Type a name" >
</div>
<div id="demo" align = center >
</div>
<script>
window.onload = function() {
var demo = document.getElementById("demo");
if(window.XMLHttpRequest){
var xhttp = new XMLHttpRequest();
}
else{
var xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200 || this.status == 0) {
var responseText= xhttp.responseText;
//alert(responseText);
// console.log(this.responseText);
document.getElementById("filter").onkeyup = filterRows;
var ROW_DELIMITER = "\n", CELL_DELIMITER = " ";
var tableObj = { headers: ["Time", "Duration", "Client address", "Result codes", "Bytes", "request method", "URL", "user",
"Hierarchy code", "Type"],
rows: []
};
}
function convert(responseText) {
tableObj.rows = convertToArray(responseText);
buildTable(tableObj.headers, tableObj.rows);
};
function convertToArray(text) {
return text.split(ROW_DELIMITER).map(function(row) {
return row.split(CELL_DELIMITER);
});
}
function filterRows() {
var input = this;
var rows = tableObj.rows.filter(function(row) {
var matches = row.filter(function(cell) {
return cell.toUpperCase().indexOf(input.value.toUpperCase()) > -1;
});
return matches.length > 0;
});
buildTable(tableObj.headers, rows);
}
function sortRows() {
var index = this.dataset.index;
tableObj.rows.sort(function(rowA, rowB) {
var textA = rowA[index].toUpperCase(), textB = rowB[index].toUpperCase();
if (textA < textB) {
return -1;
}
if (textA > textB) {
return 1;
}
return 0;
});
buildTable(tableObj.headers, tableObj.rows);
}
function buildTable(headers, rows) {
var table = document.createElement('table');
var tr = document.createElement('tr');
table.appendChild(tr);
for (var i = 0; i < headers.length; i++) {
th = document.createElement('th');
tr.appendChild(th);
th.innerHTML = headers[i];
th.onclick = sortRows;
th.dataset.index = i;
}
for (var j = 0; j < rows.length-1; j++) {
tr = document.createElement('tr');
table.appendChild(tr);
tr.dataset.index = j;
for (var k = 0; k < rows[j].length ; k++) {
var td = document.createElement('td');
/* if(k==0)
{
var d = new Date( rows[j][k]* 1000),
yyyy = d.getFullYear(),
mm = ('0' + (d.getMonth() + 1)).slice(-2),
dd = ('0' + d.getDate()).slice(-2),
hh = d.getHours(),
h = hh,
min = ('0' + d.getMinutes()).slice(-2),
ampm = 'AM',
time;
if (hh > 12) {
h = hh - 12;
ampm = 'PM';
} else if (hh === 12) {
h = 12;
ampm = 'PM';
} else if (hh == 0) {
h = 12;
}
rows[j][k] = dd + '.' + mm + '.' + yyyy + ', ' + h + ':' + min + ' ' + ampm;
}
*/
tr.appendChild(td);
td.innerHTML = rows[j][k];
td.dataset.index = k;
}
}
demo.innerHTML = '';
demo.appendChild(table);
}
convert(responseText);
};
xhttp.open("GET", "sample.txt", true);
xhttp.send(null);
};
</script>
</body>
</html>
Here is the updated code:
window.onload = function() {
var demo = document.getElementById("demo");
if (window.XMLHttpRequest) {
var xhttp = new XMLHttpRequest();
} else {
var xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200 || this.status == 0) {
var responseText = xhttp.responseText;
console.log(this.responseText);
document.getElementById("filter").onkeyup = filterRows;
var ROW_DELIMITER = "\n",
CELL_DELIMITER = " ";
var tableObj = {
headers: ["Time", "Duration", "Client address", "Result codes", "Bytes", "request method", "URL", "user", "Hierarchy code", "Type"],
rows: []
};
}
function convert(responseText) {
if(responseText!='' && typeof responseText != 'undefined'){
tableObj.rows = convertToArray(responseText);
buildTable(tableObj.headers, tableObj.rows);
}
};
function convertToArray(text) {
return text.split(ROW_DELIMITER).map(function(row) {
return row.split(CELL_DELIMITER);
});
}
function filterRows() {
var input = this;
var rows = tableObj.rows.filter(function(row) {
var matches = row.filter(function(cell) {
//console.log(cell.toUpperCase())
// console.log(input.value.toUpperCase())
// console.log(cell.toUpperCase().indexOf(input.value.toUpperCase()))
return cell.toUpperCase().indexOf(input.value.toUpperCase()) > -1;
});
return matches.length > 0;
});
buildTable(tableObj.headers, rows);
}
function sortRows() {
var index = this.dataset.index;
tableObj.rows.sort(function(rowA, rowB) {
var textA = rowA[index].toUpperCase(),
textB = rowB[index].toUpperCase();
if (textA < textB) {
return -1;
}
if (textA > textB) {
return 1;
}
return 0;
});
buildTable(tableObj.headers, tableObj.rows);
}
function buildTable(headers, rows) {
var table = document.createElement('table');
var tr = document.createElement('tr');
table.appendChild(tr);
for (var i = 0; i < headers.length; i++) {
th = document.createElement('th');
tr.appendChild(th);
th.innerHTML = headers[i];
th.onclick = sortRows;
th.dataset.index = i;
}
for (var j = 0; j <= rows.length - 1; j++) {
tr = document.createElement('tr');
table.appendChild(tr);
tr.dataset.index = j;
for (var k = 0; k < rows[j].length; k++) {
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = rows[j][k];
td.dataset.index = k;
}
}
demo.innerHTML = '';
demo.appendChild(table);
}
convert(responseText);
};
xhttp.open("GET", "sample.txt", true);
xhttp.send(null);
};
I'm trying to create an map with the leaflet-simple-csv-master (i'm a beginner). It's really nice and i'd like to show different icons with my types (for exemple 1 icon for schools, one for administrations,...). I succed to show my different icons when i have the map but when i click to the filter, my icons disappear. In fact it doesn't work because it do not recognize my variable when i use the filter and i can read that my img is no more logos/type1.png but logos/undefined.png.
This is my all code.
var basemap = new L.TileLayer(baseUrl, {maxZoom: 17, attribution: baseAttribution, subdomains: subdomains, opacity: opacity});
var center = new L.LatLng(0, 0);
var map = new L.Map('map', {center: center, zoom: 2, maxZoom: maxZoom, layers: [basemap]});
var popupOpts = {
autoPanPadding: new L.Point(5, 50),
autoPan: true
};
var points = L.geoCsv (null, {
firstLineTitles: true,
fieldSeparator: fieldSeparator,
onEachFeature: function (feature, layer) {
var popup = '<div class="popup-content"><table class="table table-striped table-condensed">';
for (var clave in feature.properties) {
var title = points.getPropertyTitle(clave).strip();
var attr = feature.properties[clave];
if (title == labelColumn) {
layer.bindLabel(feature.properties[clave], {className: 'map-label'});
}
if (attr.indexOf('http') === 0) {
attr = '<a target="_blank" href="' + attr + '">'+ attr + '</a>';
}
if (attr) {
popup += '<tr><th>'+title+'</th><td>'+ attr +'</td></tr>';
}
}
popup += "</table></popup-content>";
layer.bindPopup(popup, popupOpts);
},
pointToLayer: function (feature, latlng) {
var logo = feature.properties['type'];
return L.marker(latlng, {
icon:L.icon({
iconUrl: 'logos/'+logo+'.png',
shadowUrl: 'marker-shadow.png',
iconSize: [25,41],
shadowSize: [41, 41],
shadowAnchor: [13, 20]
})
});
},
filter: function(feature, layer) {
total += 1;
if (!filterString) {
hits += 1;
return true;
}
var hit = false;
var lowerFilterString = filterString.toLowerCase().strip();
$.each(feature.properties, function(k, v) {
var value = v.toLowerCase();
if (value.indexOf(lowerFilterString) !== -1) {
hit = true;
hits += 1;
return false;
}
});
return hit;
}
});
var hits = 0;
var total = 0;
var filterString;
var markers = new L.MarkerClusterGroup();
var dataCsv;
var addCsvMarkers = function() {
hits = 0;
total = 0;
filterString = document.getElementById('filter-string').value;
if (filterString) {
$("#clear").fadeIn();
} else {
$("#clear").fadeOut();
}
map.removeLayer(markers);
points.clearLayers();
markers = new L.MarkerClusterGroup(clusterOptions);
points.addData(dataCsv);
markers.addLayer(points);
map.addLayer(markers);
try {
var bounds = markers.getBounds();
if (bounds) {
map.fitBounds(bounds);
}
} catch(err) {
// pass
}
if (total > 0) {
$('#search-results').html("Showing " + hits + " of " + total);
}
return false;
};
var typeAheadSource = [];
function ArrayToSet(a) {
var temp = {};
for (var i = 0; i < a.length; i++)
temp[a[i]] = true;
var r = [];
for (var k in temp)
r.push(k);
return r;
}
function populateTypeAhead(csv, delimiter) {
var lines = csv.split("\n");
for (var i = lines.length - 1; i >= 1; i--) {
var items = lines[i].split(delimiter);
for (var j = items.length - 1; j >= 0; j--) {
var item = items[j].strip();
item = item.replace(/"/g,'');
if (item.indexOf("http") !== 0 && isNaN(parseFloat(item))) {
typeAheadSource.push(item);
var words = item.split(/\W+/);
for (var k = words.length - 1; k >= 0; k--) {
typeAheadSource.push(words[k]);
}
}
}
}
}
if(typeof(String.prototype.strip) === "undefined") {
String.prototype.strip = function() {
return String(this).replace(/^\s+|\s+$/g, '');
};
}
map.addLayer(markers);
$(document).ready( function() {
$.ajax ({
type:'GET',
dataType:'text',
url: dataUrl,
contentType: "text/csv; charset=utf-8",
error: function() {
alert('Error retrieving csv file');
},
success: function(csv) {
dataCsv = csv;
populateTypeAhead(csv, fieldSeparator);
typeAheadSource = ArrayToSet(typeAheadSource);
$('#filter-string').typeahead({source: typeAheadSource});
addCsvMarkers();
}
});
$("#clear").click(function(evt){
evt.preventDefault();
$("#filter-string").val("").focus();
addCsvMarkers();
});
});
I'm rendering a wheel in a WebGL canvas using mrdoob's THREE.js.
I want the wheel to
Spin around it's center
Be draggable by mouse or touch interaction
Slow down by applying fake friction
Snap to the center of a wedge whenever the rotation speed reaches a certain threshold.
You may think of the behaviour of the wheel as that of a lottery wheel.
So far I have achieved points 1-3. This is my code:
'use strict';
var WIDTH = 1080,
HEIGHT = 1080;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
scene.add(camera);
camera.position.z = 300;
// Create renderer
var container = document.querySelector('#test');
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0x000000, 0);
container.appendChild(renderer.domElement);
// Create objects
var wheelMaterial = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('wheel.png'),
depthWrite: false,
alphaTest: 0.5
});
wheelMaterial.overdraw = true;
var wheel = new THREE.Mesh(
new THREE.PlaneGeometry(240, 240),
wheelMaterial);
scene.add(wheel);
// Mouse interaction
var isDragging = false;
var lastMouseCoords = null;
var mouseCoords = null;
container.addEventListener('mousedown', onDragStart, false);
container.addEventListener('touchstart', onDragStart, false);
container.addEventListener('mouseup', onDragEnd, false);
container.addEventListener('mouseout', onDragEnd, false);
container.addEventListener('touchend', onDragEnd, false);
container.addEventListener('mousemove', onMouseMove, false);
container.addEventListener('touchmove', onMouseMove, false);
function onDragStart(e) {
isDragging = true;
console.log('Dragging', e);
mouseCoords = pageCoordsToCanvasCoords(e);
rotationHistory = [];
}
function onDragEnd(e) {
isDragging = false;
lastMouseCoords = null;
mouseCoords = null;
console.log('Drag end');
}
function onMouseMove(e) {
e.preventDefault();
mouseCoords = pageCoordsToCanvasCoords(e);
}
// Utility functions
function pageCoordsToCanvasCoords(e) {
var canvasX;
var canvasY;
if ('touches' in e && e.touches.length > 0) {
canvasX = e.touches[0].pageX;
canvasY = e.touches[0].pageY;
} else {
canvasX = e.pageX
canvasY = e.pageY
}
canvasX -= e.target.offsetLeft;
canvasY -= e.target.offsetTop;
console.log(canvasX, canvasY);
return {
x: canvasX,
y: canvasY
};
}
function mouseCoordsToRotation(x, y) {
var origoX = WIDTH / 2.0,
origoY = HEIGHT / 2.0;
x = x - origoX;
y = y - origoY;
var atan = Math.atan2(x, y);
return atan;
}
function getMeanVelocity(history) {
if (history.length <= 1) {
return 0;
}
var movements = [];
var startTime = history[0].time;
var totalTimeElapsed = 0;
// Start from the second item in deltaRadians
for (var i = 1; i < history.length; i++) {
var item = history[i];
var movement = item.deltaRad;
movements.push(item.deltaRad);
var movementTimeDelta = item.time - startTime - totalTimeElapsed;
if (movementTimeDelta < 0) {
console.error('movementTimeDelta for history entry #' +
i + ' has travelled back in time somehow.');
}
totalTimeElapsed += movementTimeDelta;
}
var sum = movements.reduce(function (a, b) {
return a + b;
});
return sum / totalTimeElapsed;
}
function applyFakeFriction(velocity, time) {
/*
var currentRotation = wheel.rotation.z;
var nearestBorder = 0;
var nearestBorderDistance = 100;
for (var i = 0; i < PARTITIONS; i++) {
var partition = PARTITION_ARC * i - PARTITION_ARC * PARTITIONS / 2;
var distance = currentRotation - partition;
if (distance < 0) {
distance /= -1;
}
if (distance < nearestBorderDistance) {
console.log('distance is less than nearestBorderDistance')
nearestBorder = partition;
nearestBorderDistance = distance;
if (nearestBorderDistance < 0) {
nearestBorderDistance /= -1;
}
}
}
console.log('nearestBorderDistance: ', nearestBorderDistance);
*/
for (var i = 0; i < time; i++) {
velocity -= WHEEL_FRICTION; // * (nearestBorderDistance * BORDER_FRICTION);
}
return velocity;
}
var rotation = 1;
function snap() {
isSnapping = true;
/* Disabled, this the issue I'm asking about in the post
var update = function () {
cube.position.rotation = current.rotation;
}
var current = {
rotation: rotation
};
TWEEN.removeAll();
var easing = TWEEN.Easing['Elastic']['EaseInOut'];
var tweenHead = neww TWEEN.Tween(current)
.to({rotation: rotation})
.easing(easing)
.onUpdate(update);
tweenHead.start();
*/
}
var rotationHistory = []
var ROTATION_HISTORY_MAX_LENGTH = 5;
var WHEEL_FRICTION = 0.000001;
var BORDER_FRICTION = 2;
var PARTITIONS = 12;
var PARTITION_ARC = 1 * Math.PI / (PARTITIONS / 2); // The width of each section
var wheelVelocity = 0.1;
var wheelSlowDownVelocity = 0;
var lastWheelRotationTime;
var isSnapping = false;
// Render
function tick() {
// Rotate wheel
var currentTime = (new Date).getTime();
if (lastMouseCoords && isDragging) {
// Reset the velocity for the slowdown
wheelSlowDownVelocity = 0;
// Get the delta rotation since last mouse coordinates
var deltaRadians = mouseCoordsToRotation(mouseCoords.x, mouseCoords.y)
- mouseCoordsToRotation(lastMouseCoords.x, lastMouseCoords.y);
// Set the wheel rotation
wheel.rotation.z += deltaRadians;
// Save the rotation in the history and remove any excessive elements
rotationHistory.push({
time: currentTime,
deltaRad: deltaRadians
});
while (rotationHistory.length > ROTATION_HISTORY_MAX_LENGTH) {
rotationHistory.shift();
}
}
if (isDragging) {
lastMouseCoords = mouseCoords;
}
// Continue rotation of the released wheel
if (!isDragging && !lastMouseCoords && lastWheelRotationTime) {
var delta = currentTime - lastWheelRotationTime;
if (wheelSlowDownVelocity == 0) {
var meanVelocityOverTime = getMeanVelocity(rotationHistory);
wheelSlowDownVelocity = meanVelocityOverTime;
} else {
var currentIsNegative = wheelSlowDownVelocity < 0 ? true : false;
var currentVelocity = wheelSlowDownVelocity;
if (currentIsNegative) {
currentVelocity /= -1;
}
console.log('Current velocity: ', currentVelocity);
console.log('delta: ', delta);
var newVelocity = applyFakeFriction(currentVelocity,
delta);
console.log('New velocity: ', newVelocity);
if (newVelocity < 0) {
wheelSlowDownVelocity = 0;
rotationHistory = [];
} else {
if (currentIsNegative) {
// Revert to old polarity
newVelocity /= -1;
}
wheelSlowDownVelocity = newVelocity;
}
}
wheel.rotation.z += wheelSlowDownVelocity * delta;
}
while (wheel.rotation.z > 2 * Math.PI) {
console.log('Correcting rotation: ', wheel.rotation.z);
wheel.rotation.z -= 2 * Math.PI;
}
while (wheel.rotation.z < - (2 * Math.PI)) {
console.log('Correcting rotation: ', wheel.rotation.z);
wheel.rotation.z += 2 * Math.PI;
}
// Update the history record
lastWheelRotationTime = currentTime;
// Render scene and attach render callback to next animation frame.
renderer.render(scene, camera);
window.requestAnimationFrame(tick);
}
tick();
I have the complete code, minus wheel.png over at https://gist.github.com/joar/5747498.
I have been searching for examples of this behaviour but this far I haven't found any.
Note to editors. Please do not change the tags of this post. tween.js != TweenJS.
I have solved the issue.
'use strict';
function Wheel (element, options) {
var self = this;
// Variable initialization
var WIDTH = options.width;
var HEIGHT = options.height;
if (!options.image) {
throw new Error('Image argument missing');
}
var image = options.image;
var showStats = options.showStats || options.stats;
// Core variables
var stats;
var wheel;
var domElement;
var scene;
var camera;
var renderer;
var rotationHistory;
var input;
var animate;
var run = false;
var ROTATION_HISTORY_MAX_LENGTH = 5;
switch (typeof element) {
case 'string':
domElement = document.querySelector(element);
break;
default:
if ('className' in element) {
domElement = element;
} else {
throw new Error('Invalid element: ', element);
}
}
if (typeof element == 'undefined') {
throw new Error('Invalid element.')
}
/* Initializes the WebGL canvas with the wheel plane */
function setupScene() {
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
scene = new THREE.Scene();
scene.add(camera);
camera.position.z = 300;
// Create renderer
var container = domElement;
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH * 2, HEIGHT * 2);
renderer.setClearColor(0x000000, 0);
// Create objects
var wheelMaterial = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(image),
depthWrite: false,
alphaTest: 0.5
});
wheelMaterial.overdraw = true;
wheel = new THREE.Mesh(
new THREE.PlaneGeometry(245, 245),
wheelMaterial);
scene.add(wheel);
container.appendChild(renderer.domElement);
}
function setupStats() {
// Init stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
}
function setup() {
setupScene();
if (showStats) {
setupStats();
}
}
setup();
// The tick function
function update() {
animate.update(); // Process interactions
self.renderer.render(self.scene, self.camera);
if (showStats) {
self.stats.update();
}
if (run) {
window.requestAnimationFrame(update);
}
}
animate = new Animate();
// Start and run the wheel every animationframe
function start() {
self.input = input = new Input(); // Start capturing input
run = true;
update();
}
/**
* Animate the wheel
*/
function Animate() {
var self = this;
self.velocity = 0;
var velocityPositive = 0;
self.friction = 0.001;
self.snapThreshold = 0.03;
self.isSnapping = false;
var lastAnimationTime;
self.tween;
var rotationHistory = [];
var PARTITIONS = 12;
var PARTITION_ARC = 1 * Math.PI / (PARTITIONS / 2); // The width of each section
function update() {
var currentTime = (new Date).getTime();
velocityPositive = self.velocity;
if (velocityPositive < 0) {
velocityPositive /= -1;
}
if (!self.isSnapping
&& !input.isDragging
&& velocityPositive < self.snapThreshold
&& velocityPositive > 0
&& lastAnimationTime) {
rotationHistory = [];
snap();
}
if (input.isDragging) {
self.isSnapping = false;
TWEEN.removeAll();
}
if (!self.isSnapping) {
/**
* If the mouse is dragging the wheel
*/
if (input.lastMouseCoords && input.isDragging && !input.isSnapping) {
// Reset the velocity for the slowdown
self.velocity = 0;
// Get the delta rotation since last mouse coordinates
var deltaRadians = input.mouseCoordsToRadian(
input.mouseCoords.x, input.mouseCoords.y)
- input.mouseCoordsToRadian(
input.lastMouseCoords.x,
input.lastMouseCoords.y);
// Set the wheel rotation
wheel.rotation.z += deltaRadians;
// Save the rotation in the history and remove any excessive elements
rotationHistory.push({
time: currentTime,
deltaRad: deltaRadians
});
while (rotationHistory.length > ROTATION_HISTORY_MAX_LENGTH) {
rotationHistory.shift();
}
}
if (input.isDragging) {
input.lastMouseCoords = input.mouseCoords;
}
// Continue rotation of the released wheel
if (!input.isDragging
&& !input.lastMouseCoords
&& lastAnimationTime
&& !self.isSnapping) {
var delta = currentTime - lastAnimationTime;
if (self.velocity == 0) {
var meanVelocityOverTime = getMeanVelocity(rotationHistory);
self.velocity = meanVelocityOverTime;
} else if (!self.isSnapping && !self.isDragging) {
var currentIsNegative = self.velocity < 0 ? true : false;
var currentVelocity = self.velocity;
if (currentIsNegative) {
currentVelocity /= -1;
}
var newVelocity = applyFakeFriction(currentVelocity,
delta);
if (newVelocity < 0) {
self.velocity = 0;
rotationHistory = [];
} else {
if (currentIsNegative) {
// Revert to old polarity
newVelocity /= -1;
}
self.velocity = newVelocity;
}
}
wheel.rotation.z += self.velocity * delta;
}
if (!self.isSnapping) {
while (wheel.rotation.z > 2 * Math.PI) {
wheel.rotation.z -= 2 * Math.PI;
}
while (wheel.rotation.z < - (2 * Math.PI)) {
wheel.rotation.z += 2 * Math.PI;
}
}
}
// Update snap tween
TWEEN.update();
// Update the history record
lastAnimationTime = currentTime;
}
function applyFakeFriction(velocity, time) {
/*
var currentRotation = wheel.rotation.z;
var nearestBorder = 0;
var nearestBorderDistance = 100;
for (var i = 0; i < PARTITIONS; i++) {
var partition = PARTITION_ARC * i - PARTITION_ARC * PARTITIONS / 2;
var distance = currentRotation - partition;
if (distance < 0) {
distance /= -1;
}
if (distance < nearestBorderDistance) {
console.log('distance is less than nearestBorderDistance')
nearestBorder = partition;
nearestBorderDistance = distance;
if (nearestBorderDistance < 0) {
nearestBorderDistance /= -1;
}
}
}
console.log('nearestBorderDistance: ', nearestBorderDistance);
*/
for (var i = 0; i < time; i++) {
velocity -= self.friction; // * (10000 * wheelSlowDownVelocityPositive); // * (nearestBorderDistance * BORDER_FRICTION);
}
return velocity;
}
function getNearestWedge() {
var currentRotation = wheel.rotation.z;
var nearestBorder = 0;
var nearestBorderDistance = 100;
for (var i = 0; i < PARTITIONS; i++) {
var partition = PARTITION_ARC * i - PARTITION_ARC * PARTITIONS / 2;
var distance = currentRotation - partition;
if (distance < 0) {
distance /= -1;
}
if (distance < nearestBorderDistance) {
console.log('distance is less than nearestBorderDistance')
nearestBorder = partition;
nearestBorderDistance = distance;
if (nearestBorderDistance < 0) {
nearestBorderDistance /= -1;
}
}
}
return {
position: nearestBorder,
distance: nearestBorderDistance
};
}
function snap() {
console.log('Snapping');
if (self.isSnapping) {
console.error('Already snapping, aborting.');
return;
}
self.isSnapping = true;
self.velocity = 0;
var nearest = getNearestWedge();
TWEEN.removeAll();
console.log('nearest: ', nearest.position, nearest.distance)
self.tween = new TWEEN.Tween({r: wheel.rotation.z})
.to({r: nearest.position})
.easing(TWEEN.Easing.Elastic.Out)
.onUpdate(onUpdate)
.onComplete(onComplete)
.start();
function onUpdate() {
//console.log('current: ', this.r, self.velocity);
wheel.rotation.z = this.r;
};
function onComplete() {
self.isSnapping = false;
console.log('Not snapping');;
}
}
function getMeanVelocity(history) {
if (history.length <= 1) {
return 0;
}
var movements = [];
var startTime = history[0].time;
var totalTimeElapsed = 0;
// Start from the second item in deltaRadians
for (var i = 1; i < history.length; i++) {
var item = history[i];
var movement = item.deltaRad;
movements.push(item.deltaRad);
var movementTimeDelta = item.time - startTime - totalTimeElapsed;
if (movementTimeDelta < 0) {
console.error('movementTimeDelta for history entry #' +
i + ' has travelled back in time somehow.');
}
totalTimeElapsed += movementTimeDelta;
}
var sum = movements.reduce(function (a, b) {
return a + b;
});
return sum / totalTimeElapsed;
}
// Internal utilities
function log() {
if (console && _log) {
var args = Array.prototype.slice.call(arguments, 0);
args.unshift('Animate: ')
console.log.apply(console, args);
}
}
// exports
this.update = update;
this.rotationHistory = rotationHistory;
this.PARTITIONS = PARTITIONS;
this.PARTITION_ARC = PARTITION_ARC;
this.snap = snap;
return this;
}
/**
* Handles input to the wheel.
*/
function Input() {
var self = this;
var _log = true;
domElement.addEventListener('mousedown', onDragStart, false);
//domElement.addEventListener('touchstart', onDragStart, false);
domElement.addEventListener('mouseup', onDragEnd, false);
domElement.addEventListener('mouseout', onDragEnd, false);
//domElement.addEventListener('touchend', onDragEnd, false);
domElement.addEventListener('mousemove', onMouseMove, false);
//domElement.addEventListener('touchmove', onMouseMove, false);
function onDragStart(e) {
self.isDragging = true;
log('Drag start');
self.mouseCoords = pageCoordsToCanvasCoords(e);
animate.rotationHistory = [];
}
function onDragEnd(e) {
self.isDragging = false;
self.lastMouseCoords = null;
self.mouseCoords = null;
log('Drag end');
}
function onMouseMove(e) {
e.preventDefault();
self.mouseCoords = pageCoordsToCanvasCoords(e);
}
function pageCoordsToCanvasCoords(e) {
var canvasX, canvasY;
if ('touches' in e && e.touches.length > 0) {
canvasX = e.touches[0].pageX;
canvasY = e.touches[0].pageY;
} else {
canvasX = e.pageX
canvasY = e.pageY
}
canvasX -= e.target.offsetLeft;
canvasY -= e.target.offsetTop;
// console.log(canvasX, canvasY);
return {
x: canvasX,
y: canvasY
};
}
function mouseCoordsToRadian(x, y) {
var origoX = WIDTH / 2.0,
origoY = HEIGHT / 2.0;
x = x - origoX;
y = y - origoY;
var atan = Math.atan2(x, y);
return atan;
}
// exports
this.mouseCoordsToRadian = mouseCoordsToRadian;
function log() {
if (console && _log) {
var args = Array.prototype.slice.call(arguments, 0);
args.unshift('Input: ')
console.log.apply(console, args);
}
}
return this;
}
// Internal utils
function log() {
if (console && _log) {
var args = Array.prototype.slice.call(arguments, 0);
args.unshift('Wheel: ')
console.log.apply(console, args);
}
}
// exports
self.start = start;
self.update = update;
self.scene = scene;
self.camera = camera;
self.wheel = wheel;
self.renderer = renderer;
self.stats = stats;
self.domElement = domElement;
self.input = input;
self.animate = animate;
return self;
}