3D tag cloud is also possible via BSP in CRM system!

[JerryWang]

Actually the code of this example comes from a Thoughworker in China and this is his blog.

I just move his code to a BSP component. Feel free to have a look at his blog directly, in case you understand Chinese :smile:

Once the BSP application is launched, all the tags will move in an ellipse trace:

To achieve it you just need a BSP component with a simple view:

paste the html source below to main.htm:

<%@page language="abap"%>

<%@extension name="htmlb" prefix="htmlb"%>

<script type="text/javascript" src="test.js"></script>

<div id="tagCloud">

<style type = "text/css">

  #tagCloud {

    height: 300px;

    width: 600px;

    position: relative;

    margin: 0;

    overflow: hidden;

}

#tagCloud a {

    position: absolute;

    text-decoration: none;

    color: #0B61A4;

    text-shadow: #66A3D2 1px -1px 1px;

}

</style>

    <ul>

        <li><a href="#">ABAP</a></li>

        <li><a href="#">BSP</a></li>

        <li><a href="#">Webdynpro</a></li>

        <li><a href="#">RFC</a></li>

        <li><a href="#">Interaction Center</a></li>

    </ul>

    <script type="text/javascript">

          var tagCloud = new JsTagCloud({ CloudId: 'tagCloud' });

          tagCloud.start();

    </script>

</div>

Note:

a. define an CSS ID selector "tagCloud". It is used as the container for all tag clouds. Specify a default width and height. Set position property to relative.

b. define an CSS class selector for tag cloud. The position is set as absolute, as we will change X and U coordinate of tag cloud elements by Javascript.

Create an text file locally and paste the JavaScript code below into it:

function JsTagCloud(config) {

    var cloud = document.getElementById(config.CloudId);

    this._cloud = cloud;

    var w = parseInt(this._getStyle(cloud, 'width'));

    var h = parseInt(this._getStyle(cloud, 'height'));

    this.width = (w - 100) / 2;

    this.height = (h - 50) / 2;

    this._items = cloud.getElementsByTagName('a');

    this._count = this._items.length;

    this._angle = 360 / (this._count);

    this._radian = this._angle * (2 * Math.PI / 360);

    this.step = 0;

}

JsTagCloud.prototype._getStyle = function(elem, name) {

    return window.getComputedStyle ? window.getComputedStyle(elem, null)[name] :

            elem.currentStyle[name];

}

JsTagCloud.prototype._render = function() {

    for (var i = 0; i < this._count; i++) {

        var item = this._items[i];

        var thisRadian = (this._radian * i) + this.step;

        var sinV = Math.sin(thisRadian);

        var cosV = Math.cos(thisRadian);

        item.style.left = (sinV * this.width) + this.width + 'px';

        item.style.top = this.height + (cosV * 50) + 'px';

        item.style.fontSize = cosV * 10 + 20 + 'pt';

        item.style.zIndex = cosV * 1000 + 2000;

        item.style.opacity = (cosV / 2.5) + 0.6;

        item.style.filter = " alpha(opacity=" + ((cosV / 2.5) + 0.6) * 100 + ")";

    }

    this.step += 0.007;

}

JsTagCloud.prototype.start = function() {

    setInterval (function(who) {

        return function() {

            who._render();

        };

    } (this), 20);

}

Then import it via context menu->Create->Mime Object->Import:

In the JavaScript we first get the radian of each tag cloud element, and change its X and Y coordinate, that is left and top property based on calculation on it from time to time( in 20 millisecond's interval ). The same logic is done on font size, the opacity and Z-Order index so that we got a Pseudo 3D effect: the more the element is near to us, the bigger and more vivid it is, and vice visa.