RZL: Add kitchen floalt light

config/rzl.js

@@ -2,7 +2,7 @@
 import type { Config } from "config/flowtypes";
 import * as types from "config/types";
 import { hex, rgb, rgba, rainbow } from "config/colors";
-import { esper_topics, esper_statistics } from "./utils";
+import { esper_topics, esper_statistics, floalt } from "./utils";
 
 const config : Config = {
   space: {
@@ -165,6 +165,10 @@ const config : Config = {
         type: msg => JSON.parse(msg.toString()).progress || 0
       }
     },
+    floalt.topics("65537"),
+    floalt.topics("65538"),
+    floalt.topics("65539"),
+    floalt.topics("65540"),
     esper_topics("afba40", "flyfry"),
     esper_topics("afba45", "alarm")
   ],
@@ -500,6 +504,101 @@ const config : Config = {
           text: "Open Partkeepr"
         }
       ]
+    },
+    kitchen_light: {
+      name: "Deckenlicht Küche",
+      position: [325, 407],
+      icon: "ceiling-light",
+      ui: [
+        {
+          type: "section",
+          text: "Lampe Eingang"
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Helligkeit",
+          icon: "brightness-7",
+          topic: floalt.brightness("65537"),
+          delayedApply: true
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Farbtemperatur",
+          icon: "weather-sunset-down",
+          topic: floalt.color("65537"),
+          delayedApply: true
+        },
+        {
+          type: "section",
+          text: "Lampe Hauptraum"
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Helligkeit",
+          icon: "brightness-7",
+          topic: floalt.brightness("65538"),
+          delayedApply: true
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Farbtemperatur",
+          icon: "weather-sunset-down",
+          topic: floalt.color("65538"),
+          delayedApply: true
+        },
+        {
+          type: "section",
+          text: "Lampe Spüle"
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Helligkeit",
+          icon: "brightness-7",
+          topic: floalt.brightness("65539"),
+          delayedApply: true
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Farbtemperatur",
+          icon: "weather-sunset-down",
+          topic: floalt.color("65539"),
+          delayedApply: true
+        },
+        {
+          type: "section",
+          text: "Lampe Herd"
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Helligkeit",
+          icon: "brightness-7",
+          topic: floalt.brightness("65540"),
+          delayedApply: true
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Farbtemperatur",
+          icon: "weather-sunset-down",
+          topic: floalt.color("65540"),
+          delayedApply: true
+        }
+      ]
     }
   },
   layers: [

config/utils.js

@@ -40,6 +40,25 @@ export const esper_topics = (chip_id: string, name: string) => ({
   }
 });
 
+export const floalt = {
+  color: (light_id: string) => `floalt_${light_id}_color`,
+  brightness: (light_id: string) => `floalt_${light_id}_brightness`,
+  topics: (light_id: string) => ({
+    [ `floalt_${light_id}_color` ]: {
+      state: `/service/openhab/out/tradfri_0220_gwb8d7af2b448f_${light_id}_color_temperature/state`,
+      command: `/service/openhab/in/tradfri_0220_gwb8d7af2b448f_${light_id}_color_temperature/command`,
+      defaultValue: "0",
+      values: {}
+    },
+    [ `floalt_${light_id}_brightness` ]: {
+      state: `/service/openhab/out/tradfri_0220_gwb8d7af2b448f_${light_id}_brightness/state`,
+      command: `/service/openhab/in/tradfri_0220_gwb8d7af2b448f_${light_id}_brightness/command`,
+      defaultValue: "0",
+      values: {}
+    }
+  })
+}
+
 export const esper_statistics = (name: string,
     prev_ui: Array<ControlUI> = []) => (
       prev_ui.concat([

src/components/UiItemList/index.js

@@ -102,6 +102,11 @@ export default class UiItemList extends React.Component<UiItemListProps> {
 
   renderSlider(control: UISlider) {
     const value = this.getValue(control);
+    const on = (dontApply: ?boolean) => () => {
+      if (dontApply == null || dontApply === false) {
+        this.props.onChangeState(control.topic, this.val);
+      }
+    };
     return [
       <ListItemText primary={control.text} key="text" />,
       <ListItemSecondaryAction key="action">
@@ -110,10 +115,11 @@ export default class UiItemList extends React.Component<UiItemListProps> {
             min={control.min || 0}
             max={control.max || 100}
             step={control.step || 1}
-            onChange={
-              (_event, newvalue) =>
-                this.props.onChangeState(control.topic, newvalue)
-            }
+            onChange={(_event, next) => {
+              this.val = next;
+              on(control.delayedApply)();
+            }}
+            onDragStop={on(false)}
             style={{width: 100}}
           /></MuiThemeProvider>
       </ListItemSecondaryAction>

src/config/flowtypes.js

@@ -58,7 +58,8 @@ export type UISlider = $ReadOnly<{|
   enableCondition?: TopicDependentOption<boolean>,
   min?: number,
   max?: number,
-  step?: number
+  step?: number,
+  delayedApply?: boolean
 |}>;
 
 export type UISection = $ReadOnly<{|

yarn.lock

@@ -2921,9 +2921,9 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-flow-bin@^0.68.0:
-  version "0.68.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.68.0.tgz#86c2d14857d306eb2e85e274f2eebf543564f623"
+flow-bin@^0.69.0:
+  version "0.69.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.69.0.tgz#053159a684a6051fcbf0b71a2eb19a9679082da6"
 
 flow-parser@^0.*:
   version "0.68.0"