Merge pull request #54 from AnthonMS/my-button-entity-support

my-button entity support, my-slider-v2 seekbar and more.

README.md

@@ -1,4 +1,8 @@
 # slider-card
+If you find the project useful, please consider starring the repository :)
+
+[![stars - my-cards](https://img.shields.io/github/stars/AnthonMS/my-cards?style=social)](https://github.com/AnthonMS/my-cards)
+[![forks - my-cards](https://img.shields.io/github/forks/AnthonMS/my-cards?style=social)](https://github.com/AnthonMS/my-cards)
 
 ## Update Notes
 

docs/cards/button.md

@@ -22,15 +22,76 @@ It is completely customizable now and fully templatable. But is still very much
 | ---- | ---- | ------- | ----------- |
 | type | string | **Required** | `custom:my-slider-v2` |
 | entity | string | **Required** | `light.livingroom` |
-| layout | string | vertical | Layout of card. Default is horizontal on cover entities. [Beautiful illustration of different layouts](#layouts)  |
 | icon | string/object | "lightbulb-outline" | The icon to use. Can be an object like in the example. |
 | label | string/object | "entity.friendly_name" | The label text. Can be an object like the icon. Holds text, show and actions |
-| slider | object | [Default slider config](/docs/cards/slider-v2.md) | The icon to use. Can be an object like in the example. |
-| styles | object | [Default styles](#default-styles) | Style each component used in the card. |
+| buttons | object | depends on entity type | This is the list of buttons and their config like tap_action etc. You can create as many or few buttons as you desire and have room for in your setup. Just create a 'button'+N where N is anything unique. The key names for the buttons does not matter. So you can just use 'button0', 'button1' and so on. |
+| stats | object | depends on entity type | This is a static container that can be used to display a statistic in the top right corner. Default for light is brightness % otherwise it's entity state. You can give the stats container actions like any other component. |
+| camera | string | Nothing | This can be set as a camera entity and then it can display the stream in the stats container. Only used with locks. |
+| slider | object | [Slider config](/docs/cards/slider-v2.md) | Config for slider inside card. Look at available config keys in readme. Only extra key here is 'show': true/false |
+| seekbar | object | [Slider config](/docs/cards/slider-v2.md) | Just another slider config with extra key 'show', but only used for media_player seekbars |
+| styles | object | [Button styles](/src/cards/styles/my-button.styles.ts) | Default harcoded styles. For dynamic styles you can inspect the DOM to find css key to style or reference 'initializeStyles' function in [my-button.ts](/src/cards/my-button.ts) |
 
 
 ## Examples
-![Examples](/docs/images/my-button/example-1.png)
+![Examples](/docs/images/my-button/lights.png)
+![Examples](/docs/images/my-button/lock.png)
+<br>
+![Examples](/docs/images/my-button/Light-switch-mediaplayer.png)
+![Examples](/docs/images/my-button/media_player.gif)
+
+```yaml
+- type: custom:my-button
+  entity: light.basement_room_spots
+  label: Room
+  icon: mdi:wall-sconce-flat
+
+- type: custom:my-button
+  entity: light.basement_entrance_spots
+  label: Entrance
+  icon: mdi:wall-sconce-flat
+
+- type: custom:my-button
+  entity: light.basement_hall_spots
+  label: Hall
+  icon: mdi:wall-sconce-flat
+
+
+- type: custom:my-button
+  entity: lock.front_door
+  label: Front Door
+  camera: camera.front_door_cam
+  tap_action:
+    action: none
+  slider:
+    show: true
+
+
+- type: custom:my-button
+  entity: media_player.office_google
+  label: Google Speaker
+
+
+- type: horizontal-stack
+  title: Office
+  cards:
+    - type: custom:my-button
+      entity: light.grono_lamp_office
+      label: Lamp
+      icon: mdi:desk-lamp
+
+    - type: custom:my-button
+      entity: switch.anthon_beast
+      label: PC
+      slider:
+        show: true
+      tap_action:
+        action: more-info
+
+    - type: custom:my-button
+      entity: media_player.office_google
+      label: Google Speaker
+```
+
 ```yaml
 - type: custom:my-button
   entity: light.front_door_spots
@@ -42,6 +103,39 @@ It is completely customizable now and fully templatable. But is still very much
       action: toggle
     hold_action:
       action: more-info
+  stats:
+    show: true
+    text: 'Your custom text, can be templated'
+    styles:
+      container:
+        - border-radius: '12px'
+      camera:
+        - border: '1px solid red'
+  buttons:
+    show: true
+    vertical: false
+    button0:
+      show: true
+      text: 'B1'
+      icon: 'mdi:power'
+      styles:
+        text:
+          - color: 'black'
+        icon:
+          - color: 'orange'
+      tap_action:
+        action: toggle
+  slider:
+    show: true
+    vertical: true
+    styles:
+      card:
+        - background: 'orange'
+  seekbar:
+    show: true
+    styles:
+      card:
+        - background: 'purple'
   styles:
     card:
       - background: rgba(230, 230, 230, 0.5)
@@ -59,66 +153,76 @@ It is completely customizable now and fully templatable. But is still very much
     action: more-info
 ```
 
+## Styling configs
+It is possible to nest the styles to give a better overview of the yaml. So with the slider, it is possible to nest all the styles in the slider object like you would when using the slider card by itself.
+Likewise, it is possible to style the buttonsContainer, buttons, text and icon for the new buttons directly in the buttons->styles object.
+The same with the label and stats.
+When doing it nested, the names are a little different since we dont need to specify sliderContainer, now we can just style the 'container' in the slider->styles.
 
-### Default Styles:
 ```yaml
-styles:
-  card:
-    - height: '125px'
-    - width: '100%'
-    - min-width: 'fit-content'
-    - background: 'var(--card-background-color)'
-  icon:
-    - height: '35px'
-    - width: '35px'
-    - display: 'inline-block'
-    - padding: '10px 10px 10px 10px'
-    - cursor: 'pointer'
-    - color: 'var(--paper-item-active-icon-color)'
-  labelWrapper:
-    - width: '100%'
-    - height: '100%'
-    - display: 'flex'
-  label:
-    - padding: '0'
-    - margin: '0 10px'
-    - color: 'var(--primary-text-color)'
-    - font-weight: 'bold'
-  container:
-    - padding: '0'
-    - margin: '0'
-    - display: 'flex'
-    - flex-flow: 'column'
-    - height: '100%'
-  row1:
-    - flex: '0 1 auto'
-  row2:
-    - flex: '1 1 auto'
-  row3:
-    - flex: '0 1 auto'
-    - margin: '0 2px 2px 2px'
-  containerColumn:
-    - padding: '0'
-    - margin: '0'
-    - display: 'flex'
-    - flex-flow: 'row'
-    - height: '100%'
-  column1:
-    - flex: '1'
-  column2:
-    - flex: '0'
-    - padding: '3px 3px 3px 0'
-```
+'Styles can be set on the background of the track by setting it from the styles config in the root:'
+- type: horizontal-stack
+  cards:
+    - type: custom:my-button
+      entity: lock.front_door
+      label: 
+        text: Front Door
+        extra: Smaller label under
+      camera: camera.front_door_cam
+      slider:
+        show: true
+      styles:
+        sliderTrack:
+          - background: rgba(255, 0, 0, 0.5)
 
-## Layouts
-Here you see an illustration of where the different elements are so you can better style them. With the default styles above, you should be able to figure out what and where things go.
-I will add more layout options as we go, also are more freestyle layout where you will just have the card and then everything in the root of that to put wherever you want. I'm not good with css, so if anyone has good ideas to layouts I should implement. Then please let me know.
+'Or by setting it in the track directly on the slider:'
+- type: custom:my-button
+  entity: lock.front_door
+  label: 
+    text: Front Door
+    extra: Smaller label under
+  camera: camera.front_door_cam
+  slider:
+    show: true
+    styles:
+      track:
+        - background: rgba(255, 0, 0, 0.5)
 
-![Layout Illustration](/docs/images/my-button/layouts-illustration.png)
+'If using the buttons, you can set individual styling for each button. Or set a default for all of them and specify a specific style for one of them:'
+- type: custom:my-button
+  entity: lock.front_door
+  label: 
+    text: Front Door
+    extra: Smaller label under
+  camera: camera.front_door_cam
+  buttons:
+    show: true
+    vertical: true
+    button0:
+      show: true
+      icon: mdi:lock
+      tap_action:
+        action: more-info
+      styles:
+        container:
+          - background: rgba(0, 0, 255, 0.5)
+    button1:
+      show: true
+      icon: mdi:lock-open
+      tap_action:
+        action: more-info
+    styles:
+      button:
+        - background: rgba(255, 0, 0, 0.5)
+  slider:
+    show: true
+    styles:
+      track:
+        - background: rgba(255, 0, 0, 0.5)
+  styles:
+    sliderTrack:
+      - background: rgba(255, 0, 0, 0.5)
+```
 
-- **row1** will fit content inside
-- **row2** will fill the remaining space between row1 and 2
-- **row3** will fit content inside (On horizontal layout, this is empty so row2 technically fills all remaining space.)
-- label will fit text
-- labelWrapper will fill full space
-- slider will use all default options from that card. Some styles are set here if it's vertical/cover etc.
+## Layouts
+The illustration the button card is outdated and might still change further. So I will postpone creating another until I am certain that is the final layout of the card. Though I am pretty sure the one it currently has is going to be the final.

docs/cards/slider-v2.md

@@ -17,9 +17,8 @@ It is completely customizable now and fully templatable.
 
 ### Future features (Maybe)
 - Text inside slider (Should be easily done with this new slider)
-- Radius attribute to set how close to the thumb user has to be when allowTapping is set to false
 - If user is not actively changing the slider, then it should animate between states.
-- **If you would like a new feature, please feel free to create an issue asking for it.**
+- **If you would like something made or fixed, please feel free to create an issue asking about it.**
 
 
 ## Options
@@ -28,8 +27,9 @@ It is completely customizable now and fully templatable.
 | type | string | **Required** | `custom:my-slider-v2` |
 | entity | string | **Required** | `light.livingroom` |
 | step | string | "1" | Number of steps to take (For input number, if step is not specified, it will use step from attributes.) (For media_player, if step is not specified it will step by 0.01. (It will actually step by 1, but it will convert 27 to 0.27. So if you set a custom step, set it between 0 and 100.)) |
-| colorMode | string | brightness | Can be brightness, temperature, hue, saturation |
-| coverMode | string | position | Can be position or tilt |
+| colorMode (Deprecated: Use 'mode' instead) | string | brightness | Can be brightness, temperature, hue, saturation |
+| coverMode (Deprecated: Use 'mode' instead) | string | position | Can be position or tilt |
+| mode | string | cover:position, light:brightness | Can be position, tilt, brightness, temperature, hue, saturation, volume & seekbar |
 | vertical | boolean | false | This will set the slider to be vertical and handled from bottom to top. Default on covers |
 | flipped | boolean | false | This will just flip the slider to go from right to left or top to bottom. Default on covers |
 | inverse | boolean | false | Will inverse how far the slider has progressed compared to value. so if brightness is 75%, then it will only be 25% progressed. This is useful for cover, where it is Default. |
@@ -44,7 +44,8 @@ It is completely customizable now and fully templatable.
 | maxThreshold | number | 75 | Only used to determine how far users have to slide to activate toggle commands for switch and lock |
 | min | number | 0 | Minimum value you can set the entity state |
 | max | number | 100 | Maximum value you can set the entity state |
-| styles | object | [Default styles](#default-styles) | Style each component used in the card. |
+| sliderMin | number | 0 | The minimum percentage progress to show always |
+| styles | object | [Default styles](/src/cards/styles/my-slider.styles.ts) | Style each component used in the card. |
 
 
 ## Examples
@@ -110,34 +111,4 @@ It is completely customizable now and fully templatable.
       card: 
         - height: 200px
         - width: 50px
-```
-
-
-### Default Styles:
-```yaml
-styles:
-  card:
-    - height: '30px'
-  container:
-    - width: '100%'
-    - height: '100%'
-    - position: 'relative'
-    - overflow: 'hidden'
-    - border-radius: '5px'
-  track:
-    - width: '100%'
-    - height: '100%'
-    - position: 'relative'
-    - background: 'var(--card-background-color)'
-  progress:
-    - height: '100%'
-    - background: 'var(--paper-item-icon-active-color)'
-    - position: 'absolute'
-    - width: '0.00%' # This will be where the progress is before it finds the actual state on load. Otherwise it's handled by the slider obviously.
-  thumb:
-    - height: '100%'
-    - background: 'black'
-    - position: 'absolute'
-    - right: '-5px'
-    - width: '10px'
 ```

package.json

@@ -48,13 +48,11 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "rollup -c ./other/ops/rollup.config.dev.js --watch",
-
     "build": "npm run build:bundle && npm run build:button && npm run build:slider && npm run build:slider-v2",
     "build:bundle": "rollup -c ./other/ops/rollup.config.js",
     "build:button": "rollup -c ./other/ops/rollup.config.my-button.js",
     "build:slider": "rollup -c ./other/ops/rollup.config.my-slider.js",
     "build:slider-v2": "rollup -c ./other/ops/rollup.config.my-slider-v2.js",
-
     "OLD:build:lint": "npm run lint && npm run OLD:rollup",
     "OLD:lint": "eslint src/*.ts",
     "OLD:rollup": "rollup -c"

src/cards/extras/const.ts

@@ -1,3 +1,24 @@
-export const CARD_VERSION = '2.0.3'
-export const SLIDER_VERSION = '3.0.5'
-export const BUTTON_VERSION = '1.0.1'
+export const CARD_VERSION = '2.0.4'
+export const SLIDER_VERSION = '3.0.6'
+export const BUTTON_VERSION = '1.0.2'
+
+
+
+
+export const UNAVAILABLE = 'unavailable';
+export const BINARY_STATE_ON = 'on';
+export const BINARY_STATE_OFF = 'off';
+const arrayLiteralIncludes =
+  <T extends readonly unknown[]>(array: T) =>
+  (searchElement: unknown, fromIndex?: number): searchElement is T[number] =>
+    array.includes(searchElement as T[number], fromIndex);
+
+export const UNKNOWN = 'unknown';
+export const ON = 'on';
+export const OFF = 'off';
+
+export const UNAVAILABLE_STATES = [UNAVAILABLE, UNKNOWN] as const;
+export const OFF_STATES = [UNAVAILABLE, UNKNOWN, OFF] as const;
+
+export const isUnavailableState = arrayLiteralIncludes(UNAVAILABLE_STATES);
+export const isOffState = arrayLiteralIncludes(OFF_STATES);