Skip to content

✨ Permit users to choose Celsius or Fahrenheit. #1182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/widgets.md
Original file line number Diff line number Diff line change
Expand Up @@ -2380,12 +2380,19 @@ You'll need to enable the sensors plugin to use this widget, using: `--enable-pl

<p align="center"><img width="400" src="https://i.ibb.co/xSs4Gqd/gl-cpu-temp.png" /></p>

#### Options

**Field** | **Type** | **Required** | **Description**
--- | --- | --- | ---
**`units`** | `string` | _Optional_ | Use `C` to display temperatures in Celsius or `F` to use Fahrenheit. Defaults to `C`.

#### Example

```yaml
- type: gl-cpu-temp
options:
hostname: http://192.168.130.2:61208
units: C
```

---
Expand Down
113 changes: 74 additions & 39 deletions src/components/Widgets/GlCpuTemp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
<div class="glances-temp-wrapper" v-if="tempData">
<div class="temp-row" v-for="sensor in tempData" :key="sensor.label">
<p class="label">{{ sensor.label | formatLbl }}</p>
<p :class="`temp range-${sensor.color}`">{{ sensor.value | formatVal(sensor.sensorType) }}</p>
<p :class="`temp range-${sensor.color}`">{{ sensor.value | formatVal(sensor.unit) }}</p>
</div>
</div>
</template>

<script>
import WidgetMixin from '@/mixins/WidgetMixin';
import GlancesMixin from '@/mixins/GlancesMixin';
import { capitalize, fahrenheitToCelsius } from '@/utils/MiscHelpers';
import { capitalize, celsiusToFahrenheit, fahrenheitToCelsius } from '@/utils/MiscHelpers';

export default {
mixins: [WidgetMixin, GlancesMixin],
Expand All @@ -29,18 +29,45 @@ export default {
formatLbl(lbl) {
return capitalize(lbl);
},
formatVal(val, sensorType) {
switch (sensorType) {
case 'rpm':
formatVal(val, unit) {
switch (unit) {
case 'R':
return `${Math.round(val)} rpm`;
case 'percentage':
case '%':
return `${Math.round(val)}%`;
default:
return `${Math.round(val)}°C`;
return `${Math.round(val)}°${unit}`;
}
},
},
methods: {
getDesiredUnits() {
return this.options.units ?? 'C';
},
getDisplayValue(rawValue, units) {
const desiredUnits = this.getDesiredUnits();
if (units === desiredUnits) {
return rawValue;
}

return desiredUnits === 'C'
? fahrenheitToCelsius(rawValue)
: celsiusToFahrenheit(rawValue);
},
getCelsiusValue(rawValue, units) {
if (units !== 'F' && units !== 'C') {
return Number.NaN;
}

return units === 'C' ? rawValue : fahrenheitToCelsius(rawValue);
},
getFahrenheitValue(rawValue, units) {
if (units !== 'F' && units !== 'C') {
return Number.NaN;
}

return units === 'F' ? rawValue : celsiusToFahrenheit(rawValue);
},
getTempColor(temp) {
if (temp <= 50) return 'green';
if (temp > 50 && temp < 75) return 'yellow';
Expand All @@ -54,45 +81,53 @@ export default {
return 'green';
},
processData(sensorData) {
const results = [];
sensorData.forEach((sensor) => {
// Start by assuming the sensor's unit is degrees Celsius
let sensorValue = sensor.value;
let color = this.getTempColor(sensorValue);
let sensorType = 'temperature';

// Now, override above if sensor unit is actually of a different type
this.tempData = sensorData.map(sensor => {
switch (sensor.unit) {
case 'F':
sensorValue = fahrenheitToCelsius(sensorValue);
color = fahrenheitToCelsius(sensorValue);
break;

// R is for RPM and is typically for fans
case 'C':
return this.processTemperatureSensor(sensor);
case 'R':
color = 'grey';
sensorType = 'rpm';
break;

// For instance, battery levels
return this.processFanSensor(sensor);
case '%':
sensorType = 'percentage';
color = this.getPercentageColor(sensorValue);
break;

// Nothing to do here, already covered by default values
return this.processBatterySensor(sensor);
default:
break;
// Justification: This is a recoverable error that developers
// should nevertheless be warned about.
// eslint-disable-next-line
console.warn('Unrecognized unit', sensor.unit);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is also a this.error('msg') (defined in the WidgetMixin.js) - which will display this to the user, as well as log to console - here's an example.

But I'm happy either way :)

return null;
}
}).filter(Boolean);
},
processBatterySensor({ label, unit, value }) {
const color = this.getPercentageColor(value);
return {
color,
label,
unit,
value,
};
},
processFanSensor({ label, unit, value }) {
return {
color: 'grey',
label,
unit,
value,
};
},
processTemperatureSensor({ label, unit, value: originalValue }) {
const celsiusValue = this.getCelsiusValue(originalValue, unit);
const color = this.getTempColor(celsiusValue);
const displayValue = this.getDisplayValue(originalValue, unit);
const displayUnits = this.getDesiredUnits();

results.push({
label: sensor.label,
value: sensorValue,
color,
sensorType,
});
});
this.tempData = results;
return {
color,
label,
unit: displayUnits,
value: displayValue,
};
},
},
};
Expand Down
5 changes: 5 additions & 0 deletions src/utils/MiscHelpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,11 @@ export const getValueFromCss = (colorVar) => {
return cssProps.getPropertyValue(`--${colorVar}`).trim();
};

/* Given a temperature in Celsius, returns value in Fahrenheit */
export const celsiusToFahrenheit = (celsius) => {
return Math.round((celsius * 1.8) + 32);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not :

Suggested change
return Math.round((celsius * 1.8) + 32);
return Math.round((celsius * 9 / 5) + 32);

To keep style consistent with the below fahrenheitToCelsius ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no reason to prefer one form or the other.

Would you like me to make the suggested change, or are you asking merely out of curiosity?

If the latter, it is because I asked Google for the formula for the conversion, even though the reverse formula was staring me in the face and I might have worked it out myself.

If the former, I have no objections. Let me know if I should take action based on your suggestion.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was suggesting it for the style consistency. It's your PR, and your code is fine... My suggestion may be viewed as nitpicking ;-)

};

/* Given a temperature in Fahrenheit, returns value in Celsius */
export const fahrenheitToCelsius = (fahrenheit) => {
return Math.round(((fahrenheit - 32) * 5) / 9);
Expand Down