Hello, I have a question - how to update the right UI panel?
I catched the topic how it is possible to create on twinery org
Section: /questions/25976/how-to-create-a-right-sidebar
(sorry, it wasn’t allowed to add link, but it is official twinery site, isn’t it?)
Then I tried to create function where I firstly deleted “right-ui-bar” item and then try to re-create it again the same way as in example - I see the panel but it is empty.
Also I tried to read the function uiBarUpdate in my html. It contains “destroy” and “init” methods in the return section but it is difficult for me now.
Maybe someone can help how to realize update method? Thank you.
I am not sure what you mean by updating the right UI bar.
Do you mean creating it on the page?
→ then I recommend using the original code for that sidebar, made by Greyelf can be found on the older Twine forum.
Do you mean populating it with code and text?
→ then you need to create a passage called StoryRightSidebar and add whatever you want in it.
Do these question not cover your issue?
→ then please copy-paste the code you have about the sidebar here so we can see what is not working
(you can click on the </> icon to create a code block in your message)
Thank you for support.
I mean is it possible to do something like <<run UIBar.update()>> for right Panel? And yes, I used the code from the link that you provided.
The example of part of my code inside right panel:
<<set _curPassage to passage()>>
<<if $rightPanel is undefined>>
<<set $rightPanel to {}>>
<<set $rightPanel.panel to "quests">>
<</if>>
<<button "Quests">>\
<<set $rightPanel.panel to "quests">>\
<<set _curPassage to passage()>>\
<<goto _curPassage>>\
<</button>>\
<<button "Items">>
<<set $rightPanel.panel to "items">>\
<<set _curPassage to passage()>>\
<<goto _curPassage>>\
<</button>>\
\
\
\
<<if $rightPanel.panel is "quests">>\
<center>List of Quests:</center>
Here the quests handler.
<<elseif $rightPanel.panel is "items">>\
<<if $items.$good.length > 0 >>\
Here the list of items
<<else>>
<center>you have no goods</center>
<</if>>\
\
\
\
<</if>>\
I want to shift between Quests&Items entities without changing of passage like I do now by “goto curPassage”
IIRC, I think the UIBar API is only linked to the #ui-bar element (so the left one only).
(which should be used parsimoniously to begin with)
But the Right Sidebar should automatically update when you move from one story passage to another.
If you want to update the content of the sidebar without moving to a new passage, you could:
use an event listener on the sidebar element (javascript/jquery)
wrap certain bits inside the right sidebar inside a <div>/<span> with a defined id, and use the <<replace>> macro to update the content of that element.
1: Assign the special nobr Passage Tag to your StoryRightSidebar Passage.
Doing that means you don’t need to use \Line Continuation markup to suppress unwanted line-breaks. You can then manually add <br> HTML Line Break elements where you actually want a line-break to occur.
2: Initialised the $rightPanel variable inside your project’s StoryInit special Passage.
<<set $rightPanel to {
panel: "quests"
}>>
3: There is an invalid dollar-sign character in your $items.$good.length reference.
<<if $items.good.length > 0 >>
Here the list of items
<<else>>
<center>you have no goods</center>
<</if>>
The JavaScript code in the linked Right Sidebar implementation includes the following line near the end of it…
…and it is that function call that causes the processed contents of the StoryRightSidebar Passage to be injected inside the right-ui-bar-body ID’ed HTML element that represents the “body” area of the right sidebar.
You can call that same function inside your <<button>> macros to cause the content of that “body” area. The following is a variation of your original code that does this, using the <<run>> macro…
<<button "Quests">>
<<set $rightPanel.panel to "quests">>
<<run setPageElement('right-ui-bar-body', 'StoryRightSidebar')>>
<</button>>
<<button "Items">>
<<set $rightPanel.panel to "items">>
<<run setPageElement('right-ui-bar-body', 'StoryRightSidebar')>>
<</button>>
<<if $rightPanel.panel is "quests">>
<center>List of Quests:</center>
Here the quests handler.
<<elseif $rightPanel.panel is "items">>
<<if $items.good.length > 0 >>
Here the list of items
<<else>>
<center>you have no goods</center>
<</if>>
<</if>>
note: My Right Sidebar implementation was written before the UIBar.update() method was added to that API, which is one reason why my implementation doesn’t have an equivalent method. But if you review the code of that method you will see it uses the same setPageElement() function to update specific areas of the Left Sidebar.
As an FYI. The pending, ridiculously delayed, SugarCube release will add a synthetic UI update event that can be used by third-party code to trigger their own updates, if that’s something you’d eventually want to update your right bar to do.
Thank you for this list of possible solutions.
I used variant that offered Greyelf, but I also like variant of Cycy and the variant with changing of content inside the tag. Also I don’t know how should look jquery solution I didn’t use it before.
Thank you. I used variant with setPageElement and it was indeed what I need.
Also thank you for the tips.
It’s a good thing and I’ll try to correct my scripts according it.
But I see the problem that Twine Code Editor is a bit small in functionality, so I can’t minimaze block of code here, so I use three “\” lines one by one to divide parts of code for eyes. Is it not bad solution or no?
Yes, I try to do that, but what about variables that should work only inside one passage?
By the way, while I has written it I remember about capture-tag and local variable. What do you think about using it inside one passage?
Because it works as is and I use it in a lot of passages and how to fix it inside Twine editor in one time I don’t know. Maybe by notepad++ by checking html directly.
My variant of your original StoryRightSidebar code example was tested in the Twine 2.x application, with the code formatting line-breaks & indentation I included in my example. I didn’t have to worry about the line-breaks appearing in the output because I tagged that StoryRightSidebar Passage as nobr.
Variables can have one of two scopes in SugarCube:
Story, which are stored in the History system, and maintain their value after a Passage Transition.
eg. A $count variable assigned a value of 1 in a visited Passage will continue to be 1 in later visited Passages, until that value is changed using a <<set>> macro or the variable is destroyed using the <<unset>> macro
Temporary, which are not stored in the History system, and such variables are destroyed when the next Passage Transition occurs.
eg. A _count variable assigned a value of 1 in the current visited Passage will not exist when a Passage Transition occurs.
So the $rightPanel variable being initialising in your StoryRightSidebar Passage was also available to any Passage visited after that initialisation.
re: your $item variable.
Ideally that Object variable, and the good Array property it contains, should be defined in your StoryInit special Passage…
<<set $items to {
good: []
}>>
You have two options for adding items to that Array, you can either:
Add those items when you initialised the Array property in StoryInit.
Note: Ideally static information should not be stored in Story variables, just the dynamic information that changes during play-through.
eg. the Item id & name information of your Items is static, so ideally it would be stored elsewhere like in the special setup variable. And the count information of the Items changes, so it should be stored in a Story variable.
