Skip to content
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.

Sign up for GitHub

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

feat: add an option to change the height of the temperatur chart #1391

Merged
merged 5 commits into from
May 18, 2023
Merged

feat: add an option to change the height of the temperatur chart #1391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
253fa67
refactor: simplify template of SettingsUiSettingsTab.vue
meteyou May 18, 2023
1dde27f
feat: add an option to change the height of the temperatur chart
meteyou May 18, 2023
fb79625
locale(en): add english locale
meteyou May 18, 2023
28f91dc
locale(de): add german locale
meteyou May 18, 2023
bbd55d9
locale(de): Update src/locales/de.json
meteyou May 18, 2023
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
19 changes: 18 additions & 1 deletion src/components/charts/TempChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
:option="chartOptions"
:init-options="{ renderer: 'svg' }"
:autoresize="true"
style="height: 250px; width: 100%"></e-chart>
:style="tempchartStyle"
class="tempchart" />
</template>

<script lang="ts">
Expand Down Expand Up @@ -230,6 +231,16 @@ export default class TempChart extends Mixins(BaseMixin) {
return this.hours12Format ? '{hh}:{mm}' : '{HH}:{mm}'
}

get tempchartHeight() {
return this.$store.state.gui.uiSettings.tempchartHeight ?? 250
}

get tempchartStyle() {
return {
height: this.tempchartHeight + 'px',
}
}

mounted() {
this.initChart()
this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
Expand Down Expand Up @@ -396,3 +407,9 @@ export default class TempChart extends Mixins(BaseMixin) {
}
}
</script>

<style scoped>
.tempchart {
width: 100%;
}
</style>
70 changes: 45 additions & 25 deletions src/components/settings/SettingsUiSettingsTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</v-btn>
<v-menu bottom left offset-y :close-on-content-click="false">
<template #activator="{ on, attrs }">
<v-btn v-bind="attrs" :color="logoColor" class="minwidth-0 px-5" small v-on="on"></v-btn>
<v-btn v-bind="attrs" :color="logoColor" class="minwidth-0 px-5" small v-on="on" />
</template>
<v-color-picker
:value="logoColor"
Expand All @@ -22,7 +22,7 @@
@update:color="updateLogoColor"></v-color-picker>
</v-menu>
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row :title="$t('Settings.UiSettingsTab.Primary').toString()">
<v-btn
v-if="primaryColor.toLowerCase() !== defaultPrimaryColor.toLowerCase()"
Expand All @@ -34,16 +34,16 @@
</v-btn>
<v-menu bottom left offset-y :close-on-content-click="false">
<template #activator="{ on, attrs }">
<v-btn v-bind="attrs" :color="primaryColor" class="minwidth-0 px-5" small v-on="on"></v-btn>
<v-btn v-bind="attrs" :color="primaryColor" class="minwidth-0 px-5" small v-on="on" />
</template>
<v-color-picker
:value="primaryColor"
hide-mode-switch
mode="rgba"
@update:color="updatePrimaryColor"></v-color-picker>
@update:color="updatePrimaryColor" />
</v-menu>
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.GcodeThumbnails').toString()"
:sub-title="$t('Settings.UiSettingsTab.GcodeThumbnailsDescription').toString()"
Expand All @@ -57,28 +57,28 @@
{{ $t('Settings.UiSettingsTab.Guide').toString() }}
</v-btn>
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.BoolBigThumbnail').toString()"
:sub-title="$t('Settings.UiSettingsTab.BoolBigThumbnailDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="boolBigThumbnail" hide-details class="mt-0"></v-switch>
<v-switch v-model="boolBigThumbnail" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT').toString()"
:sub-title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINTDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="displayCancelPrint" hide-details class="mt-0"></v-switch>
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.LockSliders').toString()"
:sub-title="$t('Settings.UiSettingsTab.LockSlidersDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="lockSliders" hide-details class="mt-0"></v-switch>
<v-switch v-model="lockSliders" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<v-expand-transition>
<settings-row
v-show="lockSliders"
Expand All @@ -99,24 +99,24 @@
hide-details
outlined
dense
hide-spin-buttons></v-text-field>
hide-spin-buttons />
</settings-row>
</v-expand-transition>
<v-divider v-show="lockSliders" class="my-2"></v-divider>
<v-divider v-show="lockSliders" class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStop').toString()"
:sub-title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStopDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="confirmOnEmergencyStop" hide-details class="mt-0"></v-switch>
<v-switch v-model="confirmOnEmergencyStop" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange').toString()"
:sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
<v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.NavigationStyle').toString()"
:sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription').toString()">
Expand All @@ -126,14 +126,14 @@
class="mt-0"
hide-details
outlined
dense></v-select>
dense />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton').toString()"
:sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="boolHideUploadAndPrintButton" hide-details class="mt-0"></v-switch>
<v-switch v-model="boolHideUploadAndPrintButton" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<settings-row
Expand All @@ -148,41 +148,53 @@
outlined
dense />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.HideSaveConfigButtonForBedMesh').toString()"
:sub-title="$t('Settings.UiSettingsTab.HideSaveConfigButtonForBedMeshDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="hideSaveConfigForBedMash" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.DisableFanAnimation').toString()"
:sub-title="$t('Settings.UiSettingsTab.DisableFanAnimationDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="disableFanAnimation" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.ManualProbeDialog').toString()"
:sub-title="$t('Settings.UiSettingsTab.ManualProbeDialogDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="boolManualProbeDialog" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.BedScrewsDialog').toString()"
:sub-title="$t('Settings.UiSettingsTab.BedScrewsDialogDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="boolBedScrewsDialog" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.ScrewsTiltAdjustDialog').toString()"
:sub-title="$t('Settings.UiSettingsTab.ScrewsTiltAdjustDialogDescription').toString()"
:dynamic-slot-width="true">
<v-switch v-model="boolScrewsTiltAdjustDialog" hide-details class="mt-0" />
</settings-row>
<v-divider class="my-2" />
<settings-row
:title="$t('Settings.UiSettingsTab.TempchartHeight').toString()"
:sub-title="$t('Settings.UiSettingsTab.TempchartHeightDescription').toString()">
<v-slider
v-model.lazy="tempchartHeight"
hide-details
:min="100"
:max="500"
:step="1"
:label="tempchartHeight + 'px'" />
</settings-row>
</v-card-text>
</v-card>
</div>
Expand Down Expand Up @@ -381,6 +393,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.boolScrewsTiltAdjustDialog', value: newVal })
}

