Tableau project image generator

A simple web-based image generator to create consistent looking thumbnail images for your tableau projects.

Try out the live demo here

---

How to use

Background Colour

Select the Background Colour by clicking on the first swatch. You can select either a recommended swatch or use the colour picker.

Text for the Project Thumbnail

Select the Text which will be on the image middle swatch "Text on card". Try to keep your labels to 1-3 words if possible.

Font Awesome icon name

Type the name of the Font Awesome icon you'd like to use. To get the name of the icon you want to use, click the link under the input and copy paste the name into the input box.
link to the Font Awesome icons

The output

Once all items have been selected, you'll notice that the images have been updated to show your selections. To download the content as images, just click the 'download hero image' or 'download child image' button. This will download a png you can embed.

Using with Tableau

To embed these images into a tableau project, host the image on an accessible location (like s3) and adding the following to your tableau 'About' section within the 'Project Details' on the LAST LINE

!https://<my_url>/<my_image>.png!

More details via Tableau.com

How it works

we have a little html5 page which loads a bunch of javascript libraries to allow us to work on the canvass.

• User Enters the Text in an editable form area
• User selects a fontAwesome icon by typing the name of the fontawesome font found in the free icons
• User selects a colour from the swatch / hue shifts existing colours
• When the user clicks the download button, we're using html2canvass to create a rasterised version of contents in the div, then triggering a download image action.

Hosting it yourself

This is a really simple page. You can basically just download it to your local machine and open index.html in chrome, firefox etc. I've tested this across a few browsers and it all seems to work without any issues like CORS etc.

Known issues

• Font Awesome icons for brands are not supported atm
• If you have issues, first try turning off your adblocker or any js blockers
• Edge / IE may cause issues. I haven't really tested this.

libraries / ref

Font Awesome https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free

Font Awesome picker https://codepen.io/thanhansoft/pen/QWjXoNM

Saving Div as image: https://html2canvas.hertzen.com/