News:

BB code in posts seems to be working again!
I haven't turned on every single tag, so please let me know if there are any that are used/needed but not activated.

Main Menu

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

Started by scott, September 26, 2022, 10:09:29 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

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.
Yacine

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

Quote from: scott on September 27, 2022, 01:24:53 PM
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.
Yacine

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


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

Quote from: scott on September 26, 2022, 10:09:29 PM
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: 
QuoteMy 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.
Visio 2019 Pro

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

Browser ID: smf (possibly_robot)
Templates: 4: index (default), Display (default), GenericControls (default), GenericControls (default).
Sub templates: 6: init, html_above, body_above, main, body_below, html_below.
Language files: 4: index+Modifications.english (default), Post.english (default), Editor.english (default), Drafts.english (default).
Style sheets: 4: index.css, attachments.css, jquery.sceditor.css, responsive.css.
Hooks called: 380 (show)
Files included: 32 - 1207KB. (show)
Memory used: 1227KB.
Tokens: post-login.
Cache hits: 14: 0.00129s for 26,764 bytes (show)
Cache misses: 3: (show)
Queries used: 16.

[Show Queries]