Face Element

The face is a range that represents the gauge background. The min and max properties of the face range correspond to the min and max properties of the gauge control, and limit the values that the gauge can display.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@grapecity/wijmo.input'; import * as gauge from '@grapecity/wijmo.gauge'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the gauge var theGauge = new gauge.RadialGauge('#theGauge', { isReadOnly: false, hasShadow: false, showText: 'All', startAngle: -30, sweepAngle: 240, value: 50, thumbSize: 20, face: { color: '#f5f5f5' }, pointer: { thickness: 0.15 } }); // var theColor = new input.InputColor('#theColor', { value: theGauge.face.color, valueChanged: (s, e) => { theGauge.face.color = s.value; } }); var theThickness = new input.InputNumber('#theThickness', { min: 0, max: 1, step: .1, format: 'n2', value: theGauge.face.thickness, valueChanged: (s, e) => { theGauge.face.thickness = s.value; } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Face Element</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="theColor">Color</label> <div id="theColor"></div> </div> <div class="form-group"> <label for="theThickness">Thickness</label> <div id="theThickness"></div> </div> </div> <div class="col-xs-6"> <div id="theGauge"></div> </div> </div> </div> </body> </html> .wj-gauge { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { } // @NgModule({ imports: [WjGaugeModule, WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Face Element</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="theColor">Color:</label> <wj-input-color id="theColor" [(value)]="theGauge.face.color"></wj-input-color> </div> <div class="form-group"> <label for="theThickness">Thickness:</label> <wj-input-number id="theThickness" [min]="0" [max]="1" [step]="0.1" [format]="'n2'" [(value)]="theGauge.face.thickness"></wj-input-number> </div> </div> <div class="col-xs-6"> <wj-radial-gauge #theGauge [isReadOnly]="false" [hasShadow]="false" [showText]="'All'" [startAngle]="-30" [sweepAngle]="240" [value]="50" [thumbSize]="20"> <wj-range [wjProperty]="'face'" [color]="'#f5f5f5'"></wj-range> <wj-range [wjProperty]="'pointer'" [thickness]="0.15"></wj-range> </wj-radial-gauge> </div> </div> </div> .wj-gauge { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="color">Color:</label> <wj-input-color id="color" :value="theGauge.face.color" :value-changed="onInputValueChanged"></wj-input-color> </div> <div class="form-group"> <label for="tickness">Thickness:</label> <wj-input-number id="thickness" :min=0 :max=1 :step=0.1 format="n2" :value="theGauge.face.thickness" :value-changed="onInputValueChanged"></wj-input-number> </div> </div> <div class="col-xs-6"> <wj-radial-gauge :isReadOnly=false :hasShadow=false showText="All" :startAngle=-30 :sweepAngle=240 :value=50 :thumbSize=20> <wj-range wjProperty="face" :thickness="theGauge.face.thickness" :color="theGauge.face.color"></wj-range> <wj-range wjProperty="pointer" :thickness=0.15></wj-range> </wj-radial-gauge> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import 'src/app.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.gauge'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function(){ return { theGauge: { face: { color: '#f5f5f5', thickness: 1 } } } }, methods: { onInputValueChanged: function(s,e) { this.theGauge.face[s.hostElement.id] = s.value; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Face Element</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGauge from '@grapecity/wijmo.react.gauge'; import * as wjInput from '@grapecity/wijmo.react.input'; class App extends React.Component { constructor(props) { super(props); this.state = { color: '#f5f5f5', thickness: 1, value: 50 }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-group"> <label date-for="color">Color:</label> <wjInput.InputColor id="color" value={this.state.color} valueChanged={this._onColorChanged.bind(this)}></wjInput.InputColor> </div> <div className="form-group"> <label date-for="tickness">Thickness:</label> <wjInput.InputNumber id="thickness" min={0} max={1} step={0.1} format="n2" value={this.state.thickness} valueChanged={this._onThicknessChanged.bind(this)}></wjInput.InputNumber> </div> </div> <div className="col-xs-6"> <wjGauge.RadialGauge isReadOnly={false} hasShadow={false} showText="All" startAngle={-30} sweepAngle={240} value={this.state.value} thumbSize={20} valueChanged={this._onValueChanged.bind(this)}> <wjGauge.Range wjProperty="face" thickness={this.state.thickness} color={this.state.color}></wjGauge.Range> <wjGauge.Range wjProperty="pointer" thickness={0.15}></wjGauge.Range> </wjGauge.RadialGauge> </div> </div> </div>); } _onColorChanged(sender) { this.setState({ color: sender.value }); } _onThicknessChanged(sender) { this.setState({ thickness: sender.value }); } _onValueChanged(sender) { this.setState({ value: sender.value }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Face Element</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .container-fluid .wj-gauge { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .container-fluid .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; } .wj-dropdown, .wj-inputnumber { width: 120px; }