BASIC Dialects Matrix TiddlyWiki

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

Latest update (very early in the architecture/design phase):

• initial setup of the matrix with just a few items to guide the look and feel of the thing
• initial setup of data entry form to enter details about a new BASIC dialect being added
  • I already had the "Add BASIC Dialect" button setup and first data entry form to set the name of the BASIC Dialect (used as tiddler title)

4 Screenshots:

The main interface (The "BASIC Dialects Matrix" tiddler):

The "Add BASIC Dialect" tiddler contained in a modal window (2 images):

The "BASIC Dialect Form" tiddler contained in a modal window:

[Charlie Veniot]

Matrix is working.

Next: filters and widgets to toggle visibility of columns/rows.

[Charlie Veniot]

Now, the matrix starts with no BASIC dialect showing.  What BASIC dialects are shown in the Matrix depends on the (new feature) BASIC dialects a viewer chooses.

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

Update: an now, one can select groups of BASIC dialects that fall into a "Classification".  This is a good template for setting up additional ways of choosing multiple BASIC dialects by groups.  For example: select for the matrix all BASIC dialects that support line numbers, or GOTO, or all BASIC implementations that are compatible with GW-BASIC.

One of the great things I'm showcasing here about TiddlyWiki:  Rapid Application Development of GUI and "database", and rapid deployment (one file upload to a website.)  It is good stuff.

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

And now, the template/framework for choosing what attributes (i.e. the rows) we want visible.

Rock'n roll.

[Charlie Veniot]

Update: Early prototyping of data-entry forms, hopefully fairly user-friendly.

Click on something, and it opens up a related form in view mode.  To put the form in edit mode, click the edit button.

Simple forms setup for:

• viewing/editing a BASIC Dialect
• viewing/editing a BASIC Category

4 Screenshots:

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

Added "Toggle All" buttons to "Choose BASIC Dialects" and to "Choose BASIC Dialects via Categories."

Next: add same thing to "Choose Attributes to Compare."

Currently, filtering is applying "OR" to all the filters.  I'm thinking about how to setup the ability to toggle between "OR" and "AND".

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

Okay, "Toggle All" button added to Categories section (the only section right now, more TBD) of "Choose Attributes to Compare". 

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

I had "distraction-free viewing" of the matrix in mind.  Being able to view the matrix in a new window is also better for printing.

Seeing as I want some buttons for that and, eventually, buttons for other things, I need a place to put them.  That top-left cell (first row, first column), seems like a good spot.

Screenshots:

[Charlie Veniot]

Oops, premature post.  Second screenshot:

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

"Export Tiddler" button setup for both forms.  It was a little bit tricky to setup because the forms ("BASIC Dialect Form", and "BASIC Category Form") are displayed as modals, and the export button wasn't showing the image.

Both forms required a copy and paste of the following macro for the export button image to show in the modals:

```

\define tv-config-toolbar-icons() yes

```

I need that export tiddler button so that content contributors have a user-friendly quick'n easy way to export new content to the TiddlyWiki I'm administering.

[arun babu]

Hi Charlie,

Is there any way to add the tag field and field editor also into the modal

Arun

[Charlie Veniot]

G'day Arun,

I'd be doing that by adding my own custom widgets in the forms.  So I'm setting things up with a custom interface so that, eventually, somebody can work with that specific TiddlyWiki without ever entering the native TiddlyWiki interface, unless he/she really wants to.

Adding to the forms the ability to manage tags for a tiddler and edit individual fields in a tiddler, that's not on my radar at the moment.

For now, tags and fields is something I'm avoiding until it is something needed for content contributors.  Not something I need for me, yet anyway.

-- Charlie

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

As per this other post, I added a couple of tiddlers with simple word clouds.

With "structured content" in mind, I've added two fields to the BASIC Dialects Form: "Primary Website" and "Caution" fields.

Primary website is just a plain field meant to paste in a URL.  Nothing particularly special there.

"Caution" field I added as a heads-up to viewers looking at a particular BASIC dialect.  If I'm going to find something concerning about any product, I want a place where I can enter that info, and I also want it to be "grab-by-the-jugular" noticeable when there's something entered there.  AND, I'm planning the ground work for editing many long-text fields with just the one edit text widget.  To save space, but also to avoid duplicating the same GUI elements for every tiddler field.

Something like that.

Four screenshots:

[Charlie Veniot]

Just a little update about some ongoing redesign/refine work.

Amount of checkboxes and length/volume of label text was too much.  So I'm organizing the large number of check boxes into check box groupings.  That takes more real estate, but I find the individual groups so much easier to visually/cognitively process.

Two screenshots.

Before start of redesign:

After some redesign:

