AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-30 01:37:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chg: [correlation] blur image by default

Browse source
This commit is contained in:
Terrtia 2023-04-25 13:42:51 +02:00
parent c04b24df53
commit e363dcda62
No known key found for this signature in database
GPG key ID: 1E1B1F50D84613D0
1 changed files with 55 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
var/www/templates/correlation/show_correlation.html
View file

@ -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>&nbsp;Resize Graph <i class="fas fa-sync"></i>&nbsp;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>"