Comments (14)
It works for me on an iPhone with the Home Assistant app.
Can you share some screencaptures and the card configuration?
from lovelace-windrose-card.
Three screenshots below - portrait, landscape and landscape after refresh.
And here is the config:
- type: custom:windrose-card
title:
max_width: 400
hours_to_show: 4
windspeed_bar_full: true
wind_direction_entity: sensor.wind_direction
windspeed_bar_location: bottom
direction_speed_time_diff: 600
matching_strategy: speed-first
windspeed_entities:
- entity: sensor.wind_speed
name: " "
input_speed_unit: kph
output_speed_unit: kph
speed_ranges:
- from_value: 0
color: rgba(230, 247, 255, 0.7)
- from_value: 3
color: rgba(129, 204, 255, 0.7)
- from_value: 5
color: rgba(3, 169, 244, 0.7)
- from_value: 10
color: rgba(2, 104, 151, 0.7)
- from_value: 20
color: rgba(1, 35, 50, 0.7)
view_layout:
grid-area: stats1
from lovelace-windrose-card.
Still can't reproduce. Can you share some details about your device and software version? Looks like Android right?
from lovelace-windrose-card.
It is Android. But I have also realised that I can reproduce with Windows. If you make the browser window small, and then maximise, you also get strange effects.
from lovelace-windrose-card.
I should also point out that the card sits within a layout card (https://github.com/thomasloven/lovelace-layout-card).
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 18% 7% 7% 18% 20% 5% 25%
grid-template-rows: auto
grid-template-areas: |
"main1 main1 main2 main2 main3 main3 main4"
"main5 main5 main6 main6 main7 main7 main8"
"scale blank date1 date1 date2 date2 blank2"
"plot1 plot1 plot1 plot1 plot2 plot2 plot2"
"plot3 plot3 plot3 plot3 plot4 plot4 plot4"
"plot5 plot5 plot5 plot5 plot6 plot6 plot6"
"stats1 stats1 stats1 stats2 stats2 stats3 stats3"
cards:
from lovelace-windrose-card.
I'm also using the layout card with the grid type. So I don't think that's causing the problem.
The card uses a ResizeObserver. It execute an piece of code that recalculates the height, with the width as input and then redraws the windrose.
The redraw is working, but the height is not calculated correctly or not at all.
Still can't reproduce this. I don't have a windows machine to try this on.
Later more.
from lovelace-windrose-card.
from lovelace-windrose-card.
This part, starts at line 1372,
this.ro = new ResizeObserver(entries => {
for (const entry of entries) {
const cs = entry.contentRect;
this.updateCanvasSize(cs.width - 32);
if (this.windRoseData) {
this.requestUpdate();
}
}
});
Maybe adding a console.log and log when it's fired with what cs.width.
from lovelace-windrose-card.
A very quick look, it looks like cs.width is correct.
But I think this line
this.canvas.height = this.windRoseConfigFactory.canvasHeight;
in
updateCanvasSize(canvasWidth) {
// console.log('updateCanvasSize()', canvasWidth);
this.canvas.width = canvasWidth;
this.canvas.height = this.windRoseConfigFactory.canvasHeight;
const windRoseConfig = this.windRoseConfigFactory.createWindRoseConfig(canvasWidth);
this.windRoseCanvas = new WindRoseCanvas(windRoseConfig, this.windSpeedConverter);
const windBarConfigs = this.windRoseConfigFactory.createWindBarConfigs(canvasWidth);
this.windBarCanvases = [];
for (const windBarConfig of windBarConfigs) {
this.windBarCanvases.push(new WindBarCanvas(windBarConfig, this.windSpeedConverter));
}
}
may be where it is getting the wrong height from.
from lovelace-windrose-card.
I think you found the problem. Still can't reproduce it, because the resize observable is fired multiple times when I resize.
The height is calculated in the windRoseConfigFactory when a new config is created. The canvas height is set before that.
So the resize is always one calculation behind.
Released version 0.8.1
Can you confirm it's fixed?
from lovelace-windrose-card.
Well it is different, but not fixed. I've spent some time trying to see if I can see what is going on, but JS is not a language that I've had much to do with, so struggling a little.
Sometimes, it looks very much as if the height and width have been transposed - the numbers in the debugger certainly suggest this, the number I see for height is the width of the canvas, but I can't see where this could possibly be occuring. And I'm also sometimes seeing the rose and the bar plotted off centre (to the right) in the card.
If I can glean any more sensible info I'll pass it on.
from lovelace-windrose-card.
To bad.
The location and size is all calculated with the width as input. I think it has something to do with the ResizeObserver not being fast enough. Is it a older and slower device?
I you find any clues, please let me know.
from lovelace-windrose-card.
Version 1.0.2 is a almost complete rebuild of the card. Some parts work different now.
Is this still a problem with the latest version?
from lovelace-windrose-card.
If this is still an problem, please open a new issue. I'll close this one. Thanks.
from lovelace-windrose-card.
Related Issues (20)
- Numbers in and next to the bar HOT 5
- [Feature request] add range selector buttons
- Card not displaying HOT 2
- Speed unit locked to beaufort HOT 2
- Provide a full, working example HOT 8
- [Feature request] Use vector graphics (fix Low resolution graphic) HOT 5
- [Feature request] : add the possibility to use weather forecast entity data
- [Feature request] Format text color based on windspeed color HOT 5
- Gust Windspeed Entity not available HOT 2
- [Feature request] Show Current Wind Speed and Gust Values HOT 3
- Card Dynamically Keeps Growing and Growing in Size HOT 4
- Some issues in Firefox HOT 3
- Can you edit and give an example how to get gust scale visible? HOT 1
- Blank screen and error in browser console HOT 6
- [Feature Request] Background Image HOT 1
- Card not working in companion app (iOS) HOT 2
- [Feature request] Add tap and double tap action
- Could this windrose show forecast?
- No longer displaying after switching to Beaufort scale supported by HA 2024.4 HOT 6
- Bug: Beaufort as input wind speed unit HOT 2
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 lovelace-windrose-card.