[arun babu]

Hi Charlie,

I started testing out your modal approach in the budget wiki I am making.

I have few doubts.

1. The fish button of the tKwm and fLx template is not seen in my wiki. Did I miss adding any related tiddlers?

2. I have added few buttons to open your modal windows in my budget table. Now I am trying to add the fields into the second of those modal windows - don't know whether it will work out.

3. I want to use the tKwm template for the tiddler titles in my budget table.  This tiddler is responsible for the tiddler titles in budget table in think. Can you suggest how to modify the content of that tiddler so that the tKwm template is applied to the tiddler titles and when the tiddler title is clicked, it opens in a modal window.

Thanks 

Arun

[Charlie Veniot]

First, the little fish right away.

If you hide the sidebar, then show it, you should see the fishy links.

If that's working fine, then you are probably missing the "Startup Actions" tiddler.  Copy that over, save your TiddlyWiki, then close it and open it again.

Do take a look at that Startup Actions tiddler.  Adjust that tiddler accordingly if you want the sidebar to show on startup.

The fishy links are setup in my TiddlyWiki as links that only appear in "Author Mode", but disappear in "Reader Mode".  To keep things simple, hiding the sidebar is "Reader Mode", and showing the sidebar is "Author Mode".

If you want the fishy links to always be visible, then adjust the templates accordingly.

Now, I'm checking out your TiddlyWiki so that I can help you out with #3.

[Charlie Veniot]

Okay, I just looked at your TiddlyWiki, and it has a lot of things going on that aren't compatible with my hide/show fishy link based on sidebar visibility.

You'll have to adapt my fishy-link-related workings to fit the plugins you've installed.

Once you have that working, you have to modify the following tiddler the way I did, except, with the fishy link template.

What I've done shows using the tKwm template, which will open the budget tiddler in a modal.

3 screenshots:

Tiddler that needs changing, before my change:

Tiddler that needs changing, with my change:

The result:

On Friday, May 6, 2022 at 4:52:10 PM UTC-3 arunn...@gmail.com wrote:

[arun babu]

Regarding the modal for tiddler titles in the tables, Thank you Charlie for the help.  That was awesome.  

Regarding the fish button, I will have to modify the template to keep it always on.

Continue your good work. Will be keeping an eye on your progress. 

Thanks,

Arun

[Charlie Veniot]

And your TiddlyWiki is quite a beautiful piece of work.

Thanks for sharing!  Very much worth sharing that and your progress in a dedicated thread to make sure other folk see it.  The thing has a serious wow factor going on.

[arun babu]

Hi Charlie, 

I have made some progress with building my budget wiki

1. I modified the template to make the fish button appear always - although I changed the fish with another image button.

2. I added modal data entry form for new year, month, day and input.

3. I used the primary website field in the second modal of your modal to add my link field.

I will have to check out your video so that I may get more ideas.

Thanks, 

Arun

[Charlie Veniot]

I don't blame you for replacing the fish.  It is far from being a popular choice.  Definitely not professional/polished.

Me being the sole author of my TiddlyWiki's, and the fishy link usually hidden for the default "reader mode" of most my stuff, I've kept it all along because a "tiddler" also means a little fish.  I enjoy that for some odd reason.

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

Okay, finished reorganizing all large groups of checkboxes, and did some re-organizing of the row headers in the matrix.

Full-sized images attached.

Teaser image or the matrix (gotta fix up the lines on those headers for groups of categories):

[Charlie Veniot]

https://basicanywheremachine.neocities.org/About_BASIC.html

I added a few extra BASIC dialects, added an "Advanced Features" grouping of categories, and some (see attachment) cosmetic changes.

If there's anything TW you don't understand, get a hold of me via a reply here.

[arun babu]

Hi Charlie, 

I was testing my budget wiki with multicolumn plug-in - so I imported all the relevant tiddlers into the wiki.

But the modified fish button of Flx and tKwm is not seen in the tables or any other tiddlers. Can you please check what's going wrong.

I have listed the relevant tiddlers in the homepage of this wiki

Arun

[Charlie Veniot]

My template tiddlers show/hide the fishy link based on whether $:/state/sidebar's text is yes or not.

i.e.:

```

<$list filter="[[$:/state/sidebar]get[text]]+[match[yes]] [<currentTiddler>] +[replace[yes]]"> ... </$list>

```

The multicolumn plugin's setup for sidebar doesn't seem to alter the $:/state/sidebar tiddler with "yes" when the sidebar is shown.

You'll have to modify my template tiddlers to exclude the list widgets that check $:/state/sidebar.

Or remove those list widgets that check $:/state/sidebar.

[arun babu]

Hi Charlie,

