Ich habe für meinen kleinen 7" Touchscreen-RPI3 angefangen, eine kleine Ui Übersichtsseite zu erstellen, aber ich scheitere schon an den kleinsten Problemen.
Hier mal das momentane Ergebnis: Das PV-Widget gefällt mir so schon recht gut, aber die Müllabfuhr ist für das kleine Display sehr schwer zu erkennen.
Ist es mit "Hausmitteln" möglich, das Design etwas zu verändern und den Background auf transparent zu setzen?
Hier mal der Code der Page:
Code: Alles auswählen
config:
fixedType: canvas
gridEnable: false
label: Solaranlage
layoutType: fixed
scale: false
sidebar: true
screenWidth: 800
screenHeight: 480
blocks: []
masonry: null
grid: []
canvas:
- component: oh-canvas-layer
config: {}
slots:
default:
- component: oh-canvas-item
config:
h: auto
w: auto
x: 174
y: 44
slots:
default:
- component: widget:SMA_widget
config:
batterieleistung: Fronius_Uebersicht_ChargeDischargeofBattery
batterylevel: Fronius_Uebersicht_StateofChargeInverter1
gesamtverbrauch: Fronius_Uebersicht_PowerFlowInverter1
netzbezug: Fronius_Uebersicht_GridPower
netzeinspeisung: Fronius_Uebersicht_GridPower
pv_leistung: Fronius_Uebersicht_CurrentSolarYield
- component: oh-canvas-item
config:
x: 434
y: 42
h: 150
w: 200
slots:
default:
- component: widget:Muellabfuhr
config: {}
Ich glaube, das ich auf der Page nicht umbedingt etwas ändern kann, oder?
Wo im Widget könnte ich, oder fängt man dann an, in irgend welchen css-Dateien zu ändern?
Wie in verschiedenen Beiträgen von mir schon mitgeteilt, Programmieren ist für mich so ...
Hier noch einmal der Code der Müllabfuhr (Vielen Dank für die Bereitstellung):
Code: Alles auswählen
uid: Muellabfuhr
tags: []
props:
parameterGroups: []
timestamp: Nov 13, 2022, 5:56:57 PM
component: f7-card
config:
title: ="Abfuhrtermine:"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: oh-list-item
config:
badge: '=((items.KalenderRestmuelltonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Hauskehricht raus bringen" : false)'
badgeColor: ="red"
footer: =items.KalenderRestmuelltonne_Ergebnisstart.displayState
icon: f7:trash
iconColor: white
title: Restmüll
- component: oh-list-item
config:
badge: '=((items.KalenderKomposttonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
badgeColor: ="red"
footer: =items.KalenderKomposttonne_Ergebnisstart.displayState
icon: f7:trash
iconColor: green
title: Komposttonne
- component: oh-list-item
config:
badge: '=((items.KalenderPapiertonne_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
badgeColor: ="red"
footer: =items.KalenderPapiertonne_Ergebnisstart.displayState
icon: f7:trash
iconColor: blue
title: Papiertonne
- component: oh-list-item
config:
badge: '=((items.KalenderGelberSack_Ergebnisstart.displayState == items.LokaleZeit_DateTime.displayState) ? "Heute Grüngutabfuhr" : false)'
badgeColor: ="red"
footer: =items.KalenderGelberSack_Ergebnisstart.displayState
icon: f7:trash
iconColor: yellow
title: Gelber Sack