Übersicht "Fullscreen Time Hue Gradient"

Uebersicht-FullScreen-GradientHours.jsx

// -----------------------------------------------------------------------------
import { css } from "uebersicht";
import { DateTime } from "luxon";

// Refresh Frequency of the widget
// This affects only the final return, not the whole script
export const refreshFrequency = 1000 * 60;

// Trigger the refresh
export const command = (dispatch) => {
  dispatch({});
};

// This CSS is applied to a parent div generated by Übersicht
// which wraps everything that is returned by the render function
// We use it primarily to POSITION THE WIDGET
export const className = css`
  left: 0;
  top:  0;
  z-index: -10;
`;

// -----------------------------------------------------------------------------

function interpolateLinear (value, minInput, maxInput, minOutput, maxOutput) {
  return Math.round(minOutput + (maxOutput - minOutput) * ((value - minInput) / (maxInput - minInput)));
};

function minuteOfDayToHue (minutes) {
  return interpolateLinear(minutes, 0, 1440, 0, 360);
}

// -----------------------------------------------------------------------------

export const render = ({ output }) => {

  // const dt = DateTime.now().plus({ minuteOfDay: getRandomInt(6000) });
  // const dt = DateTime.now().plus({ minuteOfDay: counter * 10 });
  const dt = DateTime.now();
  
  const minuteOfDay = dt.hour * 60 + dt.minute;
  // const minuteOfDay = dt.toFormat("h") * 60 + dt.minute;
  // console.log(dt.toFormat("h"));

  const hourToAngle = interpolateLinear(minuteOfDay, 0, 1440, 90, 270);
  // console.log("Angle: " + hourToAngle);

  const hue = minuteOfDayToHue(minuteOfDay);
  // console.log("Hue: " + hue);
  
  const wrapper = css`
    width: 99vw;
    min-height: 99vh;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 6rem 1rem 2rem;
    background: linear-gradient(
      ${hourToAngle}deg, 
        lch(30 30% ${hue}      / 1), 
        lch(30 30% ${hue - 45} / 1), 
        lch(30 30% ${hue - 75} / 1)
      );
  `;
  const debug = css`
    display: block;
    width: 92%;
    margin-top: 0px;
    text-align: right;
    color: lch(45 45% ${hue} / 1);
  `;
  const arrow = css`
    display: inline-block;
    transform-origin: center;
    transform: rotate(${hourToAngle - 90}deg);
    font-size: 4rem;
  `;
  // counter++;

  return (
    <div className={wrapper}>
      <div className={debug}>
        {/* 
        <span className={arrow}>➤</span><br />
        {dt.toFormat('HH:mm:ss')}
        <br />
        Hue: {hue}
        <br />
        Angle: {hourToAngle}
        <br /> */}
        {/* Counter: {counter} */}
      </div>
    </div>
  );
};