Create a gist now

Instantly share code, notes, and snippets.

@hussfelt /README.md
Last active Mar 28, 2018

What would you like to do?
Dashing widget to display an iframe with specified src

dashing-iframe

IFrame plugin for dashing

Description

Dashing widget to display an iframe with specified src

Installation

Create the folder iframe in the /widgets/ directory. Put the files iframe.coffee, iframe.html and iframe.scss in that folder.

This can also be done by using the gist: https://gist.github.com/hussfelt/a6fe71ebd7cce327df29

dashing install a6fe71ebd7cce327df29

Dashboard configuration

Put the following in your dashboard.erb file to show the iframe:

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="iframeId1" data-view="Iframe"></div>
    </li>

Updating the src

Curl

curl -d '{
	"auth_token": "YOUR_AUTH_TOKEN",
	"src": "http://example.com/"
}' http://0.0.0.0:3030/widgets/iframeId1

Inline

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="iframeId1" data-view="Iframe" data-src="http://example.com/"></div>
    </li>

License

Distributed under the MIT license

class Dashing.Iframe extends Dashing.Widget
ready: ->
$(@node).find(".iframe").attr('src', @get('src'))
onData: (data) ->
$(@node).find(".iframe").attr('src', data.src)
<iframe class="iframe" data-bind-src="src" scrolling="no"></iframe>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #FFF;
$title-color: #333;
$moreinfo-color: #333;
$iframe-background: darken($background-color, 25%);
// ----------------------------------------------------------------------------
// Widget-iframe styles
// ----------------------------------------------------------------------------
.widget-iframe {
background-color: $background-color;
padding: 0 !important;
margin: 0 !important;
iframe {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
}
@snayler0

This comment has been minimized.

Show comment Hide comment
@snayler0

snayler0 Sep 7, 2015

This widget doesn't allow me to drag and drop like others.

Has anyone worked out a way around this?

snayler0 commented Sep 7, 2015

This widget doesn't allow me to drag and drop like others.

Has anyone worked out a way around this?

@rcaudill

This comment has been minimized.

Show comment Hide comment
@rcaudill

rcaudill Sep 9, 2015

@snayler0
I bumped up the .widget-iframe padding (to 10px) in iframe.scss and it gives you something to grab on to when rearranging.

rcaudill commented Sep 9, 2015

@snayler0
I bumped up the .widget-iframe padding (to 10px) in iframe.scss and it gives you something to grab on to when rearranging.

@hussfelt

This comment has been minimized.

Show comment Hide comment
@hussfelt

hussfelt Nov 5, 2015

Thanks @rcaudill!

Did you do this:

.widget-iframe {

  background-color: $background-color;
  padding: 10px !important;
  margin: 0 !important;
...

Let me know and I'll adjust!

Owner

hussfelt commented Nov 5, 2015

Thanks @rcaudill!

Did you do this:

.widget-iframe {

  background-color: $background-color;
  padding: 10px !important;
  margin: 0 !important;
...

Let me know and I'll adjust!

@DeanCording

This comment has been minimized.

Show comment Hide comment
@DeanCording

DeanCording Feb 6, 2016

I'm having a problem with the contents of the iframe being truncated in height - see attached image.
dd3

I haven't been able to find where the height of the iframe is set.

This is in Firefox 44.0 on Kubuntu 15.10

I'm having a problem with the contents of the iframe being truncated in height - see attached image.
dd3

I haven't been able to find where the height of the iframe is set.

This is in Firefox 44.0 on Kubuntu 15.10

@DeanCording

This comment has been minimized.

Show comment Hide comment
@DeanCording

DeanCording Feb 6, 2016

Yay, height problem solved. In Firefox, height: 100% only works properly if the parent container has a specified height. To fix this, change the iframe.scss to specify:

.widget-iframe {
  background-color: $background-color;
  padding: 10px !important;
  margin: 0 !important;
  height: 100%;

Yay, height problem solved. In Firefox, height: 100% only works properly if the parent container has a specified height. To fix this, change the iframe.scss to specify:

.widget-iframe {
  background-color: $background-color;
  padding: 10px !important;
  margin: 0 !important;
  height: 100%;
@Mabdylon

This comment has been minimized.

Show comment Hide comment
@Mabdylon

Mabdylon Nov 3, 2016

For those who try copy/paste inline example without success, here is the small thing to change :

<div data-id="iframeId1" data-view="Iframe" data-src="http://example.com/"></div>

to :

<div data-id="iframeId1" data-view="Iframe" data-url="http://example.com/"></div>

data-url is expected, not data-src.

Thx for this plugin !

Mabdylon commented Nov 3, 2016

For those who try copy/paste inline example without success, here is the small thing to change :

<div data-id="iframeId1" data-view="Iframe" data-src="http://example.com/"></div>

to :

<div data-id="iframeId1" data-view="Iframe" data-url="http://example.com/"></div>

data-url is expected, not data-src.

Thx for this plugin !

@orphee

This comment has been minimized.

Show comment Hide comment
@orphee

orphee Feb 2, 2017

data-url is expected, not data-src.

Thanks Mabdylon !

orphee commented Feb 2, 2017

data-url is expected, not data-src.

Thanks Mabdylon !

@matzelkoenig

This comment has been minimized.

Show comment Hide comment
@matzelkoenig

matzelkoenig May 7, 2017

The HTTP API does not work. I am not firm with Ruby, BatmanBinding and all that stuff. Please help!

curl -d '{
	"auth_token": "YOUR_AUTH_TOKEN",
	"src": "http://example.com/"
}' http://0.0.0.0:3030/widgets/iframeId1

The HTTP API does not work. I am not firm with Ruby, BatmanBinding and all that stuff. Please help!

curl -d '{
	"auth_token": "YOUR_AUTH_TOKEN",
	"src": "http://example.com/"
}' http://0.0.0.0:3030/widgets/iframeId1
@JonnoN

This comment has been minimized.

Show comment Hide comment
@JonnoN

JonnoN Jan 22, 2018

@matzelkoenig took me a while, but I figured it out:

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "url": "http://example.com" }' http://localhost:3030/widgets/iframeId1

JonnoN commented Jan 22, 2018

@matzelkoenig took me a while, but I figured it out:

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "url": "http://example.com" }' http://localhost:3030/widgets/iframeId1

@borisv1979

This comment has been minimized.

Show comment Hide comment
@borisv1979

borisv1979 Feb 13, 2018

Is it possible to pass username and password directly via URL for password protected websites ? http://username:password@websiteurl.com doesn't work.

Is it possible to pass username and password directly via URL for password protected websites ? http://username:password@websiteurl.com doesn't work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment