Comments (11)
have you given this any thought yet? would really be very nice to add.
I've put forward all info I could think of, but can't get the click to result in a navigate... should we use has-navigate maybe? And how to have it point to the desired web-address?
Hope you could help and find out please.
from air-visual-card.
from air-visual-card.
ok cool, no hurry ;-)
just to let you know I've tried this also, (have the city and temp show a more-info), so I have a working functionality for the City and Temp click.
Only need to change the action (fireEvent) to external url_path and what also would be nice would be a local Ha navigate_path, so we could let's say go to the path for the weather page, clicking on the Temp icon ;-)
let faceHTML = ``;
let card_content = `
<div class="grid-container" style="background-color: ${AQIbgColor[getAQI()]};">
`;
if (!hideTitle) {
card_content += `
<div class="city" id="city">${city}</div>
<div class="temp" id="temp"><ha-icon icon="${hass.states[iconSensor].state}"></ha-icon> ${tempValue}</div>
`;
}
card_content += `
<div class="face" id="face" style="background-color: ${AQIfaceColor[getAQI()]};">
<img src="${iconDirectory}/ic-face-${getAQI()}.svg"></img>
</div>
<div class="aqiSensor" id="aqiSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
<div style="font-size:3em;">${aqiSensor.value}</div>
${country} ${unitOfMeasurement}
</div>
<div class="aplSensor" id="aplSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
${aplSensor.value}
<br>
<br>
<div class="mainPollutantSensor" id="mainPollutantSensor">
${mainPollutantSensor.value} | ${pollutantUnit}
</div>
</div>
</div>
`;
root.lastChild.hass = hass;
root.getElementById('content').innerHTML = card_content;
// hard-coded version of click event
card.querySelector('#city').addEventListener('click', event => {
fireEvent(this, "hass-more-info", {entityId: aqiSensor.config });
});
card.querySelector('#temp').addEventListener('click', event => {
fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
});
card.querySelector('#face').addEventListener('click', event => { // when selecting HTML id, do not use dash '-'
fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
});
card.querySelector('#aqiSensor').addEventListener('click', event => { // when selecting HTML id, do not use dash '-'
fireEvent(this, "hass-more-info", { entityId: aqiSensor.config });
});
card.querySelector('#aplSensor').addEventListener('click', event => { // when selecting HTML id, do not use dash '-'
fireEvent(this, "hass-more-info", { entityId: mainPollutantSensor.config });
});
card.querySelector('#mainPollutantSensor').addEventListener('click', event => { // when selecting HTML id, do not use dash '-'
fireEvent(this, "hass-more-info", { entityId: mainPollutantSensor.config });
});
anyways, would be really cool if the navigate/url would be allowed somehow. Especially since we can do that now natively in HA for entitities:
https://www.home-assistant.io/lovelace/entities/#navigation_path
https://www.home-assistant.io/lovelace/entities/#url_path
from air-visual-card.
HI!
are you still developing this card, so I could hope to see this feature some day?
If not, I'd be happy to try myself, if you could only guide to applying the html tag and where to put it in the code.
Or, simply by allowing the tap/hold action of the core Ha code maybe?
anyways, thanks for considering.
from air-visual-card.
I never figured out how to do this, so can't help you, sorry.
from air-visual-card.
@Mariusthvdb If you want to add this to your own card, you can do it by adding this:
card.querySelector('#city').addEventListener('click', event => {
window.open(webAddress, '_blank');
});
But I personally would not want to add this feature as it navigates to websites outside the HA environment.
from air-visual-card.
thanks, I will try!
Can we modify this to navigate to another view too? (have a view with all climate settings I would like to hold-click to...)
I understand what you say on navigating outside th HA environment. Thats why it might be even better if the card would implement the core configuration variables for navigation_path
And url_path
from air-visual-card.
to keep thing tidy, allow this separate post.
Ive added the constant:
const urlPath = {name: 'urlPath', config: config.url_path || '' };
and in the card config:
url_path: https://www.airvisual.com/netherlands/north-brabant/huijbergen/huijbergen-vennekenstraat
in the final card_content, I've added:
card.querySelector('#city').addEventListener('click', event => {
window.open(urlPath, '_blank');
});
something is openend on the click, but it leads to https://mydomain.duckdns.org:port/lovelace/[object%20Object]
so, though progress, Im not there yet....
please have another look?
btw, I always notice horrible lags after a few clicks on the cards more-info actions. Most of the time we need to completely reload the browser window for HA to become responsive again. Might be a separate issue, but thought Id mention it here too, because happening again.
from air-visual-card.
I don't think there is any easy way to implement the existing features of some lovelace cards. I might be adding it if I decide to rewrite the card.
To fix your navigation, just use
// Change to this
const urlPath = config.url_path || '' ;
//or this
card.querySelector('#city').addEventListener('click', event => {
window.open(urlPath.config, '_blank');
});
from air-visual-card.
Bingo!
using the 2nd option.
found out that www.airvisual.com is now redirected to www.iqair.com. And, they now have a station in my municipality ;-)
so, using
type: custom:air-visual-card
air_pollution_level: sensor.u_s_air_pollution_level
air_quality_index: sensor.u_s_air_quality_index
main_pollutant: sensor.u_s_main_pollutant
temp: sensor.plugwise_outdoor_temperature
country: NL
city: Roosendaal
icons: /local/weather/aqi_icons/
icon_sensor: sensor.weather_icon
hide_title: false
hide_face: false
url_path: https://www.iqair.com/netherlands/north-brabant/roosendaal
results in:
clicking 'Roosendaal' opens:
so cool, many thanks!
from air-visual-card.
re-comment on this.
Unfortunately, after updastin g to the latest version (18) today and adding my personal edit from above discussion:
// hard-coded version of click event
card.querySelector('#city').addEventListener('click', event => {
window.open(urlPath.config, '_blank');
});
the navigate doesn't work anymore, as in no effect, nothing happening. I must admit I haven't tested that in the previous HA version (now using the September beta 2021.9.0b6), so maybe it was already dysfunctional before.
would you please have a look what could be causing this? Really liked the navigate to the source material on a click.
And yes, before you ask, I did also add the identifier on city (and temp):
if (!hideTitle) {
card_content += `
<div class="city" id="city" style="background-color: ${AQIbgColor[getAQI()]};">${city}</div>
<div class="temp" id="temp" style="background-color: ${AQIbgColor[getAQI()]};"><ha-icon icon="${weatherIcons[currentCondition]}"></ha-icon> ${tempValue}</div>
`;
}
and the link is live and providing up to date info.
UPDATE:
never mind the above, I forgot to add the urlPatrh const.
2021-09-01 10:05:38 ERROR (MainThread) [frontend.js.latest.202108300] https://ipaddress/local/lovelace/resources/air-visual-card/air-visual-card.js?v=0.0.18+:385:28 ReferenceError: Can't find variable: urlPath
in the logs....
added
const urlPath = {name: 'urlPath', config: config.url_path || '' };
and all is working once again.
sorry for the confusion.
from air-visual-card.
Related Issues (20)
- Sample configuration does not work HOT 2
- After update to 0.107.1 air visual is not working HOT 10
- Air quality forecast HOT 2
- Flickering Face image HOT 12
- Rendering of dashboard in HA fails when one of sensors is not given HOT 3
- more-info no longer opens on HA 113.x HOT 3
- Feature Request: Option to hide the icon HOT 1
- Make it compatible with WAQI. HOT 19
- Top left corner do not round HOT 2
- Crazy, impossible to find in HACS HOT 2
- air_pollution_level does not work with template sensor
- How to change the size of text?
- AirVisual Descriptions Updated HOT 6
- Broken Image on 2.0 HOT 1
- Not working with Met Éireann HOT 2
- How change units metric/Imperial HOT 2
- No other cards are visible after I added this card HOT 8
- Wind direction HOT 1
- Corners not rounded in the default HA theme
- Add official support for Tomorrow.io HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from air-visual-card.