Thanks for the tip. It's works now.

Arun.

---

From: tiddl...@googlegroups.com <tiddl...@googlegroups.com> on behalf of arun babu <arunn...@gmail.com>
Sent: Monday, May 16, 2022 2:58:21 AM
To: TiddlyWiki <tiddl...@googlegroups.com>
Subject: [tw5] Re: BASIC Dialects Matrix TiddlyWiki

 

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/MNpahT2IQEU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/32eeebcd-fb5c-4c9e-8dc4-1e8a3d837336n%40googlegroups.com.

[arun babu]

Hi Charlie,

Is it possible to create a search box within a modal such that one can edit the text field of the tiddler search results from within the same search modal window.

Arun 

[Charlie Veniot]

Let's see if I am understanding what you want to do.

You want to pop open a modal, that presents a field used to filter a list of tiddlers.

Are you saying you want to be able to edit each of the tiddlers you get in the search results?

If you get a matching list of hundreds of tiddlers, you want to be able to edit the text for each one of those tiddlers in the modal?

[arun babu]

Hi Charlie,

I meant a standard search option (not filter search). May be limit the number of search results to avoid performance issues. I would like to view and edit those tiddlers within the modal itself, instead of opening them in the story river. 

Arun

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/58592aaf-1812-44ad-8f01-8b7c28498a2fn%40googlegroups.com.

[Charlie Veniot]

A search option would be an edit text widget in which you type your search criteria, and below that edit text widget would be a list widget with a filter getting a list of all tiddlers matching your search criteria.

I'd suggest that for each item in the list, you have a button that opens up the related tiddler in another modal dialog meant for editing  a tiddler.  I think it is good practice to have that separation between the dialog/tiddler that searches and gives results, and a dialog/tiddler with widgets for editing.

That said, from what I've seen, you'll be editing the text of that tiddler with an edit text widget.  You won't have access to the formatting toolbar for editing the tiddler.  My attempts at trying to do that have all resulted in the red dialog of death (javascript errors).

But if editing the text of a tiddler with just edit text widget is fine, then I think the approach I suggest above is very feasible.

[arun babu]

Hi Charlie,

The Basic Dialect form has an edit box and preview option. Is something like that possible

Arun

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ec556441-3f08-4516-b027-89b9364b7f4cn%40googlegroups.com.

[Charlie Veniot]

That does exactly what I was describing.  If you don't need the formatting buttons like bold/italics/etc., then you can definitely setup the same kind of thing for what you want.

[arun babu]

I don't want edit buttons. I just want to do a quick search and see the tiddler contents and edit them if needed.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0b1740e9-5a92-4bc1-89d3-190c69699873n%40googlegroups.com.

[Charlie Veniot]

Then for sure, back to your original question,  that can definitely be done.

A button somewhere that brings up the search tiddler in a modal.

Search tiddler with an edit field (I imagine for the text field of a temporary tiddler).  Below that edit field, a list widget with a filter that gets the value from the text field of that temporary tiddler. That filter makes sure you've got at least three or more characters typed in before actually getting a list of matching tiddlers, and applying regexp to get the matching tiddlers.

For each matching tiddler, a button to open (tm-modal) a tiddler that is your form for editing.  Passing to that form the title of the tiddler being edited.

Something like that. 

[arun babu]

Sorry for the delay. I was at my workplace. Is there is any similar implementations done in the past so that I can hack it to suit my needs.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8f3882fd-49f9-4826-a4ae-999071b345ccn%40googlegroups.com.

[Charlie Veniot]

G'day,

If you want to take a look at some sample code, my BASIC Anywhere Machine TiddlyWiki's File Open Modal shows how to get a list of tiddlers via search criteria.

There's an option to include a button for each matching tiddler to delete the related tiddler.  Replace that with an edit text field to edit the related tiddler, or setup a button to open a "form" modal to edit the related tiddler.

In the About BASIC TiddlyWiki, you'll find the BASIC Dialect Form and the BASIC Category Form that I use for, respectively, editing any BASIC Dialect tiddler and any BASIC Category tiddler.

[arun babu]

I tried to modify the conext search of Context plug in by danielo and added some of your code from Baisc Anywhere machine to create a sample search and edit modal.

Check this link - https://multicolumn-krystal.tiddlyhost.com/

Click on the "Search&Edit Modal" link in the topbar.

Then you can see all related tiddlers. 

First tiddler shows a button to invoke the modal. 

