31 грудня 2012 р.

SIMILE Timeline - коректування формату виводу для тексту підпису у події

Є такий засіб для відображення події у часі : SIMILE Timeline - Web Widget for Visualizing Temporal Data. Написаний на JavaScript.

Якщо використовувати версію timeline 2.3.1 то відображення може бути  у ось такому вигляді:

Базове відображення



Якщо, налаштувати тему так :
var theme = Timeline.ClassicTheme.create();
theme.event.tape.height = 15;


theme.event.tape.height = 15
А якщо потрібно щоб підписи були у тому рядку що і події, то я зробив модифікацію для функції Timeline.OriginalEventPainter.


patch
#cd html/js/timeline/api/scripts
# diff original-painter.js original-painter.js.0
347,353c347
<       var labelLeft;
<     if ((startPixel+labelSize.width) > endPixel){
<               labelLeft = endPixel;
<     }else{
<       labelLeft = startPixel;
<     }
<
---
>     var labelLeft = startPixel;
358,361c352,354
<     //var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
<
<     var labelTop = Math.round(metrics.trackOffset + track *  metrics.trackIncrement);
<
---
>     var labelTop = Math.round(
>         metrics.trackOffset + track * metrics.trackIncrement + theme.event.tape.height);
>
512c505
<     var color = '#fff';//evt.getTextColor();
---
>     var color = evt.getTextColor();



html/js/timeline/api/scripts/original-painter.js: ст
Timeline.OriginalEventPainter.prototype.paintPreciseDurationEvent = ...
.... 
var labelLeft;
if ((startPixel+labelSize.width) > endPixel){
  labelLeft = endPixel;
}else{
  labelLeft = startPixel;>
}
var labelRight = labelLeft + labelSize.width;
var rightEdge = Math.max(labelRight, endPixel);
var track = this._findFreeTrack(evt, rightEdge);
var labelTop = Math.round(metrics.trackOffset + track * metrics.trackIncrement);

...


index.html:
....
<script>
   Timeline_ajax_url="/js/timeline/timeline_ajax/simile-ajax-api.js?bundle=true";
   Timeline_urlPrefix="/js/timeline/timeline_js/";
   Timeline_parameters='bundle=true';
</script>
<script src="/js/timeline/timeline_js/timeline-api.js" type="text/javascript"></script>
<script src="/js/timeline/api/scripts/original-painter.js" type="text/javascript"></script>

 var theme = Timeline.ClassicTheme.create();
 theme.event.tape.height = 15;

 var d = Timeline.DateTime.parseGregorianDateTime(new Date())

      var bandInfos = [
            Timeline.createBandInfo({
                showEventText:  false,
                width:          "60%",
                intervalUnit:   Timeline.DateTime.DAY,
                intervalPixels: 200,
                eventSource:    eventSource,
                date:           d,
                theme:          theme,
                layout:         'original'  // original, overview, detailed
            }),
            Timeline.createBandInfo({
                width:          "20%",
                intervalUnit:   Timeline.DateTime.MONTH,
                intervalPixels: 200,
                eventSource:    eventSource,
                date:           d,
                theme:          theme,
                layout:         'overview'  // original, overview, detailed
            }),
            Timeline.createBandInfo({
                width:          "20%",
                intervalUnit:   Timeline.DateTime.YEAR,
                intervalPixels: 200,
                eventSource:    eventSource,
                date:           d,
                theme:          theme,
                layout:         'overview'  // original, overview, detailed
            })
        ];

        bandInfos[1].syncWith = 0;
        bandInfos[2].syncWith = 1;
        bandInfos[1].highlight = true;

        tl = Timeline.create(document.getElementById("tl"), bandInfos);
...
<body onload="onLoad()">
  <div id="body">
    <h1>Timeline</h1>
    <div id="tl" class="timeline-default dark-theme" style="height: 650px; margin: 2em;">
    </div>
        <noscript>
        This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
        </noscript>
  </div>
</body>
</html>




Після модифікації  функції Timeline.OriginalEventPainter

Немає коментарів:


Коли забув ти рідну мову, біднієш духом ти щодня...
When you forgot your native language you would become a poor at spirit every day ...

Д.Білоус / D.Bilous
Рабів до раю не пускають. Будь вільним!

ipv6 ready