Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
control CSS-positioning via variable (SC 2)
Hey everybody!
[img][/img] For my colaborative writing project (I've bugged the forum with it on other occasions), I want to show the writers position within the arc of tension dynamically using the image I attached.
Here is what I'd like to accomplish:
1. There is a finishing date, when the all the stories are supposed to have been finished.
2. There is a determined amount of steps (e.g. weekly meetings) which divide the period from the start to the finish date.
3. Using the provided image, I'd like a pointer (basically a vertical line which moves horizontally) to show the position within the arc of suspense. This means that let's say after three weeks the pointer moved e.g. 30% from left to right.
My question concerns mainly the styling part of this problem. I guess I could just go and calculate the position of the pointer manually and toggle classes as time moves on, but I am sure there is a better solution which can calculate the "animation" of the pointer.
[img][/img] For my colaborative writing project (I've bugged the forum with it on other occasions), I want to show the writers position within the arc of tension dynamically using the image I attached.
Here is what I'd like to accomplish:
1. There is a finishing date, when the all the stories are supposed to have been finished.
2. There is a determined amount of steps (e.g. weekly meetings) which divide the period from the start to the finish date.
3. Using the provided image, I'd like a pointer (basically a vertical line which moves horizontally) to show the position within the arc of suspense. This means that let's say after three weeks the pointer moved e.g. 30% from left to right.
My question concerns mainly the styling part of this problem. I guess I could just go and calculate the position of the pointer manually and toggle classes as time moves on, but I am sure there is a better solution which can calculate the "animation" of the pointer.
Comments
Can anybody think of a game, where SVG is used dynamically?
The CSS calc function mostly works, but that won't get you a date for calculating where the line needs to be located.
@TheMadExile : I'd use whatever suits best (easiest). I was thinking of a very narrow div put on top of the image. Is there a way to set e.g. $pointerXvalue and assign this to the CSS of said element?
For example. Assume the line is something like <div id="line"></div> and you're positioning it via its left property. The following will set it to 300px in from its initial position:
<<script>> $('#line').css({ left : '+=300px' }); <</script>>To do the same thing, but animated over three seconds:<<script>> $('#line').animate({ left : '+=300px' }, 3000); <</script>>SEE: <jQuery>.css() method and <jQuery>.animate() method.
Here is what I came up with to calculate the pointer position in respect to start, finish and current date:
<<silently>> <<set $startDate to new Date("January 1, 2017")>> <<set $finishDate to new Date("May 31, 2017")>> <<set $currentDate to new Date()>> <<set $days to 1000*60*60*24>> <<set $duration to $finishDate - $startDate>> <<set $timeToEnd to $finishDate - $currentDate>> <<set $imageWidth to 800>> <<set $steps to Math.floor($duration / $days / 7)>> <<set $timePassed to $currentDate - $startDate>> <<set $weeksPassed to Math.floor($timePassed / $days / 7)>> <<set $stepWidth to Math.floor($imageWidth / $steps)>> <<set $progressOffset to $stepWidth * $weeksPassed>> <</silently>> <div id="container"> <img id="arc" src="https://placehold.it/800x600.png">; <img id="pointer" src="https://placehold.it/3x600.png/cc0000">; </div> <<script>> $('#pointer').css({ left : '+=20px' }); <</script>>The CSS to have the pointer appear on top of the image, just in case it might be useful to somebody is
<<script>> $('#line').css({ left : '+=300px' }); <</script>>using a SugarCube variable (e.g. "+=" + $progress + "px" instead of +=300px)?
As noted in the <<script>> macro's documentation, it executes code as JavaScript, not TwineScript. The relevant line (bold emphasis added):
That being the case, you'll need to use one of the methods of accessing story variables—since $progress is a story variable—available within pure JavaScript. To access the current story variable store, you may use either State.variables or the variables() function—n.b. you do not use the story variable sigil ($) in this case. For example:
// Using State.variables $('#line').css({ left : '+=' + State.variables.progress + 'px' }); // Using variables() $('#line').css({ left : '+=' + variables().progress + 'px' });I tend to prefer using State.variables as it doesn't require an extra function call.