Embed Web page from 3rd-party site into dashboard (iframe or otherwise)

Feature Requests
10

From a quick glance at their documentation, it looks like you could even select a specific element on the page. A puppeteer script like the following worked for me in the puppeteer demo environment:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.airnow.gov/?city=Frisco&state=TX&country=USA', {waitUntil: 'networkidle0',});
await page.waitForSelector('.aq-dial-container > .aq-dial');  //wait for the element to render
const element = await page.$('.aq-dial-container > .aq-dial'); //get the element as an object
await element.screenshot({path: 'airquality.png'}); // screenshot the element in puppeteer  
await browser.close();

image

If you want to get fancy and clear out the background from the gauge, you could inject a bit of scripting…

Script for transparent gauge 
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.airnow.gov/?city=Frisco&state=TX&country=USA', {waitUntil: 'networkidle0',});
//inject a script to make everything in the element hierarchy transparent
await page.evaluate(() => {
  document.body.style.background = 'transparent';
  document.getElementsByClassName('marquee')[0].style.background = null;
  document.getElementsByClassName('marquee')[0].style.backgroundColor = 'transparent';
})
await page.waitForSelector('.aq-dial-container > .aq-dial');  //wait for the element to render
const element = await page.$('.aq-dial-container > .aq-dial'); //get the element as an object
await element.screenshot({path: 'airquality.png'}); // screenshot the element in puppeteer  
await browser.close();
2 Likes