Are Material Design Icons (font) available in the web render TOP?

Tried to source it naively using some examples online, to no avail - though didn’t really expect it to work that way.

Since playing around with the material design icons in the text TOP, I am realizing the potential for using the vast library of icons for graphical UI building in Touch.

I’d love to be able to use these in the web render top, to get around our current inability to load local offline graphics for use in css/html.

Any idea on if this is already implemented ? or not one of the default fonts?


Also, on the note of fonts, is there any repo or database that tells us what fonts are available to web render top?

Hey @lucasm,

I remember this being a bit a pain to get going but it does work:

def LoadFonts(self, count=0):
    webRender = self.ownerComp.op('webrender1')
    webRender.cook(force=True)
    quoteFont = self.ownerComp.par.Quotefontfile.eval()

    # remove previous rules
    for i in range(10):
        style = 'document.styleSheets[0].removeRule(0)'
        webRender.executeJavaScript(style)

    cssRule = "\"@font-face\",\"font-family:'{0}'; src: url('{1}');\",0"

    # setup first font
    ruleSet = cssRule.format('quote',tdu.expandPath(quoteFont))
    style = 'document.styleSheets[0].addRule({0})'.format(ruleSet)
    webRender.executeJavaScript(style)

    fontSize = 		self.ownerComp.par.Quotefontsize.eval()
    fontKerning = 	self.ownerComp.par.Quotekerning1.eval()
    fontLine = 		self.ownerComp.par.Quotelinespacing.eval()
    fontAlign = 	self.ownerComp.par.Quotehorizontalalign.eval()
    fontColorr = 	self.ownerComp.par.Quotefontcolorr.eval()*256
    fontColorg = 	self.ownerComp.par.Quotefontcolorg.eval()*256
    fontColorb = 	self.ownerComp.par.Quotefontcolorb.eval()*256
    fontColora = 	self.ownerComp.par.Quotefontcolora.eval()
    hanging = 		self.ownerComp.par.Quotehangingpunctuation.eval()
    marginTop = 	self.ownerComp.par.Quoteborderspace3.eval()
    marginBtm = 	self.ownerComp.par.Quoteborderspace4.eval()
    marginLeft = 	self.ownerComp.par.Quoteborderspace1.eval()
    marginRight = 	self.ownerComp.par.Quoteborderspace2.eval()

    ruleSet = "\".quote\",\"font-family:'quote'; font-size:{0}px; letter-spacing:{1}px; line-height:{2}; text-align:{3}; color:rgba({4},{5},{6},{7}); margin-left:{8}px; margin-right:{9}px; margin-top:{10}px; margin-bottom:{11}px; text-indent: {12}em;\",0"
    ruleSet = ruleSet.format(fontSize,fontKerning,fontLine,fontAlign,int(fontColorr),int(fontColorg),int(fontColorb),fontColora, marginLeft, marginRight, marginTop, marginBtm, hanging)
    style = 'document.styleSheets[0].addRule({0})'.format(ruleSet)
    webRender.executeJavaScript(style)

    ruleSet = "\".mainClass\",\"hanging-punctuation: first;\",0"
    style = 'document.styleSheets[0].addRule({0})'.format(ruleSet)
    webRender.executeJavaScript(style)

and the page that i loaded looked somthing like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
        <style>
        </style>
    </head>
    <body style='background-color:rgba(0,0,0,0); padding: 0px; margin:0px;'>
        <div class="mainClass">
            <div class="quote">Got something here...</div>
        </div>
    </body>
</html>

Not sure about the available fonts, I would have thought any installed systemfonts, but sounds like this is not the case?

Cheers
Markus

wow awesome! Thanks @snaut, this is really cool. I’ll have to dig into this soon. question:

Is Quotefontfile a parameter that points to a font file on the operating system? same sort of font file that can be loaded into text TOP for instance?

yeah - that’s a custom file parameter - just a pointer to a file on disc.
I’ll see if i can put this into a component tomorrow - would be easier to test…

cheers
Markus

1 Like