HTML Array with images Sugarcube/Twine

Marduk73 · Oct 11, 2024

Hello everyone, the following problem.
I created 48 images with clock faces. I would like to pack these into an array and then use it like a normal time system.
Means time progress = new image display.
What's easier, give each image its own variable, and then put the variable into the array, or directly put the images into the array. If the latter, how does it work?
Thanks for the help

Greeedium · Oct 11, 2024

Make a Counter and Path Variable, and everytime the time changes you can just add the Counter to the path.

clockPath = "C:/Home/Images/TimeClock/"
currentClockImage = 0

imagePath = Path + Counter + ".FileFormat"

onTimeChange:
Counter ++
Counter = Counter % HowManyImages (48 in your example)

And you just name your images from 0-47

Or if you want to make it random you can just add all numbers from 0-47 and use the

You must be registered to see the links

Function

^^ these are just ideas wont work, not really code but pseudo code

Hope this helps?
have a great day!

guest1492 · Oct 12, 2024

Marduk73 said:
I would like to pack these into an array and then use it like a normal time system.

I assume here that you mean the display for your time system. The specifics of how to set it up depends on what you've named your images and exactly how your time keeping system works. The array should probably be stored as a

You must be registered to see the links

variable rather than a story variable.

With it being stored in setup, you can actually have an array of HTML image elements, but it would probably be easier just to have an array of the paths to your image files instead.

Have you considered creating a clock with CSS instead? I assume your 48 images would be for the times 12:00, 12:15, 12:30, etc... That's fine if your game keeps time in 15 minute increments but if you use smaller increments then it doesn't work so well.

Marduk73 · Oct 12, 2024

Yes, the increments is every 15 minutes, thats enough for me.
The Time system is easy,
so far only names and times of day like morning, noon, and so on.
It's just nothing special, and visually, well, rather simple. So my question is, how do I get the images into the array, how do I then process them further, is not the problem, it's just the exchange of strings on images
The code for the array : <<set $clock to [ $img1, $img2,....$img48.] , but, wich way insert the image in the $img1? <<set $img1 to "img @src="path"">> is this right?

Greeedium · Oct 12, 2024

I don't quite understand your problem.

You can simply just
<<set $img1 = $ImageSrc + $ImageOffset/Name>>
ImageSrc would be your parent folder with the images
Offset/Name would be the individual name like 0-47 or the time in military format like 1615
and then display the image adding the .format
<img @src="$img1 + '.png'">
no?

guest1492 · Oct 12, 2024

Having an array only helps if your images are named in a non-uniform manner. For example:

JavaScript:

setup.clock = [
    'images/132456897.jpg',
    'images/sadfa0s9j01.png',
    'images/09jpfoqvniw.jpg',
    'images/some_random_name.jpg',
    'images/some name with spaces.png',
    /* etc */
];

If your images are named in some type of logical order then you don't need an array at all.

In any case, nothing will work if your time system is only "morning, noon, and so on." How do you tell whether to display the image for 6:30 or 7:15 or 8:00 when the time is "morning"? Let's just assume instead that you have a variable named something like $dayPart that holds a value from 0 to 47.

If you are using an array and you want to display the corresponding image, you just use <img @src="setup.clock[$dayPart]">. If your images are named 0.png to 47.png and you don't have an array, then you can just use <img @src="'images/' + $dayPart + '.png'">.

If instead your images are named something like this:

Code:

'1200.jpg', '1215.jpg', '1230.jpg', '1245.jpg',
'0100.jpg', '0115.jpg', '0130.jpg', '0145.jpg',
'0200.jpg', '0215.jpg', '0230.jpg', '0245.jpg',
/* etc */

Then you can use

<img @src="'images/' + String(Math.trunc($dayPart / 4) + ($dayPart < 4 ? 12 : 0)).padStart(2, '0') + String($dayPart % 4 * 15).padStart(2, '0') + '.jpg'">

. If you find that too long to type, you can just turn it into a widget. Or you can also put the calculation into a function:

JavaScript:

