How to display the weather like this (Pic attached)

How do you hide weather conditions you dont want reported? For example I don’t need or care to see Pressure, precip intesity, or apparent temperature.

Edit: Forgot to ask if I need to create a derived widget that will only display the values i want to monitor.

if i am correct that is by setting only the sensors you want in the yaml.

Here is my weather widget yaml code:

weather:
  widget_type: weather
  title: Today
  show_forecast: 1
  prefer_icons: 1
  forecast_title: Tomorrow
  main_style: "color: white"
  title_style: "color: white"
  unit_style: "color: white"
  sub_style: "color: white"
  sub_unit_style: "color: white"
  sensors:
    icon: sensor.dark_sky_icon
    temperature: sensor.dark_sky_temperature
    humidity: sensor.dark_sky_humidity
    precip_probability: sensor.dark_sky_precip_probability
    wind_speed: sensor.dark_sky_wind_speed
    wind_bearing: sensor.dark_sky_wind_bearing
    forecast_icon: sensor.dark_sky_icon_1
    forecast_temperature_min: sensor.dark_sky_daily_low_temperature_1
    forecast_temperature_max: sensor.dark_sky_daily_high_temperature_1
    forecast_precip_probability: sensor.dark_sky_precip_probability_1

And the result still has all of the metrics in it:
image

Unless I misunderstood what you meant by “setting only the sensors you want in the yaml”. What did work for me, all be it rather hackish, is to remove the attributes i dont want to see from the DOM in a helper.js file I’m loading in the custom skin I’m working on.

Here is that snippet:

$('#default-weather').ready(function() {
	let hidden = [
		'apparent_temperature',
		'precip_intensity',
		'pressure() != \'\''
	];
  
	setTimeout(function() {
		for(var i=0; i < hidden.length; i++) {
			$('[data-bind="visible: ' + hidden[i] + '"]').remove();
		}
	}, 150);
});

Like I said hackish at best but for now it does the trick. Now I just have to remember to never rename my weather widget or this code won’t do anything.

i meant setting only the sensors you want in the sensors part, but i guess you already did that.
i guess that in this widget some sensors are hardcoded, so if your solution works then its a good workaround.

To disable sensor you don’t want - set them to empty values:

weather:
  widget_type: weather
  title: Today
  show_forecast: 1
  prefer_icons: 1
  forecast_title: Tomorrow
  main_style: "color: white"
  title_style: "color: white"
  unit_style: "color: white"
  sub_style: "color: white"
  sub_unit_style: "color: white"
  sensors:
    icon: sensor.dark_sky_icon
    temperature: sensor.dark_sky_temperature
    humidity: sensor.dark_sky_humidity
    precip_probability: sensor.dark_sky_precip_probability
    wind_speed: sensor.dark_sky_wind_speed
    wind_bearing: sensor.dark_sky_wind_bearing
    forecast_icon: sensor.dark_sky_icon_1
    forecast_temperature_min: sensor.dark_sky_daily_low_temperature_1
    forecast_temperature_max: sensor.dark_sky_daily_high_temperature_1
    forecast_precip_probability: sensor.dark_sky_precip_probability_1
    apparent_temperature: ""
    presure: ""
    precip_intensity: ""
1 Like

Been trying to set up a layout similar to the one in OP myself yesterday, and ran into a new issue, courtesy of Dark Sky…

It turns out the API (and so sensor) names for sensor.dark_sky_daily_low_temperature_1 and sensor.dark_sky_daily_high_temperature_1 have changed. They should now be:

sensor.dark_sky_overnight_low_temperature_1
sensor.dark_sky_daytime_high_temperature_1

Yes, you’re reading this correctly. Low is overnight, high is daytime.
It might be a regional thing or something, but it drove me seriously crazy last night.

Makes one wonder what happens if there’s a temp inversion and night ends up warmer than the day.

the sensors have changed name some time ago and there hasnt been an AD update since then because Andrew was indisposed for a while.

No worries, just that i couldn’t figure out what’s happening for a bit (in my defense, it was 5am), and thought i’d leave a note here in case someone else stumbles upon it.

1 Like

this is amazing! willing to share?

I so want this users forecast and weather widgets! They are perfect. The forecast with the friendly names and extended forecast, and the weather widget with the icon, temp, and summary. Perfect!

untill now i only seen this pic and others wanting it.
to make something like that you first have to have all that information in HA and then create quite some HTML and javascript.
its possible, but not easy.

easier is it to use one of the many online weather widgets that are already out there.
google for “online weather widgets” and you get a lot of different weather widgets and some of them highly customisable

I will try and post back if I find anything close.

I figured it out. Thanks for the headwork thats went into this.

did you recreate the temp, icon, and summary for multiple days?