The browser console should say more.
It might be a cache issue. The t.type error points to the fact that the card doesn’t know the ‘sparkline’ type, hence the new card is not loaded…
The browser console should say more.
It might be a cache issue. The t.type error points to the fact that the card doesn’t know the ‘sparkline’ type, hence the new card is not loaded…
Please list all possible chart_type
sparkline:
show:
chart_type: {area, equalizer, line …}
and also, how to make a shaded graph?
My magical development cards are also included yes
There should be a fill: fade option somewhere to show the fading part of the area chart.
Not sure if I’m complete, but:
Those are YAML anchors and aliases:
YAML built-in template functionality - Swiss Army Knife Card (amoebelabs.com)
Anchors
and Aliases
are YAML constructions that allow you to reduce repeat syntax and extend existing dictionaries. You can place Anchors
(&
) on an entity to mark a multi-line section. You can then use an Alias
(*
) and use that Anchor
later in the YAML document to reference that section.
In other words: it saves a lot of repetitive definitions!
Hi, In the sparkline chart, can we ask to have a chart of more than 24 hours? I put 48 hours as a parameter and the graph starts at the beginning every day.
Try this:
period:
rolling_window:
duration:
hour: 48
bins:
per_hour: 1
all code for the graph:
####################################################
- type: sparkline
id: 1
position:
cx: 77
cy: 55
width: 29
height: 14
margin:
l: 0
x: 0
y: 0
r: 0
t: 0
b: 2
entity_index: 1
entity_indexes:
- entity_index: 0
expose_entities:
- min: sak_sensor.graph_0_min
- max: sak_sensor.graph_0_max
- avg: sak_sensor.graph_0_avg
period:
# calendar:
# period: day
# duration:
# hour: 48
# bins:
# per_hour: 1
rolling_window:
duration:
hour: 48
bins:
per_hour: 1
sparkline:
show:
chart_type: area #dots #equalizer #area #line graded
fill: none
points: true
line_width : 0.5
area:
show_dots: false
fill: fade #fade #true
line_width : 0.1
colorstops_transition: smooth
colorstops:
colors:
- value: 0
color: '#ff9100'
- value: 10
color: '#ffc400'
- value: 20
color: '#ffea00'
- value: 30
color: '#c6ff00'
- value: 40
color: '#76ff03'
- value: 50
color: '#00e676'
- value: 60
color: '#1de9b6'
- value: 70
color: '#00e5ff'
- value: 80
color: '#00b0ff'
- value: 90
color: '#2979ff'
styles:
area_mask_above:
fill: url(#sak-sparkline-area-mask-tb-3)
area_mask_below:
fill: url(#sak-sparkline-area-mask-tb-0)
Yup. I copied the settings from the statistics card that HA is using…
Saved me somt time thinking how to specify such periods…
I did NOT implement the fixed_period. Only used calendar (parts) and rolling_window stuff.
Good morning guys.
after about 3 months it continues to receive the same error as shown in the photo. I reinstalled several times following to the letter the procedure of ‘AmebeLabs’ and the advice of ‘ValMarDav’ in some of his previous posts. Now I’m stuck in HA update too. in fact, in the versions following the HA 2023.06 the swiss army knife card gives me an error. Only the v1.0.0-rc3 version manages to work well but only up to HA2023.06… after this I find myself removing this amazing card and finding a replacement. this hurts me a lot… help me understand this mistake… thanks to whoever will take the time…
type: custom:swiss-army-knife-card
aspectratio: 1/1
entities:
- entity: sensor.temperatura_sala_temperature
name: sala
layout:
toolsets:
- toolset: just-a-name
position:
cx: 50
cy: 50
tools:
- type: circle
position:
cx: 50
cy: 50
radius: 45
styles:
circle:
stroke-width: 2em
stroke: red
stroke-opacity: 0.5
fill: bisque
fill-opacity: 0.5
- type: state
position:
cx: 50
cy: 70
entity_index: 0
styles:
state:
font-size: 15em
I have had several extra containers set up since the first problems were mentioned on Github, but I can’t reproduce the problem so far, even while mixing different versions of HA and SAK.
Also, the step to HA 2023.6 is weird.
The fact that v1.0.0-rc3 does not work anymore has to do with several changes in HA.
Version v1.0.0-rc3 introduced the layout templates, and required (due to some changes in HA fetching the configuration) a particular alphabetical order of the templates, at least in some cases.
That error I could reproduce, hence the change in folder names to make sure that layouts are loaded as the last folder using the HA file merge function:
However, in your example, there are no templates. So that can’t be some ordering problem.
Are there any errors in the browser console or the HA log? The screenshot alone does not help me to find the error and replicate the problem. I need the JavaScript stack logging which is available in the browser’s console (use right mouse button → inspect).
I assume that you already cleared browser caches, and/or tested with a private browser window.
Thanks for the prompt response! I’m happy to hear from you again. Forgive me if I’m repetitive but last night it was too late to write and I certainly messed up.
Let’s start from the current version of HA installed which is 2023.3.6 with the SAK v1.0.0-rc.3. So far everything is working great.
here is the card configuration:
- type: custom:swiss-army-knife-card
entities:
- entity: sensor.temperatura_sala_temperature
name: thermostat
decimals: 1
unit: °C
- entity: sensor.temp_auto
name: setpoint
unit: °C
style: |
ha-card {
background-color: transparent;
--ha-card-border-width: 0px;
width: 240px;
top: -350px;
left: 920px;
pointer-events: none;
}
layout:
toolsets:
- toolset: thermostat
position:
cx: 50
cy: 50
tools:
####### ARC TEMPERATUR #########
- type: segarc
entity_index: 0
position:
cx: 50
cy: 50
start_angle: -120
end_angle: 120
width: 4
radius: 37.9
scale:
min: 0
max: 35
show:
scale: false
style: colorlist
segments:
colorlist:
gap: -0.5
colors:
- white
animation:
duration: 5
styles:
background:
fill: '#263C50'
####### ARC SETPOINT #########
- type: segarc
id: 0
entity_index: 1
position:
cx: 50
cy: 50
start_angle: -120
end_angle: 120.3
width: 5
radius: 34
scale:
min: 0
max: 35
width: 2
offset: 2.2
show:
scale: true
style: colorstops
segments:
colorstops:
gap: -0.5
colors:
'0': '#4390E0'
'5': '#4B90C9'
'8': '#598FB5'
'11': '#688FA0'
'14': '#798F8C'
'17': '#8B8F76'
'20': '#9F8E62'
'23': '#B28E50'
'26': '#C48F42'
'29': '#D99039'
'32': '#D6882B'
animation:
duration: 5
styles:
background:
fill: '#263C50'
####### LINE SEPARATOR #########
- type: line
position:
cx: 50
cy: 55
length: 33
orientation: horizontal
styles:
line:
stroke: white
stroke-width: 3
####### VIEW STATE TEMPERATUR #########
- type: state
position:
cx: 50
cy: 49
entity_index: 0
styles:
state:
text-anchor: middle
font-family: Days One
font-size: 15em
fill: white
text-shadow: 2px 2px 2px black
uom:
font-family: Days One
fill: white
text-shadow: 2px 2px 2px black
####### TEXT 'ROOM' #########
- type: text
position:
cx: 50
cy: 33
text: Room
styles:
text:
text-anchor: middle
font-family: Days One
fill: white
text-shadow: 2px 2px 2px black
font-size: 7em
####### TEMPERATUR SETPOINT #########
- type: state
position:
cx: 50
cy: 64.5
entity_index: 1
styles:
state:
text-anchor: start
font-family: Days One
font-size: 7em
fill: white
text-shadow: 2px 2px 2px black
uom:
font-family: Days One
fill: white
text-shadow: 2px 2px 2px black
####### TEXT 'SET' #########
- type: text
position:
cx: 48
cy: 63
text: Set
styles:
text:
text-anchor: end
font-family: Days One
fill: white
text-shadow: 2px 2px 2px black
font-size: 4.5em
The problem arises when the system asks me to update to the latest version of both HA and SAK.
Today I made an attempt in the office at work 60km away from home. On a different PC from a different network I installed a virtual machine and ran HA. I subsequently installed SAK at version v2.5.1 and the problem recurred… now I’m wondering, after reading your answer: is it likely that I’m installing it wrong? because it is impossible for the error to recur in the same way even in a different instance!
I use the hybrid version from HACS and then manual… what do you think I’m doing wrong??
Hi, I don’t know if this will help you, but I managed to reproduce the problem. This is what I see in the web inspector.
That is great! Ut bow did you do this?
It is a call from the HA frontend code. I also see some chunk loading calls that were the cause of troubles in earlier versions.
This is very weird: as if SAK is not loaded by HA, and thus failing to call the setConfig function?
I managed to reproduce the problem in a funny way. In the basic dashboard, I was doing a test with @Dadafrenk’s code to see if there was a problem in his code that caused the error. It worked well until I refreshed the page. Following the refresh, the error occurs. Even the cards in my dashboard no longer work. In my dashboard, I have to refresh the page for it to work again.
I copied the code, but this simply works…
However: I do everything in YAML. I don’t use the UI as it is configured as YAML only…
May that be the problem???
If I add this card to an existing view, it keeps working…
If everyone with problems is using the UI to add cards, we might be on a path to a solution…
The crash is here on line 97 while calling the element.setConfig(config)
of the just created card:
I have no idea why HA can’t create the card.
And you can talk about this card in more detail
I was playing with it in mixed mode a while ago and what I found is that I always had to go to a YAML based dashboard page first otherwise it would not have loaded certain resources. After that all pages worked fine for the duration of the session.