npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pimatic-iframe

v0.3.1

Published

Pimatic iframe plugin

Downloads

5

Readme

pimatic-iframe

This is Pimatic plugin for iframes. You can develop, edit and contribute for this plugin by forking this plugin in github

Installation

Add the plugin to the plugin section:

{
  "plugin": "iframe"
},

Configuration

You have to add a iframe Device device into your config.json based on these example schema ready to copy paste. Please have a look at the Trouble Shooting section below if the content isn't displayed or reloaded properly.

{
  "class": "iframeDevice",
  "id" : "my_iframe",
  "name": "My iframe",
  "url": "http://www.pimatic.org",
  "width": 340,
  "unit": "px",
  "height": 240,
  "border": 1,
  "scrolling": "yes",
  "scale": 1,
  "reload": 0,
  "enforceReload": false
},

Description:

class : device class
id : should be your unique device id
name : name of your device

url : URL that will be displayed in the iframe
width : Width of iframe
unit: Unit of witdth specification (px, %)
height : Height of iframe
border : Show border around iframe (1 = yes, 0 = no)
scrolling : Show scrollbars in iframe (yes/no)
scale : Scaling factor of iframe content
reload : Reload cycle in seconds for iframe source. 0 = no reload
enforceReload : Add a pseudo URL param to make URL unique. This is to solve browser-caching issues

Load Action:

As part of rules you can use the following action:

  • load [the] device with "url"

Example:

  • load my_iframe with "http://www.pimatic.org"

Troubleshooting

If the iframe content is not displayed the reason maybe one of the following security restrictions:

  • Pimatic web page has been loaded via https while iframe source is http. This will give you an error message on the web console as shown below. Workaround: Either load pimatic page via http or load iframe src via https (if https is supported by the site).

    Mixed Content: The page at 'https://localhost/' was loaded over HTTPS, but requested an insecure
    resource 'http://www.pimatic.org'. This request has been blocked; the content must be served over HTTPS.
  • Sourced web site denies embedding. This is the case with google.com, for example. Workaround: Some sites offer additional resources which can be embedded, for example, this is the case for googlemaps. Otherwise, you can only circumvent the restriction by putting a rewriting http proxy into the communication path.

    Refused to display 'https://www.google.de/?gfe_rd=cr&ei=7wgIVuiXCY6r8wfYkLnoDQ&gws_rd=ssl'
    in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

If the iframe content is not properly reloaded or updated this may be due to browser-caching issues:

  • Normally, the browser avoids reloading web content from the server by serving web resources from its local cache to speed up web browsing, significantly. To facilitate caching, the HTTP protocol includes various mechanisms to support the browser in determining the lifetime of a (cached) web resource and to let the browser querying the server if a given web resource has been changed. This works very well most of the time, but there are cases where web servers have been misconfigured or the server implementation does not support cache-control. As a result the iframe content may not be reloaded properly as it will always be served from the browser-cache rather than requesting the (updated) content from the server. In particular, this has been found to be case with some IP web camera applications where the web content typically is an image file being continuously updated by the server. In such cases you can set enforceReload property to true. This will add a query parameter with a timestamp for each reload cycle to make the requested URL unique. As a result the browser will regard the given URL as a new resource and bypass the cache.

Version History

0.0.1 : Initial release
0.0.2 : Adding border and scrolling options
0.0.3 : Adding scaling factor
0.0.4 : Adding reload
0.1.0 : Added better browser compatibility and load action provider.
0.1.1 : Fixing missing file issue #4
0.1.2 : Fixing infinity refresh on missing refresh value #6
0.1.3 : Fix for Pimatic 0.9
0.2.0 : enforeReload added. (Thx to @mwittig)