How to create a viewtemplate to float the TheBrain (echarts) to the right of tiddler text field using Shiraz/flexgrid/autolayout-with-image

, ,
#33 
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]!has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: absolute;
  right:0;
  margin-top: 146px;
}
</style>
</$list>

Are you telling that i should put the whole code given above inside reveal widget given below

<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">

<$button set="$:/state/SampleReveal2" setTo="show">{{$:/core/images/fold-button}}</$button>

</$reveal>
<$reveal type="match" state="$:/state/SampleReveal2" text="show">

<$button set="$:/state/SampleReveal2" setTo="hide">{{$:/core/images/unfold-button}}</$button>

</$reveal>

But when I tried like that it was not working.

#34

Yeah, because you want it to reveal/activate when you click the button, right?

What you’re showing doesn’t show that you put anything in there - ?
The idea is that you put it in the lower reveal. (I’m not sure if it is best put above or below the button, it depends on how you style the button to position it.)

#35

This is what actually I want it to look like. The only problem for me now is the position of the button - which I want to be in the right corner. Also the tiddler body should automatically fill the rest of the screen when the button hides the .rightside

I am not understanding what you are trying to say. Can you please show how you want the code to be

#36 
<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">
<$button set="$:/state/SampleReveal2" setTo="show" class="mybutton">
{{$:/core/images/fold-button}}</$button>
</$reveal>

<$reveal type="match" state="$:/state/SampleReveal2" text="show">
<$button set="$:/state/SampleReveal2" setTo="hide" class="mybutton">
{{$:/core/images/unfold-button}}
</$button>
<$list filter=.............>
ETC
</$list>
</$reveal>

<style>
.mybutton {float:right}
</style>

Test the above structure. Note that I put in a class param for the buttons and added a second styleblock. I’m not sure it will appear correct but it is a start.

1 Like
#37

Hey,
can someone put in the files for echarts as JSON, cause i’m fiddeling without success…
Best

#38

Hey @2right4 - do you actually think you question has anything to do with what is being discussed? Start your own new thread.

#39

Thank you @twMat . It worked. I had to fiddle with the margins little bit. This is the code I am using now (Edited)

<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">
<$button set="$:/state/SampleReveal2" setTo="show" class="mybutton">
{{$:/core/images/fold-button}}</$button>
</$reveal>

<$reveal type="match" state="$:/state/SampleReveal2" text="show">
<$button set="$:/state/SampleReveal2" setTo="hide" class="mybutton">
{{$:/core/images/unfold-button}}
</$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]!has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: absolute;
  right:0;
}
</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -65px}
</style>

image
image1282×521 17.5 KB

image
image1281×462 28.9 KB

Triggering reveal widget with action widgets
How to open TiddlerInfo panel to the right of the tiddler body instead of above it
How to open TiddlerInfo panel to the right of the tiddler body instead of above it
#40

ECharts — Awesome Visualization Library for TiddlyWiki5.

If you are looking for the echarts plug ins, drag and drop from the Plug ins tab in the above link.

https://tiddly-gittly.github.io/tw-echarts/#TheBrain

Copy the contents of TheBrain tiddler given in the above link into your wiki to get the echarts TheBrain.

1 Like
#41

@twMat currently the button is seen in all tiddlers, how to use filter to avoid this and where to put the filter code.

#42

hehe, you’re getting deeper into the rabbit hole

OK, so if you only want it on some tiddlers, then you must enclose all of the content in the viewtemplate in a “condition” like so:

<$list filter="""YOUR FILTER TO GET THE TIDDLERS YOU WANT""">

all the stuff
</$list>
1 Like
#43

4 posts were split to a new topic: Triggering reveal widget with action widgets

#44

@twMat One thing I noticed now is that, the reveal widget of all tiddler gets triggered when when I click on the reveal button of one tiddler. Is there any way to avoid this behavior ?

#45

