Flexible Windows example with Figures on latest V15 update

Hi. Can someone help me out with a working version of the sample with “letter.jpg” / “scraps.jpg” figures?

inform7.com/extensions/Jon%20Ing … oc_24.html

Adapting the syntax to work with the newest version here: github.com/i7/extensions/blob/m … indows.i7x

You should just use Simple Graphical Window: github.com/i7/extensions/blob/m … Window.i7x

14 months ago, someone posted the same problem that I have: https://intfiction.org/t/how-to-use-flexible-windows-by-jon-ingold/8819/1

I think what we need is working story example code. I have spent a couple hours trying to play around with syntax - but I can’t make heads nor tails of how to get the “Inventory Window and Picture” to work on current extensions in the latest release of Inform 7. This sample has 3 windows: Inventory text, graphic (jpg), and main text. And, it scales the jpg graphics.

Here is a demo of 3 windows (no figures / jpg+png yet), but it has an issue with background behavior I don’t understand yet. Using rant because it’s pretty long set of code to copy/paste. It has text highlighting and window toggle - on the very latest release of Flexible Windows extension.

“Flexible Windows, Three with Border”, release 1:

[rant][code]
“Flexible Windows, Three with Border” by “Community”.

The story genre is “Glulx Technical Demonstration”. The release number is 1.

[
This is all about pure Glulx, not Z-Machine.

reference:
http://docs.textadventures.co.uk/ifanswers/ifanswers.com/662/flexible-windows-background-window-always-another-inform.html
]

Include version 15/161003 of Flexible Windows by Jon Ingold.

The side window is a [text] g-window spawned by the main window.
The position of the side window is g-placeright.
The scale method of the side window is g-proportional.
The measurement of the side window is 33.

Toggling the side window is an action out of world.
Understand “side window” as toggling the side window.

Carry out toggling the side window:
if the side window is g-present:
close the side window;
otherwise:
open the side window.

The border window is a graphics g-window spawned by the side window.
The position of the border window is g-placeleft. [left of the side window, not the main window]
The scale method of the border window is g-fixed-size.
The measurement of the border window is 20.

Rule for refreshing the side window:
say “This should be indented.[line break]So should this. And now… for something completely different! The quick brown fox jumps over the lazy dog, but we are waiting on the recorded replay to confirm.”.

The background color of the side window is “#FFC786”. [Peachy]
The background color of the border window is “#607080”. [Grey/Dark Blue]

[
ToDo: Problem. The border window background does seem to get the desired color on Inform 7 build 6M62. However, the side window seems to only get the default white background.
]

After constructing the side window:
[
Related to the ToDo above, tried these commands, but no difference.
now the background color of the border window is the background color of the side window;
now the background color of the side window is the background color of the side window;
]
open the border window;

[

== Text colors / Text highlighting

Reference: https://intfiction.org/t/i7-glulx-more-than-two-different-custom-text-colors/4665/1
“Glulx doesn’t have a special style 3. It only has two custom styles.”
]

Table of User Styles (continued)
style name background color color
special-style-1 “#FF0000” “#00FFFF
special-style-2 “#FFFF00” “#000000

To say red reverse:
say special-style-1;

To say default letters:
say roman type;

To say highlighted letters:
say special-style-2;

To say redfox letters:
say special-style-1;

[

== Main Story Logic

]

Place is a room. “Type ‘side window’ to toggle. A border window should also appear, three windows in total. This line continues to be lengthy so that you can see how word wrapping is impacted by the toggle of the side window. The quick brown fox jumps over the lazy dog, or did he? Try going west to see letter coloring.”.

Wild West is a room, west of Place. “You made it to the [red reverse]Wild Occidental[default letters], type [highlighted letters]‘east’[default letters] to return to Place. [redfox letters]Je ne puis pas jouer avec toi, dit le renard.”

[/code][/rant]

What I don’t understand is why the background color of the side window is white. A more complicated problem I have is that if you replace the Include:

[Include version 15/161003 of Flexible Windows by Jon Ingold.]
[DEPENDENCY: Simple Graphical Window automatically includes Flexible Windows by Jon Ingold]
Include version 10/161003 of Simple Graphical Window by Emily Short.

The window splits to half size, the bottom half. With no other changes to this code.