Try searching "Peter" or "Hello" in the search box. There is some lag (don't know how to reduce the lag. Any suggestions?).

Search results look like this

 $:/plugins/danielo515/ContextPlugin/visualizer-tweaked for edit in modal  - This tiddler is responsible for the edit text and preview option seen in the search results.

Can you suggest a way to add another column with context highlighting of the searched word like in danielo context plug in. (If there is a way to add it into the existing columns, that also is fine)

Also how to remove the Markup Help part from the second column of the table.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/75313ae2-f306-4f4d-b8bc-a7174dd46b8bn%40googlegroups.com.

[Charlie Veniot]

The lag: that's why I was suggesting a simple list of tiddlers in your results with each tiddler having a button to open the related tiddler in a modal for editing.

Pretty sure the lag you are experiencing is because your search results are displaying edit fields for each tiddler, and any edit field of any tiddler might be causing a refresh of the search results.  Something like that.  I can't pinpoint it for sure.

I've setup something once for highlighting words, but I can't remember what I did and don't know what I did with it.  If I can remember, I'll let you know.

[arun babu]

Will try that approach and let you know

Thanks

Arun

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2fd301ab-57c5-4268-b345-bf159be55028n%40googlegroups.com.

[arun babu]

Hi Charlie,

I made some changes to the demo based on the discusions in the talk TW forum. Now the modal search edit option works ok.

https://multicolumn-krystal.tiddlyhost.com/#Search%20modal%20button

[Charlie Veniot]

Hey, that looks really good !

[arun babu]

Hi Charlie,

I want to edit this tKwm template such that the modal which opens when I click on the links show the editor shown in the image given below - I have named it as "Editor for modal search"

I think I have to modify this part of the tKwm template.

<$action-sendmessage

$message="tm-modal"

$param={{{ [<currentTiddler>!is[missing]] [<currentTiddler>uppercase[]!is[missing]] +[first[]] }}}

template="Keyword Viewer" />

But where and how to add the template (Editor for modal search)

Arun.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/23940103-8df0-45c1-ae8c-af693e2d098fn%40googlegroups.com.

[Charlie Veniot]

Yup, that's what you want to change.

Get rid of the "template="Keyword Viewer" line.

Setup $param="Editor for modal search"

If you want the Editor for modal search to get some kind of parameter related to whatever the tKwm link, then as per https://tiddlywiki.com/#WidgetMessage%3A%20tm-modal, setup some parameter without a dollar sign.

So if you add a parameter called "this_tiddler", you might have this_tiddler=<<currentTiddler>> .

In Editor for modal search, you have access to this parameter without having to do anything else.  All you have to do is refer to <<this_tiddler>>.

[arun babu]

Hi Charlie,

Can you take a look at this demo.

https://multicolumn-krystal.tiddlyhost.com/

Click on the tKwm link in the topbar to see all relevant tiddlers and demo.

Arun.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/84c09ed0-ce07-468e-8136-c0cc2123281dn%40googlegroups.com.

[Charlie Veniot]

Holy moly, that TiddlyWiki looks spectacular.

[arun babu]

I  missed one point. New template (tKwn) I made is not working as intended - here is the link for it - https://multicolumn-krystal.tiddlyhost.com/#tKwn

I am not able to get the "editor for modal search" for the current tiddler within the modal.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/31de93ca-1cdf-4074-8885-2f90a5045305n%40googlegroups.com.

[Charlie Veniot]

I had written earlier:

Yup, that's what you want to change.

Get rid of the "template="Keyword Viewer" line.

Setup $param="Editor for modal search"

If you want the Editor for modal search to get some kind of parameter related to whatever the tKwm link, then as per https://tiddlywiki.com/#WidgetMessage%3A%20tm-modal, setup some parameter without a dollar sign.

So if you add a parameter called "this_tiddler", you might have this_tiddler=<<currentTiddler>> .

In Editor for modal search, you have access to this parameter without having to do anything else.  All you have to do is refer to <<this_tiddler>>.

It would probably be a good idea for you to play with empty.html and experiment with modals to make sense of things.

Once you understand how modals work, the following will make more sense if it seemse like gibberish now:

<$action-sendmessage  $message="tm-modal" $param="Editor for modal search" this_tiddler=<<currentTiddler>> />

Nothing to add in Editor for modal search.  In that tiddler, you can now use <<this_tiddler>> as the reference for whatever happens to be the current tiddler (i.e. the one that brought up the "Editor for modal search" tiddler as a modal.)

[arun babu]

Hurray. It works now. https://multicolumn-krystal.tiddlyhost.com/#tKwm:tKwm%20tKwn%20%5B%5BtKwn%20and%20tKwm%20demo%5D%5D%20%5B%5BEditor%20for%20tKwn%5D%5D%20%5B%5BEditor%20for%20modal%20search%5D%5D

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5cd35206-05a2-430a-a310-1c5581ab40den%40googlegroups.com.