shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CPU Use

Browse Source
This commit is contained in:
Robin Davies
2022-01-01 01:28:05 -05:00
parent 96584fd4a7
commit dddd6a85d5
9 changed files with 168 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/public/var/config.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"socket_server_port": 80,
"socket_server_port": 8080,
"socket_server_address": "*",
"max_upload_size": 1048576,
react/src/JackHostStatus.tsx
+73 -26
View File
@@ -26,75 +26,122 @@ const GREEN_COLOR = "#666";
function tempDisplay(mC: number): string
{
return (mC/1000).toFixed(1) + "\u00B0C"; // degrees C.
function tempDisplay(mC: number): string {
return (mC / 1000).toFixed(1) + "\u00B0C"; // degrees C.
}
function cpuDisplay(cpu: number): string
function cpuDisplay(cpu: number): string {
return cpu.toFixed(1) + "%";
}
function fmtCpuFreq(freq: number): string
{
return cpu.toFixed(1)+"%";
if (freq >= 100000000)
{
return (freq/1000000).toFixed(1) + " GHz";
}
if (freq >= 10000000)
{
return (freq/1000000).toFixed(2) + " GHz";
}
if (freq >= 1000000)
{
return (freq/1000000).toFixed(3) + " GHz";
}
if (freq >= 1000)
{
return (freq/1000).toFixed(3) + " MHz";
}
return freq + " KHz";
}
export default class JackHostStatus {
deserialize(input: any): JackHostStatus
{
deserialize(input: any): JackHostStatus {
this.active = input.active;
this.restarting = input.restarting;
this.underruns = input.underruns;
this.cpuUsage = input.cpuUsage;
this.msSinceLastUnderrun = input.msSinceLastUnderrun;
this.temperaturemC = input.temperaturemC;
this.cpuFreqMax = input.cpuFreqMax;
this.cpuFreqMin = input.cpuFreqMin;
this.governor = input.governor;
return this;
}
hasTemperature() : boolean {
hasTemperature(): boolean {
return this.temperaturemC >= -100000;
}
active: boolean = false;
restarting: boolean = false;
underruns: number = 0;
cpuUsage: number = 0;
msSinceLastUnderrun: number = -5000*1000;
msSinceLastUnderrun: number = -5000 * 1000;
temperaturemC: number = -1000000;
cpuFreqMax: number = 0;
cpuFreqMin: number = 0;
governor: string = "";
static getDisplayView(label: string,status?: JackHostStatus): React.ReactNode {
static getCpuInfo(label: string, status?: JackHostStatus): React.ReactNode {
if (!status) {
return (<div style={{whiteSpace: "nowrap"}}>
return (<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption">&nbsp;</Typography>
</div>);
}
if (status.restarting)
{
return (<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption" color="textSecondary">
{
(status.cpuFreqMax === status.cpuFreqMin)?
(
<span> {fmtCpuFreq(status.cpuFreqMax)} {status.governor} </span>
)
:(
<span> {fmtCpuFreq(status.cpuFreqMax)}-{fmtCpuFreq(status.cpuFreqMax)} {status.governor} </span>
)
}
</Typography>
</div>);
}
static getDisplayView(label: string, status?: JackHostStatus): React.ReactNode {
if (!status) {
return (<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<Typography variant="caption">&nbsp;</Typography>
</div>);
}
if (status.restarting) {
return (
<div style={{whiteSpace: "nowrap"}}>
<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<span style={{color: RED_COLOR}}>
<span style={{ color: RED_COLOR }}>
<Typography variant="caption" color="inherit">Restarting&nbsp;&nbsp;</Typography>
</span>
{
status.temperaturemC > -100000 &&
(
<span style={{color: status.temperaturemC > 75000? RED_COLOR: GREEN_COLOR}}>
<span style={{ color: status.temperaturemC > 75000 ? RED_COLOR : GREEN_COLOR }}>
<Typography variant="caption" color="inherit">{tempDisplay(status.temperaturemC)}</Typography>
</span>
)
}
</div>
);
} else if (!status.active) {
return (
<div style={{whiteSpace: "nowrap"}}>
<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<span style={{color: RED_COLOR}}>
<span style={{ color: RED_COLOR }}>
<Typography variant="caption" color="inherit">Stopped&nbsp;&nbsp;</Typography>
</span>
{
status.temperaturemC > -100000 &&
(
<span style={{color: status.temperaturemC > 75000? RED_COLOR: GREEN_COLOR}}>
<span style={{ color: status.temperaturemC > 75000 ? RED_COLOR : GREEN_COLOR }}>
<Typography variant="caption" color="inherit">{tempDisplay(status.temperaturemC)}</Typography>
</span>
)
@@ -102,22 +149,22 @@ export default class JackHostStatus {
</div>
);
} else {
let underrunError = status.msSinceLastUnderrun < 15*1000;
let underrunError = status.msSinceLastUnderrun < 15 * 1000;
return (
<div style={{whiteSpace: "nowrap"}}>
<div style={{ whiteSpace: "nowrap" }}>
<Typography variant="caption" color="textSecondary">{label}</Typography>
<span style={{color: underrunError? RED_COLOR: GREEN_COLOR}}>
<span style={{ color: underrunError ? RED_COLOR : GREEN_COLOR }}>
<Typography variant="caption" color="inherit">
XRuns:&nbsp;{status.underruns+""}&nbsp;&nbsp;
XRuns:&nbsp;{status.underruns + ""}&nbsp;&nbsp;
</Typography>
</span>
<span style={{color: underrunError? RED_COLOR: GREEN_COLOR}}>
<span style={{ color: underrunError ? RED_COLOR : GREEN_COLOR }}>
<Typography variant="caption" color="inherit">
CPU:&nbsp;{cpuDisplay(status.cpuUsage)}&nbsp;&nbsp;
</Typography>
</span>
<span style={{color: GREEN_COLOR}}>
<span style={{ color: GREEN_COLOR }}>
<Typography variant="caption" color="inherit">{tempDisplay(status.temperaturemC)}</Typography>
</span>
react/src/SettingsDialog.tsx
+33 -27
View File
@@ -163,25 +163,23 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
}
handleConnectionStateChanged() : void {
if (this.model.state.get() === State.Ready)
{
if (this.state.shuttingDown || this.state.restarting)
{
this.setState({shuttingDown: false, restarting: false});
handleConnectionStateChanged(): void {
if (this.model.state.get() === State.Ready) {
if (this.state.shuttingDown || this.state.restarting) {
this.setState({ shuttingDown: false, restarting: false });
}
}
}
handleApplyWifiConfig(wifiConfigSettings: WifiConfigSettings): void {
this.setState({showWifiConfigDialog: false});
this.setState({ showWifiConfigDialog: false });
this.model.setWifiConfigSettings(wifiConfigSettings)
.then(() => {
.then(() => {
})
.catch((err) => {
this.model.showAlert(err);
});
})
.catch((err) => {
this.model.showAlert(err);
});
}
handleWifiConfigSettingsChanged(): void {
@@ -394,8 +392,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
return (
<DialogEx tag="SettingsDialog" fullScreen open={this.props.open}
onClose={() => { this.props.onClose() }} TransitionComponent={Transition}
style={{userSelect: "none"}}
>
style={{ userSelect: "none" }}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
<div style={{ flex: "0 0 auto" }}>
@@ -420,18 +418,25 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<Typography className={classes.sectionHead} display="block" variant="caption" color="secondary">
AUDIO
</Typography>
<div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
{ (!isConfigValid) ?
(
<Typography variant="caption" color="textSecondary">Status: <span style={{color: "#F00"}}>Not configured.</span></Typography>
):
JackHostStatus.getDisplayView("Status:\u00A0", this.state.jackStatus)
}
</div>
{ this.state.jackConfiguration.errorState !== "" &&
{(!isConfigValid) ?
(
<div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
<Typography variant="caption" color="textSecondary"><span style={{color: "#F00"}}>{this.state.jackConfiguration.errorState }</span></Typography>
<Typography display="block" variant="caption" color="textSecondary">Status: <span style={{ color: "#F00" }}>Not configured.</span></Typography>
<Typography display="block" variant="caption" color="textSecondary">CPU: </Typography>
</div>
) :
(
<div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
{JackHostStatus.getDisplayView("Status:\u00A0", this.state.jackStatus)}
{JackHostStatus.getCpuInfo("CPU:\u00A0", this.state.jackStatus)}
</div>
)
}
{this.state.jackConfiguration.errorState !== "" &&
(
<div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
<Typography variant="caption" color="textSecondary"><span style={{ color: "#F00" }}>{this.state.jackConfiguration.errorState}</span></Typography>
</div>
)
@@ -449,7 +454,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
jackServerSettings={this.state.jackServerSettings}
onClose={() => this.setState({ showJackServerSettingsDialog: false })}
onApply={(jackServerSettings) => {
this.setState({ showJackServerSettingsDialog: false,
this.setState({
showJackServerSettingsDialog: false,
jackServerSettings: jackServerSettings
});
this.model.setJackServerSettings(jackServerSettings);
@@ -561,9 +567,9 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
)
}
<WifiConfigDialog wifiConfigSettings={this.state.wifiConfigSettings} open={this.state.showWifiConfigDialog}
onClose={()=> this.setState({showWifiConfigDialog: false})}
onClose={() => this.setState({ showWifiConfigDialog: false })}
onOk={(wifiConfigSettings) => this.handleApplyWifiConfig(wifiConfigSettings)}
/>
/>
</DialogEx >
react/src/ZoomedDial.tsx
+2 -2
View File
@@ -168,7 +168,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
let instanceId = this.props.controlInfo.instanceId;
if (instanceId === -1) return 0;
let pedalBoardItem = this.model.pedalBoard.get()?.getItem(instanceId);
let value: number = pedalBoardItem?.getControlValue(this.props.controlInfo.uiControl.symbol) ?? 0;
let value: number = pedalBoardItem?.getControlValue(uiControl.symbol) ?? 0;
this.defaultValue = value;
return value;
}
@@ -350,7 +350,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
render() {
return (
<img ref={this.imgRef} src="img/fx_dial.svg"
<img ref={this.imgRef} src="img/fx_dial.svg" alt=""
style={{
overscrollBehavior: "none", touchAction: "none",
width: this.props.size, height: this.props.size, opacity: DEFAULT_OPACITY,
react/src/ZoomedUiControl.tsx
+2 -2
View File
@@ -21,8 +21,6 @@ import React, {SyntheticEvent} from 'react';
import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles';
import { ZoomedControlInfo } from './PiPedalModel';
import DialogEx from './DialogEx';
import { TransitionProps } from '@material-ui/core/transitions/transition';
import Slide from '@material-ui/core/Slide';
import Typography from '@material-ui/core/Typography';
import { PiPedalModelFactory,PiPedalModel } from './PiPedalModel';
import ZoomedDial from './ZoomedDial';
@@ -43,12 +41,14 @@ interface ZoomedUiControlState {
value: number
};
/*
const Transition = React.forwardRef(function Transition(
props: TransitionProps & { children?: React.ReactElement },
ref: React.Ref<unknown>,
) {
return <Slide direction="up" ref={ref} {...props} />;
});
*/
const ZoomedUiControl = withStyles(styles, { withTheme: true })(