mirror of https://github.com/dnomd343/echoIP
✨Shevon・Kuan✨
4 years ago
committed by
GitHub
2 changed files with 123 additions and 123 deletions
@ -1,123 +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(',')[0])); |
|||
}); |
|||
|
|||
$(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])); |
|||
}); |
|||
|
|||
} |
@ -1 +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(",")[0]))}))}$(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}),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