setup.clock = () => 'images/' + String(Math.trunc(State.variables.dayPart / 4) + (State.variables.dayPart < 4 ? 12 : 0)).padStart(2, '0') + String(State.variables.dayPart % 4 * 15).padStart(2, '0') + '.jpg';

Then you can use <img @src="setup.clock()">.

Marduk73 · Oct 12, 2024

guest1492 said:
Having an array only helps if your images are named in a non-uniform manner. For example:

JavaScript:

setup.clock = [ 'images/132456897.jpg', 'images/sadfa0s9j01.png', 'images/09jpfoqvniw.jpg', 'images/some_random_name.jpg', 'images/some name with spaces.png', /* etc */ ];

If your images are named in some type of logical order then you don't need an array at all.

In any case, nothing will work if your time system is only "morning, noon, and so on." How do you tell whether to display the image for 6:30 or 7:15 or 8:00 when the time is "morning"? Let's just assume instead that you have a variable named something like $dayPart that holds a value from 0 to 47.

If you are using an array and you want to display the corresponding image, you just use <img @src="setup.clock[$dayPart]">. If your images are named 0.png to 47.png and you don't have an array, then you can just use <img @src="'images/' + $dayPart + '.png'">.

If instead your images are named something like this:

Code:

'1200.jpg', '1215.jpg', '1230.jpg', '1245.jpg', '0100.jpg', '0115.jpg', '0130.jpg', '0145.jpg', '0200.jpg', '0215.jpg', '0230.jpg', '0245.jpg', /* etc */

Then you can use <img @src="'images/' + String(Math.trunc($dayPart / 4) + ($dayPart < 4 ? 12 : 0)).padStart(2, '0') + String($dayPart % 4 * 15).padStart(2, '0') + '.jpg'">. If you find that too long to type, you can just turn it into a widget. Or you can also put the calculation into a function:

JavaScript:

setup.clock = () => 'images/' + String(Math.trunc(State.variables.dayPart / 4) + (State.variables.dayPart < 4 ? 12 : 0)).padStart(2, '0') + String(State.variables.dayPart % 4 * 15).padStart(2, '0') + '.jpg';

Then you can use <img @src="setup.clock()">.

Hi, i´m try this:

Code:

