--- a/crea/integration/home.html Fri Jun 08 18:14:50 2012 +0200
+++ b/crea/integration/home.html Fri Jun 08 18:50:09 2012 +0200
@@ -5,6 +5,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Musitag - Futur en Seine 2012</title>
<link rel="stylesheet" type="text/css" href="css/musitag.css" />
+ <script type="text/javascript" src="libs/jquery.min.js"></script>
+ <script type="text/javascript" src="libs/mustache.js"></script>
+ <script type="text/javascript" src="libs/underscore-min.js"></script>
+ <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js"></script>
</head>
<body>
<div class="big-container">
@@ -22,59 +26,7 @@
<h4>
<a href="#">Steve Waring</a>
</h4>
- <ul class="home-dataviz home-dataviz-colors">
- <li>
- <div class="tag-container-50">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- </div>
- </li>
- <li style="width: 40px">
- <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- </div>
- </li>
- <li style="width: 25px">
- <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- </div>
- </li>
- <li style="width: 10px">
- <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- </div>
- </li>
- </ul>
- <ul class="home-dataviz home-dataviz-emoticon">
- <li>
- <div class="tag-container-50">
- <div class="tag-shadow"></div>
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- </li>
- <li style="width: 40px">
- <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- </li>
- <li style="width: 25px">
- <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- </li>
- <li style="width: 10px">
- <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-unhappy"></div>
- </div>
- </li>
- </ul>
+ <div id="dataviz-1"></div>
</div>
<div class="home-media">
<a href="#">
@@ -132,5 +84,58 @@
</h4>
</div>
</div>
+ <script type="text/javascript">
+
+function getVolumes(_source, _list) {
+ var _volumes = _(_list).map(function(_e) {
+ return {
+ annotation: _e,
+ volume: _source.getAnnotations().searchByTitle(_e).length
+ };
+ }),
+ _max = _(_volumes).max(function(_e) { return _e.volume }).volume,
+ _volumes = _(_volumes).filter(function(_e) { return _e.volume });
+ if (_max) {
+ var _total = 0;
+ _(_volumes).each(function(_e) {
+ _e.size = 50 * _e.volume / _max;
+ _e.scale = 1 * _e.volume / _max;
+ _total += _e.size;
+ });
+ if (_total > 140) {
+ var _f = 140 / _total;
+ _(_volumes).each(function(_e) {
+ _e.size = _f * _e.size;
+ _e.scale = _f * _e.scale;
+ });
+ }
+ }
+ //return _volumes;
+ return _(_volumes).sortBy(function(_e) {return -_e.volume;});
+}
+
+IriSP._ = _;
+IriSP.jQuery = jQuery;
+var _sourceManager = new IriSP.Model.Directory(),
+ _emoticons = ['happy', 'unhappy', 'laughing', 'surprised'],
+ _colors = ['red', 'yellow', 'green', 'blue'],
+ _source = _sourceManager.remoteSource({
+ url: "http://192.168.56.101/musitag/tralalere/ldt/cljson/id/156c66cc-afe5-11e1-807a-58b035f6b93d",
+ serializer: IriSP.serializers.ldt
+ }),
+ _template =
+ '<ul class="home-dataviz home-dataviz-colors">'
+ + '{{#colors}}<li style="width: {{size}}px">'
+ + '<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale({{scale}}); -moz-transform-origin: bottom left; -moz-transform: scale({{scale}});">'
+ + '<div class="tag-color tag-{{annotation}}"></div></div></li>{{/colors}}'
+ + '</ul><ul class="home-dataviz home-dataviz-emoticon">'
+ + '{{#emoticons}}<li style="width: {{size}}px">'
+ + '<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale({{scale}}); -moz-transform-origin: bottom left; -moz-transform: scale({{scale}});">'
+ + '<div class="tag-color"></div><div class="tag-emoticon tag-{{annotation}}"></div></div></li>{{/emoticons}}'
+ + '</ul>';
+_source.onLoad(function() {
+ $("#dataviz-1").html(Mustache.to_html(_template,{emoticons:getVolumes(_source, _emoticons),colors:getVolumes(_source, _colors)}));
+});
+ </script>
</body>
</html>