Cloud and Mobile

2D Mobile Revit Model Editing Update

By Jeremy Tammik.

Continuing the research and development for my cloud-based round-trip 2D Revit model editing project, I updated the project description to emphasise more strongly that I am using pure client-side scripting to display and edit my graphical data, so there is nothing to implement or install at all on the mobile device, beyond testing that my server-side scripts really do their job.

The presentation outline looks like this:

• Show a Revit model.
• Export the model to a cloud-based data repository.
• Query and display the repository contents as a 2D rendering on a mobile device.
• Edit the model in the browser on the mobile device, updating the data repository.
• Watch the BIM in Revit auto-update.

I have completed the implementation of all these steps with the single minute exception of the prefix 'auto'.

In other words, I currently have two commands in my Revit add-in:

• CmdUpload uploads the room and equipment boundary data to the cloud repository, either from a manually selected set of rooms, or all rooms in the model.
• CmdUpdate retrieves the changes applied to furniture and equipment on the mobile device. This is currently a command triggered by the user.

Here is a little two-minute film demonstrating the current functionality to give you the idea:

Getting ready for the last stages, now...

First try at Windows 8 programming with JavaScript & HTML5

By Philippe Leefsma

As I’m planning to get some experience in Windows 8 programming I thought I was going to give it a try last week. One of the new way to develop Windows Store Apps, as Microsoft calls it, is to write your app using JavaScript, HTML and CSS code which opens some quite interesting perspectives comparing to what we are used to in term of desktop or even mobile apps and also may attract a different crowd into programming, mainly thinking here about web developer-like profiles.

After having skimmed the Hello, World! tutorial on JavaScript app from Microsoft, I decided to go ahead and create my first Windows 8 app. I needed an idea and a good candidate was to migrate the 2d HTML5 canvas script I created few weeks ago: Giving a try at HTML5 canvas and Javascript.

I was surprised how straightforward and quick it ended up to be. It basically took me three simple steps to get it running:

#1 - Create a new JavaScript –> Windows Store App project from Visual Studio 2012. You need to have installed the Windows 8 SDK and important consideration, you need to develop on a Windows 8 OS, here are the words from Microsoft: Windows Store app development in Visual Studio is supported only on Windows 8. Windows 7 is not supported. In addition, developer licenses aren't available for Windows Server 2012, so you can't develop Windows Store apps on that operating system.

Several files and directories are created by the default project template. You can see them below:

Like in a .Net project, the References folder contains libraries needed by your app. We can see here the Windows Library for JavaScript 1.0. A brand new library of components provided by Microsoft on top of JavaScript that we will see in a bit more details.

Then two folders that web developers are familiar with: CSS and js that will contain our .css and .js files.

The .html file that will contain images folder for our image resources, and a defaultthe html code being display by default at start up by our app.

The only thing I was doing here is taking the JavaScript code from my previous post and isolate it inside it’s own file: JsCAD.js

-

#2 - Because JavaScript doesn’t provide native support for namespaces and using global variables is always a bad practice, even for a small application, I gathered all the JsCAD methods and variables under a namespace-like structure as follow:

var JsCAD = {};

JsCAD.MemberFunction = function (args) {

    //Function body...

       JsCAD.MemberVariable = something…

 

}

I then edited the default.js file that contains the code related to default.html. Here is the content of this file, it provides callbacks invoked automatically by the framework. I simply placed a call in order to initialize my code (highlighted in yellow):

(function () {

 

    "use strict";

 

    WinJS.Binding.optimizeBindingReferences = true;

 

    var app = WinJS.Application;

    var activation = Windows.ApplicationModel.Activation;

 

    app.onactivated = function (args) {

 

        if (args.detail.kind === activation.ActivationKind.launch) {

 

            if (args.detail.previousExecutionState !==

                activation.ApplicationExecutionState.terminated) {

                // TODO: This application has been newly launched.

                // Initialize your application here.

 

            } else {

                // TODO: This application has been reactivated from

                // suspension. Restore application state here.

            }

 

            args.setPromise(WinJS.UI.processAll());

 

            JsCAD.onLoad();

        }

    };

 

    app.oncheckpoint = function (args) {

        // TODO: This application is about to be suspended.

        // Save any state that needs to persist across

        // suspensions here. You might use the

        // WinJS.Application.sessionState object,

        // which is automatically saved and restored across

        // suspension. If you need to complete an

        // asynchronous operation before your application is

        // suspended, call args.setPromise().

    };

 

    app.start();

})();

-

3# – And I finally edited the content of default.html using pretty much the same code I had previously in the browser version:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>JsCAD</title>

 

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0/css/ui-light.css"

          rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

 

    <!-- JsCAD references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/JsCAD.js"></script>

    <script src="/js/default.js"></script>

</head>

 

 

<body>

 

    <h3>Welcome to JS*CAD 1.0.0</h3>

 

    <hr /> <!-------------------------------------->

 

    <input type='button' onclick='JsCAD.initializeCanvas()'

           value='New Drawing' />

    <input type='button' onclick='JsCAD.initDrawLine()'

           value='Line' />

    <input type='button' onclick='JsCAD.initDrawCircle()'

           value='Circle' />

    Color:

    <input id="colorInput"

        type='text'

        style="width: 55px"

        onchange="JsCAD.onColorChanged()"

        value="FFFFFF"/>

 

    <input id="color" type='text' style="width: 55px" readonly/>

    <hr /> <!-------------------------------------->

 

    <canvas id="canvas" width="500" height="400">

        HTML5 Canvas Not Supported...

    </canvas>

 

