mirror of https://github.com/dnomd343/echoIP
Dnomd343
4 years ago
11 changed files with 245 additions and 76 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,123 @@ |
|||
$(document).ready(function () { |
|||
$.get("/ip", function (data) { |
|||
$("#ip_default").val(data); |
|||
ajax_process(); |
|||
}); |
|||
$("table").hide(); |
|||
$("button").click(function () { |
|||
$("button").text("Searching..."); |
|||
$("table").hide(); |
|||
ajax_process(); |
|||
}); |
|||
}); |
|||
|
|||
|
|||
|
|||
|
|||
mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg'; |
|||
|
|||
|
|||
function draw(x, y) { |
|||
var map = new mapboxgl.Map({ |
|||
container: 'map', |
|||
style: 'mapbox://styles/mapbox/streets-v11', |
|||
center: [y, x], |
|||
zoom: 3 |
|||
}); |
|||
|
|||
var size = 100; |
|||
|
|||
var pulsingDot = { |
|||
width: size, |
|||
height: size, |
|||
data: new Uint8Array(size * size * 4), |
|||
|
|||
onAdd: function () { |
|||
var canvas = document.createElement('canvas'); |
|||
canvas.width = this.width; |
|||
canvas.height = this.height; |
|||
this.context = canvas.getContext('2d'); |
|||
}, |
|||
|
|||
render: function () { |
|||
var duration = 1000; |
|||
var t = (performance.now() % duration) / duration; |
|||
|
|||
var radius = size / 2 * 0.3; |
|||
var outerRadius = size / 2 * 0.7 * t + radius; |
|||
var context = this.context; |
|||
|
|||
// draw outer circle
|
|||
context.clearRect(0, 0, this.width, this.height); |
|||
context.beginPath(); |
|||
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2); |
|||
context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')'; |
|||
context.fill(); |
|||
|
|||
// draw inner circle
|
|||
context.beginPath(); |
|||
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2); |
|||
context.fillStyle = 'rgba(255, 100, 100, 1)'; |
|||
context.strokeStyle = 'white'; |
|||
context.lineWidth = 2 + 4 * (1 - t); |
|||
context.fill(); |
|||
context.stroke(); |
|||
|
|||
// update this image's data with data from the canvas
|
|||
this.data = context.getImageData(0, 0, this.width, this.height).data; |
|||
|
|||
// keep the map repainting
|
|||
map.triggerRepaint(); |
|||
|
|||
// return `true` to let the map know that the image was updated
|
|||
return true; |
|||
} |
|||
}; |
|||
|
|||
map.on('load', function () { |
|||
|
|||
map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 }); |
|||
|
|||
map.addLayer({ |
|||
"id": "points", |
|||
"type": "symbol", |
|||
"source": { |
|||
"type": "geojson", |
|||
"data": { |
|||
"type": "FeatureCollection", |
|||
"features": [{ |
|||
"type": "Feature", |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [y, x] |
|||
} |
|||
}] |
|||
} |
|||
}, |
|||
"layout": { |
|||
"icon-image": "pulsing-dot" |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
|
|||
function ajax_process() { |
|||
$.get("/info/" + $("input").val(), function (data) { |
|||
console.log(data); |
|||
$("button").text("Search"); |
|||
$("table").show(); |
|||
$("#ip").text(data.ip); |
|||
$("#as").text(data.as); |
|||
$("#city").text(data.city); |
|||
$("#region").text(data.region); |
|||
$("#country").text(data.country); |
|||
$("#timezone").text(data.timezone); |
|||
$("#loc").text(data.loc); |
|||
$("#isp").text(data.isp); |
|||
$("#scope").text(data.scope); |
|||
$("#detail").text(data.detail); |
|||
draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1])); |
|||
}); |
|||
|
|||
} |
|||
@ -0,0 +1 @@ |
|||
function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}function ajax_process(){$.get("/info/"+$("input").val(),(function(data){console.log(data),$("button").text("Search"),$("table").show(),$("#ip").text(data.ip),$("#as").text(data.as),$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone),$("#loc").text(data.loc),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}))}$(document).ready((function(){$.get("/ip",(function(data){$("#ip_default").val(data),ajax_process()})),$("table").hide(),$("button").click((function(){$("button").text("Searching..."),$("table").hide(),ajax_process()}))})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg"; |
|||
Loading…
Reference in new issue