mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 08:38:28 +00:00
chg: [correlation] blur image by default
This commit is contained in:
parent
c04b24df53
commit
e363dcda62
1 changed files with 55 additions and 7 deletions
|
@ -65,6 +65,14 @@
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pixelated {
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blured {
|
||||||
|
filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
.graph_panel {
|
.graph_panel {
|
||||||
padding: unset;
|
padding: unset;
|
||||||
}
|
}
|
||||||
|
@ -116,13 +124,36 @@
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<i class="fas fa-project-diagram"></i> Graph
|
<i class="fas fa-project-diagram"></i> Graph
|
||||||
<span class="float-right">
|
<span class="float-right">
|
||||||
|
<div class="card border-secondary">
|
||||||
|
<div class="card-body py-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-3 text-center px-0">
|
||||||
|
<button class="btn btn-sm btn-secondary" onclick="blur_slider_correlation.val(0);blur_tooltip();">
|
||||||
|
<i class="fas fa-eye-slash"></i>
|
||||||
|
<span class="label-icon">Hide</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 text-center pl-0 pt-1">
|
||||||
|
<input type="range" min="0" max="15" step="0.1" value="10" id="blur-slider-correlation">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 text-center">
|
||||||
|
<button class="btn btn-sm btn-secondary" onclick="blur_slider_correlation.val(15);blur_tooltip();">
|
||||||
|
<i class="fas fa-image"></i>
|
||||||
|
<span class="label-icon">Full</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="float-right mx-1">
|
||||||
{% if dict_object["object_type"] != "" %}
|
{% if dict_object["object_type"] != "" %}
|
||||||
{% with obj_type=dict_object["object_type"], obj_id=dict_object["correlation_id"], obj_subtype=dict_object["metadata"]["type_id"],obj_lvl=1%}
|
{% with obj_type=dict_object["object_type"], obj_id=dict_object["correlation_id"], obj_subtype=dict_object["metadata"]["type_id"],obj_lvl=1%}
|
||||||
{% include 'import_export/block_add_user_object_to_export.html' %}
|
{% include 'import_export/block_add_user_object_to_export.html' %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</span>
|
</span>
|
||||||
<span class="float-right">
|
<span class="float-right mt-2">
|
||||||
<button class="btn btn-primary py-1" onclick="resize_graph();">
|
<button class="btn btn-primary py-1" onclick="resize_graph();">
|
||||||
<i class="fas fa-sync"></i> Resize Graph
|
<i class="fas fa-sync"></i> Resize Graph
|
||||||
</button>
|
</button>
|
||||||
|
@ -279,6 +310,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var all_graph = {};
|
var all_graph = {};
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$("#page-Decoded").addClass("active");
|
$("#page-Decoded").addClass("active");
|
||||||
|
@ -294,6 +326,16 @@ $(document).ready(function(){
|
||||||
all_graph.onResize();
|
all_graph.onResize();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const blur_slider_correlation = $('#blur-slider-correlation');
|
||||||
|
function blur_tooltip(){
|
||||||
|
var image = $('#tooltip_screenshot_correlation')[0];
|
||||||
|
if (image) {
|
||||||
|
var blurValue = $('#blur-slider-correlation').val();
|
||||||
|
blurValue = 15 - blurValue;
|
||||||
|
image.style.filter = "blur(" + blurValue + "px)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$(window).on("resize", function() {
|
$(window).on("resize", function() {
|
||||||
all_graph.onResize();
|
all_graph.onResize();
|
||||||
});
|
});
|
||||||
|
@ -497,7 +539,8 @@ if (d.popover) {
|
||||||
|
|
||||||
div.transition()
|
div.transition()
|
||||||
.duration(200)
|
.duration(200)
|
||||||
.style("opacity", .9);
|
.style("opacity", 1);
|
||||||
|
blur_tooltip();
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
var pop_header = "<div class=\"card text-white\" style=\"max-width: 25rem;\"><div class=\"card-header bg-dark pb-0 border-white\"><h6>"+ sanitize_text(d.text) +"</h6></div>"
|
var pop_header = "<div class=\"card text-white\" style=\"max-width: 25rem;\"><div class=\"card-header bg-dark pb-0 border-white\"><h6>"+ sanitize_text(d.text) +"</h6></div>"
|
||||||
|
@ -509,7 +552,7 @@ if (d.popover) {
|
||||||
|
|
||||||
div.transition()
|
div.transition()
|
||||||
.duration(200)
|
.duration(200)
|
||||||
.style("opacity", .9);
|
.style("opacity", 1);
|
||||||
|
|
||||||
$.getJSON("{{ url_for('correlation.get_description') }}?object_id="+ d.id,
|
$.getJSON("{{ url_for('correlation.get_description') }}?object_id="+ d.id,
|
||||||
function(data){
|
function(data){
|
||||||
|
@ -543,7 +586,7 @@ if (d.popover) {
|
||||||
|
|
||||||
if (data["img"]) {
|
if (data["img"]) {
|
||||||
if (data["tags_safe"]) {
|
if (data["tags_safe"]) {
|
||||||
desc = desc + "<img src={{ url_for('objects_item.screenshot', filename="") }}" + data["img"] +" class=\"img-thumbnail\" />";
|
desc = desc + "<img src={{ url_for('objects_item.screenshot', filename="") }}" + data["img"] +" class=\"img-thumbnail blured\" id=\"tooltip_screenshot_correlation\" style=\"\"/>";
|
||||||
} else {
|
} else {
|
||||||
desc = desc + "<span class=\"my-2 fa-stack fa-4x\"><i class=\"fas fa-stack-1x fa-image\"></i><i class=\"fas fa-stack-2x fa-ban\" style=\"color:Red\"></i></span>";
|
desc = desc + "<span class=\"my-2 fa-stack fa-4x\"><i class=\"fas fa-stack-1x fa-image\"></i><i class=\"fas fa-stack-2x fa-ban\" style=\"color:Red\"></i></span>";
|
||||||
}
|
}
|
||||||
|
@ -554,6 +597,11 @@ if (d.popover) {
|
||||||
.style("left", (d3_pageX) + "px")
|
.style("left", (d3_pageX) + "px")
|
||||||
.style("top", (d3_pageY - 28) + "px");
|
.style("top", (d3_pageY - 28) + "px");
|
||||||
d.popover = desc
|
d.popover = desc
|
||||||
|
|
||||||
|
if (data["img"]) {
|
||||||
|
blur_tooltip();
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
.fail(function(error) {
|
.fail(function(error) {
|
||||||
desc = pop_header + "<div class=\"card-body bg-dark pt-0\"><i class=\"fas fa-3x fa-times text-danger\"></i>"+ error.statusText +"</div>"
|
desc = pop_header + "<div class=\"card-body bg-dark pt-0\"><i class=\"fas fa-3x fa-times text-danger\"></i>"+ error.statusText +"</div>"
|
||||||
|
|
Loading…
Reference in a new issue