I see the background color. Which interpreter are you using?

If you add the Simple Graphical Window extension then that extension adds the graphics window. If you don’t want that you can unlist the graphics window construction rule.

I tried both of the ones built into Inform 7, and the “side window” gets white background. I built a release and put it into Quixie: eblong.com/zarf/glulx/quixe/quix … Play+it%21 and the “side window” gets the same yellow background as the main window. In all 3 interpreters, the border window does get a grey background.

Are you using the Gnome IDE? This is a known bug: inform7.com/mantis/view.php?id=1681

Yes, and based on that bug, I tried Gargoyle which does work - but Quixe on Chrome + Firefox also has a similar bug, where the border window is fine (grey) but side window doesn’t get peach? I guess I’ll open a bug with Quixe! Thanks. Bug opened: github.com/erkyrath/quixe/issues/24

With Version 10/161003 of Simple Graphical Window - I can change the background color of the graphic window, but I can’t find any examples of the current syntax to put a png/jpg into the graphics window. Can someone please post an example? Counterfeit Monkey is out there, but won’t compile due to some issue with Inform 7… and it’s hard to follow given how large and complex it is. The documentation for Simple Graphical Window doesn’t seem to cover using a jpg/png image file out of the Figures folder.

All you have to do is declare a figure and then set the currently shown picture variable to that figure. Set the current graphics drawing rule variable to one of the options, and it will handle drawing it.

[code]There is a room.

Include Simple Graphical Window by Emily Short.

Figure of map is the file “map.png”.

After starting the virtual machine:
now the currently shown picture is figure of map;
now the current graphics drawing rule is the standard placement rule;[/code]

Thanks for this sample.

Standard behavior on Inform 7 IDE is that if the asset is missing from the Figures folder, nothing is shown (it silently skips it).

One of the things I learned is that the Gnome Inform 7 IDE seems to not pick up graphic assets without exiting and re-starting Inform 7. I added a graphic jpg file into the Figures folder, altered the story source code, ran it - and nothing appears. I then exit Inform 7 and re-open it, run the same code, and it appears. I probably had the syntax right hours ago and didn’t know why it was silently failing to show the image. I’m not certain, but I don’t think I had this problem with normal in-line Figures (no extensions).

I sure find the IDE on Gnome gets confused about assets. Anyone actively defining new Figures should exit and re-open if it doesn’t behave right. I even had it confuse two different files as the same image (close/open cleared that problem).

Here is an example of changing the image:

"SimpleGraphicalWindowB" by "Community"

Place is a room. "Commands: 'gopher', 'duck', 'field'.".

[DEPENDENCY: Simple Graphical Window automatically includes Flexible Windows by Jon Ingold]
Include version 10/161003 of Simple Graphical Window by Emily Short.

Figure field-illustration is the file "field.png".
Figure duck-illustration is the file "duck.png".
Figure gopher-snapshot is the file "gopher.jpg".

After starting the virtual machine:
	now the currently shown picture is figure field-illustration;
	now the current graphics drawing rule is the standard placement rule;

Showing the duck is an action out of world. Understand "duck" as showing the duck. Understand "snaps" as showing the duck.

Carry out showing the duck:
	now the currently shown picture is figure duck-illustration;
	say "should be a fake duck now.";
	[close the graphics window;
	open the graphics window.]
	follow the current graphics drawing rule.

Showing the gopher is an action out of world. Understand "gopher" as showing the gopher.

Carry out showing the gopher:
	now the currently shown picture is figure gopher-snapshot;
	say "should be a gopher now.";
	follow the current graphics drawing rule.

Showing the field is an action out of world. Understand "field" as showing the field.

Carry out showing the field:
	now the currently shown picture is figure field-illustration;
	say "should be a field now.";
	follow the current graphics drawing rule.

I created a Window playground kind of story that changes out png and jpg graphic images of the Simple Graphical Window, you can live-play it on Quixe (a bit slow to open, 2MB in size): drive.google.com/uc?export=down … GNSTm03VzA

The source code for Inform 7 is here: github.com/BroadcastGames/Infor … e/story.ni

Suggestions welcome. For example, I haven’t found out how to ‘resize’ the graphics window without close and open, which impacts the ordering relative to the other windows. The story demonstrates 3 different techniques for doing that.