Overview

SkyCiv Apps allow you to build your own App directly on top of SkyCiv Structural 3D. We have provided access to an extensive list of S3D functions to help you create custom tools.

You can activate various built in apps in your account settings. Once they have been toggled on, you will find them available in the Apps dropdown menu inside of S3D.

Below is the Bill of Materials App - one of the built in apps. This App gathers and displaus useful insights about the current model such as materials, sections, cost and more!

caution

Apps should use functions only from the S3D Functions category.

The SkyCiv Bill of Materials App is an example of a SkyCiv App

Getting Started#

To get started, simply open up SkyCiv Structural 3D. Then open your developer console by hitting CTRL+SHIFT+J or F12 (this may depend on your browser) and pasting the below code. This will install a sample app, you can continually copy and paste code into the Console.

jQuery(document).ready(function () {
    const app_id = 'my_cool_app';

    const config = {
        id: app_id, // The ID must be unique amongst other apps.
        name: 'Hello SkyCiv Apps',
        width: '600px',
        height: '600px',
        icon_img:
            'https://platform.skyciv.com/storage/images/logo-pack/SkyCiv_Logo_IconOnly.png',
        icon_img_square:
            'https://platform.skyciv.com/storage/images/logo-pack/SkyCiv_Logo_IconOnly.png',
        draggable: true,
        content: `
            <html>
                <head>
                    <style>
                        /*Give your classes a unique suffix to ensure they dont interfere with existing styles*/
                        .main-coolapp {
                            /* Flex column to make all children stack downward */
                            display: flex;
                            flex-direction: column;
                            /*Margin auto to center the main container*/
                            margin: auto;
                            /* Stop container getting too wide */
                            max-width: 400px;

                        }
                        .h1-coolapp {
                            text-align: center;
                            color: black;

                        }
                        .info-coolapp {
                            border: 2px solid #289dcc;
                            padding: 12px;
                            border-radius: 4px;
                        }
                    </style>
                </head>

                <body>
                    <main class="main-coolapp">
                        <h1 class="h1-coolapp">Hello SkyCiv Apps</h1>

                        <button 
                            class="ui button" 
                            onclick="SKYCIV_APPS.${app_id}.customFunction()"
                        >
                        Notify
                        </button>

                        <br />

                        <button 
                            class="ui button primary" 
                            onclick="SKYCIV_APPS.${app_id}.secondCustomFunction()"
                        >
                        Screenshot
                        </button>
                        <br />

                        <p>Click screenshot to show an image</p>
                        <img id="screenshot" alt="S3D Screenshot"/>
                        <br/>

                        <div class="info-coolapp">
                            <p>
                                S3D uses
                                <a href="https://semantic-ui.com/">Semantic UI</a> and
                                <a href="https://jquery.com/">jQuery</a>.
                            </p>
                            <p>This may help you build your own user interface!</p>
                        </div>
                    </main>
                </body>
            </html>
        `,
        onInit: function () {
            // This is called when the page loads the app.
            console.log('App has been initalised');

            // Hide the empty img element using jQuery.
            $('#screenshot').hide();
        },
        onFirstOpen: function () {
            // This is called on the first open of the App in the current S3D session.
        },
    };

    // This assigns the app into SKYCIV_APPS[app_id]
    new SKYCIV_APPS.create(config);

    // Get a reference to our app
    const app = SKYCIV_APPS[app_id];

    // Add custom functions to the application
    app.customFunction = function () {
        console.log('The custom function was invoked. Showing notification!');

        // Show a notification
        SKYCIV.utils.alert.sideNotify({
            title: 'Success ✅',
            body: 'You can let the user know what is happening.',
            time: 5000,
            auto_hide: true,
            theme: 'dark',
        });
    };

    app.secondCustomFunction = function () {
        console.log('The SECOND custom function was invoked.');

        // Get the model data
        const model = S3D.structure.get({ api_format: true });

        // Check if there is a model to screenshot
        const node_count = Object.keys(model.nodes).length;
        if (node_count > 0) {
            console.log('There is model data. Take a screenshot!');

            // A function to handle the data produced from the screenshot
            function callback(screenshotData) {
                // Using jQuery:
                // Get the img element
                const imgElement = $('#screenshot');
                // Set its src property to the screenshot data
                imgElement.attr('src', screenshotData);
                // Show the img element
                imgElement.show();
            }

            // Take a screenshot
            S3D.graphics.screenshot(callback);
        } else {
            // Tell the user to open a model
            SKYCIV.utils.alert.sideNotify({
                title: 'No Model ⛔️',
                body: 'Try opening a model before taking a screenshot.',
                time: 5000,
                auto_hide: true,
                theme: 'dark',
            });
        }
    };

    // Initialize the app!
    app.init();
});

Initialising Options#

Key	Type	Description
`id`	`string`	File name of your model.
`name`	`string`	Path in your cloud file storage.
`content`	`string`	HTML string of what should be displayed in the app.
`width`	`string`	Optional width setting for app window.
`height`	`string`	Optional height setting for app window.
`icon_img`	`string`	URL of image to be used.
`icon_img_square`	`string`	URL of image to be used within the app header.
`draggable`	`bool`	Is the app window draggable. True by default.
`resizable`	`bool`	Can user resize window? Used alongside `resizeableFunction` to update.
`resizeableFunction`	`function`	Function which runs when the app window is resized.
`help_url`	`string`	URL of documentation or help page.
`onInit`	`function`	Function which runs when the page loads the app.
`onFirstOpen`	`function`	Runs when the app is open for the first time.
`onSoftwareUpdate`	`function`	Function to run after changes are made to your model in S3D.
`beforeShow`	`function`	Before the app is shown, run this function.
`aferShow`	`function`	After the app is shown, run this function.
`beforeHide`	`function`	Before the app is hidden, run this function.
`aferHide`	`function`	After the app is hidden, run this function.

Core Functions#

Once your app is initalized, you can call the following functions to make the most of your app. SKYCIV_APPS.create() will create the app and add it to SKYCIV_APPS as an object. You can then access all of the default and user defined functions for this app.

In the above example, we created an app. We now have access to the following functions from the console:

SKYCIV_APPS[app_id].init(); // Initialises the app. Must be run after creating the app

SKYCIV_APPS[app_id].show(); // Shows the app window

SKYCIV_APPS[app_id].hide(); // Hides the app window

SKYCIV_APPS[app_id].getContainer(); // Return the window as a jQuery element

SKYCIV_APPS[app_id].hasBeenOpened(); // Returns true or false

SKYCIV_APPS[app_id].isOpen(); // Returns true or false

SKYCIV_APPS[app_id].myFunction(); // Calling a custom function we wrote

What's next?#

Once you've built and tested your app, email us at [email protected] to learn more about getting this installed on our platform for internal or public use!