Lesson 6 - Locate Longest

In the previous section, we added functionality to animate a construction sequence. Let's add in the functionality for our last button.

Locate Longest Member#

Seeing as the longest member in the model might be more than one, we are going to store an array of all members that have the longest length.

Have a read through the code below and then we'll discuss it a bit further.

// Handle locate longest
app.locateLongest = function () {
    // Get the current model
    const model = S3D.structure.get({ api_format: true });

    let ids = [];
    let max_length = 0;
    for (let member_id in model.members) {
        // Get the length of the member with the current ID
        const length = S3D.structure.members.getLength(member_id, true);

        if (length > max_length) {
            // Reset the ids array with the current member
            // and store new max length
            ids = [member_id];
            max_length = length;
        } else if (length === max_length) {
            // Push the member to the array because it is
            // equal longest store new max length
            ids.push(member_id);
            max_length = length;
        } else {
            continue;
        }
    }

    // Let the user know with a non-intrusive notification
    SKYCIV.utils.alert.sideNotify({
        title: 'Success ✅',
        body: `Member(s) ${ids} have a length of ${max_length.toFixed(2)}.`,
        time: 5000,
        auto_hide: true,
        theme: 'dark',
    });

    // Highlight the members
    S3D.graphics.highlightElement('member', ids);

    // S3D.graphics.locator can only do one at a time.
    let wait_time = 1000;
    for (let id of ids) {
        // Trigger locator on each member
        setTimeout(() => {
            S3D.graphics.locator('member', id);
        }, wait_time);

        // Delay the locator on the next member
        wait_time += 200;
    }
};

Well that's not too bad, we're using a few tricks we already learned.

Assess Longest#

In the first loop, we used the built-in getLength() method to get a member's length. Then we constructed a simple if statement to determine if the current value is equal to the max, more than the max, or less than the max. If it is longer, then we reset our array to be only this member. If it was equal to the current maximum, then we added it to our array.

We then notify the user about our findings, nothing new here.

Highlight and Locate#

The highlightElement() method can take either an integer or an array of integers. If you need to keep adding to the selection, then you can add two more arguments, null, true.

S3D.graphics.highlightElement('node', 9, null, true);

The locator() method can only be called once at a time. So we added a timeout to give the animation time to finish on each member, then we move to the next member and call it again. This was done by using our setTimeout trick from earlier.

That's all 🎉#

Good Job, we've create a simple SkyCiv App with some various functions. You can reuse parts of the logic we created in your own app now. If you have any questions or need extra functionality get in contact with us on the Slack channel (icon at the top) or via the live chat.

Next up, checkout the different S3D functions you can access.