diff -r 27b248a13355 -r 8a6c9e3d0158 src/js/widgets/polemicWidget.js --- a/src/js/widgets/polemicWidget.js Thu May 24 15:05:47 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,448 +0,0 @@ -/* - * - * Copyright 2010 Institut de recherche et d'innovation - * contributor(s) : Samuel Huron - * - * contact@iri.centrepompidou.fr - * http://www.iri.centrepompidou.fr - * - * This software is a computer program whose purpose is to show and add annotations on a video . - * This software is governed by the CeCILL-C license under French law and - * abiding by the rules of distribution of free software. You can use, - * modify and/ or redistribute the software under the terms of the CeCILL-C - * license as circulated by CEA, CNRS and INRIA at the following URL - * "http://www.cecill.info". - * - * The fact that you are presently reading this means that you have had - * knowledge of the CeCILL-C license and that you accept its terms. -*/ -// CHART TIMELINE / VERSION PROTOTYPE :: - -/** the polemic widget */ -IriSP.PolemicWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); - - this.userPol = new Array(); - this.userNoPol = new Array(); - this.userst = new Array(); - this.numberOfTweet = 0; - this.Users; - this.TweetPolemic; - this.yMax = this.height; - this.PaperSlider; - this.heightOfChart; - this.tweets = new Array(); - this.svgElements = {}; - - this.oldSearchMatches = []; -}; - -IriSP.PolemicWidget.prototype = new IriSP.Widget(); - -IriSP.PolemicWidget.prototype.draw = function() { - - // variable - // yMax - - var self = this; - var yCoef = 2; // coef for height of 1 tweet - var frameSize = 5; // frame size - var margin = 1; // marge between frame - var lineSize = this.width; // timeline pixel width - var nbrframes = lineSize/frameSize; // frame numbers - var numberOfTweet = 0; // number of tweet overide later - var duration = this.getDuration(); // timescale width - var frameLength = lineSize / frameSize; // frame timescale - var timeline; - var colors = new Array("","#1D973D","#036AAE","#CE0A15","#C5A62D","#585858"); - - // array - //var tweets = new Array(); - var element = new Array(); - var cluster = new Array(); - var frames = new Array(frameLength); - var slices = new Array(); - - - // Classes ======================================================================= - var Frames = function(){ - - var Myclusters; - var x; - var y; - var width; - var height; - }; - Frames = function(json){ - // make my clusters - // ou Frame vide - }; - Frames.prototype.draw = function(){ - }; - Frames.prototype.zoom = function(){ - }; - Frames.prototype.inside = function(){ - }; - var Clusters = function(){ - var Object; - var yDist; - var x; - var y; - var width; - var height; - }; - Clusters = function(json){ - // make my object - }; - var Tweet = function(){ - }; - // Classes ======================================================================= - - // Refactoring (parametere) ************************************************************ - // color translastion - var qTweet_0 =0; - var qTweet_Q =0; - var qTweet_REF=0; - var qTweet_OK =0; - var qTweet_KO =0; - function colorTranslation(value){ - if(value == "Q"){ - qTweet_Q+=1; - return 2; - }else if(value =="REF"){ - qTweet_REF+=1; - return 4; - }else if(value =="OK"){ - qTweet_OK+=1; - return 1; - }else if(value =="KO"){ - qTweet_KO+=1; - return 3; - }else if(value ==""){ - qTweet_0+=1; - return 5; - } - } - - - this._serializer.sync(function(data) { loaded_callback.call(self, data); return; }); - - function loaded_callback (json) { - var view_type = this._serializer.getTweets(); - - - if (typeof(view_type) === "undefined") { - var view_type = this._serializer.getTweetIds()[0]; - if (typeof(view_type) === "undefined") { - // default to guessing if nothing else works. - var view = json.views[0]; - - if(typeof(view.annotation_types) !== "undefined") { - /* we need to be backward compatible with the old files which used to - feature only two lines : Chapitrage and Tweets. We've added a - "Contributions" line so we need to discriminate against that */ - if (view.annotation_types.length === 2 && typeof(this._serializer.getContributions()) === "undefined") { - var view_type = view.annotation_types[1]; - } else { - console.log("PolemicWidget: invalid file - minimizing"); - return; - } - } - } - } - - // Make and define the Raphael area - this.paper = Raphael(document.getElementById(this._id), this._config.width, this._config.height); - - // event handlers - this._Popcorn.listen("IriSP.search", IriSP.wrap(this, function(searchString) { this.searchHandler(searchString); })); - this._Popcorn.listen("IriSP.search.closed", IriSP.wrap(this, this.searchFieldClosedHandler)); - this._Popcorn.listen("IriSP.search.cleared", IriSP.wrap(this, this.searchFieldClearedHandler)); - this.selector.mouseleave(IriSP.wrap(this, function() { self.TooltipWidget.hide.call(self.TooltipWidget); })); - this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); - this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", IriSP.wrap(this, this.showAnnotation)); - - for(var i = 0; i < json.annotations.length; i++) { - var item = json.annotations[i]; - var MyTime = Math.floor(item.begin/duration*lineSize); - var Myframe = Math.floor(MyTime/lineSize*frameLength); - - if (typeof(item.meta) !== "undefined" - && typeof(item.meta["id-ref"]) !== "undefined" - && item.meta["id-ref"] === view_type) { - - var MyTJson = {}, - _source = IriSP.get_aliased(item.meta, ['dc:source', 'source']); - if (_source !== null) { - var MyTJson = JSON.parse(_source['content']); - } - - if (item.content['polemics'] != undefined - && item.content['polemics'][0] != null) { - - // a tweet can have many polemics at the same time. - for(var j=0; j max) { - max = moy; - } - } - - var tweetDrawed = new Array(); - var TweetHeight = 5; - var newHeight = TweetHeight * max + 10; - - - if (newHeight > this.height) { - this.paper.setSize(this.width, newHeight); - this.height = newHeight; - console.log("resizeing"); - } - - - // DRAW TWEETS ============================================ - for(var i = 0; i < nbrframes; i++) { - var addEheight = 5; - if (frames[i] != undefined){ - // by type - - for (var j = 6; j > -1; j--) { - if (frames[i].qualifVol[j] != undefined) { - // show tweet by type - for (var k = 0; k < frames[i].mytweetsID.length; k++) { - - if (frames[i].mytweetsID[k].qualification == j) { - var x = i * frameSize; - var y = this.height - addEheight; - - if (this.yMax > y) { - this.yMax = y; - } - - /* some tweets seem to be duplicated - so we make a check before - creating a new rect */ - if (this.svgElements.hasOwnProperty(frames[i].mytweetsID[k].cinecast_id)) - continue; - - var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */) - .attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); - - addEheight += TweetHeight; - - /* stick a lot of things into e because that's the easiest way - to do it */ - e.color = colors[j]; - e.time = frames[i].mytweetsID[k].timeframe; - e.title = frames[i].mytweetsID[k].title; - e.id = frames[i].mytweetsID[k].cinecast_id; - this.svgElements[e.id] = e; - - IriSP.jQuery(e.node).mouseenter(function(element) { return function (_e) { - self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), element.attrs.x + element.attrs.width / 2, element.attrs.y - 2); - element.displayed = true; - self._Popcorn.trigger("IriSP.TraceWidget.MouseEvents", { - "widget" : "StackGraphWidget", - "type": "mousemove", - "x": _e.pageX, - "y": _e.pageY, - "annotation_id": element.id - }); - }}(e)).mousedown(function(element) { return function () { - self._Popcorn.currentTime(element.time/1000); - self._Popcorn.trigger("IriSP.PolemicTweet.click", element.id); - } - }(e)); - - IriSP.jQuery(e.node).attr('id', 't' + k + ''); - IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); - IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); - } - } - } - } - } - - } - // DRAW UI :: resize border and bgd - this.paperBackground = this.paper.rect(0, 0, this.width, this.height).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1}); - - // outer borders - this.outerBorders = []; - this.outerBorders.push(this.paper.rect(0, this.height - 1, this.width, 1).attr({fill:"#ababab",stroke: "none",opacity: 1})); - this.outerBorders.push(this.paper.rect(0, 0, this.width, 1).attr({fill:"#ababab",stroke: "none",opacity: 1})); - - // inner borders - this.innerBorders = []; - this.innerBorders.push(this.paper.rect(1, this.height - 2, this.width, 1).attr({fill:"#efefef",stroke: "none",opacity: 1})); - this.innerBorders.push(this.paper.rect(1, 1, this.width, 1).attr({fill:"#efefef",stroke: "none",opacity: 1})); - this.innerBorders.push(this.paper.rect(1, 1, 1, this.height - 2).attr({fill:"#d0d1d1",stroke: "none",opacity: 0.8})); - this.innerBorders.push(this.paper.rect(this.width - 2, 1, 1, this.height - 2).attr({fill:"#efefef",stroke: "none",opacity: 1})); - - - - this.paperSlider = this.paper.rect(0, 0, 0, this.height).attr({fill:"#D4D5D5", stroke: "none", opacity: 1}); - - // the small white line displayed over the slider. - this.sliderTip = this.paper.rect(0, 0, 1, this.height).attr({fill:"#fc00ff", stroke: "none", opacity: 1}); - // decalage - // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); - - - this.paperSlider.toBack(); - this.paperBackground.toBack(); - this.sliderTip.toFront(); - } - - -} - -/** update the positionMarker as time passes */ -IriSP.PolemicWidget.prototype.sliderUpdater = function() { - - var time = +this._Popcorn.currentTime(); - var duration = this.getDuration(); - - this.paperSlider.attr("width", time * (this.width / (duration / 1000))); - - this.sliderTip.attr("x", time * (this.width / (duration / 1000))); -}; - -/** reacts to IriSP.search events */ -IriSP.PolemicWidget.prototype.searchHandler = function(searchString) { - if (searchString == "") - return; - - var matches = this._serializer.searchTweetsOccurences(searchString); - - if (IriSP.countProperties(matches) > 0) { - this._Popcorn.trigger("IriSP.search.matchFound"); - } else { - this._Popcorn.trigger("IriSP.search.noMatchFound"); - } - - - // decrease the opacity of the other elements. - for (var id in this.svgElements) { - var e = this.svgElements[id]; - e.attr({fill: e.color, opacity: 0.4}); - } - - - for (var id in matches) { - if (this.svgElements.hasOwnProperty(id)) { - var e = this.svgElements[id]; - this.svgElements[id].attr({fill: "#fc00ff", opacity: 1}); - } - } - - this.oldSearchMatches = matches; -}; - -/** reacts to IriSP.search.cleared messages */ -IriSP.PolemicWidget.prototype.searchFieldClearedHandler = function() { - for (var id in this.svgElements) { - var e = this.svgElements[id]; - e.attr({fill: e.color, opacity: 1}); - } -}; - -/** reacts to IriSP.search.closed messages by clearing the highlighted elements */ -IriSP.PolemicWidget.prototype.searchFieldClosedHandler = function() { - for (var id in this.svgElements) { - var e = this.svgElements[id]; - e.attr({fill: e.color, opacity: 1}); - } - -}; - -IriSP.PolemicWidget.prototype.showAnnotation = function(id) { - if (this.svgElements.hasOwnProperty(id)) { - var e = this.svgElements[id]; - this.TooltipWidget.show(e.title, e.attr("fill"), e.x - 103, e.y - 160); - } -};