When developing a web page or a BloX widget designers face the same challenge. Accurately placing text and other design elements in the design space are difficult and arduous processes. Furthermore, advanced knowledge of CSS is required to accurately style your elements.
We will overcome this challenge by leveraging SVG!
In this example, we will use Adobe Illustrator, a vector design program that allows designers to easily create illustrations. Adobe Illustrator, along with other vector design programs, allows designers to export their artwork as SVG files for use online. SVG elements are HTML DOM elements that we can hook into and manipulate just like any other BloX element.
The infographic can be designed so that all the figures are dynamic just like standard widgets.
- Design your visualization in Illustrator with default values (the values will show if the dash metric is NULL)
- Export as SVG
- Open the file in notepad++ or another text editor and replace all double quotes with single quotes
- Identify the text elements that you want to be dynamic and give them unique id’s
- This is an example of a text element that we will want to change
<text id='num1'transform='translate(507.51195 142.23719)' style='font-size: 60.48307800292969px;fill: #323f4f;font-family: Calibri-Bold, Calibri;font-weight: 700'>0</text>
- Copy the text into a website that will convert the multiline text format into a single line
- Copy the output into a document for use later
- Create a blank BloX and use this simple structure
8. Add the measurements you want into values and name the values with simple no space names.
Tying it all together and making things dynamic!
In my example, the IDs I assigned to my dynamic text elements are num1, num2, num3, num4, and num5.
We’re going to be mapping the values from our values panel to each of the dynamic text elements we set up in step 4.
Writing the Jquery script
We tie the panel values to the id’s by using a little JQuery.
The following script sets the text of ID “num1” to the value of the panel E&S.
The pink hashtag means “id” and the blue is the id name. The green is the command that gets the E&S value.
Adding the SVG
It’s time to put that script we put aside into action!
Paste the entire SVG script right after the closing script tag so it looks like this
And that’s it! You should now see your illustration come to life with dynamic text!
Please sign in to leave a comment.