Merge pull request #128 from jeroenterheerdt/clockaltwithmovement

Adding another alternative clock, this time with movement

View Assist dashboard and views/views/community_contributions/clockaltwithmovement.yaml

@@ -0,0 +1,156 @@
+type: custom:button-card
+template:
+  - variable_template
+  - body_template
+variables:
+  clockaltcardversion: 1.0.0
+  var_enable_movement: true
+  var_stop_position:
+    top: 50%
+    left: 50%
+  var_background: |-
+    [[[ 
+      try {
+        return hass.states[variables.var_assistsat_entity].attributes.background || "";
+      } catch (e) {
+        return "";
+      } 
+    ]]]
+  var_random_opacity: "[[[ Math.random() > 0.5 ? '0.8' : '1' ]]]"
+  var_positions:
+    - top: "-100%"
+      left: 5%
+    - top: "-110%"
+      left: 25%
+    - top: "-110%"
+      left: 5%
+    - top: "-65%"
+      left: 35%
+    - top: "-85%"
+      left: 10%
+    - top: "-55%"
+      left: 35%
+    - top: "-65%"
+      left: 35%
+    - top: "-110%"
+      left: 35%
+    - top: "-85%"
+      left: 20%
+    - top: "-95%"
+      left: 35%
+  var_random_position: |-
+    [[[ 
+      if (variables.var_enable_movement) {
+        var positions = variables.var_positions;
+        if (!window.positionTimer) {
+          window.positionTimer = setInterval(function() {
+            var randomIndex = Math.floor(Math.random() * positions.length);
+            var randomPosition = positions[randomIndex];
+            window.randomPosition = 'translate(' + randomPosition.left + ', ' + randomPosition.top + ')';
+          }, 10000);
+        }
+        return window.randomPosition || 'translate(' + positions[0].left + ', ' + positions[0].top + ')';
+      } else {
+        var stopPosition = variables.var_stop_position || { top: "0%", left: "0%" };
+        return 'translate(' + stopPosition.left + ', ' + stopPosition.top + ')';
+      }
+    ]]]
+styles:
+  card:
+    - background: |-
+        [[[ 
+          return 'center / cover no-repeat url(' + variables.var_background + ')';
+        ]]]
+    - background-size: cover
+    - font-size: |-
+        [[[ 
+          var scale = window.innerWidth / 664;
+          return Math.max(16 * scale, 10) + 'px';
+        ]]]
+    - padding: |-
+        [[[ 
+          var scale = window.innerWidth / 664;
+          return Math.max(20 * scale, 8) + 'px';
+        ]]]
+  grid:
+    - grid-template-areas: |
+        "title status"
+        "clock clock"
+        "assist assist"
+    - grid-template-rows: min-content min-content min-content min-content
+    - grid-template-columns: 1fr 1fr
+  custom_fields:
+    clock:
+      - justify-self: start
+      - align-self: center
+      - font-size: 500%
+      - width: max-content
+      - position: absolute
+      - top: 65%
+      - transition: none
+      - transform: "[[[ return variables.var_random_position ]]]"
+    weather:
+      - position: absolute
+      - font-size: 200%
+      - opacity: "[[[ return variables.var_random_opacity ]]]"
+      - transition: none
+      - transform: "[[[ return variables.var_random_position ]]]"
+custom_fields:
+  title: ""
+  clock:
+    card:
+      type: vertical-stack
+      cards:
+        - type: horizontal-stack
+          cards:
+            - type: custom:button-card
+              name: "[[[ return variables.var_current_time ]]]"
+              styles:
+                name:
+                  - font-size: 1000%
+                  - text-shadow: 2px 2px black
+                  - color: white
+                card:
+                  - background-color: transparent
+                  - border-width: 0px
+            - type: custom:button-card
+              icon: "[[[ return variables.var_weather_icon ]]]"
+              name: "[[[ return variables.var_weather_temperature ]]]"
+              tap_action:
+                action: navigate
+                navigation_path: weather
+              styles:
+                card:
+                  - background-color: transparent
+                  - border-width: 0px
+                  - width: 50%
+                  - position: relative
+                  - bottom: "-40%"
+                grid:
+                  - grid-template-areas: "\"i n\""
+                  - grid-template-rows: min-content min-content
+                name:
+                  - font-size: 400%
+                  - text-shadow: 2px 2px black
+                  - color: white
+                icon:
+                  - width: 80%
+                  - filter: drop-shadow(2px 2px black)
+                  - color: white
+        - type: custom:button-card
+          name: |
+            [[[ 
+              var now = new Date();
+              return now.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
+            ]]]
+          styles:
+            name:
+              - font-size: 300%
+              - text-shadow: 2px 2px black
+              - text-align: center
+              - color: white
+            card:
+              - background-color: transparent
+              - border-width: 0px
+              - width: auto
+              - margin-top: "-17%"

wiki/docs/community-contributions/cc-views/clock-with-movement.md

@@ -0,0 +1,15 @@
+---
+title: Clock with movement
+---
+
+This view makes the clock move in a semi-random pattern over your screen to serve as a screensaver.This is a community contribution authored by user [jeroenterheerdt (Github)](https://github.com/jeroenterheerdt) and [randr (Github)](https://github.com/randr)/jeroenterheerdt and randr (Discord). Support can be obtained through the View Assist [Discord server](https://discord.com/channels/1241796965344481440/1295408431498395709) or the [discussion group](https://github.com/dinki/View-Assist/discussions) on Github. Please tag the author in your message.
+
+## Prerequisites
+
+## Installation
+- [create or update a view with the yaml](https://github.com/dinki/View-Assist/blob/main/View%20Assist%20dashboard%20and%20views/views/community_contributions/clockaltwithmovement.yaml)
+## Changelog
+
+| Version | Description     |
+| ------- | --------------- |
+| v 1.0.0 | Initial release |

wiki/docs/community-contributions/cc-views/index.md

@@ -17,4 +17,5 @@ These user contributions are supported by the contributors only as they are not
 
 | View | Description | Github User | Discord User |
 | ---- | ----------- | ----------- | ------------ |
+| Clock with movement | Screensaver-like clock| jeroenterheerdt, randr | jeroenterheerdt,randr |
 | Placeholder | Placeholder | dinki | dinki |