The example @Chris_C linked to was done using the concepts in the following help article:
The article includes some sample markup. It’s an HTML page with an iframe. In the menu example, it’s basically just a menu that changes which embedded SharpTools dashboard is displayed in the iframe. But we’ve seen examples where multiple iframes were used to mix SharpTools content alongside external content.
There’s a few codesandbox examples linked within the article that you can play around with.
There’s a project by the Google Chrome team called Puppeteer which enables you to take ‘screenshots’ of a page. It would definitely be more of a developer type project though as you’d need to automate the screenshots and storing the screenshots somewhere.
–
We’ve been bouncing around the idea of Custom Components - the ability to build custom components to integrate third party resources (eg. To Do lists, Weather, Spotify, etc). The same concept could potentially allow you to iframe in other sites directly into a SharpTools dashboard. I’ve noted your feedback under this request and will be sure to post back here if/when we circle back on the idea.
Edit: Custom Tiles are now available! You can find documentation at the following link:
Thanks for the link to puppeteer, I’m going to have to try that. I was looking for screenshots as a service from reading the posts above but most of them have low limits on free tier.
@josh I just grabbed this image from airnow.gov, well the page that this image came from using puppeteer! Thanks for the pointer to that Now I can add this to my tablet after I figure out how to automatically trim it… unless puppeteer can capture based on x,y coords, that I’ll have to read up on.
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();
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();
@Shai_Dotan, you may be interested to check out the puppeteer@josh mentioned. I remembered you tried to load a COVID19 dashboard page as screenshot to be displayed as part of your dashboard, and the challenge was the dashboard site requires a click before the dashboard is rendered. It seems you should be able to resolve that using page.click(selector) in puppeteer.
I just setup a docker ( buildkite/ docker-puppeteer) running on my NAS to generate the screenshot of the the city’s Covid19 dashboard site every 12 hours, and a media tile pointing to the generated screenshot image on my NAS, and used it in my dashboard.
@josh, just FYI this works beautifully with Microsoft PowerApps. Not sure how familiar you are with Powerapps, But I have made multiple apps that my company uses. And it hit me that those apps can be ran through a web browser. So I made a chore chart list for my kids to use and it works perfectly. Powerapps can be made to display or do basically anything that you need.
@Shai_Dotan, see below for a quick code example using puppeteer to screenshot the first t able in קורונה 2020, and you may need to update the code based on your needs as this is just a quick reference for you. You will need to install Node.js and NPM on the device where this script is going to be running, ex windows, raspberry PI, and etc. (I am running this on my NAS server.)
I just moved this thread into the Feature Requests category, so you can vote on it now. If you refresh the page and scroll up to the top, you should see an option to vote on this post now.
If you’re looking to display a list, you can do it in Google Sheets and export the table as an image. Pretty sure @josh or @James posted about it before.
This is now possible with Custom Tiles. You can either:
Create a Custom Tile using the URL option for each site you want
Use the Refreshable URL Embed custom tile if you want to be able to embed sites without having to define them in advance and want to optionally add a periodic refresh.
That being said, I’m looking for feedback!
Should this feature request be closed out?
The new Custom Tile feature functionally accomplishes the original request, but I’m contemplating if something like the Refreshable URL Embed custom tile linked above should be a native feature rather than requiring the import of a custom tile - basically making it more discoverable and easier to use.
The challenge is that many sites block being embedded and it’s not something that can be detected in modern browsers – different browsers handle this differently with some showing an error within the iframe and some not being very apparent that there even is an issue. As such, I’m wondering if coming to the community and seeing the discussion could actually be a helpful stop in the user journey.
For example, here’s what Chrome on a Windows PC looks like with a site that disallows embedding:
Person who figures out how can we embed blocked webpages too… I would personally buy that person a couple of beers.
I would also buy few beers to that person who tells me that there is some kind of floating buttons for Windows that hangs top of the browser. Buttons would allow user to get back to SharpTools dashboard page in full screen mode if user has opened a new full screen tab.
You can find documentation at the following link:
Now I can add this to my tablet after I figure out how to automatically trim it… unless puppeteer can capture based on x,y coords, that I’ll have to read up on.
