From 9f934c553f8cda1c20ee0b9c9ca50255ba3d114e Mon Sep 17 00:00:00 2001 From: alex Date: Sat, 29 Jul 2023 09:32:32 +0000 Subject: [PATCH] light animations --- App.js | 32 ++- locales/de.json | 32 ++- locales/en.json | 32 ++- src/Components/Button/index.js | 2 +- src/Components/ColorPicker/index.js | 21 +- src/Components/Dropdown/index.js | 9 +- .../Device/modals/ChooseScene/index.js | 2 +- .../Device/modals/EditActions/Lights/index.js | 242 +++++++++--------- .../Device/modals/EditActions/index.js | 222 ++++++++++++++++ src/utils.js | 199 ++++++-------- 10 files changed, 532 insertions(+), 261 deletions(-) create mode 100644 src/Screens/Device/modals/EditActions/index.js diff --git a/App.js b/App.js index 0c17e5f..921000a 100644 --- a/App.js +++ b/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() { } /> + + options({ + navigation: navigation, + pageTitle: t( + "screens.device.scenes.modalEditActionAnimationInSelection.pageTitle" + ), + }) + } + /> + + + options({ + navigation: navigation, + pageTitle: t( + "screens.device.scenes.modalEditActionAnimationOutSelection.pageTitle" + ), + }) + } + /> + ); diff --git a/src/Components/ColorPicker/index.js b/src/Components/ColorPicker/index.js index 697e6d7..8adcf81 100644 --- a/src/Components/ColorPicker/index.js +++ b/src/Components/ColorPicker/index.js @@ -342,8 +342,8 @@ export function MyColorPickerV2({ VibrateShort(); }} > - <> - {disabled && ( + {disabled ? ( + <> - )} - + + + ) : ( - + )} ))} diff --git a/src/Components/Dropdown/index.js b/src/Components/Dropdown/index.js index f2f1e46..084e04d 100644 --- a/src/Components/Dropdown/index.js +++ b/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 ( - onPress()} style={style}> + onPress()} + style={[style, disabled && AppStyles.disabled]} + > {deviceScenes.length === 0 ? ( ) : ( diff --git a/src/Screens/Device/modals/EditActions/Lights/index.js b/src/Screens/Device/modals/EditActions/Lights/index.js index a3fbb1b..fcf65bb 100644 --- a/src/Screens/Device/modals/EditActions/Lights/index.js +++ b/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( - (lightMode) => - lightMode.supportedFirmwareVersions.includes( - route.params.deviceFirmwareVersion - ) - ); + const supportedDeviceLightModes = + appContext.deviceFirmwareModes.lightModes.filter((lightMode) => + lightMode.supportedFirmwareVersions.includes(deviceFirmwareVersion) + ); - const selectedLightModeId = appContext.deviceSceneActions.find( + const selectedSceneActionModeId = appContext.deviceSceneActions.find( (a) => a.actionId === actionId ).modeId; - const selectedLightMode = supportedLightModes.find( - (s) => s.id === selectedLightModeId + const selectedLightMode = supportedDeviceLightModes.find( + (s) => s.id === selectedSceneActionModeId ); useEffect(() => { if (selectedLightMode !== undefined) { - console.log( - "useEffect selectedLightModeId", - selectedLightModeId, - 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(); + sharedLightModeDefaultColors.value = selectedLightMode.defaults; + setLightModeDefaultColors(selectedLightMode.defaults); + setSelectedDefaultLightModeColor(); } - }, [selectedLightModeId]); + }, [selectedSceneActionModeId]); return ( navigation.navigate("modalLayersEditActionColorModeSelection", { - supportedLightModes: supportedLightModes, - selectedLightModeId: selectedLightModeId, + supportedDeviceLightModes: supportedDeviceLightModes, + selectedSceneActionModeId: selectedSceneActionModeId, actionId: route.params.actionId, }) } /> - {selectedLightModeId !== "" && lightModeDefaultColors.length > 0 && ( + {selectedSceneActionModeId !== "" && ( <> - - - Modus spezifische Farben - - - - - - - {lightModeDefaultColors.map((color, index) => ( - { - const newValue = - selectedLightModeDefaultColor !== index - ? index - : undefined; - - setSelectedLightModeDefaultColor(newValue); - - if (newValue !== undefined) { - colorPickerRef.current.setColor( - sharedLightModeDefaultColors.value[index] - ); - } + {lightModeDefaultColors.length > 0 && ( + <> + - - - ))} - + + {t( + "screens.device.scenes.modalLayersEditAction.modeSpecificColors" + )} + - + + + + + {lightModeDefaultColors.map((_, index) => ( + { + const newSelection = + selectedDefaultLightModeColor !== index + ? index + : undefined; + + setSelectedDefaultLightModeColor(newSelection); + + if (newSelection !== undefined) { + colorPickerRef.current.setColor( + sharedLightModeDefaultColors.value[index] + ); + } + }} + > + + + ))} + + + + + { + if (selectedDefaultLightModeColor !== undefined) { + let newColors = sharedLightModeDefaultColors.value; + + newColors[selectedDefaultLightModeColor] = color; + + sharedLightModeDefaultColors.value = newColors; + } + }} + /> + + )} + + {selectedLightMode.adjustments.length > 0 && ( + + {selectedLightMode.adjustments.map((adjustment, index) => ( + + ))} + + )} )} - - { - if (selectedLightModeDefaultColor !== undefined) { - let newColors = sharedLightModeDefaultColors.value; - - newColors[selectedLightModeDefaultColor] = color; - - sharedLightModeDefaultColors.value = newColors; - } - }} - /> - {Array.from({ length: 1 }).map((_, i) => ( - - ))} + ); @@ -261,12 +275,12 @@ export function LayersEditActionColorModeSelectionModalContent({ return ( item.id} renderItem={({ item }) => ( { appContext.setDeviceSceneActions((arr) => { const newArr = [...arr]; diff --git a/src/Screens/Device/modals/EditActions/index.js b/src/Screens/Device/modals/EditActions/index.js new file mode 100644 index 0000000..eac8729 --- /dev/null +++ b/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 ( + <> + + + {t( + "screens.device.scenes.editActionAnimationsCardContent.animationsIn" + )} + + + + navigation.navigate("modalEditActionAnimationInSelection", { + animationType: "animationIn", + deviceFirmwareVersion: deviceFirmwareVersion, + actionId: actionId, + }) + } + /> + + {selectedLightAnimationIn.adjustments.length > 0 && + selectedLightAnimationIn.adjustments.map((adjustment, index) => ( + + ))} + + + {t( + "screens.device.scenes.editActionAnimationsCardContent.animationsOut" + )} + + + + navigation.navigate("modalEditActionAnimationOutSelection", { + animationType: "animationOut", + deviceFirmwareVersion: deviceFirmwareVersion, + actionId: actionId, + }) + } + /> + + {selectedLightAnimationOut.adjustments.length > 0 && + selectedLightAnimationOut.adjustments.map((adjustment, index) => ( + + ))} + + + ); +} + +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 ( + + {supportedLightAnimations.length === 0 ? ( + + ) : ( + item.id} + renderItem={({ item }) => ( + { + navigation.goBack(); + + appContext.setDeviceSceneActions((arr) => { + const newArr = [...arr]; + + const foundActionIndex = newArr.findIndex( + (action) => action.actionId === actionId + ); + + newArr[foundActionIndex][animationType] = item.id; + + return newArr; + }); + }} + /> + )} + /> + )} + + ); +} + +export function EditActionAdjustmentContent({ + adjustment, + appThemeText, + appLanguage, +}) { + if (adjustment.type === "slider") { + return ( + <> + + {adjustment.name[appLanguage]} + + + + + + + console.log(`change ${adjustment.variableName}`, v) + } + /> + + + ); + } + + return <>; +} diff --git a/src/utils.js b/src/utils.js index 992b3eb..b586223 100644 --- a/src/utils.js +++ b/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: [ - { - type: "color", - value: "red", - }, - ], + defaults: ["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", - value: "red", - }, - { - type: "color", - value: "orange", - }, - { - type: "color", - value: "blue", + type: "slider", + variableName: "colorSwitching", + iconName: "fan", + name: { + de: "Wechsel der Farben", + en: "Color changing", + }, + min: 0, + max: 6, }, ], - 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", - en: "Speed of the back and forth", + de: "Wiederholungsinterval", + 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: "",