Another symbol scaling question 🙄

The extension performs on Symbol load. Persistent symbols only load once.

I do have an hack, which will work. But it is not ideal to use in general as you must hard code a class or identity into the extension.

We would then replace the line
window.HYPE_eventListeners.push({"type":"HypeSymbolLoad", "callback":symbolOverride_extension});


window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":symbolOverride_extensionSceneLoad});

And add this function to the top of the extension.

if('symbolOverride' in window === false) window['symbolOverride'] = (function() {
//---> new function
    function symbolOverride_extensionSceneLoad(hypeDocument, element, event) {
       var slides = [...element.querySelectorAll('.slide')];
		  for (let i = 0; i < slides.length; i++) { 
		  var slide_ =  hypeDocument.getSymbolInstanceById( slides[i].id) 
		  symbolOverride_extension(hypeDocument, slide_.element(), event)

All symbols have been give the class name slide

If I can figure out a way to simply find all the Symbols on a scene ( without hard coding ), then that would be cool ( any ideas.. like symbols getting new class names. symb_standard and sym_persistent via the Hype API :grinning: )

Also note anything I do here will have its pros and cons.
So although a scene load version sounds good in general, for the extension, the symbol would always be reset on scene load.


This example has the edited extension example. (37.4 KB)

@jonathan ,

re: above.

Do you see any issue using

var slides = [...element.querySelectorAll('.HYPE_scene ')];

element being the Hype scene calling the callback, which then queries for HYPE_scene hopefully only finding symbols.

Thanks for your help. Unfortunately I’m not a JavaScripter so most of it is over my head. In the example you posted, the line element has been shortened but it’s actually the motion path I want shortened - in the example I would want the red circle to finish at the end of the line, however it continues past the end of the line and seems to have the same length as in the first scene.

It certainly seems more difficult than I had hoped so I may have to rethink things. Thanks again.

The extension is documented. And is not that hard to understand.

I possibly can help.

I did not fully understand what you are trying to do though..?

I’m trying to make a web page that will provide an easy input for something currently in paper form. Currently the user has 12 attributes on which a performance is based and is scored by marking along a line - no numerical value is given but line is in 4 sections. On the next page the same attributes are represented as radial lines in a circle or wheel, where the highest values are represented at the centre and lowest at the outer edges, with the 4 sections shaded to easily see which attributes need to be worked on. It is essentially the same data represented in a different format. I can manage the sliders on the first page and hoped that their values could be represented on the second page by using persistent symbols which do keep the values and can be rotated but the paths of the sliders will be too long to fit in the circle model, i.e they will form the radius.

In fact they don’t need to be animated on the circle model, just represent the same relative position on the line (e.g 1/4 way along etc).

Thanks again.

Ok Think I get it. Let me have a look.

Can you post an example showing the scene 2 of how you want it to look. ( size wise etc )

I can do that tonight (Perth, Western Australia time). They will be designed to print out each scene full size on 1 sheet of A4 paper per scene.


In the mean time, using the extension (Extensively )

I came up with this.

When I say Extensively. There is a lot of data attribs, to rotate, top, left of text and scale.

But it does mean no real coding. Just setup and working out what needs to do what.
And you can easily see what each element is meant to do at a glance. So long as you name the data attributes in a way that tells you what its for and element it acts on.

Scene 1,

data attribs set as resets. ( A bonus in resetting persistent symbols - which is now possible due to extension running on scene load )

Scene 2,

data attribs set for changes.

vid showing it in action.

1 Like

Wow thanks for that. I will definitely try to work through your example. I've attached screenshots of the 2 pages - sorry for the redaction but I'm not at liberty to share the details. Nevertheless I hope this gives the idea.

Thanks again for all your help.

Something to get you going.

First have a look at the extension quick start so you understand the setup.
The main diff with this extension version is it runs on scene load instead of symbol load. Hence the resets if you go back to seen 1. (90.9 KB)


No problems that I can think of with the current runtime. I can't guarantee this will work forever though :slight_smile: .

1 Like

Thanks so much. That looks like it’s exactly what I wanted. I’m not sure about the resets though - I had a quick look on Firefox before heading to work and the values seemed to stay constant moving backwards and forwards between scenes. I will have a good look over the weekend. Thanks again, this is great.

This is the correct . On scene 2 I do not change anything to the ellipses, apart from scale.
So they remain where they should be going back and forth.
They changes are to the other elements. Like the text, markers (opacity), line scale, rotation..

So what I mean by reset, is:

These are persistent Symbols.

Normally if you make a change to a Persistent Symbol on one scene and then go to look at it on another scene, the changes will persist.

In the example we make changes to the Persistent Symbols on scene 2 to get their elements to change scale, rotation and so on.

So we need to reset/change them back to how they should look on scene 1 when we go back to scene 1.

( we actually make changes on scene 1 first, since we use attributes to set the base line visuals )

This was not possible with the extension before by the way , the extension normally only runs once when a symbol loaded.

But now, this version of extension runs on Scene load we can run the extension each time.

1 Like

Thanks Mark that is almost exactly what I want. I'm still just trying to figure things out, infrequently dabbling with Hype and not being a JavaScripter but just experimenting until things "seem" to work. I never would have figured this out by myself.

The highest values (to the right on the first page) need to be in the centre on the circle rather than the periphery. I've tried changing the rotation values in both the extension (Identity panel) and the rotation (Metrics panel) but just messed it up, sometimes having the whole symbol disappear from the layout. Can you give me a tip as to the best way to achieve this?

Thanks in anticipation. Hopefully I can follow the logic from there.

1 Like

Here is a little go at it without any code: (34,4 KB)

Just using a symbol and two scenes, but it wouldn't even need scene changes.

One could add color changes with timelines in the symbol and symbol actions in the persistent symbol.

Here is said color changing version with a symbol and timelines to change the color: (34,3 KB)


Hey that could also work and I think I could manage that without help. I was sort of locked into the thought that the two different presentations needed to be in separate scenes as it's a paper based idea on two separate pages, but there is no reason that the beginning state (i.e. after adjustments, before "Going Polar") and the end state could not be printed separately.

Thanks so much Max. There is so much help on this forum when you need it and always more than one way to achieve the desired results with Hype. In another life I would love to be spending my working days with this app.


I want to mark 2 separate solutions to my problem but looks like I can only mark 1, however so between your post Post 13 and Max Zieb's post Post 18 I have 2 different but excellent solutions. Thanks so much.


Yes, that would be a good feature. I added the color changing version above.


Yes there are normally always more than one way to do things, Hype is great in allowing us to do that .

knowing what to do depends on knowledge of what can be done, what the objective is and which solution would be best for the overall goal.

Glad you got your solution. :+1: