If you’re not using yaml mode you can see for sure what hass is reporting as user at the bottom of the editor for this card. Could also try kenny all lowercase.
1 Like
Doh, I had it lowercase before and it wasn’t working, but I went back and it’s good again.
But I will say I have noticed a problem. If I go to a new tab on mobile (chrome) the top colored bar goes transparent it seems. I can put a screenshot for you if that’d help. Also if I refresh, it goes back to a solid color
I also seem to be having a little trouble with the hidden tabs not reverting back to showing everything. Do I need to put anything there?
Sure, let me see the screen. I’m using chrome on android and haven’t noticed anything like that yet.
Could you explain the tabs issue a bit more? What do you mean by not reverting back, reverting from what?
Yea one second, also I’m just realizing the file never saved from what I posted… it’s just not there. Putting it in fixed that. Give me one second to get the screenshots
When configuring, make sure you’re not doing it in multiple browsers/tabs at the same time, confuses things. Clearing CCH cache can help with those issues as well.
Sorry for the twilight but you should get the idea. I’m on chrome beta for Android on a pixel xl
I apologize, but I’m not sure what I’m looking at. Are you saying the Home Assistant header disappears when navigating to a new lovelace tab or when you navigate to a new chrome tab and back it disappears? Any errors to speak of?
Sorry, I was not informative enough!
I mean when I go to a new menu tab (like Configuration, Hassio, History), and then back to Overview it does the photos. Basically I start as the bottom one, go to say Hassio, go back to Overview, and I get the middle and top photo. No errors though.
Oh okay, yeah that is odd. Looks like you lose your background too. Do you have your setup on github or would you mind messaging me your whole lovelace code for that view?
I’ve been meaning to update my github so this is as good of a reason to. I’ll get it to you tonight!
I’m also getting the red box with “Custom element doesn’t exist: compact-custom-header” on Safari and Chrome, macOS and iPad. I’ve double-checked the installation… any advise?
Any errors in HA or browser dev tools?
OK, so some questions in a last-ditch attempt to save my very nice wall installation from hell.
This will probably sound dumb because I’m very behind in the fast-moving world of js, but two thoughts:
- i understand that v. 1.0.x is a bottom-up rewrite, but would it be possible to create a parallel development of CCH that would let it be referenced in the lovelace resources as
jsinstead of asmodule? How big a deal would that be? - is there a way that i could set up a babel transpilation workflow that could use the current CCH code as a source and render a version of CCH that would be able to be referenced by lovelace as
jsrather than asmodule?
I’m not asking you to do this stuff, if it seems workable, i’ll do it. I’m just asking about feasibility, if you know.
Why not just use the release before v1.0.0b0? I’m sure what you’re asking is feasible, but it’s such an edge case that I don’t think I’d support it.
Yeah, like I said, totally not asking you to support it. Just asking about feasibility. I have currently downgraded to the old version, but that means that going forward no new features, no compatibility updates, etc. so if there was a way to set up a babel workflow to just translate the current CCH version into something that would work with my (and everyone’s) old devices, I’d be happy to set up that workflow, keep it up to date as you release CCH updates, and make it available on github.
what i don’t know is whether that’s even possible and how much modern js I’d have to digest to be able to set up a project to transpile the code. My only interactions with babel so far are where i am just copying project recipes. I have no experience of setting up a babel workflow from scratch and i can’t look at some js code and know what version of js it is.
i assume the pre 1.0.0b code is one version of js and the 1.0.0b+ code is another. Can you tell me what those two flavors / versions are?
The new version of the card is using ES6 module (import/export) which I believe is what you’re having issues with. You could combine the editor and card files together to not rely on import/export or even remove the editor all together, but you might run into other issues along the way as this was designed with modern browsers in mind. Babel should get you a good bit of the way there. Unfortunately due to school, current projects, work, and family life I’m not sure how much I can assist you on this.
On Safari’s Web Inspector, this is the alert I get when I open the page with the custom component:
TypeError: ‘text/plain’ is not a valid JavaScript MIME type.
[Error] Unhandled Promise Rejection: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
(anonymous function)
rejectPromise
No errors in HA. The component worked fine before being updated. Thanks for looking at it.
was on 86.4, just upgrade to 87.1 and now it works!
1 Like
So in case anyone else out there is having similar issues with old devices, I successfully transpiled v. 1.0.0b1 to stone age javascript that you can use with older devices. In order to get working code, I had to comment out everything to do with the editor, so this is only for yaml mode.
I created a gist with the working code and some documentation. As long as I keep using CCH, I’ll keep the gist revised with new versions as @mayker releases them. If I can work out how to transpile with the editor functionality intact, I’ll revise it for that too.
The code in that gist is working right now on my Fire 7 tablet using the Fully Kiosk browser.
3 Likes