best way to 'scroll' a name on a button, and remain within padding #1117
Replies: 5 comments 41 replies
-
|
Hello. |
Beta Was this translation helpful? Give feedback.
-
|
yes, I was part of that... and no it does not work at all... sorry |
Beta Was this translation helpful? Give feedback.
-
|
Hmm.. It's a pity... In my case, the proposed solution works very well... And this is taking into account that the width of the card (or the width of the text) can change... When the width of the card is sufficient, the text does not move... |
Beta Was this translation helpful? Give feedback.
-
|
Something like this should do the trick. It's not "simple" but can be in a config template and then you just define the
type: custom:button-card
entity: switch.skylight
name: Super long text that should scroll when it is too long to fit in the available space
show_label: true
label: Short
styles:
card:
- padding: 5px
variables:
toScroll:
- '#name'
- '#label'
scrollFunction: |
[[[
return () => {
if (!variables.toScroll || variables.toScroll.length === 0) return;
variables.toScroll.forEach( ( selector ) => {
const el = this.shadowRoot.querySelector( selector );
if ( el ) {
if ( el.scrollWidth > el.clientWidth ) {
el.classList.add('scrolling-text');
el.style.setProperty('--scroll-speed', (el.scrollWidth / 40) + 's' );
el.style.setProperty('--scroll-max', el.clientWidth + 'px' );
if (!el.firstElementChild || el.firstElementChild.tagName.toLowerCase() !== 'span' ) {
el.innerHTML = `<span>${el.innerHTML}</span>`;
}
} else {
el.classList.remove('scrolling-text');
el.style.removeProperty('--scroll-speed');
el.style.removeProperty('--scroll-max');
}
}
});
};
]]]
resizeObserver:
force_eval: true
value: |
[[[
if (!variables.toScroll || variables.toScroll.length === 0) return;
this._resizeObserver = this._resizeObserver ||
new ResizeObserver( ( entries ) => {
this.updateComplete.then( () => {
variables.scrollFunction();
});
});
this._resizeObserver.observe(this);
]]]
updateComplete:
force_eval: true
value: |
[[[
if (!variables.toScroll || variables.toScroll.length === 0) return;
this.updateComplete.then( () => {
variables.scrollFunction();
});
]]]
extra_styles: |
.scrolling-text {
container-type: normal;
}
ha-card:hover .scrolling-text > span {
animation: scroll-text var(--scroll-speed) alternate ease-in-out infinite;
text-overflow: unset !important;
display: inline-block ;
}
@keyframes scroll-text {
from {
transform: translateX( 0% );
}
to {
transform: translateX( min(calc(-100% + var(--scroll-max)), 0px) );
}
} |
Beta Was this translation helpful? Give feedback.
-
|
No, it won't overlap. |
Beta Was this translation helpful? Give feedback.
-
Ok, thank you! I guess I just didn't quite understand why it works like this... But most importantly, it works! ) |
Beta Was this translation helpful? Give feedback.
-
|
I also have a question about this:
What is the purpose of this? |
Beta Was this translation helpful? Give feedback.
-
|
This is to add a This is also the why it doesn't overlap the icon in your question above 😉 because the child (the 
|
Beta Was this translation helpful? Give feedback.
-
|
It turns out that I asked that question for a reason ! ))) Thank you very much for the clarification! |
Beta Was this translation helpful? Give feedback.
-
|
using this on my much wider marquee 'button' to show more text, and text only, which was my attempt to adjust the speed to the length of the text. It has worked out fine, but I figured it was too complex for my smaller button in this discussion. Seeing where you take us now, it starts to be more and more comparable:
Ill take out the blink to make it clearer in the screen vid, you'll notice it shows the exact length of the string correctly and then starts all over:
|
Beta Was this translation helpful? Give feedback.
-
|
Remove the custom_fields:
marquee: >
[[[ return variables.marquee; ]]]and just set: variables:
toScroll:
- '#marquee' |
Beta Was this translation helpful? Give feedback.
-
|
btw, really nice those extra styles are fully merged now. Ive added this in my main button and the effect: ok so the base works. suppose the speed needs adjusting, and probably the loop effect. I believe Ive read that we should add extra copies of the same line, so it looks as if it is circling endlessly. |
Beta Was this translation helpful? Give feedback.
-
Yes, you can do so, but that will require some changes to the javascript code and extra_styles. |
Beta Was this translation helpful? Give feedback.
-
yes that works, and I move this to the custom_field, much shorter ;-) |
Beta Was this translation helpful? Give feedback.
-
|
See new template for what you were looking for |
Beta Was this translation helpful? Give feedback.
-
|
New version of the config template with some more configuration options. Setting
scrolling_text:
variables:
toScroll: [] # array of CSS querySelector of elements to scroll
scrollCurve: 'linear' # animation effect (eg: ease-in-out) only valid if scrollLoop is not true
scrollSpeed: 70 # speed of the animation
scrollLoop: true # whether to generate a never ending text scroll
scrollLoopSeparator: '•' # never ending text scroll separator
scrollAlternate: false # if the text should go back and forth
scrollAlways: false # if true the text will always scroll, not only on hover
## Main stuff
scrollFunction: |
[[[
return () => {
if (!variables.toScroll || variables.toScroll.length === 0) return;
variables.toScroll.forEach( ( selector ) => {
const el = this.shadowRoot.querySelector( selector );
if ( el ) {
if ( el.scrollWidth > el.clientWidth ) {
el.classList.add('scrolling-text');
el.style.setProperty('--scroll-speed', (el.scrollWidth / variables.scrollSpeed ) + 's' );
el.style.setProperty('--scroll-max', (variables.scrollLoop ? '50%' : (variables.scrollAlternate ? el.clientWidth + 'px' : '0px')) );
if (!el.firstElementChild || el.firstElementChild.tagName.toLowerCase() !== 'span' ) {
if ( variables.scrollLoop ) {
const content = `${el.innerHTML} ${variables.scrollLoopSeparator} `;
el.innerHTML = `<span>${content}${content}</span>`;
} else {
el.innerHTML = `<span>${el.innerHTML}</span>`;
}
}
} else {
el.classList.remove('scrolling-text');
el.style.removeProperty('--scroll-speed');
}
}
});
};
]]]
resizeObserver:
force_eval: true
value: |
[[[
if (!variables.toScroll || variables.toScroll.length === 0) return;
if (!this._resizeObserver ) {
this._resizeObserver =
new ResizeObserver( ( entries ) => {
this.updateComplete.then( () => {
window.setTimeout( () => {
variables.scrollFunction();
}, 100 );
});
});
this._resizeObserver.observe(this);
}
]]]
updateComplete:
force_eval: true
value: |
[[[
if (!variables.toScroll || variables.toScroll.length === 0) return;
this.updateComplete.then( () => {
variables.scrollFunction();
});
]]]
extra_styles: |
[[[
return `
.scrolling-text {
container-type: normal;
}
${variables.scrollAlways ? '' : 'ha-card:hover'} .scrolling-text > span {
animation: scroll-text var(--scroll-speed) ${!variables.scrollLoop && variables.scrollAlternate ? 'alternate' : '' } ${variables.scrollLoop ? 'linear' : (variables.scrollCurve || 'linear')} infinite;
text-overflow: unset !important;
display: inline-block ;
}
@keyframes scroll-text {
from {
transform: translateX( 0% );
}
to {
transform: translateX( min(calc(-100% + var(--scroll-max)), 0px) );
}
}
`;
]]] |
Beta Was this translation helpful? Give feedback.
-
|
Well, actually, there's quite an issue with this... I'm trying to fix it. If the text changes, it is not updated... |
Beta Was this translation helpful? Give feedback.
-
|
nevermind I forgot to set the array.. 
it does add the ellipsis at the end, which it is not supposed to.. While you are checking I just realized it is a really nice effect to stop scroll on hover . especially for longer notifications . Want to check it : hover (and stop where you are, not move to beginning...)
maybe that could be a 3d option in the animation? another option I like is to start the marquee at the right side, not at the left side of the container, so it truly scrolls in |
Beta Was this translation helpful? Give feedback.
-
|
as for the speed: what I am looking for is that no matter the length of the string, the speed remains the same. is that what this does? and the fixed speed setting is that absolute speed, no matter the length? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, speed is independent from the length of the text. |
Beta Was this translation helpful? Give feedback.
-
|
this stops on hover ;-) |
Beta Was this translation helpful? Give feedback.
-
|
Alright... this one should work for all use cases now :-) scrolling_text:
variables:
toScroll: [] # array of CSS querySelector of elements to scroll
scrollCurve: 'linear' # animation effect (eg: ease-in-out) only valid if scrollLoop is not true
scrollSpeed: 70 # speed of the animation
scrollLoop: true # whether to generate a never ending text scroll
scrollLoopSeparator: '•' # never ending text scroll separator
scrollAlternate: false # if the text should go back and forth
scrollMode: hover # hover | always | hover-pause
scrollFunction: |
[[[
return () => {
if (!variables.toScroll || variables.toScroll.length === 0) return;
variables.toScroll.forEach( ( selector ) => {
const el = this.shadowRoot.querySelector( selector );
if ( el ) {
const content = el.querySelector('span.scroll > span.scroll-content');
let scrollWidth = el.scrollWidth;
if (content) {
scrollWidth = content.getBoundingClientRect().width;
}
if ( scrollWidth > el.clientWidth ) {
el.classList.add('scrolling-text');
let span = el.querySelector('span.scroll');
if (!span) {
const spanWrapper = document.createElement('span');
spanWrapper.classList.add('scroll');
const innerSpan = document.createElement('span');
innerSpan.classList.add('scroll-content');
while (el.firstChild) {
innerSpan.appendChild(el.firstChild);
}
spanWrapper.appendChild(innerSpan);
el.appendChild(spanWrapper);
span = spanWrapper;
}
const innerSpan = el.querySelector('span.scroll > span.scroll-content');
if ( variables.scrollLoop ) {
const oldDupSpan = span.querySelector('span.scroll-dup-content');
const duplicateSpan = innerSpan.cloneNode(true);
duplicateSpan.classList.add('scroll-dup-content');
duplicateSpan.classList.add('scroll-duplicate');
if (!oldDupSpan) {
const separator = document.createElement('span');
separator.classList.add('scroll-separator');
separator.classList.add('scroll-duplicate');
separator.innerHTML = ` ${variables.scrollLoopSeparator} `;
span.appendChild(separator);
span.appendChild(duplicateSpan);
span.appendChild(separator.cloneNode(true));
} else {
oldDupSpan.replaceWith(duplicateSpan);
}
}
el.style.setProperty('--scroll-speed', (el.scrollWidth / variables.scrollSpeed ) + 's' );
el.style.setProperty('--scroll-max', (variables.scrollLoop ? '50%' : (variables.scrollAlternate ? el.clientWidth + 'px' : '0px')) );
} else {
el.classList.remove('scrolling-text');
el.style.removeProperty('--scroll-speed');
const span = el.querySelector('span.scroll');
const innerSpan = el.querySelector('span.scroll-content');
if (innerSpan) {
while (innerSpan.firstChild) {
el.appendChild(innerSpan.firstChild);
}
el.removeChild(span);
}
}
}
});
};
]]]
resizeObserver:
force_eval: true
value: |
[[[
if (!variables.toScroll || variables.toScroll.length === 0) return;
if (!this._resizeObserver ) {
this._resizeObserver =
new ResizeObserver( ( entries ) => {
this.updateComplete.then( () => {
window.setTimeout( () => {
variables.scrollFunction();
}, 100 );
});
});
this._resizeObserver.observe(this);
}
]]]
updateComplete:
force_eval: true
value: |
[[[
if (!variables.toScroll || variables.toScroll.length === 0) return;
this.updateComplete.then( () => {
variables.scrollFunction();
});
]]]
extra_styles: |
[[[
return `
.scrolling-text {
container-type: normal;
}
${variables.scrollMode !== 'hover' ? '' : 'ha-card:hover'} .scrolling-text > span.scroll {
animation: scroll-text var(--scroll-speed) ${!variables.scrollLoop && variables.scrollAlternate ? 'alternate' : '' } ${variables.scrollLoop ? 'linear' : (variables.scrollCurve || 'linear')} infinite;
text-overflow: unset !important;
display: inline-block ;
}
${variables.scrollMode === 'hover-pause' ? `
ha-card:hover .scrolling-text > span.scroll {
animation-play-state: paused !important;
}
` : ''}
@keyframes scroll-text {
from {
transform: translateX( 0% );
}
to {
transform: translateX( min(calc(-100% + var(--scroll-max)), 0px) );
}
}
`;
]]] |
Beta Was this translation helpful? Give feedback.
-
|
wow, getting huge this ;-) using the scroll-pause is sweet, ut there is one 'issue' with it: as said earlier, it brings the text back to the beginning, and doesnt stop where the marquee is when one hovers it. if you check the result of my template above you'll see it does stop at the actual position when hovering in. ( I did get help from Chatgpt, but in this case it was actually listening to what I asked....) Maybe you can have a look and build that in too? |
Beta Was this translation helpful? Give feedback.
-
|
It does pause in place for me and restart again when not hovered. |
Beta Was this translation helpful? Give feedback.
-
|
I've seen it do that once indeed, but reloading then brings back the stop at the beginning effect.... also when not looping it stops at strange spots in the string and, when scroll on hover, it does the same when moving out. (and it still show the ellipsis)
the scrolling is much faster when not looping... so it seems the repeated text (length?) does have its effect on the speed somehow. Finally I am trying to find a way to make it scroll in from the right side, and not start at the fullstop of my Alerts count ive set it to but nt sure if this works for strings of all lengths... |
Beta Was this translation helpful? Give feedback.
-
|
Yes as I feared , that fixed % doesn’t help when changing orientation on iPhone and the card gets smaller in portrait …..it makes it take longer before the scrolling text actually becomes visible coming in from the right |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
an image immediately clarifies what I need...
my name is
and I havent really set a style to it yet, other than the color and font etc, which are ok as is.
I just want to make in scroll in when the text is too long to display, and not cut-off like this.
using other 'marquee's that take into account the length and available space in wider buttons, that would be overkill here I think. Hope to have some generic css trick that can make his happen
where that var is:
so yeah a bit much for a simple button like this which is always of the same proportions
and, maybe activate than on hover ;-)
this is what a generic styling does, (so not yet limited to names that stay within the card), already overflowing the 5px padding
this will scroll only on hard coded 100 px, but how lovely would it be if we had an actual button-width variable we could use ;-)
Beta Was this translation helpful? Give feedback.
All reactions