Teenager demonstrates that Formbird development is child’s play

Tom, who is interested in technology decided to spend 3 days of work experience learning and developing in Formbird. His father is an architect and Tom decided to build an app for dad. Tom’s app provides dad with a management tool to record details of his architectual / building projects.

Tom also decides that the basic data was not enough and wanted to provide for the inclusion of 3d rendering of dads projects. Using a 3rd party library he found, Tom adds that feature to Formbird by creating his own component, that was done on the last day 😉

Watch the video to see how Tom does it.

[download id=”1332″ template=”file”]

Toms JavaScript for his own 3d Rendering Component

function() {
var NotificationService = $injector.get('NotificationService');

    if (typeof scope.tplItem.readOnly === 'undefined' || scope.tplItem.readOnly === null) {
        scope.readOnly = false;
    } else {
        scope.readOnly = scope.tplItem.readOnly;
    }
    if (!(typeof scope.tplItem.enabled === 'undefined' || scope.tplItem.enabled === null)) {
        scope.readOnly = !scope.tplItem.enabled;
    }

    var libPromise = $ocLazyLoad.load({
        name: 'xeogl',
        files: ['vendor/tom/OBJModel.js', 'vendor/tom/glTFModel.js', 'vendor/tom/STLModel.js']
    });
    libPromise.then(
        function() {
            logger.info("****************** load xeogl done  ******************* ");
            var config = scope.tpl.components[scope.key];
            var uploaderName = "modelLocation"
            var uploaderName = "fileDetails";
            if(typeof config.fileLocation != "undefined" && config.fileLocation){uploaderName = config.fileLocation;}else{NotificationService.printMessage("Wrong Filetype", "warning");}
            var canvName = "xeogl-" + scope.fieldName;
            var objLink = "/api/getFile/" + scope.doc[uploaderName][0].fileNo + "/" + scope.doc[uploaderName][0].fileName;
            var objType = scope.doc[uploaderName][0].fileType;
            console.log("Getting file: " + objLink);
            console.log(objType);

            var scene = new xeogl.Scene({
                canvas: canvName
            });

            if (objType == "OBJ") {
                var uploadedObj = new xeogl.OBJModel(scene, {
                    id: "uploadedObj",
                    src: objLink
                })
                console.log("File Type OBJ")
            } else if (objType == "STL") {
                var uploadedObj = new xeogl.STLModel(scene, {
                    id: "uploadedObj",
                    src: objLink
                });
                console.log("File Type STL")
            } else if (objType == "GLTF") {
                var uploadedObj = new xeogl.GLTFModel(scene, {
                    id: "uploadedObj",
                    src: objLink,
                    smoothNormals: false,
                    smoothNormalsAngleThreshold: 90
                });
                console.log("File Type GLTF")
            } else {
            NotificationService.printMessage("Wrong Filetype", "warning");
                console.log("wrong file type")
            }
            new xeogl.CameraControl(scene);
        });
}