seeking a clever way for a user viewing a diagram in a browser to make a choice

[scott]

I’ve created a diagram that uses a color-by-value data graphic to assign colors to shapes based on a set of TRUE/FALSE values in each shape.

• Each TRUE/FALSE value indicates whether a particular equipment type is associated with that shape.
• Any given shape can have one TRUE value, multiple TRUE values, or no TRUE values.

For example, the Shape Data values on the left in the graphic below will produce the orange/Multiple color from the palette on the right:


My goal is to allow the diagram to be viewed in a browser or the iOS app. That part is easy.

However, I also want the user to be able to take an action in the browser that results in highlighting only those shapes that have a specific TRUE setting. For example, the user may want to highlight all shapes that have Type B selected -- both those for which that’s the only selection and those for which B is one of several selections. After making that choice, all shapes for which Type B=TRUE, including ones that also have other TRUE values, should display the Type B color. All shapes with Type B=FALSE should be gray.

The challenging bit is finding a way for the user to make a selection when they are simply viewing the diagram and are not in edit mode. The only technique I’ve come up with so far is to use hyperlinks, which is how this sample diagram was created.

Follow the link in the previous paragraph to view the diagram in a browser; either tap or Ctrl+click the buttons in the legend in the lower left to filter by Type. (To make it easy to see what's happening, the shape text on each shape displays which types are set to TRUE.)

The good news is that this works. The bad news is that it requires a duplicate page for each type. That isn’t terrible for two or three types, but will be cumbersome in diagrams with eight, ten, or more Types.

I'm hoping that the clever folks who hang around here might be able to come up with another way to accomplish allowing the user to make a selection -- one that doesn’t require a separate page for each type.

BTW, feel free to download the sample diagram and tinker with it. Or just let me know if you have suggestions for improving the ShapeSheet stuff I've done to make the hyperlinks and data graphics work.

Thanks,
Scott

[Yacine]

That screams for JavaScript.
A good starting point would be Nikolay's SVG exporter.


Not so elegant, but feasible would be to stick with your solution, but generate the sub-pages automatically. easy.

[scott]

Thanks. Javascript makes sense; I was trying to stick with an "out of the box" solution to keep things simple for my client but I don't think a bit of Javascript code would bother them much.

I agree about using code to produce the sub-pages automatically -- it's already in progress.

[Yacine]

I was trying to stick with an "out of the box" solution to keep things simple for my client ...

Yes, unfortunately M$ still considers the printout as primary output format for Visio.
All the cool interactive stuff that should be state of the art in 2022 is only available via tweaks and workarounds.

[scott]

I wouldn't say the current situation is quite as bad as a "printout" -- but I know what you mean because the browser rendering doesn't support any real interactivity. Thanks for your suggestions.

[hidden layer]

Hi,
the visio-only-solution is not so difficult. see below.

Or did you want to color them after the user make a choice?

hl

[hidden layer]

like this?

***couldn't sleep last night***

cheers
hl

[hidden layer]

I forgot:

here's the logic behind.

Remark: I’ll update the stencil within a few weeks with some additionals. David Parker made some similar master shapes (U.S. version) – here are European-appearance ones with slightly different approach.

After modifying the drawing there may be some error message. Just do the action a 2nd time and it will work. I have no clue about what’s wrong. It happens with Plan2 only – in 2016 version it works fine.

cheers,
hl

[Nikolay]

@hidden layer
The keywords here probably are: in the browser and on iOS device

I have sort of demo for this:
https://nbelyh.github.io/svgpublishdemo/demo/1981-91%20Suzuki%20FA50%20Shuttle.html

Layer visibility toggle with stock UI (sidebar) is out of the box,
but making layer toggle by "clicking on your custom shape" would require some javascript.
https://nbelyh.github.io/svgpublishdemo/demo/EngineeringProblem.html

Both of the above are sameples from:
https://unmanagedvisio.com/products/svg-publish/html-export-demo/

[hidden layer]

My goal is to allow the diagram to be viewed in a browser or the iOS app. That part is easy.

sorry - I understood this the other way round.
As I have a similar "challenge" I adapted this like it is.

it was just fun for me

hl

[wapperdude]

Supplementing what Nikolay points out,, the OP stated: 

My goal is to allow the diagram to be viewed in a browser or the iOS app. That part is easy.

However, I also want the user to be able to take an action in the browser that results in highlighting only those shapes that have a specific TRUE setting

The above would be the full statement.  Everything else given helps clarify, including the link provided.

[hidden layer]

ok, ok,
I give up... (no... this was a joke)

I'm very interesting of How-To-Make-Things-Possible-In-A-Browser (instead of messing around with Visio at all). But I guess I'll never learn that java at all. The java code I've seen I cannot follow.

As I said - it was a sleepless night - so I did what I could do - just to solve the task I saw .
Some other will stumble across this and may have some inspiration like I stumbled across June-The-Second's 3D stuff. ... ... Astonishing!

CU!

hl