light animations

App.js

@@ -33,6 +33,10 @@ import {
   SettingsAppLanguageModalContent,
 } from "./src/Screens/Settings";
 import { SettingsChangeDeviceDisplayName } from "./src/Screens/Device/settings";
+import {
+  EditActionAnimationSelectionModalContent,
+  EditActionAnimationsSelectionModalContent,
+} from "./src/Screens/Device/modals/EditActions";
 
 const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator();
@@ -197,6 +201,32 @@ export function MyApp() {
             }
           />
 
+          <Stack.Screen
+            name="modalEditActionAnimationInSelection"
+            component={EditActionAnimationSelectionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalEditActionAnimationInSelection.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalEditActionAnimationOutSelection"
+            component={EditActionAnimationSelectionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalEditActionAnimationOutSelection.pageTitle"
+                ),
+              })
+            }
+          />
+
           <Stack.Screen
             name="modalSettingsAppColorScheme"
             component={SettingsAppColorSchemeModalContent}
@@ -226,7 +256,7 @@ export function MyApp() {
               options({
                 navigation: navigation,
                 pageTitle: t(
-                  "screens.device.settings.modalSettingsChangeDeviceDisplayName.pageTitle"
+                  "screens.device.modalSettingsChangeDeviceDisplayName.pageTitle"
                 ),
               })
             }

locales/de.json

