# Paintable canvas - Circular text

**URL:** <https://forum.inductiveautomation.com/t/paintable-canvas-circular-text/12527>\
**Category:** Ignition\
**Created:** [January 8, 2017, 11:06am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-circular-text/12527 "2017-01-08T11:06:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [January 8, 2017, 11:06am UTC](https://forum.inductiveautomation.com/t/paintable-canvas-circular-text/12527/1 "2017-01-08T11:06:45Z")

</div>

I've managed to create circular bar in paintable canvas, something like this (smaller one is mine):  
[attachment=2]dashboard\_cr.png[/attachment][attachment=1]quality\_bar.PNG[/attachment]  
But my knowledge of java (java2D) is not sufficient... 😐

I don't know, how to create a text (numbers, that represent percentage), that goes around the circle (and also dots under text)...

Any help would be very appreciated... ![:prayer:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/e5a7e3b63facc151ea73e3b45db7bdb3d4bdc316.gif ":prayer:")

And this is my code in repaint event of canvas:

[code]from java.awt import Color  
from java.awt import Graphics  
from java.awt import GradientPaint  
from java.awt.geom import GeneralPath  
from java.awt.geom import Rectangle2D  
from java.awt.geom import Ellipse2D  
from java.awt import BasicStroke  
from math import \*

#scaling  
def scaleNum(unscaledNum, minAllowed, maxAllowed, min, max):  
return (maxAllowed - minAllowed) \* (unscaledNum - min) / (max - min) + minAllowed

g = event.graphics

value = event.source.parent.value  
value = round(value\*100)/100.0 #zaokroži na dve decimalke  
#print "value= " + str(value)  
lblvalue = value  
#if value\>100.00:

# value = 100.00

# lblvalue = "\>100"

value = -value  
#print "-value= " + str(value)

#scaling  
value = scaleNum(value, 0, 359, 0, 100)  
#print value

unit = event.source.parent.unit  
label = event.source.parent.label  
print label  
sirina = event.width  
visina = event.height  
#print visina, sirina  
dX = ((event.width_100)/120.0)/100  
dY = ((event.height_100)/120.0)/100  
ratio = (event.width \* g.font.size) / 370  
g.scale(dX,dY)  
#print "dX,dY,ratio: ", dX, dY, ratio

orgfont = g.getFont()  
dimensionfont = orgfont.deriveFont(orgfont.getSize()\*2.5)

arcColor = Color(0,62,105)  
circleColor = Color(243,246,249)  
arcColor = event.source.parent.arccolor  
circleColor = event.source.parent.circlecolor

# Arc

arcwidth = 10  
g.setStroke(BasicStroke(arcwidth))  
g.setColor(circleColor)  
arc = g.drawArc(10,10,100,100,270,-360)  
#circle  
g.setColor(arcColor)  
arc = g.drawArc(10,10,100,100,270,int(value))  
#label  
g.setColor(Color.BLACK)  
g.setFont(dimensionfont)  
#g.setFont(dimensionfont)  
completelabel = str(lblvalue) + unit  
stringwidth = g.getFontMetrics().stringWidth(str(label))  
stringheight = g.getFontMetrics().getHeight()  
#print stringwidth, stringheight  
#g.drawString(str(value),(sirina/2) - (stringwidth/2), (visina/2) - (stringheight/2))  
completelabel = str(value) + unit  
stringwidth = g.getFontMetrics().stringWidth(str(lblvalue))  
g.drawString(str(lblvalue),(sirina/2)/dX - (stringwidth/2), (visina/2)/dY)  
g.setFont(orgfont)  
stringwidth = g.getFontMetrics().stringWidth(str(unit))  
g.drawString(str(unit),(sirina/2)/dX - (stringwidth/2), (visina/2)/dY - 25)  
stringwidth = g.getFontMetrics().stringWidth(str(label))  
g.drawString(label,(sirina/2)/dX - (stringwidth/2), (visina/2)/dY + 35)

[/code]  
And there are some custom properties:  
[attachment=0]quality\_bar2.PNG[/attachment]

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [January 16, 2017, 6:30pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-circular-text/12527/2 "2017-01-16T18:30:20Z")

</div>

Bump.

---

<div class="post-metadata">

**Author:** ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://forum.inductiveautomation.com/u/anna)\
**Post date:** [February 17, 2017, 5:33pm UTC](https://forum.inductiveautomation.com/t/paintable-canvas-circular-text/12527/3 "2017-02-17T17:33:22Z")

</div>

zxcslo, could you repost the screenshots? - The links show as broken.

Also, have you tried this: [java2s.com/Code/Java/2D-Grap … acurve.htm](http://www.java2s.com/Code/Java/2D-Graphics-GUI/Drawtextalongacurve.htm) ?

[code]from java.awt import Font  
from java.awt import Graphics2D  
from java.awt import RenderingHints  
from java.awt import Shape  
from java.awt.font import FontRenderContext  
from java.awt.font import GlyphVector  
from java.awt.geom import AffineTransform

import math

g2 = event.graphics  
g2.setRenderingHint(RenderingHints.KEY\_ANTIALIASING,RenderingHints.VALUE\_ANTIALIAS\_ON)

s = “Some curved text”  
font = Font(“Serif”, Font.PLAIN, 24)  
frc = g2.getFontRenderContext()  
g2.translate(20, 200)

gv = font.createGlyphVector(frc, s)  
length = gv.getNumGlyphs()

for i in range(length):  
p = gv.getGlyphPosition(i)  
theta = float(i) / float((length - 1)) \* math.pi / 4  
at = AffineTransform.getTranslateInstance(p.getX(), p.getY())  
at.rotate(theta)  
glyph = gv.getGlyphOutline(i)  
transformedGlyph = at.createTransformedShape(glyph)  
g2.fill(transformedGlyph)[/code]