[SOLVED] Custom Widget timeline usage

Apps & Services HABPanel
1

Hi,

I cant get the timeline widget to work.

2019-07-22%2012_22_14-HABPanel
2019-07-22 12_22_14-HABPanel.png861×243 13.8 KB

I’ve read alot about how to get it working with the nested divs etc like the knob widget… but somehow it seems i miss something.

this is my code used in a custom widget:

<div style="position: relative; top: 0; left: 0; width: 100%; height: 100%" ng-init='model={
		"name": "WidgetTimeline",
		"sizeX": 4,
		"sizeY": 4,
		"item": null,
		"type": "timeline",
		"row": 0,
		"col": 0,
		"period": "D",
		"colorMaps": [
			{
				"state": "0",
				"color": "#FFF",
			},
			{
				"state": "1",
				"color": "#FFCCCC",
			},
			{
				"state": "2",
				"color": "#FF9999",
			},
		],
		"series": [
			{
				"item": "Item_Name",
				"name": "Where"
			}
		]
	}'>
	<div style="position: relative; top: 0; left: 0; width: 100%; height: 100%">
		<div>
			<div><widget-timeline ng-model="model"></widget-timeline></div>
		</div>
  </div>
</div>

EDIT:
and i also tried another approch in this example with minimal code…and i added a config value “item” with the specific item i want to show. this gives me the same output like show in the right image. :confused:

<div style="position: relative; top: 0; left: 0; width: 100%; height: 100%" ng-init="model={
    name: 'WidgetTimeline2',
    period: 'D',
    colorMaps: [
        {
            state: 'INSIDE',
            color: '#FFF',
        },
        {
            state: 'OUTSIDE',
            color: '#FFCCCC',
        }
    ],
    series: [
        {
            item: config.where_item,
            name: 'Where'
        }
    ]
}">
<div style="position: relative; top: 0; left: 0; width: 100%; height: 100%">
    <div width="100%">
  <div><widget-timeline ng-model="model"></widget-timeline></div>
    </div>
</div>
</div>
2

@ysc any thoughts on this why its not working?

3

The code for the timeline widget has some ugly size computations which expect to find a width and height in pixels:

                var parentElement = element[0].parentNode.parentNode.parentNode;

                var width = parentElement.style.width.replace('px', '') - 20;
                var height = parentElement.style.height.replace('px', '') - 20;

In the case of a standard widget, this will work because they are explicitely set and maintained by the gridster library. In a custom template there is no other solution than fixing the width and height:

<div style="position: relative; top: 0; left: 0; width: 400px; height: 150px">
    <div width="100%">
  <div><widget-timeline ng-model="model"></widget-timeline></div>
    </div>
</div>
</div>
4

Thanks you! That works.

here is the code i’m using now. I added a config value for width and height.

<div style="position: relative; top: 0; left: 0; width: {{config.width}}px; height: {{config.height}}px" ng-init='model={
		"period": "D",
		"colorMaps": [
			{
				"state": "0",
				"color": "#FFF",
			},
			{
				"state": "1",
				"color": "#FFCCCC",
			},
			{
				"state": "2",
				"color": "#FF9999",
			},
		],
		"series": [
			{
				"item": "Item_Name_" + config.itemnum,
				"name": " "
			}
		]
	}'>
<div style="position: relative; top: 0; left: 0; width: {{config.width}}px; height: {{config.height}}px">
    <div width="100%">
  <div><widget-timeline ng-model="model"></widget-timeline></div>
    </div>
</div>
</div>