Interactive HMTL - Githubissues

Cubicle13 commented 3 years ago

Not really an issue, more of a feature request

Often I need to look up information on a topic I've made cards on. I was wondering if this addon could show the the contents of the cards if you click on it.

RisingOrange commented 3 years ago

Would it help if clicking on a topic in the window that shows up when you press the Show button would show the cards in the Anki card browser? It would work like clicking on a tag in the sidebar. Or do you imagine something else?

Cubicle13 commented 3 years ago

Well ideally the mindmap would be interactive (i.e. expandable/retractable nodes). And yes, if clicking on the tag would show you the cards in anki, that would be good. However ideally it'd show you a html glossary of the cards next to the mindmap (similar to this useful but poorly maintained addon https://ankiweb.net/shared/info/1334168683)

Cubicle13 commented 3 years ago

Attached an example of the interactiveness I made with Mindmanager (corporate gold standard in mind mapping). The program is very efficient with space and has a presentation ready look. Map1.zip

RisingOrange commented 3 years ago

I downloaded the files, will take a look later.

RisingOrange commented 3 years ago

I found two options for adding an interactive mind map layout to the add-on. (It would be very hard to make expanding and collapsing nodes possible with the current layout as far as I know.) I would like to know your thoughts about them if you are interested.

The first is option is to use jsMind, you can look at an example here.

The second option is to do something similar to what this website does: https://jsmed.net/treeview/. It generates interactive mind maps for some medicine-decks. I like that it places the topics in a circle around the center because more content fits on a smaller area this way. Layouts similar to jsMind or Mindmanager quickly become so big that you can't read the text when zooming out to see the whole thing. Unfortunately there are some visual bugs and I think the rotated text is hard to read. When you click on the text of a topic it shows you the cards in that topic and you can also click on the circles to collapse and expand parts of the tree. You can upload your own deck (by clicking on the name of the deck ("Innere 2") and choosing "Eigene Hochladen") but displaying the cards doesn't work then because it expects cards to have the same template as the ones in the medicine decks.

Cubicle13 commented 3 years ago

The second option is a very close fit to the concept I mentioned before. The circular mindmap is very efficient with space. Retractable nodes are important for focused review of a topic and it has this too. I agree that the text in the upper and lower quadrant is hard to read; rotating the mindmap to have the most/last expanded node on the right would solve this. The first option is simple and doesn't have any of the visual obstacles that the second option has. So if the problems to option 2 aren't solvable, option 1 is fine as well. The way option 2 shows the cards inside the node is very appealing, the css boxes used give it a nice finishing touch. Option 2 has a share option for png, but not for html such as that addon I mentioned earlier.

RisingOrange commented 3 years ago

I worked on the first option for a bit. I can now export tag hierarchies as interactive mind maps in html format. The notes are not included (yet), but you can see the selected notes in Anki. For this to work you have to have AnkiConnect installed and give it permission to access Anki when asked. The interface is very basic.

If you want you can download the file for the page seen above. You have to change the file ending from .txt to .html. (Github doesn't support sending html files) bacteria.txt

Cubicle13 commented 3 years ago

The mindmap looks amazing! Simple and effective. I really like the features jsMind has natively. Looking forward to the update, so I can apply it to my decks. Couple of questions

As you mentioned before the notes are not included (yet) in the html-file yet, but you can see the selected notes in Anki through AnkiConnect. Will the next version have the notes included in the html? This is important for sharing and collaboration. Considering the base-Anki feature of importing xml-files, this might offer possibilities for easier sharing and editing of (shared) decks. [edit, save, share]
When editing and then saving the mindmap, the second mindmap loses its features (zoom, sort, rename). Is it possible to keep these features active? This helps with easy editing and sharing, mention before.
The browser window consists of two panes; the mindmap pane and the notes pane. It would be good to be able to slide the divider, so it's possible to make one pane larger and the other smaller
It would be handy if the notes pane included indentation and heading, so notes of the same branch read more like one text

Cubicle13 commented 3 years ago

@RisingOrange I might have an interesting proposition on this addon that I'd like to discuss, DM me on twitter!

Cubicle13 commented 2 years ago

Can I pay you to make this?

RisingOrange commented 2 years ago

Sorry, I haven't told you that I updated the add-on and added the interactive mind map functionality as an experimental feature. I made some small improvements, for example you can save the mind map after editing now and it will actually keep the changes.

You can pay me to add the other features you listed above and improve it in general. Have a look at the current version and let me know if you want to do it. You can write me at jakub.fidler@protonmail.com.

RisingOrange / anki-mindmap

Interactive HMTL #8