</body>

</html>

  

Compiled that, run through the VS debugger and here is the stunning result!

You can get the source code of that project here:

JsCAD Basic.zip

It was so painless to achieve this that I wanted to put myself into more troubles and decided to give a further try at what Microsoft offers in its JavaScript library, fancy named WinJS. The main thing I was looking at so far is the UI part: a useful set of JavaScript controls is provided by the WinJS.UI Namespace. You will find a complete listing of them by following that link.

The way you use a Microsoft JavaScript control is by creating a containing DIV in the html document, specifying the control class name and its optional parameters:

<div id="ElementId"

        data-win-control="WinJS.UI.ControlClassName"

        data-win-options="{option1: value1, option2: value2, ...}">

</div>

Here are the controls I used in the enhanced version of my JsCAD app:

1. WinJS.UI.HtmlControl:

It’s a kind of frame that can contain any html document it points to, so your app can easily switch from one html page to another to replace a portion of the main html document. I used it to display the canvas and buttons of my app:

<div id="JsCADMainWnd"

        data-win-control="WinJS.UI.HtmlControl"

        data-win-options="{uri: '/html/JsCADMainWnd.html'}">

</div>

2. WinJS.UI.AppBar:

Pretty much every mobile app exposes options or settings and a logic place to put them is in the AppBar, a menu that appears at the bottom of the screen, either by right-clicking on desktops or swiping from the edge on touch-screens. I placed there the buttons I had previously inside the html page:

3 . WinJS.UI.Flyout:

A dialog-like window that can get displayed anywhere on your app window, that contains html code and that can get discarded by clicking outside of it. I used it to display a color picker dialog and I used for that a control provided by Yahoo!: http://developer.yahoo.com/yui/colorpicker/

4. WinJS.UI.Tooltip:

A tooltip control that can display any html content, not only plain text. I used it to display a link and an image when the mouse over my name in the title bar.

-

Here is the code for that enhanced version of the project:

JsCAD Enhanced.zip

You will find a great amount of examples for simple and advanced functionalities just there. So good luck and have fun for your future Window 8 development!

Event handling for a group of elements in JavaScript

By Daniel Du

Let’s say we are trying to add OnClick event handler for a group of button, a straight-forward way is to add “onclick” for each element of the group, like this:

<input id="Button1" type="button" value="button1" onclick="handler1()" /><br />
<input id="Button2" type="button" value="button2" onclick="handler2()" /><br />

But it will be pretty troublesome and tedious if you have many elements in this group. A better way is to add a parent element for this group and add event handler for this parent element, the click event will be bubbled up the parent element and the source element of event can be identified by id. For IE or Chrome, it is event.srcElement.id, for Firefox, it is event.target.id. Code goes as below:

<script type="text/javascript">
    window.onload = function () {
 
        var isFirxFox = function () {
            return navigator.userAgent.indexOf("Firefox") > 0 ? true : false;
        }
 
        var clickHandler = function (index) {
            //handle click event here
            alert("you clicked button"+index);
        }
 
        var btnGroup = document.getElementById("btnGroup");
 
        btnGroup.addEventListener("click", function (event) {
 
            var targetId;
            if (isFirxFox()) {
                //for Firefox
                targetId = event.target.id;
            }
            else {
                //For IE, Chrome
                targetId = event.srcElement.id;
            }
 
            var index = targetId.slice(6);
            clickHandler(index);
 

 
        });
    }
</script>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <div id="btnGroup">
        <input id="Button1" type="button" value="button1" /><br />
        <input id="Button2" type="button" value="button2" /><br />
        <input id="Button3" type="button" value="button3" /><br />
        <input id="Button4" type="button" value="button4" /><br />
        <input id="Button5" type="button" value="button5" /><br />
        <input id="Button6" type="button" value="button6" /><br />
        <input id="Button7" type="button" value="button7" /><br />
        <input id="Button8" type="button" value="button8" /></div>

 

BIM 360 Glue SDK, REST API, and Authentication

By Jeremy Tammik.

Hi. I just published two articles related to BIM 360 Glue:

• An overview of the SDK components and the REST API.
• An example of manually authenticating in the REST API using Python.

I hope these prove useful not only for BIM 360 Glue specifically, but also to understand how to use REST in general, and what a powerful tool Python and its huge range of libraries can provide, especially for manual experimentation in this area.

Real Cross-Platform Interactive 2D Graphics Using SVG

By Jeremy Tammik.

Hi everybody.

This is my first post to the Cloud and Mobile DevBlog.

All I will do here is point out that I spent my education day last Friday exploring how to display and interact with 2D graphics in a browser using SVG and JavaScript by implementing a very simple room polygon and furniture picker in SVG.

The main goal was to enable picking and identifying objects and ensuring that the same code and interaction is supported on all mobile devices, in particular both Android and Safari on iOS.

The latter added an additional little challenge at the end.

Here is the final result:

Try it out on your phone or somewhere!

I hope you find it useful.