instead of using state="SomeTiddler" use state=<<qualify "SomeTiddler">>
(see https://tiddlywiki.com/#qualify%20Macro)

The <<qualify>> macro automatically adds a unique “magic number” to the end of the state tiddler title. The number is based on the location in the “widget tree”, so it will be different for each tiddler in which the $reveal occurs.

-e

Triggering reveal widget with action widgets
Triggering reveal widget with action widgets
#46

Thank you @EricShulman for helping . I tried this.

Here is the code I used.

<$reveal type="nomatch" state=<<qualify "$:/state/SampleReveal2">> text="show">
<$button set=<<qualify "$:/state/SampleReveal2">> setTo="show" class="mybutton">
{{$:/core/images/fold-button}}</$button>
</$reveal>

<$reveal type="match" state=<<qualify "$:/state/SampleReveal2">> text="show">
<$button set=<<qualify "$:/state/SampleReveal2">> setTo="hide" class="mybutton">
{{$:/core/images/unfold-button}}
</$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: absolute;
  right:0;
  margin-top: -35px;
}
</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -65px}
</style>

I had to use state=<<qualify "SomeTiddler">> and set=<<qualify "SomeTiddler">> for it to work. Now reveal widget of each tiddler behave independently.

But one problem is that the solution given by Saq to trigger reveal widget using keyboard shortcut here is not working now.

Triggering reveal widget with action widgets
#47

Edit: never mind the following.

You’re assigning the same state tiddlers. These tiddlers are intended to be “made up” by the user (i.e you) so you can use any tiddler to store the states. In other words, use two different tiddlers :slight_smile:

#48 
<$reveal type="nomatch" state=<<qualify "$:/state/SampleReveal1">> text="show">
<$button set=<<qualify "$:/state/SampleReveal1">> setTo="show" class="mybutton">
{{$:/core/images/fold-button}}</$button>
</$reveal>

<$reveal type="match" state=<<qualify "$:/state/SampleReveal2">> text="show">
<$button set=<<qualify "$:/state/SampleReveal2">> setTo="hide" class="mybutton">
{{$:/core/images/unfold-button}}
</$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: absolute;
  right:0;
  margin-top: -35px;
}
</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -65px}
</style>

I made two separate state tiddlers, it’s not working. When I was using the same state tiddlers, it was working - only problem was that the keyboard shortcut wasn’t working

#49

Oh, wait, sorry, my previous claim was not correct. For one “reveal construct” the state should be the same for all parts. It is only if you want a second such construct that it has to be different state tiddlers. Sorry.

I’m afraid I can’t tell what’s wrong with the keyboard shortcut tho.

#50

This issue also got fixed based on this reply from @EricShulman in another thread. Thank you @EricShulman

Here is the current code I am using.


<$let stateID={{{ [[$:/temp/abc/]addsuffix{!!title}addsuffix<qualify>] }}}>
   <$reveal type="nomatch" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="show" class="mybutton" >
         {{$:/core/images/info-button}}
      </$button>
   </$reveal>
   <$reveal type="match" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="hide" class="mybutton" >
         {{$:/core/images/info-button}}
      </$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]!has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: relative;
  float:right;
  right:0;
	}

</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -25px}
</style>
Qualify widget, unique strings
Triggering reveal widget with action widgets
How to float the output of a ViewTemplate next to other body content?
How to create a field macro similar to the tag macro
#51

Seems cool. Can you share with us a screenshot of the final output of your floating Brain plugin implementation?

#52

I call it sidetabs now. Although I started it to float TheBrain to the right of tiddler body, now I rarely use TheBrain with it (partly becuase of some compatibility issues with multicolumn plug in and hotzone plug in).
I have added more tabs to the sidetabs like node-explorer from Shiraz, Tiddler renaming and fields from Saq’s UI experiments, and an Editor. You have to click on the Info button floating on the right side of the tiddler body to see the sidetabs.

Here is the current version- https://multicolumn-krystal.tiddlyhost.com/ - Click on the sidetabs link in the topbar to see the demo. TheBrain dosent work in this implentation - due to some compatibility issues with multicolumn plug in and hotzone plug in I guess. If you use it in a TW without multicolumn plug in, it might work (I will post a demo later if it works). Also it needs some CSS modifications for correct alignment of the sidetabs parallel to the tiddler body because in some cases, I have seen the sidetabs align below the level of the tiddler body.

This is a slightly older version which works well only with krystal horizontal layout plug in - https://krystal.tiddlyhost.com/#. (posted to show how TheBrain works in sidetabs)