graphical interface on main page about tw5-tiddlymap

[tobibeer]

Would be nice as an option to have a button-less ui.

[felixhayashi]

Hi @christophvarga,

suggestion for a simpler 'standard' view which can be visible at all time. buttons can be less than now and more compact

The problem is, I cannot place the graph-buttons at the top because the position is determined by the Vis.js library I am using (see http://visjs.org/examples/network/20_navigation.html)

(no need for zoom in/out and to move around in the map as long as you have not clicked somewhere to activate it e.g. full screen view?)

A fullscreen with 100 nodes without zooming or moving around will be hard to manage. Also, I cannot remove the buttons (see answer above).

@tobibeer

Would be nice as an option to have a button-less ui.

You mean a keyboard interface?

-Felix

[christophvarga]

hi @felixhayashi

A fullscreen with 100 nodes without zooming or moving around will be hard to manage.

i meant that the navigation buttons only appear in full screen mode.
as i see you can zoom by scrolling and navigate by mouse dragging, i think that's what people do intuitively. so the navigation buttons in the small screen/view make really not that much sense, annoying that they can't be removed..

[felixhayashi]

Hi @christophvarga

i think that's what people do intuitively.

well, sometimes people do not do it intuitively, maybe because they think it is a picture or don't know it is possible.

so the navigation buttons in the small screen/view make really not that much sense, annoying that they can't be removed..

Actually, I think there might be a way to do it. I will keep this ticket open and maybe I can manage to include an option like

<$tiddlymap view="All Tasks" navigation="false" height="250px"></$tiddlymap>

to hide the navigation.

-Felix

[tobibeer]

I guess one could just use css to style the buttons or remove them. So, that additional parameter is actually not really needed. Better introduce a class parameter to set a css class.

You could predefine something like .no-buttons which automatically sets (all?) navigation buttons to display:none. Centering and fullscreen should probably get extra classes, e.g. no-fullscreen and no-center, otherwise stay. Is there a mode where the graph can be set to be static? I'd also swap +, - and the center and fullscreen buttons, with fullscreen being in the corner and center to the left of it... so that they are in the bottom row with no-buttons, plus on top of minus.

Other than that, I personally find the button colors distracting and would rather go with something grey, google earth style... with the button borders being smaller.

Personally, I'd expect the button to move the graph in the indicated direction of the arrow. So, I'd reverse left / right and up / down... so it corresponds to what touch does. Swipe right => move right. Right arrow => move right.

[felixhayashi]

Hi @tobibeer,

some good points. :)

Better introduce a class parameter to set a css class.

Yes

You could predefine something like .no-buttons which automatically sets (all?) navigation buttons to display:none

I think this can also be done by each user using css then. I try not to add too many options add the moment as project gets more and more bloated.

Other than that, I personally find the button colors distracting and would rather go with something grey, google earth style... with the button borders being smaller.

I agree. It sucks that the buttons are png and I cannot change the color so I think I have to open Photoshop and change them to gray one by one manually.

I'd also swap +, - and the center and fullscreen buttons, with fullscreen being in the corner and center to the left of it..
[...]
Personally, I'd expect the button to move the graph in the indicated direction of the arrow.

Well, to be honest, I do not want to switch it, mainly because people used to vis.js will expect it to work or look this way.

-Felix

[tobibeer]

Well, to be honest, I do not want to switch it, mainly because people used to vis.js will expect it to work or look this way.

My reasoning was this: If one wanted to (sometimes / dynamically) hide all the other buttons except those two, they would now be awkwardly stacked to the right side. Repositioning them for sakes of hiding the others doesn't feel like the right thing to do. So, to have a consistent spot and allowing to hide the others, I proposed to switch positions.

[felixhayashi]

i meant that the navigation buttons only appear in full screen mode.

You can now define which widgets show navigation buttons

You could predefine something like .no-buttons which automatically sets (all?) navigation buttons to display:none.

when the attribute is set, I add a class that adds a display none. If the user wants to keep certain buttons, it is possible with css styles that again override display none for individual buttons (all buttons have individual class names).

[felixhayashi]

@tobibeer,

My reasoning was this: If one wanted to (sometimes / dynamically) hide all the other buttons except those two, they would now be awkwardly stacked to the right side. Repositioning them for sakes of hiding the others doesn't feel like the right thing to do. So, to have a consistent spot and allowing to hide the others, I proposed to switch positions.

You have a point there. Still, I do not want to touch the vis button order. But I will keep your remark in mind and at some point I might change the arrangement or also make use of the top corners as potential places to display buttons instead of aligning them at the side.

[tobibeer]

👍

[felixhayashi]

Next release will have less menu buttons

see #39 (comment)