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/logos/light/square-1.png',
icon_img_square:
'https://platform.skyciv.com/storage/images/logos/light/square-1.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#

KeyTypeDescription
idstringFile name of your model.
namestringPath in your cloud file storage.
contentstringHTML string of what should be displayed in the app.
widthstringOptional width setting for app window.
heightstringOptional height setting for app window.
icon_imgstringURL of image to be used.
icon_img_squarestringURL of image to be used within the app header.
draggableboolIs the app window draggable. True by default.
resizableboolCan user resize window? Used alongside resizeableFunction to update.
resizeableFunctionfunctionFunction which runs when the app window is resized.
help_urlstringURL of documentation or help page.
onInitfunctionFunction which runs when the page loads the app.
onFirstOpenfunctionRuns when the app is open for the first time.
onSoftwareUpdatefunctionFunction to run after changes are made to your model in S3D.
beforeShowfunctionBefore the app is shown, run this function.
aferShowfunctionAfter the app is shown, run this function.
beforeHidefunctionBefore the app is hidden, run this function.
aferHidefunctionAfter 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!