Comments (3)
I recommend temporarily using card-mod. Here's the base code:
card_mod:
style: |
ha-card {
transform: scale(1.0,1.0) translate(0%,0%);
aspect-ratio: 1 / 1;
}
div {
transform: scale(1.0,1.0) translate(0%,0%);
}
ha-card is of course for the outer part of the card and div is the inner part (basically the actual compass). The aspect ratio value helps to conform the card to other cards, for example when using grid cards. The translate value moves either the card or the compass within the card, so that it can be centered. And lastly, the scale value is shown for the X and Y axis. Not sure how well this works across different browsers and platforms, but there are compatible workarounds available online.
from compass-card.
The compass does not scale, this is by design.
Currently I don't know how to scale it, so I need to figure that out in order to make that work.
It's not easy to make the scaling work, as the texts inside the compass should scale too, otherwise it will look wrong as well.
As this is a known 'limitation' I'm changing the label to enhancement.
from compass-card.
Please note that only the compass + indicators scale. The texts do not.
from compass-card.
Related Issues (20)
- Are these possible? HOT 1
- Are these possible? HOT 1
- Indicator object icon selectable HOT 4
- Templating HOT 1
- Compass abbreviation not hiding and not colored HOT 4
- Second compass ring HOT 5
- Windspeed 0 shows invalid HOT 9
- Two enhancement suggestions
- tap_action HOT 2
- Ability to add labels to indicators HOT 2
- The displayed wind direction does not match the sensor. HOT 2
- Addendum to #864 HOT 6
- Set image ( entity_picture_template ) as indicator type HOT 1
- tap_action navigate HOT 2
- Fontsize Option for a 2nd Value Sensor... HOT 2
- FR: Wind Direction Arrow in center of the card HOT 1
- Image size HOT 2
- This is what I want HOT 1
- Number of decimals shown HOT 4
- Wrong direction ? HOT 3
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 compass-card.