Hi Dojo,
I'm trying a new Visio drawing and I want to show the channel name and the logo of a specific channel.
Here is my first try:
Everything from the shape which is not filled with the logo is black. But I would like to have the alarm color here. How can I achieve it?
New Image
Hi Jarno,
aspec ratio is of course different because it's different TV channels. The picture URL is in a table in Dataminer. I'm opening just a link with a png file.
What I also tested an image viewer with transparent background which is also not working.
I tried a couple of things and the best solutions ended up a custom HTML page (that you store in the Skyline DataMiner/Webpages folder. By doing this, you have full control of how you would like to visualize the picture. In my case I have allowed for one query parameter (img url). As for adding the severity, you can choose to either pass it along or create another shape in the Visio itself.
One thing to know is that you will have to encode the URL for it to work. You can do this with the EscapeDataString placeholder.
Here's how it's configured in my Visio:
Link: #https://<DMAIP>/index.html?img=[EscapeDataString:https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/1200px-Google_%22G%22_logo.svg.png]
Here's the webpage:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
overflow: hidden;
font-family: Arial, sans-serif;
color: #333;
}
#fallback {
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div id="fallback">No image parameter provided. Please use <code>?img=<encoded_url></code></div>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] === variable) {
return pair[1];
}
}
return false;
}
var imgUrl = decodeURIComponent(getQueryVariable("img"));
if (imgUrl && imgUrl !== "false") {
document.body.style.backgroundImage = "url('" + imgUrl + "')";
document.getElementById("fallback").style.display = "none";
}
</script>
</body>
</html>
Here's the result. Top image is simply doing a Link with the normal URL. Second image is by using the proposal above.
Hi Jarno,
many thanks for your help. But it's not working on my system. I have attached a picture at the original question.
Can you please try it on your site when an alarm shape is behind it?
The shape linked to the webpage is not transparent, even if the picture is. What you can do is pass along a second query parameter to pass the severity (e.g. general parameter Alarm Severity, 65008). By having this, you can do what ever you want in the web page itself (e.g. color the background), i.e. you just need to feed it with the data needed. In my opinion I would use the web page purely for showing the stretched image and use Visio shapes to show other items like the alarm color.
Good idea with the alarm severity, but is 65008 also available for a service?
This parameter is not available for a regular service. It is available for an Enhanced Service though. You could in theory use placeholder related to Service Statistics (SERVICE STATISTICS:[#TotalAlarms]), but it did not work for me in the Link placeholder when I quickly tested.
Hi Stefan, from where is the image coming and what is the aspect ratio. Are the dimensions consistent for different images?