get tempchartHeight() {
return this.$store.state.gui.uiSettings.tempchartHeight ?? 250
}

set tempchartHeight(newVal) {
this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.tempchartHeight', value: newVal })
}

clearColorObject(color: any): string {
if (typeof color === 'object' && 'hex' in color) color = color.hex
if (color.length > 7) color = color.substr(0, 7)
Expand Down
2 changes: 2 additions & 0 deletions src/locales/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1041,6 +1041,8 @@
"PowerDeviceNameDescription": "Wähle aus, welches Moonraker Power-Device zum Einschalten des Druckers verwendet werden soll.",
"Primary": "Primärfarbe",
"ShowWebcamInNavigation": "Zeige Webcam in der Navigation",
"TempchartHeight": "Temperatur-Chart Höhe",
"TempchartHeightDescription": "Verändert die Höhe vom Temperatur-Chart auf dem Dashboard.",
"UiSettings": "UI-Einstellungen"
},
"Update": "speichern",
Expand Down
2 changes: 2 additions & 0 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1055,6 +1055,8 @@
"ScrewsTiltAdjustDialog": "Screws Tilt Adjust Dialog",
"ScrewsTiltAdjustDialogDescription": "Display helper dialog for SCREWS_TILT_CALCULATE.",
"ShowWebcamInNavigation": "Show Webcam in navigation",
"TempchartHeight": "Height Temperature Chart",
"TempchartHeightDescription": "Modify the height of the temperature chart on the Dashboard.",
"UiSettings": "UI-Settings"
},
"Update": "update",
Expand Down
1 change: 1 addition & 0 deletions src/store/gui/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ export const getDefaultState = (): GuiState => {
boolManualProbeDialog: true,
boolBedScrewsDialog: true,
boolScrewsTiltAdjustDialog: true,
tempchartHeight: 250,
},
view: {
blockFileUpload: false,
Expand Down
1 change: 1 addition & 0 deletions src/store/gui/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ export interface GuiState {
boolManualProbeDialog: boolean
boolBedScrewsDialog: boolean
boolScrewsTiltAdjustDialog: boolean
tempchartHeight: number
}
view: {
blockFileUpload: boolean
Expand Down