Giter VIP home page Giter VIP logo

Comments (11)

Mariusthvdb avatar Mariusthvdb commented on May 26, 2024

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.

dnguyen800 avatar dnguyen800 commented on May 26, 2024

from air-visual-card.

Mariusthvdb avatar Mariusthvdb commented on May 26, 2024

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.

Mariusthvdb avatar Mariusthvdb commented on May 26, 2024

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.

dnguyen800 avatar dnguyen800 commented on May 26, 2024

I never figured out how to do this, so can't help you, sorry.

from air-visual-card.

Swampen avatar Swampen commented on May 26, 2024

@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.

Mariusthvdb avatar Mariusthvdb commented on May 26, 2024

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.

Mariusthvdb avatar Mariusthvdb commented on May 26, 2024

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.

Swampen avatar Swampen commented on May 26, 2024

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.

Mariusthvdb avatar Mariusthvdb commented on May 26, 2024

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:

Schermafbeelding 2021-01-07 om 10 54 43

clicking 'Roosendaal' opens:

Schermafbeelding 2021-01-07 om 10 55 20

so cool, many thanks!

from air-visual-card.

Mariusthvdb avatar Mariusthvdb commented on May 26, 2024

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.

Schermafbeelding 2021-09-01 om 10 03 57

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.