@ledvance/ui-biz-bundle 1.1.66 → 1.1.67

package/src/newModules/sleepWakeUp/SleepWakeUpPage.tsx

@@ -0,0 +1,456 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import { StyleSheet, View, Text, Image, FlatList } from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import Tag from '@ledvance/base/src/components/Tag'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { useNavigation } from '@react-navigation/native'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res'
+import { useDeviceInfo, useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { useReactive, useUpdateEffect } from "ahooks";
+import CustomListDialog from "@ledvance/base/src/components/CustomListDialog";
+import { SwitchButton, Utils } from "tuya-panel-kit";
+import { convertMinutesTo12HourFormat, loopText } from "@ledvance/base/src/utils/common";
+import TextButton from "@ledvance/base/src/components/TextButton";
+import { ui_biz_routerKey } from '../../navigation/Routers'
+import { cloneDeep } from "lodash";
+import { sleepNode2Dp, useSleepMode, useWakeUp, wakeUpNode2Dp } from "./SleepWakeUpActions";
+import { SleepUIItem, WakeUpUIItem } from "./Interface";
+import Card from "@ledvance/base/src/components/Card";
+import { useParams } from "@ledvance/base/src/hooks/Hooks";
+import { ApplyForItem } from "../timeSchedule/Interface";
+import InfoText from "@ledvance/base/src/components/InfoText";
+
+const cx = Utils.RatioUtils.convertX
+
+export interface SleepWakeUpPageRouteParams {
+  isSupportColor?: boolean
+  isSupportTemperature?: boolean
+  isSupportBrightness?: boolean
+  isMixLight?: boolean
+  sleepModeDpCode: string
+  wakeUpDpCode: string
+  conflictDps: {
+    randomTimeDpCode?: string
+    fixedTimeDpCode?: string
+    biorhythmDpCode?: string
+  }
+  applyForList: ApplyForItem[];
+}
+
+const MAX_SCHEDULE = 4
+const SleepWakeUpPage = () => {
+  const deviceInfo = useDeviceInfo()
+  const navigation = useNavigation()
+  const is24HourClock = useSystemTimeFormate()
+  const params = useParams<SleepWakeUpPageRouteParams>()
+  const [wakeUpList, setWakeUpList, wakeupComplete] = useWakeUp(params.wakeUpDpCode)
+  const [sleepList, setSleepList, sleepComplete] = useSleepMode(params.sleepModeDpCode)
+  const state = useReactive({
+    showAddSchedulePopover: false,
+    sleepTagChecked: false,
+    wakeUpTagChecked: false,
+    sleepScheduleList: cloneDeep(sleepList),
+    wakeUpScheduleList: cloneDeep(wakeUpList),
+    filteredScheduleList: [] as any[],
+    flag: Symbol(),
+    loading: true
+  })
+
+  const isMaxNum = useMemo(() => {
+    return state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  useUpdateEffect(() => {
+    console.log(sleepList, '< --- sleepList')
+    state.sleepScheduleList = cloneDeep(sleepList)
+  }, [JSON.stringify(sleepList)])
+
+  useUpdateEffect(() => {
+    console.log(wakeUpList, '< --- wakeUpList')
+    state.wakeUpScheduleList = cloneDeep(wakeUpList)
+  }, [JSON.stringify(wakeUpList)])
+
+  useUpdateEffect(() => {
+    state.loading = !wakeupComplete && !sleepComplete
+  }, [wakeupComplete, sleepComplete])
+
+  const onAddScheduleDialogItemClick = useCallback((isSleep: boolean, mode: 'add' | 'edit', scheduleItem?: any) => {
+    if (mode === 'add' && isSleep && state.sleepScheduleList.length === MAX_SCHEDULE) return
+    if (mode === 'add' && !isSleep && state.wakeUpScheduleList.length === MAX_SCHEDULE) return
+    navigateToEdit({
+      ...params,
+      mode,
+      isSleep,
+      scheduleItem: cloneDeep(scheduleItem),
+      modDeleteTimeSchedule
+    })
+    state.showAddSchedulePopover = false
+  }, [state.filteredScheduleList])
+
+  const modDeleteTimeSchedule = async (mode: 'add' | 'edit' | 'del', isSleep: boolean, sleepWakeUp: SleepUIItem | WakeUpUIItem) => {
+    let cloneSleepWakeUp: any[] = isSleep ? cloneDeep(state.sleepScheduleList) : cloneDeep(state.wakeUpScheduleList)
+    if (mode === 'add') {
+      cloneSleepWakeUp = [
+        ...cloneSleepWakeUp,
+        {
+          ...sleepWakeUp,
+          id: cloneSleepWakeUp.length,
+          nodeHex: isSleep ? sleepNode2Dp(sleepWakeUp) : wakeUpNode2Dp(sleepWakeUp as WakeUpUIItem)
+        }
+      ]
+    }
+    if (mode === 'del') {
+      cloneSleepWakeUp = cloneSleepWakeUp.filter(item => sleepWakeUp.id !== item.id)
+    }
+    if (mode === 'edit') {
+      cloneSleepWakeUp = cloneSleepWakeUp.map(item => {
+        if (item.id === sleepWakeUp.id) {
+          return sleepWakeUp
+        }
+        return item
+      })
+    }
+    const def = {
+      version: 0,
+      num: cloneSleepWakeUp.length,
+      nodes: cloneDeep(cloneSleepWakeUp)
+    }
+    const res = isSleep ? await setSleepList(def) : await setWakeUpList(def)
+    if (res.success) {
+      if (isSleep) {
+        state.sleepScheduleList = cloneDeep(cloneSleepWakeUp)
+      } else {
+        state.wakeUpScheduleList = cloneDeep(cloneSleepWakeUp)
+      }
+      return {
+        success: true
+      }
+    } else {
+      return {
+        success: false
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (state.sleepTagChecked === state.wakeUpTagChecked) {
+      state.filteredScheduleList = [...state.sleepScheduleList, ...state.wakeUpScheduleList]
+    } else if (state.sleepTagChecked) {
+      state.filteredScheduleList = state.sleepScheduleList
+    } else {
+      state.filteredScheduleList = state.wakeUpScheduleList
+    }
+  }, [state.sleepTagChecked, state.wakeUpTagChecked, state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const getTipText = useCallback(() => {
+    if (state.sleepScheduleList.length >= MAX_SCHEDULE && state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "both"
+    if (state.sleepScheduleList.length >= MAX_SCHEDULE) return "sleep"
+    if (state.wakeUpScheduleList.length >= MAX_SCHEDULE) return "wakeup"
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const hasScheduleList = useCallback(() => {
+    return !!(state.sleepScheduleList.length && state.wakeUpScheduleList.length)
+  }, [state.sleepScheduleList, state.wakeUpScheduleList])
+
+  const navigateToEdit = (params) => {
+    navigation.navigate(ui_biz_routerKey.ui_biz_sleep_wakeUp_edit_new, params)
+  }
+
+  const isSleepMax = useMemo(() => {
+    return state.sleepScheduleList.length >= MAX_SCHEDULE
+  }, [state.sleepScheduleList.length])
+
+  const isWakeUpMax = useMemo(() => {
+    return state.wakeUpScheduleList.length >= MAX_SCHEDULE
+  }, [state.wakeUpScheduleList.length])
+
+  const tipText = useMemo(() => {
+    const tip = getTipText()
+    if (tip === 'sleep') return I18n.getLang('sleepwakeschedule_warning_max_number_sleep_text')
+    if (tip === 'wakeup') return I18n.getLang('sleepwakeschedule_warning_max_number_wakeup_text')
+    if (tip === 'both') return I18n.getLang('sleepwakeschedule_warning_max_number_both_text')
+    return ''
+  }, [getTipText()])
+
+  return (
+    <>
+      <Page
+        backText={deviceInfo.name}
+        onBackClick={navigation.goBack}
+        headlineText={I18n.getLang('add_sleepschedule_one_source_system_back_text')}
+        headlineIcon={isMaxNum ? undefined : res.device_panel_schedule_add}
+        onHeadlineIconClick={() => {
+          state.showAddSchedulePopover = !state.showAddSchedulePopover
+        }}
+        loading={state.loading}
+      >
+        <View style={{ marginHorizontal: cx(24) }}>
+          <Text style={{ color: '#000', fontSize: cx(12) }}>
+            {I18n.getLang('timeschedule_overview_description_text')}
+          </Text>
+        </View>
+        <Spacer height={cx(5)} />
+        {!!getTipText() && <InfoText
+          style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
+          icon={res.ic_warning_amber}
+          iconStyle={{ width: cx(16), height: cx(16) }}
+          contentColor="#FF9500"
+          text={tipText}
+          textStyle={{ fontSize: cx(12) }}
+        />}
+        {hasScheduleList() && <>
+          <View style={styles.tagLine}>
+            <Tag
+              checked={state.sleepTagChecked}
+              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips2_text')}
+              onCheckedChange={checked => {
+                state.sleepTagChecked = checked
+              }} />
+            <Spacer width={cx(8)} height={0} />
+            <Tag
+              checked={state.wakeUpTagChecked}
+              text={I18n.getLang('sleepwakeschedule_field_3_Times_chips_text')}
+              onCheckedChange={checked => {
+                state.wakeUpTagChecked = checked
+              }} />
+          </View>
+          <Spacer height={cx(5)} />
+        </>}
+        {state.filteredScheduleList.length ?
+          <FlatList
+            data={state.filteredScheduleList}
+            renderItem={({ item }) => (
+              <SleepWakeUpCard
+                is24HourClock={is24HourClock}
+                sleepWakeUp={item}
+                onPress={() => {
+                  onAddScheduleDialogItemClick(item.isSleep, 'edit', item)
+                }}
+                onSwitch={async (v) => {
+                  await modDeleteTimeSchedule('edit', item.isSleep, {
+                    ...item,
+                    enable: v ? 1 : 0
+                  })
+                }}
+              />
+            )}
+            ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+            ItemSeparatorComponent={() => (<Spacer />)}
+            ListFooterComponent={() => (<Spacer />)}
+            keyExtractor={(item, idx) => `${item.isSleep ? 'sleep' : 'wakeUp'}_${idx}`}
+          /> :
+          <View style={styles.emptyListCon}>
+            <Spacer height={cx(70)} />
+            <Image
+              style={styles.emptyImage}
+              source={res.scheduleEmpty}
+              resizeMode="contain" />
+            <Spacer height={cx(20)} />
+            <View style={styles.emptyText}>
+              <Image
+                source={{ uri: res.device_panel_schedule_alert }}
+                style={{ width: cx(16), height: cx(16) }}
+              />
+              <Text style={styles.emptyNoTime}>
+                {
+                  !hasScheduleList() ?
+                    I18n.getLang('sleepwakeschedule_empty_information_text') :
+                    I18n.getLang('sleepwakeschedule_empty_filtering_information_text')
+                }
+              </Text>
+            </View>
+            {!hasScheduleList() &&
+              <View style={styles.emptyBtnView}>
+                <Spacer />
+                <TextButton
+                  style={styles.emptyBtn}
+                  textStyle={isSleepMax ? styles.disableItemText : { color: '#fff' }}
+                  text={I18n.getLang('sleepwakeschedule_add_button_text1')}
+                  onPress={() => onAddScheduleDialogItemClick(true, 'add', getNewSleepWakeUp(true, params))}
+                />
+                <Spacer />
+                <TextButton
+                  style={styles.emptyBtn}
+                  textStyle={isWakeUpMax ? styles.disableItemText : { color: '#fff' }}
+                  text={I18n.getLang('sleepwakeschedule_add_button_text2')}
+                  onPress={() => onAddScheduleDialogItemClick(false, 'add', getNewSleepWakeUp(false, params))}
+                />
+              </View>}
+          </View>
+        }
+      </Page>
+      <CustomListDialog
+        show={state.showAddSchedulePopover}
+        style={styles.addMoodPopover}
+        itemStyle={styles.popoverItem}
+        onDismiss={() => {
+          state.showAddSchedulePopover = false
+        }}
+        data={[
+          {
+            text: I18n.getLang('sleepwakeschedule_add_button_text1'),
+            value: true,
+            isMax: isSleepMax
+          },
+          {
+            text: I18n.getLang('sleepwakeschedule_add_button_text2'),
+            value: false,
+            isMax: isWakeUpMax
+          },
+        ]}
+        onItemPress={(isSleep) => onAddScheduleDialogItemClick(isSleep, 'add', getNewSleepWakeUp(isSleep, params))}
+      />
+    </>
+  )
+}
+
+const SleepWakeUpCard = (props: {
+  sleepWakeUp: SleepUIItem | WakeUpUIItem,
+  onSwitch: (enable: boolean) => void,
+  onPress: () => void
+  is24HourClock: boolean
+}) => {
+  const { sleepWakeUp, is24HourClock, onSwitch, onPress } = props
+  return (
+    <Card style={styles.randomTimingCard} onPress={onPress}>
+      <Spacer height={cx(16)} />
+      <View style={styles.switchLine}>
+        <Text style={styles.time}>
+          {`${convertMinutesTo12HourFormat(sleepWakeUp.startTime, is24HourClock)} - ${convertMinutesTo12HourFormat(sleepWakeUp.endTime, is24HourClock)}`}</Text>
+        <SwitchButton
+          value={sleepWakeUp.enable}
+          thumbStyle={{ elevation: 0 }}
+          onValueChange={onSwitch} />
+      </View>
+      <Text style={styles.loopText}>{loopText(sleepWakeUp.weeks)}</Text>
+      <Spacer height={cx(5)} />
+      <Text style={styles.loopText}>{sleepWakeUp.name}</Text>
+      <Spacer height={cx(10)} />
+      <View style={styles.tag}>
+        <Text style={styles.tagTitle}>
+          {I18n.getLang(sleepWakeUp.isSleep ? 'sleepwakeschedule_field_3_Times_chips2_text' : 'sleepwakeschedule_field_3_Times_chips_text')}
+        </Text>
+      </View>
+      <Spacer />
+    </Card>
+  )
+}
+
+const getNewSleepWakeUp = (isSleep: boolean, params: SleepWakeUpPageRouteParams) => {
+  const def = {
+    name: '',
+    weeks: [0, 0, 0, 0, 0, 0, 0],
+    delay: 6,
+    hour: isSleep ? 23 : 7,
+    minute: 0,
+    h: 0,
+    s: 100,
+    v: 100,
+    brightness: 100,
+    temperature: 0,
+    last: 0,
+    startTime: isSleep ? 1380 : 390,
+    endTime: isSleep ? 1410 : 420,
+    isColorMode: params.isSupportColor ? true : false,
+    isSleep
+  }
+  return def
+}
+
+const styles = StyleSheet.create({
+  tagLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(24),
+  },
+  infoLine: {
+    marginHorizontal: cx(24),
+  },
+  addMoodPopover: {
+    width: cx(210),
+    height: cx(90.5),
+    marginStart: cx(115),
+    marginTop: cx(100),
+    backgroundColor: '#fff',
+  },
+  popoverItem: {
+    width: cx(210),
+    height: cx(45),
+    alignItems: 'flex-start',
+  },
+  emptyListCon: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  emptyImage: {
+    width: cx(225),
+    height: cx(198),
+  },
+  emptyText: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  emptyNoTime: {
+    fontSize: cx(12),
+    lineHeight: cx(20),
+    textAlign: 'center',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+    color: '#000'
+  },
+  emptyBtnView: {
+    alignItems: 'center'
+  },
+  emptyBtn: {
+    backgroundColor: '#f60',
+    borderRadius: cx(5),
+    paddingHorizontal: cx(15),
+    paddingVertical: cx(10)
+  },
+  addTimer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    // width,
+    marginVertical: cx(20),
+  },
+  disableItemText: {
+    color: '#CBCBCB',
+    fontSize: cx(16),
+  },
+  randomTimingCard: {
+    marginHorizontal: cx(24),
+    paddingHorizontal: cx(16),
+  },
+  switchLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  switchBtn: {},
+  loopText: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+    height: cx(20)
+  },
+  tag: {
+    alignSelf: 'flex-start',
+    borderRadius: cx(16),
+    height: cx(16),
+    backgroundColor: 'rgb(230,231,232)',
+    paddingHorizontal: cx(10),
+  },
+  tagTitle: {
+    fontSize: cx(10),
+    textAlign: 'center',
+    fontFamily: 'PingFangSC-Medium',
+    color: '#000'
+  },
+})
+
+export default SleepWakeUpPage

package/src/newModules/sleepWakeUp/utils.ts

@@ -0,0 +1,254 @@
+import { Utils } from "tuya-panel-kit";
+import { getArray, getWeek } from '@ledvance/base/src/utils/common';
+import { cloneDeep } from "lodash";
+const { hexStringToNumber } = Utils.StringUtils;
+
+
+//// 入睡计划
+export function decodeSleepString(allSleep: string) {
+    if (!allSleep || allSleep === '') {
+        return [];
+    }
+    const version = allSleep.substring(0, 2)
+    const count = parseInt(allSleep.substring(2, 4))
+    if (count === 0 || version !== '00') {
+        return []
+    }
+    const contentString = allSleep.substring(4)
+    const list = getArray(contentString, 11 * 2)
+    const sleepList = list.map((item, index) => {
+        return {
+            ...decodeSingleSleepString(item),
+            index: index,
+            name: `sleepPlan ${index + 1}`
+        }
+    })
+
+    return sleepList
+}
+
+// 通过云端获取数据并渲染 sleep
+export function highInTheCloudsSleepString(featureList) {
+    if (!!!featureList) {
+        return [];
+    }
+    const sleepList = featureList.map((item, index) => {
+        const data = decodeSingleSleepString(item?.startTime)
+        return {
+            ...data,
+            loops: data?.loops?.reverse(),
+            index: index,
+            name: item?.name || `sleepPlan ${index}`
+        }
+    })
+    return sleepList
+}
+
+export function decodeSingleSleepString(sleep: string) {
+    const numbers = hexStringToNumber(sleep)
+    const enable = numbers[0]
+    const week = getWeek(sleep.substring(2, 4))
+    const fade = numbers[2] * 5
+    const time = numbers.slice(3, 5)
+    const hue = numbers[5] * 100 + numbers[6]
+    const sat = numbers[7]
+    const value = numbers[8]
+    const brightness = numbers[9]
+    const temperature = numbers[10]
+    const name = numbers[11]
+
+    const result = {
+        isSleep: true,
+        enable,
+        loops: week,
+        fade,
+        time,
+        hue,
+        sat,
+        value,
+        brightness,
+        temperature,
+        name
+    }
+
+
+    return result
+}
+
+export function encodeSleep(sleepList: any) {
+    const targetList = sleepList
+    let allHex = ''
+    allHex = allHex + '00' + targetList.length.toString().padStart(2, '0')
+    targetList.forEach(item => {
+        allHex = allHex + encodeSingleSleepPlan(item)
+    })
+    return allHex
+}
+
+
+export function encodeSingleSleepPlan(item) {
+    const enableHex = getEnableHex(item.enable)
+    const loopHex = getLoopHex(item.loops)
+    const fadeHex = getFadeHex(item.fade)
+    const timeHex = getTimeHex(item.time)
+
+    const colorHex = getHueHex(item.hue)
+    const satHex = getSatHex(item.sat)
+    const valueHex = getValueHex(item.value)
+
+    const brightnessHex = getBrightnessHex(item.brightness)
+    const temperatureHex = getTemperatureHex(item.temperature)
+    let hex = enableHex + loopHex + fadeHex + timeHex + colorHex + satHex + valueHex + brightnessHex + temperatureHex
+
+    return hex
+}
+
+export function getEnableHex(enable) {
+    const enableNumber = enable ? 1 : 0
+    return enableNumber.toString().padStart(2, '0')
+}
+
+export function getLoopHex(loop) {
+  const cloneLoop = cloneDeep(loop)
+    return parseInt(cloneLoop.reverse().join('').padStart(8, '0'), 2).toString(16).padStart(2, '0')
+}
+
+export function getFadeHex(fade) {
+    return (fade / 5).toString(16).padStart(2, '0')
+}
+
+export function getTimeHex(time) {
+    return time[0].toString(16).padStart(2, '0') + time[1].toString(16).padStart(2, '0')
+}
+
+export function getBrightnessHex(b: number) {
+    return b.toString(16).padStart(2, '0')
+}
+
+export function getTemperatureHex(t: number) {
+    return t.toString(16).padStart(2, '0')
+}
+
+export function getHueHex(h: number) {
+    return Math.trunc(h / 100).toString(16).padStart(2, '0') + (h % 100).toString(16).padStart(2, '0')
+}
+
+export function getSatHex(s: number) {
+    return s.toString(16).padStart(2, '0')
+}
+
+export function getValueHex(v: number) {
+    return v.toString(16).padStart(2, '0')
+}
+
+//// 唤醒计划
+export function decodeWakeUpString(allString: string) {
+    if (!allString || allString === '') {
+        return [];
+    }
+
+    const version = allString.substring(0, 2)
+    const count = parseInt(allString.substring(2, 4))
+    if (count === 0 || version !== '00') {
+        return []
+    }
+    const contentString = allString.substring(4)
+    const list = getArray(contentString, 12 * 2)
+
+    const weekList = list.map((item, index) => {
+        return {
+            ...decodeSingleWakeUpString(item),
+            index: index,
+            name: `wakeUpPlan ${index + 1}`
+        }
+    })
+
+    return weekList
+}
+
+// 通过云端获取数据并渲染 wakeUp
+export function highInTheCloudsWakeString(featureList) {
+    if (!!!featureList) {
+        return [];
+    }
+    const wakeUpList = featureList.map((item, index) => {
+        const data = decodeSingleWakeUpString(item?.startTime)
+        return {
+            ...data,
+            loops: data?.loops?.reverse(),
+            index: index,
+            name: item?.name || `wakeUpPlan ${index}`
+        }
+    })
+    return wakeUpList
+}
+
+export function decodeSingleWakeUpString(string: string) {
+    const numbers = hexStringToNumber(string)
+    const enable = numbers[0]
+    const week = getWeek(string.substring(2, 4))
+    const fade: number = numbers[2] * 5
+    const time = numbers.slice(3, 5)
+    const hue = numbers[5] * 100 + numbers[6]
+    const sat = numbers[7]
+    const value = numbers[8]
+    const brightness = numbers[9]
+    const temperature = numbers[10]
+    const duration = numbers[11] * 5
+
+    const result = {
+        isSleep: false,
+        enable,
+        loops: week,
+        fade,
+        time,
+        hue,
+        sat,
+        value,
+        brightness,
+        temperature,
+        duration,
+    }
+
+
+    return result
+}
+
+export function encodeWakeUp(wakeUpList: any) {
+    const targetList = wakeUpList
+
+    let allHex = ''
+    allHex = allHex + '00' + targetList.length.toString().padStart(2, '0')
+
+    targetList.forEach(item => {
+        allHex = allHex + encodeSingleWakeUpPlan(item)
+    })
+    // return allHex;
+    return allHex
+}
+
+
+export function encodeSingleWakeUpPlan(item) {
+
+    const enableHex = getEnableHex(item.enable)
+    const loopHex = getLoopHex(item.loops)
+    const fadeHex = getFadeHex(item.fade)
+    const timeHex = getTimeHex(item.time)
+
+    const hueHex = getHueHex(item.hue)
+    const satHex = getSatHex(item.sat)
+    const valueHex = getValueHex(item.value)
+
+    const brightnessHex = getBrightnessHex(item.brightness)
+    const temperatureHex = getTemperatureHex(item.temperature)
+    const durationHex = getDurationHex(item.duration)
+
+    let hex = enableHex + loopHex + fadeHex + timeHex + hueHex + satHex + valueHex + brightnessHex + temperatureHex + durationHex
+
+
+    return hex
+}
+
+export function getDurationHex(d) {
+    return (d / 5).toString(16).padStart(2, '0')
+}