Better fonts and better alignment of motor reporter control

This commit is contained in:
Sam El-Husseini 2017-12-27 20:43:39 -08:00
parent 7e2251d8ac
commit a9a9a89811
2 changed files with 16 additions and 5 deletions

View File

@ -43,10 +43,11 @@ namespace pxsim.visuals {
font-size:30px;
}
.sim-text.number {
font-family: Lato, Work Sans, PT Serif, Source Serif Pro;
font-family: Courier, Lato, Work Sans, PT Serif, Source Serif Pro;
font-weight: bold;
}
.sim-text.inverted {
fill:#000;
fill:#5A5A5A;
}
/* Color Grid */

View File

@ -12,10 +12,20 @@ namespace pxsim.visuals {
getInnerView() {
this.group = svg.elt("g") as SVGGElement;
const outerCircle = pxsim.svg.child(this.group, "circle", { 'stroke-dasharray': '565.48', 'stroke-dashoffset': '0', 'cx': 100, 'cy': 100, 'r': '90', 'style': `fill:transparent; transition: stroke-dashoffset 1s linear;`, 'stroke': '#a8aaa8', 'stroke-width': '1rem' }) as SVGCircleElement;
this.circleBar = pxsim.svg.child(this.group, "circle", { 'stroke-dasharray': '565.48', 'stroke-dashoffset': '0', 'cx': 100, 'cy': 100, 'r': '90', 'style': `fill:transparent; transition: stroke-dashoffset 1s linear;`, 'stroke': '#f12a21', 'stroke-width': '1rem' }) as SVGCircleElement;
const outerCircle = pxsim.svg.child(this.group, "circle", {
'stroke-dasharray': '565.48', 'stroke-dashoffset': '0',
'cx': 100, 'cy': 100, 'r': '90', 'style': `fill:transparent; transition: stroke-dashoffset 1s linear;`,
'stroke': '#a8aaa8', 'stroke-width': '1rem' }) as SVGCircleElement;
this.circleBar = pxsim.svg.child(this.group, "circle", {
'stroke-dasharray': '565.48', 'stroke-dashoffset': '0',
'cx': 100, 'cy': 100, 'r': '90', 'style': `fill:transparent; transition: stroke-dashoffset 1s linear;`,
'stroke': '#f12a21', 'stroke-width': '1rem' }) as SVGCircleElement;
this.reporter = pxsim.svg.child(this.group, "text", { 'x': this.getWidth() / 2, 'y': this.getHeight() / 2, 'text-anchor': 'middle', 'style': 'font-size: 50px', 'class': 'sim-text inverted number' }) as SVGTextElement;
this.reporter = pxsim.svg.child(this.group, "text", {
'x': this.getWidth() / 2, 'y': this.getHeight() / 2,
'text-anchor': 'middle', 'alignment-baseline': 'middle',
'style': 'font-size: 50px',
'class': 'sim-text inverted number' }) as SVGTextElement;
return this.group;
}