[TW5-Dev] JSON Tools for Tiddlywiki 5.1.20!

[Joshua Fontany]

Hi everyone!

I am really excited to announce that I have my proof of concept ready for "modular" User Interfaces for TiddlyWiki!

I'm also very excited to officially announce updated JsonMangler and JsonEditor plugins for TW v5.1.20!

There were some last minute tweaks, but I've gotten new example wikis up and running. Any comments or bug reports are greatly appreciated!

https://joshuafontany.github.io/TW5-JsonMangler/

https://joshuafontany.github.io/TW5-jsoneditor/

But, hey, wait Josh, that first thing you said. What does that mean? 

Screenshots are always nice. :D

I'll try to keep the explanation high-level, but basically:

• A Jsoneditor Widget uses a 'schema definition' (a json tiddler) to render one of two "data json tiddlers".
• The first data-tiddler holds wiki-text (not raw data!) for the View Template. This wikitext points to fields on the current tiddler and renders a custom UI elements for each.
  
• The second data-tiddler holds wiki-text for the Edit Template! It points to fields on the current tiddler and renders custom UI elements for each.
  
• Finally, we have two system tiddlers - one tagged $:/tags/ViewTemplate and the other tagged $:/tags/EditTemplate.
  
• The only real difference between the two template tiddler's TEXT is that one points a JsonEditor to the view-data, and the other points to the edit-data.
  

In this way, we can "group, organize, and modularize" our UI elements. This helps to greatly reduce cognative-load (how much stress it take you to think through designs).

Also, simply tag a new Tiddler in the wiki with the `Character` tag, and all of that slick UI automatically appears and is completely responsive. ;D

More information can be found in the "JsonUI" tiddler in my example wiki: https://joshuafontany.github.io/TW5-jsoneditor/#JsonUI

This is only a VERY rough proof-of-concept using a commonly known fictional character (lots of reference data). I have ideas for more complex (behind the scenes complex) versions later on. There are also a few gremlins to work out (jsoneditor tabs re-set state on each wiki update - wooops), and I'm going to be updating my fork of the base json-editor library, would like to be able to set a custom Font-Awesome glyph for the collapse button based on a tiddler's value, etc, etc.

This was inspired by working with other languages that use "Model, View, Vew-Model" architecture, and I think we can start to make some really cool complex things by combining this with all of the other plugins that are out there!!

Let me know if you all have any questions!

Best,
Joshua Fontany

[TonyM]

Josua,

thanks for this work. I am very excited about using this in the long run to share "objects" in tiddlywiki like in your examples of book and professors etc... If we can use publicly available json schemas all the better. 

The truth is I still need a deeper understanding of JSON to proceed without tripping up too often, but it is wonderful we have this capacity now. Thank you very much

Tony

[Jeremy Ruston]

Hi Joshua

Congratulations, I really like the direction of your experiments, and the results look great.

Best wishes

Jeremy.

On 12 Aug 2019, at 20:55, Joshua Fontany <joshua....@gmail.com> wrote:

Hi everyone!

I am really excited to announce that I have my proof of concept ready for "modular" User Interfaces for TiddlyWiki!

I'm also very excited to officially announce updated JsonMangler and JsonEditor plugins for TW v5.1.20!

There were some last minute tweaks, but I've gotten new example wikis up and running. Any comments or bug reports are greatly appreciated!

https://joshuafontany.github.io/TW5-JsonMangler/

https://joshuafontany.github.io/TW5-jsoneditor/

But, hey, wait Josh, that first thing you said. What does that mean? 

Screenshots are always nice. :D

<JsonUI_conceptUI_viewTemplate_08.12.2019.png>

<JsonUI_conceptUI_editTemplate_08.12.2019.png>

I'll try to keep the explanation high-level, but basically:

• A Jsoneditor Widget uses a 'schema definition' (a json tiddler) to render one of two "data json tiddlers".
• The first data-tiddler holds wiki-text (not raw data!) for the View Template. This wikitext points to fields on the current tiddler and renders a custom UI elements for each.
  
• The second data-tiddler holds wiki-text for the Edit Template! It points to fields on the current tiddler and renders custom UI elements for each.
  