<<set setup.clock to ["time/img1.png","time/img2.png",....,"time/img48.png] <--is in StoryInit

widget for counter: <<widget "Time">><<set $uhr ++>><<if $uhr >= setup.clock.length>><<set $uhr =0>><--is in widget

widget for showing in StoryCaption <<widget "Uhr">><<switch $uhr>><<case 0>><img src="time/img1.png>...<<case 47>><img src="time/img48.png> <</widget>>

then in StoryCaption : <<Uhr>>

no images are displayed. Why?

Greeedium · Oct 12, 2024

Marduk73 said:

Hi, i´m try this:

Code:

<<set setup.clock to ["time/img1.png","time/img2.png",....,"time/img48.png] <--is in StoryInit

widget for counter: <<widget "Time">><<set $uhr ++>><<if $uhr >= setup.clock.length>><<set $uhr =0>><--is in widget

widget for showing in StoryCaption <<widget "Uhr">><<switch $uhr>><<case 0>><img src="time/img1.png>...<<case 47>><img src="time/img48.png> <</widget>>

then in StoryCaption : <<Uhr>>

no images are displayed. Why?

You need to use @src="" for Twine to find your image and put it into the Src for you.
Otherwise you will have to put in the raw sting of the path into src="" to get a proper result.
<img src="time/img1.png"> or <img @src="setup.clock[$uhr]">

Im guessing you typed out your code here, thats why your missing a " at the end of the src's in the cases?
Also i would recommend you rename some of these things, using Time, uhr and Uhr for 3 diffrent things will get confusing quite quickly.
I would suggest Widget "advancedTime", widget "displayTime" and $time, but thats up to you!

From the

You must be registered to see the links

you will be able to see the diffrence between src= and @src=, it can also be used for diffrent html attributes like Class and or ID, A practial exmaple from the Docs would be:
<img class="say-image" @src="'images/' + _args[0].toLowerCase() + '.png'">

Marduk73 · Oct 12, 2024

Greeedium said:
You need to use @src="" for Twine to find your image and put it into the Src for you.
Otherwise you will have to put in the raw sting of the path into src="" to get a proper result.
<img src="time/img1.png"> or <img @src="setup.clock[$uhr]">

Im guessing you typed out your code here, thats why your missing a " at the end of the src's in the cases?
Also i would recommend you rename some of these things, using Time, uhr and Uhr for 3 diffrent things will get confusing quite quickly.
I would suggest Widget "advancedTime", widget "displayTime" and $time, but thats up to you!

From the
You must be registered to see the links
you will be able to see the diffrence between src= and @src=, it can also be used for diffrent html attributes like Class and or ID, A practial exmaple from the Docs would be:
<img class="say-image" @src="'images/' + _args[0].toLowerCase() + '.png'">

My Code for switch :

Code:

<<switch $uhr>>
<<case 0>><img @src="time/d1.png"><<case 1>><img @src="time/d2.png"><<case 2>><img @src="time/d3.png"><<case 3>><img @src="time/d4.png">
<<case 4>><img @src="time/d5.png"><<case 5>><img @src="time/d6.png"><<case 6>><img @src="time/d7.png"><<case 7>><img @src="time/d8.png">
<<case 8>><img @src="time/d9.png"><<case 9>><img @src="time/e0.png"><<case 10>><img @src="time/e1.png"><<case 11>><img @src="time/e2.png">
<<case 12>>img @src="time/e3.png"><<case 13>><img @src="time/e4.png"><<case 14>><img @src="time/e5.png"><<case 15>><img @src="time/e6.png">
<<case 16>><img @src="time/e7.png"><<case 17>><img @src="time/e8.png"><<case 18>><img @src="time/a1.png"><<case 19>><img @src="time/a2.png">
<<case 20>><img @src="time/a3.png"><<case 21>><img @src="time/a4.png"><<case 22>><img @src="time/a5.png"><<case 23>><img @src="time/a6.png">
<<case 24>><img @src="time/a7.png"><<case 25>><img @src="time/a8.png"><<case 26>><img @src="time/a9.png"><<case 27>><img @src="time/b0.png">
<<case 28>><img @src="time/b1.png"><<case 29>><img @src="time/b2.png"><<case 30>><img @src="time/b3.png"><<case 31>><img @src="time/b4.png">
<<case 32>><img @src="time/b5.png"><<case 33>><img @src="time/b6.png"><<case 34>><img @src="time/b7.png"><<case 25>><img @src="time/b8.png">
<<case 36>><img @src="time/b9.png"><<case 37>><img @src="time/c0.png"><<case 38>><img @src="time/c1.png"><<case 39>><img @src="time/c2.png">
<<case 40>><img @src="time/c3.png"><<case 41>><img @src="time/c4.png"><<case 42>><img @src="time/c5.png"><<case 43>><img @src="time/c6.png">
<<case 44>><img @src="time/c7.png"><<case 45>><img @src="time/c8.png"><<case 46>><img @src="time/c9.png"><<case 47>><img @src="time/d0.png">
<</switch>>
shows an error: (Error: <img>: bad evaluation from attribute directive "@src": d1 is not defined)
but:
<<set setup.clock    to ["time/d1.png","time/d2.png","time/d3.png","time/d4.png","time/d5.png","time/d6.png","time/d7.png","time/d8.png",
                    "time/d9.png","time/e0.png","time/e1.png","time/e2.png","time/e3.png","time/e4.png","time/e5.png","time/e6.png",
                    "time/e7.png","time/e8.png","time/a1.png","time/a2.png","time/a3.png","time/a4.png","time/a5.png","time/a6.png",
                    "time/a7.png","time/a8.png","time/a9.png","time/b0.png","time/b1.png","time/b2.png","time/b3.png","time/b4.png",
                    "time/b5.png","time/b6.png","time/b7.png","time/b8.png","time/b9.png","time/c1.png","time/c2.png","time/c3.png",
                    "time/c4.png","time/c5.png","time/c6.png","time/c7.png","time/c8.png","time/c9.png","time/d0.png"]>>

I put the setup.clock into the java section, and <img @src="setup.clock[$uhr]" width="35%"> in storycaption. it works... thx for the help.

Greeedium · Oct 12, 2024

Remove the whole Switch and just do <img @src="setup.clock[$uhr]">

The wikifier lets me pass a string to Sugarcube and it will respond to it as if it were written as code.
Add me on discord if you like, i can reply faster. _greedium

Marduk73 · Oct 13, 2024

Hi the next problem, see images.

The code :

Code:

<<set setup.minutes to ["30","45","00","15"]>>
<<set setup.hour     to["7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","0","1","2","3","4","5","6"]    >>
<<set setup.days    to["Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag"]>>
<<set setup.week    to ["1","2",",3","4"]>>
<<set setup.month    to["Juli","August","September","Oktober","November","Dezember","Januar","Februar","März","April","Mai","Juni"]>>
<<set setup.year    to ["1","2","3","4","5"]>>

this part for setup,

Code:

<<widget "passtime">>
   <<set $min ++>>
   <<if $min >= setup.minutes.length>>
       <<set $min = 0, $stunde ++ >>
        <<if $stunde >= setup.hour.length>>
            <<set $stunde = 0, $tag ++>>
                <<if $tag >= setup.days.length>>
                    <<set $tag = 0, $woche ++>>
                        <<if $woche >= setup.week.length>>
                            <<set $woche = 0, $monat++>>
                                <<if $monat >= setup.month.length>>
                                    <<set $monat = 0, $jahr++>>
                           
                                <</if>>
                        <</if>>
                <</if>>
        <</if>>
    <<set $min          = $minutes%4 >>
    <<set $stunde         = $hours%24>>
    <<set $tag            = $days%7>>
    <<set $monat         = $month%12>>
    <<set $jahr            = $year%5>>
    <<set $clock            = $clock%48>>
   <</if>>  
<</widget>>

this part for passtime.
Minutes increase, but not the minutes. How come?
The clock doesn't change either. The part here:

Code:

<<widget "uhr">
                                <<set $clock ++>>
                                <<if $clock >=setup.clock.length>>
                                <<set $clock =0>>
                                <</if>>
      <</widget>>

dosnt work, why?
i changed the part: set $clock and put into the widget Uhr, now changed the image, but its broken. no image.

Greeedium · Oct 13, 2024

Marduk73 said:
<<set $min = $minutes%4 >>
<<set $stunde = $hours%24>>
<<set $tag = $days%7>>
<<set $monat = $month%12>>
<<set $jahr = $year%5>>
<<set $clock = $clock%48>>

My friend you are currently doing a big disservice for yourself with these names...
It's quite obvious why this code doesn't work, but everything being called min minutes and setup.minutes isn't helping currently

for the sake of your understanding and my Sanity:

$min -> $minuteIndex
$stunde-> $hourIndex
$tag-> $dayIndex
$woche-> $weekIndex
$monat-> $monthIndex

From the Bottom Part

Marduk73 said:
<<set $min = $minutes%4 >>
<<set $stunde = $hours%24>>
<<set $tag = $days%7>>
<<set $monat = $month%12>>
<<set $jahr = $year%5>>
<<set $clock = $clock%48>>

$min -> $minute
$stunde-> $hour
$tag-> $day + $tag-> $weekDay ($weekday == Name of the day)
$monat-> $month
The year will stay as is, and won't need changing but you get the jist.

1. We want to increase the Current Tine with <<passtime>>

<<set $minuteIndex++>> Will be sufficient
We want to go through the logic and update the index to be corrected if it is wrong.

We can do this pretty simply by just doing:
Code:
```
<<if $minuteIndex % setup.minute.length == 0>>
<<set $hourIndex++>>
<</if>>

<<if $hourIndex % setup.hour.length == 0>>
<<set $dayIndex++>>
<</if>>

<<if $dayIndex % 30 == 0>>
<<set $MonthIndex++>>
<</if>>
^^ This is just a suggestion you can also change it to look at the current Month and based on the current Month do $dayIndex % AmountOfDaysInMonth, to get a more accurate looking Time system.

Also, this Code might not work as intended if you increase any amount by more than 1 increment at a time, as the 0 Values will be "skipped."
```
And we do this for all the other values, as Modulo the % Operator gives us the Rest, after the division, so when it is 0, the value goes from the Maxmimum Value to the MiniumValueIf we use setup.days as an example Index 0 == "Monday, and 6 == "Sunday" So every time it goes from Sunday to Monday we want to increase the Week by 1.
By using Modulo we also don't care if we have values higher than 7 as 142 % 7 = 2 which is still in the range of 0-6 for the Array of setup.days
Update Display variables with the Correct values:
<<set $minute = setup.minutes[$minuteIndex % setup.minutes.length]
<<set $hours = setup.hour[$hourIndex % setup.hour.length]
<<set $weekDay = setup.days[$dayIndex % setup.days.length]
...
<<set $month = setup.month[$monthIndex % setup.month.length]
Currently, you are just saying: $min = min%4 so if min is 25 it will be set to 1, never reaching >= setup.hour

2. Now we should probably update the Clock, but that won't need any extra logic, i would suggest you rename the image files to 700.png, 715.png, 730.png, 745.png and then simply do <img @src="$Path + $hour + $minute + ".png"">

3. I would recommend you either change your Initial values in StoryInit to fit the time of 7:30 or make new $TimeOffSet/GameStartTime Variables and add that to your current time, so the game can start at 7:30, instead of messing around with your setup.timevariables Arrays. as then it might be harder to find potential bugs

Marduk73 · Oct 13, 2024

so can I delete this part?

Code:

    <<set $minute          = $minutes%4 >>
    <<set $hour         = $hours%24>>
    <<set $weekday            = $days%7>>
    <<set $week             =$week%4>>
    <<set $month         = $month%12>>
    <<set $year            = $year%5>>

und passtime replace with:

Code:

<<widget "passtime">>
<<set $minute++>>
<<if $minute % setup.minute.length == 0>>
<<set $hour++>>
<</if>>

<<if $hour % setup.hour.length == 0>>
<<set $weekday++>>
<</if>>

<<if $weekday % setup.days.length == 0>>
<<set $week++>>
<</if>>

<<if $week % setup.week.length ==0>>
<<set $month ++>>
<</if>>

<<if $month % setup.month.length ==0>>
<<set $year ++>>
<</if>>

<</widget>>

Und for displaying:

Code:

<<set $minute = setup.minutes[$minute % setup.minutes.length]
<<set $hours = setup.hour[$hour % setup.hour.length]
<<set $weekDay = setup.days[$day % setup.days.length]
<<set $week     =setup.week[$week % setup.week.length]
<<set $month = setup.month[$month % setup.month.length]

as a widget

Marduk73 · Oct 13, 2024

2. Now we should probably update the Clock, but that won't need any extra logic, i would suggest you rename the image files to 700.png, 715.png, 730.png, 745.png and then simply do <img @src="$Path + $hour + $minute + ".png"">

with this,what do you mean with $path? the way to the image? <img @src="Time/+ $hour+$minute+".png""> correct?

ps.: i have renamed the images from "0000.png to 1145.png"

Greeedium · Oct 13, 2024

You want to also put the "Display" Portion into <<passtime>>, so you already have the updated version, and you can just use $minute in your game, and every time <<passtime>> triggers, you will be able to see the new time.

HTML Array with images Sugarcube/Twine

Marduk73

Newbie

Greeedium

Newbie

guest1492

Member

Marduk73

Newbie

Greeedium

Newbie

guest1492

Member

Marduk73

Newbie

Greeedium

Newbie

Marduk73

Newbie

Greeedium

Newbie

Marduk73

Newbie

Greeedium

Newbie

Marduk73

Newbie

Marduk73

Newbie

Greeedium

Newbie