@@ -12,10 +12,6 @@
   },
   "screens": {
     "device": {
-      "light": {
-        "pickerColorModeText": "Farbauswahl",
-        "pickerColorModePlaceholder": "Wählen Sie einen Farbmodus"
-      },
       "settings": {
         "settingsTitle": "Einstellungen",
         "wifiStandByTitle": "WLAN im Standby",
@@ -41,7 +37,8 @@
         "buttonAddAction": "Aktion hinzufügen",
         "modalChooseScene": {
           "pageTitle": "Wähle eine Szene aus",
-          "textButtonAddScene": "Neue Szene erstellen"
+          "textButtonAddScene": "Neue Szene erstellen",
+          "noResult": "Keine Szenen vorhanden"
         },
         "modalCreateScene": {
           "pageTitle": "Szene erstellen",
@@ -69,10 +66,33 @@
           "pageTitle": "Layer auswahl"
         },
         "modalLayersEditAction": {
-          "pageTitle": "Ebenen bearbeiten"
+          "pageTitle": "Ebenen bearbeiten",
+          "dropdownColorModeSelection": {
+            "label": "Wähle einen Farbmodus",
+            "noColorModeSelected": "Kein Farbmodus ausgewählt"
+          },
+          "modeSpecificColors": "Modus spezifische Farben"
+        },
+        "editActionAnimationsCardContent": {
+          "animationsIn": "Animations in",
+          "animationsOut": "Animations out",
+          "dropdownAnimationIn": {
+            "label": "Wähle eine Animation in"
+          },
+          "dropdownAnimationOut": {
+            "label": "Wähle eine Animation out"
+          }
         },
         "modalLayersEditActionColorModeSelection": {
           "pageTitle": "Wähle einen Farbmodus"
+        },
+        "modalEditActionAnimationInSelection": {
+          "pageTitle": "Animation in auswählen",
+          "noResult": "Keine Animationen verfügbar"
+        },
+        "modalEditActionAnimationOutSelection": {
+          "pageTitle": "Animation out auswählen",
+          "noResult": "Keine Animationen verfügbar"
         }
       }
     },

locales/en.json

@@ -12,10 +12,6 @@
   },
   "screens": {
     "device": {
-      "light": {
-        "pickerColorModeText": "Color selection",
-        "pickerColorModePlaceholder": "Select a color mode"
-      },
       "settings": {
         "settingsTitle": "Settings",
         "wifiStandByTitle": "WLAN in standby",
@@ -41,7 +37,8 @@
         "buttonAddAction": "Add action",
         "modalChooseScene": {
           "pageTitle": "Choose a scene",
-          "textButtonAddScene": "Create new scene"
+          "textButtonAddScene": "Create new scene",
+          "noResult": "No scenes available"
         },
         "modalCreateScene": {
           "pageTitle": "Create scene",
@@ -69,10 +66,33 @@
           "pageTitle": "Layer selection"
         },
         "modalLayersEditAction": {
-          "pageTitle": "Edit layers"
+          "pageTitle": "Edit layers",
+          "dropdownColorModeSelection": {
+            "label": "Choose a color mode",
+            "noColorModeSelected": "No color mode selected"
+          },
+          "modeSpecificColors": "Mode specific colors"
+        },
+        "editActionAnimationsCardContent": {
+          "animationsIn": "Animations in",
+          "animationsOut": "Animations out",
+          "dropdownAnimationIn": {
+            "label": "Choose an animation in"
+          },
+          "dropdownAnimationOut": {
+            "label": "Choose an animation out"
+          }
         },
         "modalLayersEditActionColorModeSelection": {
           "pageTitle": "Choose a color mode"
+        },
+        "modalEditActionAnimationInSelection": {
+          "pageTitle": "Choose animation in",
+          "noResult": "No animations available"
+        },
+        "modalEditActionAnimationOutSelection": {
+          "pageTitle": "Choose animation out",
+          "noResult": "No animations available"
         }
       }
     },

src/Components/Button/index.js

@@ -88,7 +88,7 @@ export function MyIconButton({
         name={iconName}
         size={iconSize}
         color={color}
-        style={disabled && { opacity: 0.6 }}
+        style={disabled && AppStyles.disabled}
       />
     </TouchableOpacity>
   );

src/Components/ColorPicker/index.js

@@ -342,8 +342,8 @@ export function MyColorPickerV2({
                 VibrateShort();
               }}
             >
-              <>
+              {disabled ? (
-                {disabled && (
+                <>
                   <View
                     style={{
                       position: "absolute",
@@ -354,8 +354,19 @@ export function MyColorPickerV2({
                       borderRadius: 14,
                     }}
                   />
-                )}
+                  <View
-
+                    style={[
+                      {
+                        backgroundColor: color,
+                        width: 28,
+                        height: 28,
+                        borderRadius: 16,
+                      },
+                      AppStyles.Shadow,
+                    ]}
+                  />
+                </>
+              ) : (
                 <View
                   style={[
                     {
@@ -367,7 +378,7 @@ export function MyColorPickerV2({
                     AppStyles.Shadow,
                   ]}
                 />
-              </>
+              )}
             </TouchableHighlight>
           ))}
 

src/Components/Dropdown/index.js

@@ -1,10 +1,11 @@
 import { Text, View } from "react-native";
 import { TouchableOpacity } from "react-native";
-import { AppContext, IsPlatformIos } from "../../utils";
+import { AppContext, AppStyles, IsPlatformIos } from "../../utils";
 import { useContext } from "react";
 import MyIcon from "../Icon";
 
 export default function MyDropdown({
+  disabled,
   label,
   onPress,
   selectedItemLabel,
@@ -13,7 +14,11 @@ export default function MyDropdown({
   const appContext = useContext(AppContext);
 
   return (
-    <TouchableOpacity onPress={() => onPress()} style={style}>
+    <TouchableOpacity
+      disabled={disabled}
+      onPress={() => onPress()}
+      style={[style, disabled && AppStyles.disabled]}
+    >
       <View
         style={[
           {

src/Screens/Device/modals/ChooseScene/index.js

@@ -24,7 +24,7 @@ export default function ChooseSceneModalContent({ navigation, route }) {
     <ModalContainer>
       {deviceScenes.length === 0 ? (
         <MyResult
-          text={"Keine Szenen vorhanden"}
+          text={t("screens.device.scenes.modalChooseScene.noResult")}
           iconName={"selection-search"}
         />
       ) : (

src/Screens/Device/modals/EditActions/Lights/index.js

@@ -22,9 +22,12 @@ import Animated, {
   useSharedValue,
 } from "react-native-reanimated";
 import { Divider } from "../../../../../Components/Divider";
-import MyIcon from "../../../../../Components/Icon";
 import { MyIconButton } from "../../../../../Components/Button";
-import { ColorPickerRef } from "reanimated-color-picker";
+import { ColorPickerRef } from "reanimated-color-picker"; // used
+import EditActionAnimationsCardContent, {
+  EditActionAdjustmentContent,
+} from "..";
+import { useTranslation } from "react-i18next";
 
 function LightModeDefaultColor({
   sharedColor,
@@ -70,50 +73,33 @@ export function LightsEditActionModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const [lightModeDefaultColors, setLightModeDefaultColors] = useState([]);
   const sharedLightModeDefaultColors = useSharedValue([]);
-  const [selectedLightModeDefaultColor, setSelectedLightModeDefaultColor] =
+  const [selectedDefaultLightModeColor, setSelectedDefaultLightModeColor] =
     useState();
   const colorPickerRef = useRef(ColorPickerRef);
+  const { t } = useTranslation();
 
-  const { actionId } = route.params;
+  const { actionId, deviceFirmwareVersion } = route.params;
 
-  const supportedLightModes = appContext.deviceFirmwareModes.lightModes.filter(
+  const supportedDeviceLightModes =
-    (lightMode) =>
+    appContext.deviceFirmwareModes.lightModes.filter((lightMode) =>
-      lightMode.supportedFirmwareVersions.includes(
+      lightMode.supportedFirmwareVersions.includes(deviceFirmwareVersion)
-        route.params.deviceFirmwareVersion
+    );
-      )
-  );
 
-  const selectedLightModeId = appContext.deviceSceneActions.find(
+  const selectedSceneActionModeId = appContext.deviceSceneActions.find(
     (a) => a.actionId === actionId
   ).modeId;
 
-  const selectedLightMode = supportedLightModes.find(
+  const selectedLightMode = supportedDeviceLightModes.find(
-    (s) => s.id === selectedLightModeId
+    (s) => s.id === selectedSceneActionModeId
   );
 
   useEffect(() => {
     if (selectedLightMode !== undefined) {
-      console.log(
+      sharedLightModeDefaultColors.value = selectedLightMode.defaults;
-        "useEffect selectedLightModeId",
+      setLightModeDefaultColors(selectedLightMode.defaults);
-        selectedLightModeId,
+      setSelectedDefaultLightModeColor();
-        selectedLightMode.defaults
-      );
-
-      const filteredColors = selectedLightMode.defaults.filter(
-        (d) => d.type === "color"
-      );
-
-      const colors = [];
-
-      filteredColors.forEach((color) => colors.push(color.value));
-
-      console.log("here colors", colors);
-
-      sharedLightModeDefaultColors.value = colors;
-      setLightModeDefaultColors(colors);
-      setSelectedLightModeDefaultColor();
     }
-  }, [selectedLightModeId]);
+  }, [selectedSceneActionModeId]);
 
   return (
     <View
@@ -150,103 +136,131 @@ export function LightsEditActionModalContent({ navigation, route }) {
         <Card>
           <MyDropdown
             style={{ marginBottom: 2 }}
-            label="Wähle einen Farbmodus"
+            label={t(
+              "screens.device.scenes.modalLayersEditAction.dropdownColorModeSelection.label"
+            )}
             selectedItemLabel={
-              selectedLightModeId === ""
+              selectedSceneActionModeId === ""
-                ? "Kein Farbmodus ausgewählt"
+                ? t(
+                    "screens.device.scenes.modalLayersEditAction.dropdownColorModeSelection.noColorModeSelected"
+                  )
                 : selectedLightMode.name[appContext.appLanguage]
             }
             onPress={() =>
               navigation.navigate("modalLayersEditActionColorModeSelection", {
-                supportedLightModes: supportedLightModes,
+                supportedDeviceLightModes: supportedDeviceLightModes,
-                selectedLightModeId: selectedLightModeId,
+                selectedSceneActionModeId: selectedSceneActionModeId,
                 actionId: route.params.actionId,
               })
             }
           />
 
-          {selectedLightModeId !== "" && lightModeDefaultColors.length > 0 && (
+          {selectedSceneActionModeId !== "" && (
             <>
-              <View
+              {lightModeDefaultColors.length > 0 && (
-                style={{
+                <>
-                  flexDirection: "row",
+                  <View
-                  justifyContent: "space-between",
+                    style={{
-                  alignItems: "center",
+                      flexDirection: "row",
-                }}
+                      justifyContent: "space-between",
-              >
+                      alignItems: "center",
-                <Text
-                  style={[
-                    AppStyles.typography14,
-                    { marginTop: 4, marginBottom: 4 },
-                  ]}
-                >
-                  Modus spezifische Farben
-                </Text>
-
-                <MyIconButton iconName="restore" iconSize={24} />
-              </View>
-
-              <View
-                style={{
-                  flexDirection: "row",
-                  gap: 10,
-                  flexWrap: "wrap",
-                  justifyContent: "center",
-                }}
-              >
-                {lightModeDefaultColors.map((color, index) => (
-                  <TouchableOpacity
-                    key={index}
-                    onPress={() => {
-                      const newValue =
-                        selectedLightModeDefaultColor !== index
-                          ? index
-                          : undefined;
-
-                      setSelectedLightModeDefaultColor(newValue);
-
-                      if (newValue !== undefined) {
-                        colorPickerRef.current.setColor(
-                          sharedLightModeDefaultColors.value[index]
-                        );
-                      }
                     }}
                   >
-                    <LightModeDefaultColor
+                    <Text
-                      sharedColor={sharedLightModeDefaultColors}
+                      style={[
-                      index={index}
+                        AppStyles.typography14,
-                      backgroundColor={appContext.appTheme.backgroundColor}
+                        { marginTop: 4, marginBottom: 4 },
-                      selected={selectedLightModeDefaultColor === index}
+                      ]}
-                    />
+                    >
-                  </TouchableOpacity>
+                      {t(
-                ))}
+                        "screens.device.scenes.modalLayersEditAction.modeSpecificColors"
-              </View>
+                      )}
+                    </Text>
 
-              <Divider />
+                    <MyIconButton iconName="restore" iconSize={24} />
+                  </View>
+
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      gap: 10,
+                      flexWrap: "wrap",
+                      justifyContent: "center",
+                    }}
+                  >
+                    {lightModeDefaultColors.map((_, index) => (
+                      <TouchableOpacity
+                        key={index}
+                        onPress={() => {
+                          const newSelection =
+                            selectedDefaultLightModeColor !== index
+                              ? index
+                              : undefined;
+
+                          setSelectedDefaultLightModeColor(newSelection);
+
+                          if (newSelection !== undefined) {
+                            colorPickerRef.current.setColor(
+                              sharedLightModeDefaultColors.value[index]
+                            );
+                          }
+                        }}
+                      >
+                        <LightModeDefaultColor
+                          sharedColor={sharedLightModeDefaultColors}
+                          index={index}
+                          backgroundColor={appContext.appTheme.backgroundColor}
+                          selected={selectedDefaultLightModeColor === index}
+                        />
+                      </TouchableOpacity>
+                    ))}
+                  </View>
+
+                  <Divider />
+
+                  <MyColorPickerV2
+                    pickerRef={colorPickerRef}
+                    style={[
+                      selectedSceneActionModeId === "" && { marginTop: 10 },
+                    ]}
+                    appThemeText={appContext.appTheme.text}
+                    isUserExpertModeEnabled={appContext.isUserExpertModeEnabled}
+                    disabled={selectedDefaultLightModeColor === undefined}
+                    onColorPickerChange={(color) => {
+                      if (selectedDefaultLightModeColor !== undefined) {
+                        let newColors = sharedLightModeDefaultColors.value;
+
+                        newColors[selectedDefaultLightModeColor] = color;
+
+                        sharedLightModeDefaultColors.value = newColors;
+                      }
+                    }}
+                  />
+                </>
+              )}
+
+              {selectedLightMode.adjustments.length > 0 && (
+                <View style={{ marginTop: 2 }}>
+                  {selectedLightMode.adjustments.map((adjustment, index) => (
+                    <EditActionAdjustmentContent
+                      key={index}
+                      adjustment={adjustment}
+                      appThemeText={appContext.appTheme.text}
+                      appLanguage={appContext.appLanguage}
+                    />
+                  ))}
+                </View>
+              )}
             </>
           )}
-
-          <MyColorPickerV2
-            pickerRef={colorPickerRef}
-            style={[selectedLightModeId === "" && { marginTop: 10 }]}
-            appThemeText={appContext.appTheme.text}
-            isUserExpertModeEnabled={appContext.isUserExpertModeEnabled}
-            disabled={selectedLightModeDefaultColor === undefined}
-            onColorPickerChange={(color) => {
-              if (selectedLightModeDefaultColor !== undefined) {
-                let newColors = sharedLightModeDefaultColors.value;
-
-                newColors[selectedLightModeDefaultColor] = color;
-
-                sharedLightModeDefaultColors.value = newColors;
-              }
-            }}
-          />
         </Card>
 
-        {Array.from({ length: 1 }).map((_, i) => (
+        <EditActionAnimationsCardContent
-          <Card key={i} />
+          disabled={selectedSceneActionModeId === ""}
-        ))}
+          navigation={navigation}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          actionId={actionId}
+        />
       </ScrollView>
     </View>
   );
@@ -261,12 +275,12 @@ export function LayersEditActionColorModeSelectionModalContent({
   return (
     <ModalContainer>
       <FlatList
-        data={route.params.supportedLightModes}
+        data={route.params.supportedDeviceLightModes}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
           <MyPickerModalListItem
             itemName={item.name[appContext.appLanguage]}
-            itemSelected={route.params.selectedLightModeId === item.id}
+            itemSelected={route.params.selectedSceneActionModeId === item.id}
             onPress={() => {
               appContext.setDeviceSceneActions((arr) => {
                 const newArr = [...arr];

src/Screens/Device/modals/EditActions/index.js

@@ -0,0 +1,222 @@
+import { FlatList, Text, View } from "react-native";
+import Card from "../../../../Components/Card";
+import {
+  AppContext,
+  AppStyles,
+  IsPlatformIos,
+  ModalContainer,
+} from "../../../../utils";
+import MyDropdown from "../../../../Components/Dropdown";
+import { useContext } from "react";
+import MyResult from "../../../../Components/Result";
+import { MyPickerModalListItem } from "../../../../Components/Modal";
+import MyIcon from "../../../../Components/Icon";
+import MySlider from "../../../../Components/Slider";
+import { useTranslation } from "react-i18next";
+
+export default function EditActionAnimationsCardContent({
+  disabled,
+  navigation,
+  deviceFirmwareVersion,
+  actionId,
+}) {
+  const appContext = useContext(AppContext);
+  const { t } = useTranslation();
+
+  const deviceSceneAction = appContext.deviceSceneActions.find(
+    (action) => action.actionId === actionId
+  );
+
+  const selectedLightAnimationIn =
+    appContext.deviceFirmwareModes.lightAnimationsIn.find(
+      (animation) => animation.id === deviceSceneAction.animationInId
+    );
+
+  const selectedLightAnimationOut =
+    appContext.deviceFirmwareModes.lightAnimationsOut.find(
+      (animation) => animation.id === deviceSceneAction.animationOutId
+    );
+
+  return (
+    <>
+      <Card>
+        <Text style={[AppStyles.typography14, { fontWeight: "bold" }]}>
+          {t(
+            "screens.device.scenes.editActionAnimationsCardContent.animationsIn"
+          )}
+        </Text>
+
+        <MyDropdown
+          disabled={disabled}
+          style={{ marginTop: 2 }}
+          label={t(
+            "screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationIn.label"
+          )}
+          selectedItemLabel={
+            selectedLightAnimationIn.name[appContext.appLanguage]
+          }
+          onPress={() =>
+            navigation.navigate("modalEditActionAnimationInSelection", {
+              animationType: "animationIn",
+              deviceFirmwareVersion: deviceFirmwareVersion,
+              actionId: actionId,
+            })
+          }
+        />
+
+        {selectedLightAnimationIn.adjustments.length > 0 &&
+          selectedLightAnimationIn.adjustments.map((adjustment, index) => (
+            <EditActionAdjustmentContent
+              key={index}
+              adjustment={adjustment}
+              appLanguage={appContext.appLanguage}
+              appThemeText={appContext.appTheme.text}
+            />
+          ))}
+
+        <Text
+          style={[AppStyles.typography14, { fontWeight: "bold", marginTop: 6 }]}
+        >
+          {t(
+            "screens.device.scenes.editActionAnimationsCardContent.animationsOut"
+          )}
+        </Text>
+
+        <MyDropdown
+          disabled={disabled}
+          style={{ marginTop: 2 }}
+          label={t(
+            "screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationOut.label"
+          )}
+          selectedItemLabel={
+            selectedLightAnimationOut.name[appContext.appLanguage]
+          }
+          onPress={() =>
+            navigation.navigate("modalEditActionAnimationOutSelection", {
+              animationType: "animationOut",
+              deviceFirmwareVersion: deviceFirmwareVersion,
+              actionId: actionId,
+            })
+          }
+        />
+
+        {selectedLightAnimationOut.adjustments.length > 0 &&
+          selectedLightAnimationOut.adjustments.map((adjustment, index) => (
+            <EditActionAdjustmentContent
+              key={index}
+              adjustment={adjustment}
+              appLanguage={appContext.appLanguage}
+              appThemeText={appContext.appTheme.text}
+            />
+          ))}
+      </Card>
+    </>
+  );
+}
+
+export function EditActionAnimationSelectionModalContent({
+  navigation,
+  route,
+}) {
+  const appContext = useContext(AppContext);
+
+  let { animationType, deviceFirmwareVersion, actionId } = route.params;
+
+  const supportedLightAnimations =
+    animationType === "animationIn"
+      ? appContext.deviceFirmwareModes.lightAnimationsIn.filter(
+          (animation) =>
+            animation.supportedFirmwareVersions.includes(
+              deviceFirmwareVersion
+            ) || animation.supportedFirmwareVersions.includes("*")
+        )
+      : appContext.deviceFirmwareModes.lightAnimationsOut.filter(
+          (animation) =>
+            animation.supportedFirmwareVersions.includes(
+              deviceFirmwareVersion
+            ) || animation.supportedFirmwareVersions.includes("*")
+        );
+
+  const deviceSceneAction = appContext.deviceSceneActions.find(
+    (action) => action.actionId === actionId
+  );
+
+  animationType =
+    animationType === "animationIn" ? "animationInId" : "animationOutId";
+
+  return (
+    <ModalContainer>
+      {supportedLightAnimations.length === 0 ? (
+        <MyResult
+          text={
+            animationType === "animationInId"
+              ? t(
+                  "screens.device.scenes.modalEditActionAnimationInSelection.noResult"
+                )
+              : t(
+                  "screens.device.scenes.modalEditActionAnimationOutSelection.noResult"
+                )
+          }
+          iconName="select-search"
+        />
+      ) : (
+        <FlatList
+          data={supportedLightAnimations}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <MyPickerModalListItem
+              itemName={item.name[appContext.appLanguage]}
+              itemSelected={deviceSceneAction[animationType] === item.id}
+              onPress={() => {
+                navigation.goBack();
+
+                appContext.setDeviceSceneActions((arr) => {
+                  const newArr = [...arr];
+
+                  const foundActionIndex = newArr.findIndex(
+                    (action) => action.actionId === actionId
+                  );
+
+                  newArr[foundActionIndex][animationType] = item.id;
+
+                  return newArr;
+                });
+              }}
+            />
+          )}
+        />
+      )}
+    </ModalContainer>
+  );
+}
+
+export function EditActionAdjustmentContent({
+  adjustment,
+  appThemeText,
+  appLanguage,
+}) {
+  if (adjustment.type === "slider") {
+    return (
+      <>
+        <Text style={[AppStyles.typography14, { color: appThemeText }]}>
+          {adjustment.name[appLanguage]}
+        </Text>
+
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <MyIcon name={adjustment.iconName} size={24} />
+
+          <MySlider
+            style={[{ flex: 1 }, IsPlatformIos() && { marginLeft: 6 }]}
+            minimumValue={adjustment.min}
+            maximumValue={adjustment.max}
+            onValueChange={(v) =>
+              console.log(`change ${adjustment.variableName}`, v)
+            }
+          />
+        </View>
+      </>
+    );
+  }
+
+  return <></>;
+}

src/utils.js

@@ -54,6 +54,9 @@ export const AppStyles = StyleSheet.create({
     flex: 1,
     padding: 10,
   },
+  disabled: {
+    opacity: 0.6,
+  },
 });
 
 const DarkAppTheme = {
@@ -190,47 +193,38 @@ const devDevicesFirmwareModes = {
   lightModes: [
     {
       id: "6138e651-54c5-4fd4-8f40-3364f4e9dfe2",
-      type: "solidColor",
       supportedFirmwareVersions: ["1.0.1"],
       name: {
         de: "Einfarbig",
         en: "Solid",
       },
-      defaults: [
+      defaults: ["red"],
-        {
-          type: "color",
-          value: "red",
-        },
-      ],
       adjustments: [],
     },
     {
       id: "c7097a60-faa9-4928-a531-0a8ecbc115d9",
-      type: "multipleColors",
       supportedFirmwareVersions: ["1.0.1"],
       name: {
         de: "Zufällig",
         en: "Random",
       },
-      defaults: [
+      defaults: ["red", "orange", "blue"],
+      adjustments: [
         {
-          type: "color",
+          type: "slider",
-          value: "red",
+          variableName: "colorSwitching",
-        },
+          iconName: "fan",
-        {
+          name: {
-          type: "color",
+            de: "Wechsel der Farben",
-          value: "orange",
+            en: "Color changing",
-        },
+          },
-        {
+          min: 0,
-          type: "color",
+          max: 6,
-          value: "blue",
         },
       ],
-      adjustments: [],
     },
     {
       id: "b42c665a-c2ab-4029-9162-2280caae3274",
-      type: "multipleColors",
       supportedFirmwareVersions: ["1.0.1"],
       name: {
         de: "Regenbogen",
@@ -240,53 +234,73 @@ const devDevicesFirmwareModes = {
       adjustments: [
         {
           type: "slider",
+          variableName: "modeSpeed",
+          iconName: "fan",
           name: {
             de: "Schnelligkeit des Modus",
             en: "Speed of the mode",
           },
+          min: 0,
+          max: 100,
         },
-      ],
-    },
-  ],
-  motorModes: [
-    {
-      type: "motor",
-      name: {
-        de: "Hin und her",
-        en: "Back and forth",
-      },
-      defaults: [],
-      adjustments: [
         {
           type: "slider",
+          variableName: "repeatingInterval",
+          iconName: "repeat-variant",
           name: {
-            de: "Schnelligkeit von hin und her",
+            de: "Wiederholungsinterval",
-            en: "Speed of the back and forth",
+            en: "Repeating interval",
           },
+          min: 1,
+          max: 10,
         },
       ],
     },
   ],
-  animationsIn: [
+  lightAnimationsIn: [
     {
+      id: "00000000-0000-0000-0000-000000000000",
+      supportedFirmwareVersions: ["*"],
+      name: {
+        de: "Keine",
+        en: "None",
+      },
+      adjustments: [],
+    },
+    {
+      id: "6c5570da-ec53-4788-a8cd-03c724eb81b8",
       supportedFirmwareVersions: ["1.0.1"],
       name: {
-        de: "Aufblendung",
+        de: "Aufblenden",
         en: "Fade in",
       },
       adjustments: [
         {
           type: "slider",
+          variableName: "duration",
           name: {
             de: "Dauer",
             en: "Duration",
           },
+          iconName: "repeat-variant",
+          min: 1,
+          max: 60,
         },
       ],
     },
   ],
-  animationsOut: [
+  lightAnimationsOut: [
     {
+      id: "00000000-0000-0000-0000-000000000000",
+      supportedFirmwareVersions: ["*"],
+      name: {
+        de: "Keine",
+        en: "None",
+      },
+      adjustments: [],
+    },
+    {
+      id: "cb5b791e-213c-4684-9585-b0c42cbfafb5",
       supportedFirmwareVersions: ["1.0.1"],
       name: {
         de: "Ausblenden",
@@ -295,14 +309,30 @@ const devDevicesFirmwareModes = {
       adjustments: [
         {
           type: "slider",
+          variableName: "duration",
           name: {
             de: "Dauer",
             en: "Duration",
           },
+          iconName: "repeat-variant",
+          min: 1,
+          max: 60,
         },
       ],
     },
   ],
+  motorModes: [
+    {
+      id: "41de8c57-fc99-40a4-b6eb-a8d0d4569bc8",
+      type: "motor",
+      name: {
+        de: "Hin und her",
+        en: "Back and forth",
+      },
+      defaults: [],
+      adjustments: [],
+    },
+  ],
 };
 
 export const DevDeviceId = "1f21a12a-0bec-4336-99bb-df3f9fc9f537";
@@ -318,18 +348,6 @@ const devDevices = [
       lastUpdated: "11.07.2023 um 20:33 Uhr",
     },
     selectedScene: null,
-    /*scenes: [
-      {
-        id: "2f21a12a-0bec-4336-99bb-df3f9fc9f537",
-        name: "Szene 1",
-        actions: [],
-      },
-      {
-        id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
-        name: "Szene 2",
-        actions: [],
-      },
-    ],*/
   },
   {
     id: "5b331a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
@@ -340,7 +358,6 @@ const devDevices = [
       lastUpdated: "11.07.2023 um 20:33 Uhr",
     },
     selectedScene: null,
-    //scenes: [],
   },
 ];
 
@@ -363,10 +380,12 @@ export function NewEmptyDeviceScene(name) {
 
 const devDeviceSceneActions = [
   {
-    actionId: "", // actionId
+    actionId: "", // random id
     sceneId: "",
-    type: "",
+    type: "", // layers, ambilight, motor
     modeId: "",
+    animationInId: "",
+    animationOutId: "",
   },
 ];
 
@@ -376,85 +395,15 @@ export function NewAction(sceneId, actionType) {
     sceneId: sceneId,
     type: actionType, // layers, ambilight, motor
     modeId: "",
+    animationInId: "00000000-0000-0000-0000-000000000000",
+    animationOutId: "00000000-0000-0000-0000-000000000000",
   };
 }
 
-/*const devDeviceScenes = [
-  {
-    deviceId: "",
-    scenes: [
-      {
-        id: "",
-        name: "",
-      },
-    ],
-  },
-];
-
-const devDeviceSceneActions = [
-  {
-    sceneId: "",
-    actions: [
-      {
-        id: "",
-        modeId: "",
-      },
-    ],
-  },
-];*/
-
 export function GetDevice(devices) {
   return devices.find((d) => d.id === AppSelectedUserDevice.current.id);
 }
 
-/*
-export function NewInitialDeviceScene(deviceId) {
-  return {
-    deviceId: deviceId,
-    scenes: [],
-  };
-}
-
-export function NewInitialDeviceSceneAction(sceneId) {
-  return {
-    sceneId: sceneId,
-    actions: [],
-  };
-}
-
-export function NewEmptyDeviceScene(name) {
-  return {
-    id: GetUuid(),
-    name: name,
-  };
-}
-
-export function NewAction(actionType) {
-  return {
-    id: GetUuid(),
-    type: actionType, // layers, ambilight, motor
-    modeId: "",
-  };
-}
-
-
-
-export function GetDeviceScene(deviceScenes, sceneId) {
-  const deviceScene = deviceScenes.find(
-    (d) => d.deviceId === AppSelectedUserDevice.current.id
-  );
-
-  if (deviceScene === undefined) return [];
-
-  return deviceScene.scenes.find((s) => s.id === sceneId);
-}
-
-export function GetDeviceSceneAction(sceneActions, sceneId, actionId) {
-  return sceneActions
-    .find((s) => s.sceneId === sceneId)
-    .actions.find((a) => a.id === actionId);
-} */
-
 const appContextPreview = {
   appColorScheme: "",
   appLanguage: "",