Access to elements (freeform,shapes etc) within a created symbol

Saola Animate Support Questions
1

Problem: Don’t want to use timeline, just javascript to move Top and Left of nested item(s) in symbol. Should i have used “Group” instead of “Convert to Symbol” when combining them?

Saola Animate version: 3.01 non trial

OS: Win 11

Notes:
From reading posts and learning the hard way that things are a bit different in Saola Animate than examples from javascript online. For example, using doc instead of document. I have spent DAYS trying to simply get a variable to access a nested thing inside a created symbol.
The following code works. Nothing was nested. the thimble was just one thing at the time (no nesting).

function sceneEventHandler(doc, e) {
// this slider moves the thimbles and spindle of the micrometer
var timelineSlider = doc.getElement('slider').dom.querySelector('.slider');
var output = timelineSlider.value;
 doc.getElement("tb").setText(output);

//get initial Top positions for the thimble and spindle 
 var spinPos = doc.getElement('spindle').dom.offsetTop;
 var thimPos = doc.getElement('thimble').dom.offsetTop;

// slider moves spindle and thimble 
timelineSlider.oninput = function() {
  output = this.value;
  doc.getElement("tb").setText(output);

  var element = doc.getElement('spindle');
  var elementDom = element.dom;
  var spin = elementDom.Top;
  var elementTop = elementDom.offsetLeft;
  // set new position
  spin = spinPos - (15 -  output);
//  elementTop += 10;
  element.setPosition( elementTop, spin);


  var element2 = doc.getElement('thimble');
  var elementDom2 = element2.dom;
  var thim = elementDom2.Top;
  var elementTop2 = elementDom2.offsetLeft;
  // set new position
 thim = thimPos - (15 -  output);
//  elementTop += 10;
  element2.setPosition( elementTop2, thim);
}
}

The problem starts when I have things nested in thimble, I want to make something move in it as the whole thimble moves a different way. I don’t want to use the timeline.
I have tried many combinations to access the nested element inside the thimble (now converted to symbol). No matter what i try, there seems to be no access to nested things.
Is it even possible???

Here are things I tried. And a bunch more that i did not keep track of…

//Converted Symbol "thimble" has a shape, a Freeform and symbol called "ThimbleMarks"

//first i tried the dot notation i am use to. Tried many variation of this btw. Nothing worked
var shape = doc.getElement("thimble.KnurledThimble");
  var shapeDom = shape.dom;
  var sTop = shapeDom.Top;
  var sLeft = shapeDom.offsetLeft;
doc.getElement("pos").setText(spinPos + "  |  " + thimPos+ " - " + sLeft);


**// tried to get class name .thimMarks of nested symbol** 
var TMarks = doc.getElement('thimble').dom.querySelector('.thimMarks');
var ThimMarks=TMarks
TMarks.setPosition( 44, 33);  //used numbers to eliminate problems using variables


// and even more stuff i tried....so much more with .childeren, nodes etc....ugh
var parentDoc = doc.getDoc();
var tm= parentDoc.getElement(ThimbleMarks);
var TMarks = doc.getElement('thimble').dom.querySelector('.thimMarks');
var ThimMarks=TMarks
var parentt = doc.getElement('thimble').dom.firstElementChild;
var TMarks =doc.getElement('thimble').getSymbol("ThimbleMarks");
var TMarks =doc.getElement('thimble').getSymbolDoc();
var tm = doc.getSymbol("thimble").getElement('ThimbleMarks');
var TMarks=tm.getElement('ThimbleMarks');
TMarks.setPosition( 44, 33);
parentt[2].setPosition( 44, 33);
 parentt[0].offsetTop=88;
var tm=getSymbol("thimble");
var tm=doc.getElement('thimble');
TMarks.setPosition( 44, 33);
doc.getElement("pos").setText(spinPos + "  |  " + thimPos + " - " + tm);
2

Perhaps this will help:

The simplest way to move an element using code is to get the element and use Saola’s own internal functions like this:

doc.getElement("greenDiv").setLeft('40px');

This works on elements placed on the scene whether or not they are grouped. Alternatively, you can get the element and use CSS to position the element like this:

doc.getElement("greenDiv").dom.style.top = "40px"

Note the important difference here is that once you get the ‘greenDiv’ element - you must access the ‘dom’ to apply a CSS style.

Lastly are Symbols. They are great and all powerful - but from my experience are only necessary if you cannot build the solution using JS / Timelines / Groups or CSS.

A Symbol is basically a Saola project inside another Saola project! Therefore to access the elements inside a Symbol, you must first access the ‘doc’ for that Symbol Instance* like this:

let thimbleDoc = doc.getElement("thimbleInstance").getSymbolDoc();

You can then use ‘thmibleDoc’ the same way you would use ‘doc’ in the main project like such:

thimbleDoc.getElement('yellowDiv').setLeft('40px');

example.saolapack (3.8 KB)

  • Final note. For those that don’t know, when you create a Symbol - it becomes a resource. When you drag that Symbol resource onto a Scene it becomes and instance of the Symbol.
2 Likes
3

First of all, THANK YOU for taking time to help me. While still a bit confused (I just need to re-read and further examine your attached example), I am beginning to get it. :slight_smile:
I come from the old days of ActionScript/Flash…so i get the Symbol and instance. And I knew about .dom from previous help for a project on here.

See, when I said i don’t want to use the timeline, I should have been more specific, I don’t want to use frames to control the micrometer I am making. BUT, i see what you did with the pink and blue group (used the timeline to make them one thing, which is grouping). I think that is what i am going to do.

I was going to quote you (after reading many posts the last few days on here looking for answers) in my initial message on here . Something similar to this “they did that to make it easier for non-coders, but under the hood it is still vanilla javascript.” I wish there was a detailed explanation (visual image/structure) in the help file about where Saola’s own internal functions/code reside in the structure tree. It is a bit fuzzy, but i am getting there. Thanks to the great forum and particularly you and ToanLS. Thank you again.

p.s. the Saola help file is good (lot’s of work put in to it), just wanted a bit more in the Java/Api section. :slight_smile:

4

Hi Bill,

You can find some extended APIs in this topic: API documentation questions - #2 by ToanLS

Regards

1 Like