EventDBLClick Blur Multiple Shapes

[Roel]

Hi All,

I'am relative new to Visio and I having a challenge solving this problem

I have a Shape and there are multiple shape connected to. Now the management team want's to have the following.  When they click on the main shape they want to blur the shapes that are connected to it.

Hope you van help me

Thanks in advance

Roel

[wapperdude]

First, Visio doesn't do "blur".  You could either change them to another color, e.g., light gray, or completely hide them.

Second, this would require some coding. 

Third, to what extent does "connected" mean.  Think of the selected shape as the trunk of a tree in a forest.  Do you mean just the main branches but not secondary branches (and leaves) connected to the main branches?  Or, do you mean he entire tree leaving just the trunk?  Depending on the size/complexity of the drawing, a solitary trunk can still get visibly lost in the forest.

[wapperdude]

Example:  http://visguy.com/vgforum/index.php?topic=6373.msg26266#msg26266

[Roel]

Hi,

Thanks for the reply.

In answer to the Questions.

"First, Visio doesn't do "blur".  You could either change them to another color, e.g., light gray, or completely hide them."
Maybe blur is the wrong word I mean can you change de Transparansitie?

"Second, this would require some coding. "
Thats not a problem I only need some example's (Tutorial) on how to get there.

"Third, to what extent does "connected" mean.  Think of the selected shape as the trunk of a tree in a forest.  Do you mean just the main branches but not secondary branches (and leaves) connected to the main branches?  Or, do you mean he entire tree leaving just the trunk?  Depending on the size/complexity of the drawing, a solitary trunk can still get visibly lost in the forest."

I will upload a example later

Greetings Roel

[wapperdude]

Maybe blur is the wrong word I mean can you change de Transparansitie?

Yes.  Transparency is possible from fully opaque to fully transparent.  Applies to either or all lines, fills, and text.

[Visisthebest]

Actually there is no shape blur but you can create a pretty strong blur effect. This works really well if you give your shapes a thick, colorful border:

Via Ribbon menu: Home -> Effects -> Soft Edges

you will see several soft edge variations.

Alternatively, in VBA if you do this:

YourShape.CellsSRC(visSectionObject, visRowOtherEffectProperties, visSoftEdgesSize).FormulaU = "25 pt"

it will give a pretty strong shape edge blur effect.

Let me know if this helps!

[wapperdude]

@VisistheBest:  I forgot about this, but you're quite correct...and you can control its transparency!

[Nikolay]

If you don't mind my svg publish plugin, there is a sample here that seems to be relatively easy to adopt:

https://nbelyh.github.io/test/blur.html (click on the rectangles to see the blur of linked items changing)

Not sure what you mean exactly by "blur" (probably not that, since it looks a bit odd)?
The original sample diagram is "Database Diagram", here: https://unmanagedvisio.com/products/svg-publish/html-export-demo/
It's a bit old (like, 17 years old), and the "database" plugin is not supported by Visio anymore, so it prompts with some strange dialogs when you open it, but these are harmless.

The change is, instead of setting color, the embedded code changes the filter for the shape:
....style('fill', '#Aff') =====>  .....style('filter', 'blur(2px)')

The above line can be changed in: SvgPublish => Developer => Edit Diagram Script and Teample => Javascriplt

[Visisthebest]

Wow really cool Nikolay that is a blur/defocus, and your HTML export add-in is highly recommended one of my favorite Visio add-ins!

[Visisthebest]

This is the Javascript I assume Nikolay, exported from your demo:

d3.selectAll(".vp-table")
.style("cursor", "pointer")
.on('click', function() {
    d3.selectAll(".vp-table").selectAll("g").style("fill", null);
   
    var id   = $(this).attr('id');
    var data = window.svgpublish.diagramData[id];
    if (data.ConnectedTo) {
        data.ConnectedTo.forEach( function(item) {
            d3.select("#" + item).selectAll("g").style("fill", "#Aff");
        });
    }
    if (data.ConnectedFrom) {
        data.ConnectedFrom.forEach( function(item) {
            d3.select("#" + item).selectAll("g").style('filter', 'blur(2px)');
        });
    }
    d3.select("#" + id).selectAll("g").style("fill", "#ff0");
})

[Nikolay]

Yes, this is the one.
I think of re-working it completely in the future version actually, so no jQuery or any other third-party library is used,
only plain JavaScript, and maybe wrapping it as a web-component, so integrating into a third-party solution (that uses React or Angular for example) is much easier.

[Visisthebest]

Still the current version works very well!