mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-29 17:27:17 +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;
|
||||
}
|
||||
|
||||
.pixelated {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.blured {
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.graph_panel {
|
||||
padding: unset;
|
||||
}
|
||||
|
@ -116,13 +124,36 @@
|
|||
<div class="card-header">
|
||||
<i class="fas fa-project-diagram"></i> Graph
|
||||
<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"] != "" %}
|
||||
{% 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' %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<span class="float-right mt-2">
|
||||
<button class="btn btn-primary py-1" onclick="resize_graph();">
|
||||
<i class="fas fa-sync"></i> Resize Graph
|
||||
</button>
|
||||
|
@ -279,6 +310,7 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var all_graph = {};
|
||||
$(document).ready(function(){
|
||||
$("#page-Decoded").addClass("active");
|
||||
|
@ -294,6 +326,16 @@ $(document).ready(function(){
|
|||
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() {
|
||||
all_graph.onResize();
|
||||
});
|
||||
|
@ -497,7 +539,8 @@ if (d.popover) {
|
|||
|
||||
div.transition()
|
||||
.duration(200)
|
||||
.style("opacity", .9);
|
||||
.style("opacity", 1);
|
||||
blur_tooltip();
|
||||
} 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>"
|
||||
|
@ -509,7 +552,7 @@ if (d.popover) {
|
|||
|
||||
div.transition()
|
||||
.duration(200)
|
||||
.style("opacity", .9);
|
||||
.style("opacity", 1);
|
||||
|
||||
$.getJSON("{{ url_for('correlation.get_description') }}?object_id="+ d.id,
|
||||
function(data){
|
||||
|
@ -543,7 +586,7 @@ if (d.popover) {
|
|||
|
||||
if (data["img"]) {
|
||||
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 {
|
||||
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("top", (d3_pageY - 28) + "px");
|
||||
d.popover = desc
|
||||
|
||||
if (data["img"]) {
|
||||
blur_tooltip();
|
||||
}
|
||||
|
||||
})
|
||||
.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>"
|
||||
|
|
Loading…
Reference in a new issue