• Finally, we have two system tiddlers - one tagged $:/tags/ViewTemplate and the other tagged $:/tags/EditTemplate.
  
• The only real difference between the two template tiddler's TEXT is that one points a JsonEditor to the view-data, and the other points to the edit-data.
  

In this way, we can "group, organize, and modularize" our UI elements. This helps to greatly reduce cognative-load (how much stress it take you to think through designs).

Also, simply tag a new Tiddler in the wiki with the `Character` tag, and all of that slick UI automatically appears and is completely responsive. ;D

More information can be found in the "JsonUI" tiddler in my example wiki: https://joshuafontany.github.io/TW5-jsoneditor/#JsonUI

This is only a VERY rough proof-of-concept using a commonly known fictional character (lots of reference data). I have ideas for more complex (behind the scenes complex) versions later on. There are also a few gremlins to work out (jsoneditor tabs re-set state on each wiki update - wooops), and I'm going to be updating my fork of the base json-editor library, would like to be able to set a custom Font-Awesome glyph for the collapse button based on a tiddler's value, etc, etc.

This was inspired by working with other languages that use "Model, View, Vew-Model" architecture, and I think we can start to make some really cool complex things by combining this with all of the other plugins that are out there!!

Let me know if you all have any questions!

Best,
Joshua Fontany

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/193bc4ee-972a-4453-810b-071f4058e8ab%40googlegroups.com.
<JsonUI_conceptUI_editTemplate_08.12.2019.png><JsonUI_conceptUI_viewTemplate_08.12.2019.png><JsonUI_conceptUI_viewTemplate_08.12.2019.png><JsonUI_conceptUI_editTemplate_08.12.2019.png>

[David Nebauer]

Congratulations, Joshua. This seems like great work.

Thought I should mention that the problem I previously reported here is still occurring on both the sites you linked to, namely, that in IE11 on Win7 attempting to open the sites results in the internal javascript error "Object doesn't support property or method 'assign'". It isn't much of a problem for me since this is my work system and I use a different OS and browser at home and on mobile.

Regards,

David.

On Tuesday, 13 August 2019 05:25:31 UTC+9:30, Joshua Fontany wrote:

[TonyM]

Joshua,

As I have said before the is a valuable contribution to the tiddlywiki platform. I have a single Question for you below

Background

As I see it People who may be interested in using these tools would include people wanting to import, edit or export JSON data beyond simple tiddler bundles. This is likely with people sourcing or wanting to generate data in JSON format, Tiddlywiki could become a JSON development kit. This could help people using JSON for systems integration projects. 

However the editor and "modular" User Interfaces for TiddlyWiki stands to offer a powerful addition to building and sharing functionality in tiddlywiki. Have you plans for additional "modular design"? or do you mean through the use of schemas and the json editor to generate forms and obtain input?

I am asking this at a strategic level. I have invested substantial effort in building methods to define fields and make these editable within tiddlers without the use of JSON, I intend to continue with this to build a set of rapid development tools, but I see the value of JSON editor and "modular design" that can result from this. I am also keen to leverage your tools for rapid development as well.

I have posted here because I see value in identifying when a designer should choose one method over the other. My solution will help manipulating traditional tiddler fields, your solution keeps these (sand boxed) within json.

Question

What do you think are key questions and issues for designers when deciding if the JSON approach is better?

Regards

Tony

On Tuesday, August 13, 2019 at 5:55:31 AM UTC+10, Joshua Fontany wrote:

[Arlen Beiler]

Wow, this is amazing. This has my attention. I really wish that fields worked better with arrays, but this is pretty good. 

--

You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/e1a6ba4a-b8e5-4b6f-b5b1-7c84a2c4a0e4%40googlegroups.com.

[Arlen Beiler]

Ok, I wrote that rather fast. I like templates and hate code duplication. But I'm also really bad at wikitext. So this should be rather useful for me. The fields comment is a TiddlyWiki thing, it's not related to this plugin. Overall I like it, especially using JSON for the definitions, since that could be majorly expanded on. This has the potential to make TiddlyWiki really useful for developer documentation, which would be really epic because the search is so fast.