HTML Images and/or videos - Twine 1.4.2 with sugarcube.

[Faldir]

I was looking trough some of the code used in Adam and Gaia.

More specifically I looked at a widget which allows the game to use either gif or webm. If the game's img folder contains a file named anon.gif the code <<showImageOrVideo "img/anon">> will display it in game. The same being the case if anon.gif had used the extension anon.webm.

I'm trying to get the code to also display jpg and png in the widget like this

Spoiler: Code

You don't have permission to view the spoiler content. Log in or register now.

But this means the game will try and display three paths to image/videos, which causes a lot of duplicated empty space.

My question is, does anyone of you bright fellows know how to extend to line <<='<video muted loop autoplay poster="' + _wFullFileName + '.gif"><source src="' + _wFullFileName + '.webm"></video>'>> which allows for both gif and webm - to also include jpg and png?

 

[guest1492]

I remember looking at that widget when I was modding the game... You can't do as you describe without rewriting the entire widget. Right now, the widget makes use of the html video element which allows you to have a "preview" image and then selects from a bunch of videos that will autoplay. If you don't have a preview image, it goes straight to the video. If you don't have video, it stays on the preview image.

Here's a possible solution for you:

<<widget "showImageOrVideo">><<nobr>>
    <div>
        <video muted loop autoplay class="mediaElement" @src="$args[0] + '.webm'" onerror="$(this).remove()" />
        <video muted loop autoplay class="mediaElement" @src="$args[0] + '.mp4'" onerror="$(this).remove()" />
        <img class="mediaElement" @src="$args[0] + '.gif'" onerror="$(this).remove()">
        <img class="mediaElement" @src="$args[0] + '.png'" onerror="$(this).remove()">
        <img class="mediaElement" @src="$args[0] + '.jpg'" onerror="$(this).remove()">
        <span class="mediaElement">Error: cannot find a valid extension for $args[0]</span>
    </div>
<</nobr>><</widget>>

And then for your stylesheet:

.mediaElement:not(:first-child) {
    display: none;
}

Of course, like before it still throws a ton of errors at you on the console. Never could figure out how to stop that (especially since Javascript doesn't allow for checking file existence on client side machines).

Adding the classes, css, and the error message is unnecessary if you are certain that there will always be exactly one file with that particular name and location.

*Edited because I left out the class on one of the elements.

 

[Faldir]

I remember looking at that widget when I was modding the game... You can't do as you describe without rewriting the entire widget. Right now, the widget makes use of the html video element which allows you to have a "preview" image and then selects from a bunch of videos that will autoplay. If you don't have a preview image, it goes straight to the video. If you don't have video, it stays on the preview image.

Here's a possible solution for you:

<<widget "showImageOrVideo">><<nobr>>
    <div>
        <video muted loop autoplay class="mediaElement" @src="$args[0] + '.webm'" onerror="$(this).remove()" />
        <video muted loop autoplay @src="$args[0] + '.mp4'" onerror="$(this).remove()" />
        <img class="mediaElement" @src="$args[0] + '.gif'" onerror="$(this).remove()">
        <img class="mediaElement" @src="$args[0] + '.png'" onerror="$(this).remove()">
        <img class="mediaElement" @src="$args[0] + '.jpg'" onerror="$(this).remove()">
        <span class="mediaElement">Cannot find a valid extension for $args[0]</span>
    </div>
<</nobr>><</widget>>

And then for your stylesheet:

.mediaElement:not(:first-child) {
    display: none;
}

Of course, like before it still throws a ton of errors at you on the console. Never could figure out how to stop that (especially since Javascript doesn't allow for checking file existence on client side machines). Adding the classes, css, and the error message is totally optional if you are sure there will be no situations where the file doesn't exist or that there won't be multiple files with the same path & name but different extensions.

Thank you a mountain! This works wonders!

I remember manually changing vast amounts of files to fit the code at the beginning of that game. Only wish I had known this sooner!

 

[guest1492]

I edited the code because I left out the class in one of the elements (in case you didn't catch that). I still wish there was a way to do it without all those error messages though.

If you are editing your game again, you might want to double-check that all your variables are spelled correctly because I remember there were quite a few that weren't. I wrote a little python script that'll scan an html file and count all the variables used. Well, it really only catches the part after '$' so if your variable is an object it only checks the object and not the object property you might be accessing. If a variable is used only a couple times, there's a good chance it's a misspelling or maybe you don't even need it.

Just unzip this in the folder with your html file, double-click, and type in the name of the html file (with extension). Assuming that you have python installed of course. It doesn't log which passages the variables are used in though because I'm lazy and I could just open up the html file in a text editor and do a search using the misspelled variable name.