Code: Select all
.dial .device {
font-size: 30px
}
Moderators: leecollings, htilburgs, robgeerts
Code: Select all
.dial .device {
font-size: 30px
}
Code: Select all
blocks['Beregenen'] = {
type: 'dial',
idx: 1320,
title: 'Sproeien',
addClass:'sproei',
subtype: 'Text',
last_update: false,
}
Code: Select all
.sproei {
font-size: 600% !important;
color: blue !important;
}
Code: Select all
.sproei .data{
font-size: 600% !important;
color: blue !important;
}
First try the following in custom.css:JuanUil wrote: ↑Wednesday 20 October 2021 11:28 Hi Lokonli,
thnx for your reply.
I have tried now in custom.css:
andCode: Select all
.sproei { font-size: 600% !important; color: blue !important; }
both with no luckCode: Select all
.sproei .data{ font-size: 600% !important; color: blue !important; }
![]()
getting a bit desperate
Code: Select all
/*to vertical center the dial menu*/
.dial-menu .status {
justify-content: center;
display: flex;
flex-direction: column;
}
.dial-menu .status li {
margin: unset
}
/*to change the font of the dial menu text*/
.dial-menu .status li {
font-size: 75%
}
Code: Select all
/*to vertical center the dial menu*/
.sproei .dial-menu .status {
justify-content: center;
display: flex;
flex-direction: column;
}
.sproei .dial-menu .status li {
margin: unset
}
/*to change the font of the dial menu text*/
.sproei .dial-menu .status li {
font-size: 75%
}
Code: Select all
blocks['Linky'] = {
idx: 34,
title: 'Linky',
type: 'dial',
width: 6,
min: -10,
max: 10,
showring: true,
showunit: true,
shownumbers: true,
last_update: false
}
Code: Select all
{
"ActTime" : 1635799147,
"AstrTwilightEnd" : "19:05",
"AstrTwilightStart" : "05:37",
"CivTwilightEnd" : "17:56",
"CivTwilightStart" : "06:46",
"DayLength" : "10:08",
"NautTwilightEnd" : "18:31",
"NautTwilightStart" : "06:12",
"ServerTime" : "2021-11-01 21:39:07",
"SunAtSouth" : "12:21",
"Sunrise" : "07:17",
"Sunset" : "17:25",
"app_version" : "2021.1",
"result" :
[
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"Counter" : "17278.993",
"CounterDeliv" : "0.000",
"CounterDelivToday" : "0.000 kWh",
"CounterToday" : "10.986 kWh",
"CustomImage" : 0,
"Data" : "17278993;0;0;0;630;0",
"Description" : "",
"Favorite" : 1,
"HardwareDisabled" : false,
"HardwareID" : 4,
"HardwareName" : "TeleInfo",
"HardwareType" : "Teleinfo EDF",
"HardwareTypeVal" : 19,
"HaveTimeout" : false,
"ID" : "0001",
"LastUpdate" : "2021-11-01 21:39:04",
"Name" : "Consommation",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" :
[
0
],
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : "-",
"SubType" : "Energy",
"SwitchTypeVal" : 0,
"Timers" : "false",
"Type" : "P1 Smart Meter",
"TypeImg" : "counter",
"Unit" : 1,
"Usage" : "630 Watt",
"UsageDeliv" : "0 Watt",
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "34"
}
],
"status" : "OK",
"title" : "Devices"
}
Code: Select all
blocks['Conso Maison'] = {
idx: 188,
title: 'Conso Maison',
type: 'dial',
width: 6,
min: -10,
max: 10,
showring: true,
showunit: true,
shownumbers: true,
last_update: false
}
Code: Select all
{
"ActTime" : 1635799317,
"AstrTwilightEnd" : "19:05",
"AstrTwilightStart" : "05:37",
"CivTwilightEnd" : "17:56",
"CivTwilightStart" : "06:46",
"DayLength" : "10:08",
"NautTwilightEnd" : "18:31",
"NautTwilightStart" : "06:12",
"ServerTime" : "2021-11-01 21:41:57",
"SunAtSouth" : "12:21",
"Sunrise" : "07:17",
"Sunset" : "17:25",
"app_version" : "2021.1",
"result" :
[
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"CounterToday" : "11.178 kWh",
"CustomImage" : 0,
"Data" : "5571.052 kWh",
"Description" : "",
"EnergyMeterMode" : "1",
"Favorite" : 1,
"HardwareDisabled" : false,
"HardwareID" : 12,
"HardwareName" : "ShellyMQTT",
"HardwareType" : "Shelly MQTT",
"HardwareTypeVal" : 94,
"HaveTimeout" : false,
"ID" : "shellyem-C7F472-0-energy",
"LastUpdate" : "2021-11-01 21:41:40",
"Name" : "Maison W",
"Notifications" : "false",
"PlanID" : "0",
"PlanIDs" :
[
0
],
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : "-",
"SubType" : "kWh",
"SwitchTypeVal" : 0,
"Timers" : "false",
"Type" : "General",
"TypeImg" : "current",
"Unit" : 11,
"Usage" : "494.69 Watt",
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "188"
}
],
"status" : "OK",
"title" : "Devices"
}
The default P1 Smart Meter dial will by default show the -1*'Nett Counter Today' as big value in the middle.
Conso Maison is not a P1 Smart Meter, but a energy device.
Code: Select all
blocks['Conso Maison'] = {
idx: 188,
type: 'dial',
values: [
{
value: 'CounterToday',
addClass: 'primary',
decimals: 1,
unit: 'kWh',
isNeedle: true
},
],
min: -10,
max: 10,
splitdial:true, //0 in the top
shownumbers: true,
showvalue: false //to hide the total counter (=default main value)
}
I would just use a Dial for that, between 0 and 100%heggink wrote:Hey Sander,
QQ: I built myself a home battery and would like to display some values including the battery percentage. I have a %% device in domoticz called Battery SOC (state of Charge) that I would like to display. I am probably a bit thick trying to find an appropriate representation in dashticz. Could you give me a hint as to how I could do that?
Thanks!
H
Edit: NVM, just added a device. Would be nice to have like a battery indicator of sorts tho
UsingUpdate 26-1
Some styling updates:
removed the square background of a dial
Improved dial sizing
Improved height of popup block
Code: Select all
.dt_content .dial {
background: none;
}
Code: Select all
/* graphs */
#graphoutput1{height:150px}
#graphoutput7{height:150px}
/* Weather */
.big .weatherdegrees,
.big .weatherloc {
display: inline-block;
margin-top: -2px;
margin-left: 24px; /* move text to the right */
font-size: 30px;
font weight: bold;
}
div[data-id='empty'] {
visibility: hidden;
}
div[data-id='buien'] {
border-radius: 14px; /* Rounded corners */
}
.skyconsmall {
display: block;
width: 75px;
font-size: 15px;
}
/* sunrise */
.sunriseholder,
.sunriseholder .wi{
font-size:20px !important;
}
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
padding-top:15px;
padding-bottom:15px;
border: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 0px; /* Rounded corners */
}
[data-id='mygarbage'].garbage img {max-width: 50px !important;}
}
.selectedbutton {
font-size:12px !important;
}
.dial_content {
background-clip: none;
}
.dial-center {
height: 68%!important;width: 68%!important;
}
div.mh.titlegroups {
height: 50px !important;
padding-top: 3px !important;
background: rgba(0,0,0,0);
}
.alarmrow{
font-size: 12px !important;
}
.alarmrow a {
color: white;
}
.alarmrow strong{
display: inline-block;
}
/* DOTS BELOW SCREEN SWITCH SCREENS */
.swiper-pagination-bullet {background: #FFFFFF; width: 10px; height: 10px; float:middle; position:relative; left:35px;}
}
It's caused by this line from your custom.css:Beschuitje wrote: ↑Tuesday 24 December 2024 16:23 Using the latest master version, 3.13
To be on the safe side i downloaded this version again and copied dial.js with WinSCP to replace excisting one, no difference.
I even replaced the entire JS folder, no difference
Browsers also make no difference, Chrome incognito gives the same as does Edge.
custom.css
when i load the CUSTUM_BACKUP css i get the same only with a slightly bigger square background and the round cornersCode: Select all
/* graphs */ #graphoutput1{height:150px} #graphoutput7{height:150px} /* Weather */ .big .weatherdegrees, .big .weatherloc { display: inline-block; margin-top: -2px; margin-left: 24px; /* move text to the right */ font-size: 30px; font weight: bold; } div[data-id='empty'] { visibility: hidden; } div[data-id='buien'] { border-radius: 14px; /* Rounded corners */ } .skyconsmall { display: block; width: 75px; font-size: 15px; } /* sunrise */ .sunriseholder, .sunriseholder .wi{ font-size:20px !important; } .transbg.col-xs-1, .transbg.col-xs-2, .transbg.col-xs-3, .transbg.col-xs-4, .transbg.col-xs-5, .transbg.col-xs-6, .transbg.col-xs-7, .transbg.col-xs-8, .transbg.col-xs-9, .transbg.col-xs-10, .transbg.col-xs-11, .transbg.col-xs-12 { padding-top:15px; padding-bottom:15px; border: 7px solid rgba(255,255,255,0); background: rgba(0,0,0,0.2); background-clip: padding-box; border-radius: 0px; /* Rounded corners */ } [data-id='mygarbage'].garbage img {max-width: 50px !important;} } .selectedbutton { font-size:12px !important; } .dial_content { background-clip: none; } .dial-center { height: 68%!important;width: 68%!important; } div.mh.titlegroups { height: 50px !important; padding-top: 3px !important; background: rgba(0,0,0,0); } .alarmrow{ font-size: 12px !important; } .alarmrow a { color: white; } .alarmrow strong{ display: inline-block; } /* DOTS BELOW SCREEN SWITCH SCREENS */ .swiper-pagination-bullet {background: #FFFFFF; width: 10px; height: 10px; float:middle; position:relative; left:35px;} }
![]()
Code: Select all
background: rgba(0,0,0,0.2);
Users browsing this forum: No registered users and 0 guests