[BasicUI] Add a new header line for image, chart and video elements.

[lolodomo]

Header line for video element contains icon and label.

Header line for image element contains icon, label and a button to switch between no upscale and upscale of the image. Header line for chart element contains icon, label and 4 buttons:

• one button to show or hide the legend
• one button to change the time range
• one button to switch between no upscale and upscale of the chart
• one button to refresh the chart

Fix handling of iconcolor and labelcolor parameters for mapview and webview elements.

For image and chart elements, the header line is always present so that user has an access to its buttons.
For video, mapview and webview elements, if the label is empty, the header line is hidden.

For chart and image elements, there is now no upscale applied by default (tablet/phone devices) but a button allows upscaling.

Closes #1939
Fixes #1367
Also related to #1930

Signed-off-by: Laurent Garnier lg.hc@free.fr

[lolodomo]

Considering the following sitemap:

sitemap test8 label="Tests"
{
	Frame {
		Switch item=TestCommand label="Color icon []" icon="colorpicker" mappings=[10="red", 11="green", 12="Other"]
		Switch item=TestCommand2 label="Color label []" icon="colorpicker" mappings=[10="blue", 11="orange", 12="Other"]
		Switch item=TestSwitch label="Show widgets []" mappings=[OFF="Without label", ON="With label"]
		Input item=TestLocation inputHint="text" icon="none"
	}
	Frame {
		Chart item=TestNumber period=W legend=true refresh=60000 label="Chart example with a very long label" labelcolor=[TestCommand2==11="orange",TestCommand2==10="blue"] icon="material:show_chart" iconcolor=[TestCommand==11="green",TestCommand==10="red"] visibility=[TestSwitch==ON]
		Chart item=TestNumber period=W legend=true refresh=60000 label="" visibility=[TestSwitch==OFF]
	}
	Frame {
		Image url="https://www.openhab.org/openhab-logo-square.png" label="Image example with a very long label for the header" labelcolor=[TestCommand2==11="orange",TestCommand2==10="blue"] icon="material:favorite" iconcolor=[TestCommand==11="green",TestCommand==10="red"] visibility=[TestSwitch==ON]
		Image url="https://www.openhab.org/openhab-logo-square.png" visibility=[TestSwitch==OFF]
	}
	Frame {
		Mapview item=TestLocation label="Map view example with a very long label for the header" labelcolor=[TestCommand2==11="orange",TestCommand2==10="blue"] icon="material:home" iconcolor=[TestCommand==11="green",TestCommand==10="red"] visibility=[TestSwitch==ON]
		Mapview item=TestLocation label="" visibility=[TestSwitch==OFF]
	}
	Frame {
		Webview url="https://www.openhab.org/" height=10 label="WEB view example with a very long label for the header" labelcolor=[TestCommand2==11="orange",TestCommand2==10="blue"] icon="material:home" iconcolor=[TestCommand==11="green",TestCommand==10="red"] visibility=[TestSwitch==ON]
		Webview url="https://www.openhab.org/" height=10 visibility=[TestSwitch==OFF]
	}
	Frame {
		Video url="http://techslides.com/demos/sample-videos/small.mp4" label="Video example with a very long label for the header" labelcolor=[TestCommand2==11="orange",TestCommand2==10="blue"] icon="material:home" iconcolor=[TestCommand==11="green",TestCommand==10="red"] visibility=[TestSwitch==ON]
		Video url="http://techslides.com/demos/sample-videos/small.mp4" visibility=[TestSwitch==OFF]
	}
}

First the result when there is no label or an empty label for a widget:

And now with a label defined:

After removing the legend, changing time range to 1 day and upscaling the chart::

After upscaling the image:

[lolodomo]

Another example to show when the elements are in the same frame:

sitemap test7 label="Tests header line"
{
	Frame {
		Input item=TestLocation inputHint="text" icon="material:home"
		Chart item=TestNumber period=4h refresh=60000 icon="chart"
		Mapview item=TestLocation icon="material:home"
	}
}

On phone/tablet (1 column):

On desktop (2 columns):

[lolodomo]

My intention was to use icon in all buttons but some material icons I would like to use are missing. I will update a second step when all material icons are accessible.

[lolodomo]

My intention was to use icon in all buttons but some material icons I would like to use are missing. I will update a second step when all material icons are accessible.

Let's wait for the merge of #2016 so that I can include the icons I would like for the chart header line.

[mueller-ma]

It feels a bit strange to me that one has to add a label to a chart to get the new buttons. Maybe show the header for charts always?

[lolodomo]

It feels a bit strange to me that one has to add a label to a chart to get the new buttons. Maybe show the header for charts always?

Yes, you're right. Same for image. I will change that.

[lolodomo]

I have updated all the screenshots.
The PR is now ready for a review & merge.

[lolodomo]

I discovered that the update of label/icon color is broken for the colorpicker with this PR. Put again this PR in WIP.

[lolodomo]

I discovered that the update of label/icon color is broken for the colorpicker with this PR. Put again this PR in WIP.

It was just a mismatch between undefined and null in JavaScript.
The PR is ready again.

[kaikreuzer]

That's a great enhancement, thank you!

[lolodomo]

Thank you for the review Kai.