Xibo

Scaling a fixed size embedded element. Is it possible?

Asked by Rob Anderson

I'm trying to add an embedded element for local weather conditions. The problem is that the size is fixed, and at my desired resolution the element ends up too small to read for anyone more five feet away. I'm primairly a hardware guy so my programming knowledge is limited at best. Is there any way I can force the element to be rendered at say 2x original size on my end.

Here is the code I'm trying to embed:
<iframe marginheight="0" marginwidth="0" name="wxButtonFrame" id="wxButtonFrame" height="240" src="http://btn.weather.ca/weatherbuttons/template6.php?placeCode=CAMB0244&category0=Cities&containerWidth=120&btnNo=&backgroundColor=blue&multipleCity=0&citySearch=0&celsiusF=C" align="top" frameborder="0" width="120" scrolling="no" allowTransparency="true"></iframe>

I've tried modifying the 240x120 frame width and height but that just changes how much of the element is visible, not the scale of the element itself.

I could achieve the desired effect by lowering my resolution, but ideally I would like to just render the frame larger if possible.

I'm currently running Xibo 1.60 client on Win7 and Xibo 1.60 server on WinXP.

Thanks!

Question information

Language:
English Edit question
Status:
Solved
For:
Xibo Edit question
Assignee:
No assignee Edit question
Solved by:
Dan Garner
Solved:
Last query:
Last reply:
Revision history for this message
Rob Anderson (randerson-b) said : 		#1

I tried using CSS scale commands in the head section for this particular element but nothing changed. This is what I used:

 <style>
div {
 -ms-transform: scale(2);
 transform: scale(2);
 }
 </style>

Revision history for this message
Rick Squires (r-t-squires) said : 		#2

I'm very interested to see if anyone comes up with an answer to this. In my case I just looked around until I found a site that displayed OK on our 42 inch plasmas. Fortunately, here in the UK we have the BBC Weather site which looks OK. It would still be nice to be able to enlarge a 'widget' like yours though

Revision history for this message
Best Dan Garner (dangarner) said : 		#3

This is mostly due to this wishlist bug: https://bugs.launchpad.net/xibo/+bug/1111919

You should be able to work around it with something like:

HTML:

<div id="myEmbed">
<iframe marginheight="0" marginwidth="0" name="wxButtonFrame" id="wxButtonFrame" height="240" src="http://btn.weather.ca/weatherbuttons/template6.php?placeCode=CAMB0244&category0=Cities&containerWidth=120&btnNo=&backgroundColor=blue&multipleCity=0&citySearch=0&celsiusF=C" align="top" frameborder="0" width="120" scrolling="no" allowTransparency="true"></iframe>
</div>

Script (inside Embed Init):

var scale = Math.min($(window).width() / __original_width, $(window).height() / __original_height);
$("#myEmbed").css({
                "transform": "scale(" + scale + ")",
                "transform-origin": "0 0"
            });

Where __originalWidth and __originalHeight are the designer layout width and height (as seen on-screen).

Alternatively...

You could edit modules/embedded.module.php and on line 302, add:

// Set some options
        $options = array(
            'originalWidth' => $this->width,
            'originalHeight' => $this->height,
            'previewWidth' => Kit::GetParam('width', _GET, _DOUBLE, 0),
            'previewHeight' => Kit::GetParam('height', _GET, _DOUBLE, 0),
            'scaleOverride' => Kit::GetParam('scale_override', _GET, _DOUBLE, 0)
        );

        // Add an options variable with some useful information for scaling
        $script .= '<script type="text/javascript">';
        $script .= ' var options = ' . json_encode($options) . ';';
        $script .= '</script>';

Then in your EmbedInit() you would need:

var scale = Math.min($(window).width() / options.originalWidth, $(window).height() / options.originalHeight);
$("#myEmbed").css({
                "transform": "scale(" + scale + ")",
                "transform-origin": "0 0"
            });

I'll create a "bridging" bug for this that sits between what we have now and the first bug I linked to.

Revision history for this message
Rob Anderson (randerson-b) said : 		#4

Thanks Dan Garner, that solved my question.

Revision history for this message
Rob Anderson (randerson-b) said : 		#5

Thanks! I'll try this out as soon as I get the chance