Hey everyone,
I have started to created a widget to my 3D printer and I cannot make work the visible ( in a string the state changing and I want to use the ,printing" state to show the relevant data).
Here is the code:
uid: 3D_printer_state
props:
parameters:
- default: 3D nyomtató
description: Title
label: Title
name: PrinterOHTitle
required: false
type: TEXT
groupName: header
- default: iconify:cbi:3dprinter-standby
description: System Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: PrinterOHIcon
required: false
type: TEXT
groupName: header
- context: item
description: Online/Offline item for printer
label: Item
name: PrinterOnlineOfflinestate
required: false
type: TEXT
groupName: PrinterOnlineOffline
- context: item
description: Printer state item for printing, busy, etc (read only from printer)
label: Item
name: PrinterSateItem
required: true
type: TEXT
groupName: PrinterState
- context: item
description: Printing gauge progress bar
label: Item
name: PrinterProgressPrecentItem
required: true
type: TEXT
groupName: PrinterProgressBar
- default: iconify:mdi:printer-3d-nozzle-outline
description: Extruder Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: ExtruderOHIcon
required: false
type: TEXT
groupName: EtruderIcon
- context: item
description: Extruder Current Temperatur
label: Item
name: ExtruderCurrentTemperaturItem
required: true
type: TEXT
groupName: ExtruderCurrentTemperatur
- context: item
description: Extruder Set Temperatur
label: Item
name: ExtruderSetTemperaturItem
required: true
type: TEXT
groupName: ExtruderSetTemperatur
- default: iconify:mdi:coolant-temperature
description: Bed Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: BedOHIcon
required: false
type: TEXT
groupName: BedIcon
- context: item
description: Bed Current Temperatur
label: Item
name: BedCurrentTemperaturItem
required: true
type: TEXT
groupName: BedCurrentTemperatur
- context: item
description: Bed Set Temperatur
label: Item
name: BedSetTemperaturItem
required: true
type: TEXT
groupName: BedSetTemperatur
- default: iconify:mdi:axis-arrow
description: Axis Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: AxisOHIcon
required: false
type: TEXT
groupName: AxisIcon
- context: item
description: X axi Item
label: Item
name: xAxiItem
required: true
type: TEXT
groupName: xAxi
- context: item
description: Y axi Item
label: Item
name: yAxiItem
required: true
type: TEXT
groupName: yAxi
- context: item
description: Z axi Item
label: Item
name: zAxiItem
required: true
type: TEXT
groupName: zAxi
- default: iconify:fluent:top-speed-20-filled
description: Speed Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: SpeedOHIcon
required: false
type: TEXT
groupName: SpeedIcon
- context: item
description: Speed Item
label: Item
name: SpeedItem
required: true
type: TEXT
groupName: Speedgroup
- default: iconify:mdi:printer-3d-nozzle-outline
description: Flow Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: FlowOHIcon
required: false
type: TEXT
groupName: FlowIcon
- context: item
description: Flow Item
label: Item
name: FlowItem
required: true
type: TEXT
groupName: Flowgroup
- default: iconify:ph:fan
description: Fan Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: FanOHIcon
required: false
type: TEXT
groupName: FanIcon
- context: item
description: Fan Item
label: Item
name: FanItem
required: true
type: TEXT
groupName: Fangroup
- default: iconify:tdesign:time
description: Time Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: TimeOHIcon
required: false
type: TEXT
groupName: TimeIcon
- context: item
description: Current printing time Item
label: Item
name: CurrentPrintingTimeItem
required: true
type: TEXT
groupName: CurrentTimegroup
- context: item
description: Remaining printing time Item
label: Item
name: RemainingPrintingTimeItem
required: true
type: TEXT
groupName: RemainingTimeroup
- context: item
description: File name
label: Item
name: printfilenameitem
required: true
type: TEXT
groupName: printfilename
- default: iconify:fluent-mdl2:printfax-printer-file
description: Time Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: printOHIcon
required: false
type: TEXT
groupName: printericon
- description: Hide Camera
label: hide
name: HideCamera
required: false
type: BOOLEAN
groupName: PrinterCamera
- default: https://xxxx.de/ipcamera/a0470d9ac6/{recording}.mp4
name: URL
required: false
type: TEXT
groupName: PrinterCamera
- context: item
description: Printed part raw picture
label: Item
name: PrintedPartRawPictureURL
required: false
type: TEXT
groupName: PrintedPartRawPicture
parameterGroups:
- name: header
label: List icon and name
- name: PrinterOnlineOffline
label: Printer state
- name: PrinterState
label: Printer state item
- name: PrinterProgressBar
label: Printer progress gauge
- name: EtruderIcon
label: Extruder Icon for printing screen
- name: ExtruderCurrentTemperatur
label: Extruder current temperatur Item
- name: ExtruderSetTemperatur
label: Extruder Set Temperatur Item
- name: BedIcon
label: Bed Icon for printing screen
- name: BedCurrentTemperatur
label: Bed Current Temperatur for printing screen
- name: BedSetTemperatur
label: Bed Set Temperatur for printing screen
- name: AxisIcon
label: Axis Icon for printing sreen
- name: xAxi
label: x axi item for printing screen
- name: yAxi
label: y axi item for printing screen
- name: zAxi
label: z axi item for printing screen
- name: SpeedIcon
label: Speed Icon for printing screen
- name: Speedgroup
label: Speed Item for printing screen
- name: FlowIcon
label: Flow Icon for printing screen
- name: Flowgroup
label: Flow Item for printing screen
- name: FanIcon
label: Fan Icon for printing screen
- name: Fangroup
label: Fan Item for printing screen
- name: TimeIcon
label: Time Icon for 3D printer
- name: CurrentTimegroup
label: Printed time for printing screen
- name: RemainingTimeroup
label: Remaining time for printing screen
- name: printfilename
label: 3D print file name item
- name: printericon
label: 3D print file icon
- name: PrinterCamera
label: Camera view for your printer
- name: PrintedPartRawPicture
label: Raw picture from the printed part
timestamp: Jun 14, 2024, 3:30:14 PM
component: oh-list-item
config:
after: " "
icon: =props.PrinterOHIcon
style:
--f7-list-item-after-font-size: 16px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
title: =props.PrinterOHTitle
badge: '=(items[props.PrinterOnlineOfflinestate].state == "ON") ? "Online" : "Offline"'
badgeColor: '=(items[props.PrinterOnlineOfflinestate].state == "ON") ? "green" : "red"'
slots:
accordion:
- component: f7-list
config:
mediaList: true
style:
background-color: '=themeOptions.dark === "dark" ? "rgb(35, 35, 35)" : "rgb(245, 245, 245)"'
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 10px
slots:
default:
- component: f7-row
config:
style:
text-align: center
slots:
default:
- component: f7-col
config:
with: 33%
slots:
default:
- component: oh-image-card
config:
item: =props.PrintedPartRawPictureURL
lazy: true
lazyFadeIn: false
noBorder: true
style:
padding-left: 0%
padding-right: 0%
- component: f7-col
config:
with: 33%
slots:
default:
- component: oh-gauge
config:
borderColor: "=(Number.parseFloat(items[props.PrinterProgressPrecentItem].state) >= '90') ? 'green' : (Number.parseFloat(items[props.PrinterProgressPrecentItem].state) >= '75') ? 'light green' : (Number.parseFloat(items[props.PrinterProgressPrecentItem].state) >= '50') ? 'blue' : (Number.parseFloat(items[props.PrinterProgressPrecentItem].state) >= '25') ? 'light blue' : (Number.parseFloat(items[props.PrinterProgressPrecentItem].state) >= '0') ? 'cyan' : 'gray'"
borderWidth: 25
item: =props.PrinterProgressPrecentItem
labelFontSize: 26
labelText: Progress
BorderBgColor: gray
type: circle
valueFontSize: 34
valueFontWeight: bold
valueText: =@props.PrinterProgressPrecentItem
valueTextColor: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
- component: f7-block
config:
style:
margin: 0px
padding: 10px
slots:
default:
- component: f7-row
config:
style:
text-align: center
slots:
default:
- component: f7-col
config:
with: 33%
visible: =!props.HideCamera
slots:
default:
- component: oh-video-card
config:
url: =props.URL.replace('{recording}', vars.selectedRecording)
- component: oh-list-item
config:
icon: =props.printOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-footer-font-size: 14px
--f7-list-item-footer-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 12px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="File name:"
footer: =@props.printfilenameitem
- component: oh-list-item
config:
icon: =props.ExtruderOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-footer-font-size: 14px
--f7-list-item-footer-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="Current Temperature:" + " " + @props.ExtruderCurrentTemperaturItem
footer: ="Set temperature:" + " " + @props.ExtruderSetTemperaturItem
- component: oh-list-item
config:
icon: =props.BedOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-footer-font-size: 14px
--f7-list-item-footer-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="Current temperature:" + " " + @props.BedCurrentTemperaturItem
footer: ="Set temperature:" + " " + @props.BedSetTemperaturItem
- component: oh-list-item
config:
icon: =props.AxisOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="X:" + " " + @props.xAxiItem + " Y:" + " " + @props.yAxiItem + " " + "Z:" + " " + @props.zAxiItem
- component: oh-list-item
config:
icon: =props.SpeedOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: =@props.SpeedItem
- component: oh-list-item
config:
icon: =props.FlowOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="Flow rate:" + " " + @props.FlowItem
- component: oh-list-item
config:
icon: =props.FanOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="Fan speed:" + " " + @props.FanItem
- component: oh-list-item
config:
icon: =props.TimeOHIcon
iconColor: gray
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-footer-font-size: 14px
--f7-list-item-footer-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="Current printing time:" + " " + @props.CurrentPrintingTimeItem
footer: ="Estimated printing time:" + " " + @props.RemainingPrintingTimeItem
visible: =items.PrinterSateItem.state === "4"
Here is a older picture from the widget when I started a print on klipper:
Here is the string value defined in the item state:
value: " "
config:
options: standby=1,printing=2,busy=3,shutdown=4
step: "1"
min: "1"
max: "4"
I would like to hide the file name, the thumbnail picture, the progress gauge and the printing time when the value is not 2
Thanks for the help and advice!
