Jannex
/
expo-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

deleted old device

main
alex 2023-08-01 22:12:01 +00:00
parent 0aa71e38a5
commit 309bb2d249
8 changed files with 1 additions and 970 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
App.js
View File

@ -15,7 +15,6 @@ import { Suspense, lazy, useContext, useEffect } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import "./i18n";
import DeviceScreen from "./src/Screens/Device";
import DeviceOldScreen from "./src/Screens/DeviceOld";
import { createStackNavigator } from "@react-navigation/stack";
import { TouchableOpacity } from "react-native";
import MyIcon from "./src/Components/Icon";
@ -310,8 +309,6 @@ function MyDrawer() {
/>
))}
<Drawer.Screen name="Old Turtle" component={DeviceOldScreen} />
<Drawer.Screen name="Help" component={HelpScreenStack} />
<Drawer.Screen name="Settings" component={SettingsScreenStack} />
</Drawer.Navigator>

5
src/Components/SideBar/index.js
View File

@ -144,11 +144,6 @@ export default function Sidebar(props) {
routeName={device.displayName}
/>
))}
<MyDrawerItem
label={"Old Device"}
onPress={() => props.navigation.navigate("Old Turtle")}
/>
</DrawerContentScrollView>
<View style={{ justifyContent: "flex-end" }}>

2
src/Components/TextInput/index.js
View File

@ -12,7 +12,7 @@ export default function MyTextInput({
const appContext = useContext(AppContext);
return (
<View style={{ padding: 10 }}>
<View style={{ paddingLeft: 10, paddingRight: 10 }}>
<Text style={{ color: appContext.appTheme.textSecondary }}>
{textTitle}
</Text>

78
src/Screens/DeviceOld/colorScenes.js
View File

@ -1,78 +0,0 @@
import { View } from "react-native";
import Card from "../../Components/Card";
import MyIcon from "../../Components/Icon";
import { useContext } from "react";
import { AppContext } from "../../utils";
import { TouchableOpacity } from "react-native-gesture-handler";
import MyColorPicker from "../../Components/ColorPicker";
export default function ColorScenesView({
deviceLedsColors,
setDeviceLedsColor,
selectedDeviceLed,
setSelectedDeviceLed,
}) {
const appContext = useContext(AppContext);
return (
<Card>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
onPress={() => {
console.log("up");
setDeviceLedsColor((arr) => {
const newArr = [...arr];
newArr[16] = "red";
return newArr;
});
}}
>
<MyIcon
name="arrow-up-bold-box"
size={36}
color={appContext.appTheme.icon}
/>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("down")}>
<MyIcon
name="arrow-down-bold-box"
size={36}
color={appContext.appTheme.icon}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
console.log("left", selectedDeviceLed);
if (selectedDeviceLed > 0) {
setSelectedDeviceLed((prev) => (prev = prev - 1));
}
}}
>
<MyIcon
name="arrow-left-bold-box"
size={36}
color={appContext.appTheme.icon}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
console.log("right");
setSelectedDeviceLed((prev) => (prev = prev + 1));
console.log("sel", selectedDeviceLed);
}}
>
<MyIcon
name="arrow-right-bold-box"
size={36}
color={appContext.appTheme.icon}
/>
</TouchableOpacity>
</View>
</Card>
);
}

260
src/Screens/DeviceOld/index.js
View File

@ -1,260 +0,0 @@
import { lazy, useContext, useState } from "react";
import {
Image,
ScrollView,
StyleSheet,
View,
Text,
TouchableHighlight,
TouchableOpacity,
Dimensions,
ImageBackground,
} from "react-native";
import LightView from "./light";
import { AppContext } from "../../utils";
import MyIcon from "../../Components/Icon";
const MotorView = lazy(() => import("./motor"));
const SettingsView = lazy(() => import("./settings"));
const ColorScenesView = lazy(() => import("./colorScenes"));
const spaceToSide = 10; // left and right
const top = 35;
const spaceBetweenButtons = 60;
const topFirst = top;
const topSecond = top + spaceBetweenButtons;
const topThird = top + 2 * spaceBetweenButtons;
const windowDimensions = Dimensions.get("window");
let data = [];
const ledLines = 4;
const ledsPerLine = 16;
const deviceLeds = ledLines * ledsPerLine;
// setting default color for testing
for (let i = 0; i < deviceLeds; i++) {
data.push("lime");
}
export default function DeviceOldScreen() {
const appContext = useContext(AppContext);
const [selectedView, setSelectedView] = useState(0);
const [deviceLedsColors, setDeviceLedsColor] = useState(data);
const [selectedDeviceLed, setSelectedDeviceLed] = useState(2);
const SelectedView = () => {
switch (selectedView) {
case 0:
return <LightView />;
case 2:
return <MotorView />;
case 3:
return <SettingsView />;
case 4:
return (
<ColorScenesView
deviceLedsColors={deviceLedsColors}
setDeviceLedsColor={setDeviceLedsColor}
selectedDeviceLed={selectedDeviceLed}
setSelectedDeviceLed={setSelectedDeviceLed}
/>
);
default:
<Text>Not found</Text>;
}
};
const MyButton = ({ selectedViewNumber, top, left, space, iconName }) => {
const TouchComponent =
appContext.appColorScheme === "dark"
? TouchableHighlight
: TouchableOpacity;
return (
<TouchComponent
onPress={() => setSelectedView(selectedViewNumber)}
style={[
{
position: "absolute",
backgroundColor: appContext.appTheme.card.backgroundColor,
borderRadius: 10,
padding: 8,
},
{ top: top },
left === true ? { left: space } : { right: space },
]}
>
<MyIcon
name={iconName}
size={30}
color={
selectedView === selectedViewNumber
? appContext.appTheme.colors.primary
: appContext.appTheme.icon
}
/>
</TouchComponent>
);
};
const DeviceLedsColor = () => {
let elements = [];
let test = 400;
for (let l = 0; l < ledLines; l++) {
let left = 0;
let ledsElements = [];
for (let p = 0; p < ledsPerLine; p++) {
left = left + 1.5;
const ledId = l > 0 ? l * 16 + p : p;
const deviceLedColor =
l > 0 ? deviceLedsColors[l * 16 + p] : deviceLedsColors[p];
ledsElements.push(
<View
key={`${l}-${p}`}
style={{
width: 0.1 * (test / 16),
height: 0.1 * (test / 16),
backgroundColor:
ledId === selectedDeviceLed ? "red" : deviceLedColor,
borderRadius: 0.5,
left: left,
marginRight:
windowDimensions.width > 360
? 0.27 * (test / 16)
: 0.26 * (test / 16),
}}
/>
);
}
elements.push(
<View
key={`v-${l}`}
style={{
flexDirection: "row",
justifyContent: "center",
top: 118.5 + l,
right: "8%",
}}
>
{ledsElements}
</View>
);
}
return <>{elements}</>;
};
return (
<View
style={{
height: "100%",
backgroundColor: appContext.appTheme.backgroundColor,
}}
>
{selectedView === 4 && (
<View>
<ImageBackground
source={require("../../../assets/image19.png")}
resizeMode="contain"
style={{ height: 250 }}
>
<DeviceLedsColor />
</ImageBackground>
</View>
)}
{appContext.isUserDeveloperModeEnabled ? (
<>
{selectedView !== 4 && (
<Image
source={require("../../../assets/device.png")}
style={styles.image}
resizeMode="contain"
/>
)}
</>
) : (
<>
{selectedView !== 4 && (
<View style={[styles.image, { backgroundColor: "#ddd" }]} />
)}
</>
)}
<MyButton
iconName={"lightbulb-on-outline"}
left
selectedViewNumber={0}
space={spaceToSide}
top={topFirst}
/>
<MyButton
iconName={"television-ambient-light"}
left
selectedViewNumber={1}
space={spaceToSide}
top={topSecond}
/>
<MyButton
iconName={"axis-z-rotate-counterclockwise"}
left
selectedViewNumber={2}
space={spaceToSide}
top={topThird}
/>
<MyButton
iconName={"cog-outline"}
left={false}
selectedViewNumber={3}
space={spaceToSide}
top={topFirst}
/>
<MyButton
iconName={"palette-outline"}
left={false}
selectedViewNumber={4}
space={spaceToSide}
top={topSecond}
/>
<MyButton
iconName={"rotate-3d-variant"}
left={false}
selectedViewNumber={5}
space={spaceToSide}
top={topThird}
/>
<ScrollView style={{ height: "100%" }}>
<SelectedView />
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#2e2e30",
},
scrollView: {
width: "100%",
padding: 20,
},
image: {
width: "100%",
height: 250,
},
});

416
src/Screens/DeviceOld/light.js
View File

@ -1,416 +0,0 @@
import { useContext, useState } from "react";
import {
StyleSheet,
Text,
TouchableOpacity,
View,
TouchableHighlight,
} from "react-native";
import Animated, {
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
import ColorPicker, {
Swatches,
InputWidget,
HueCircular,
Panel1,
Panel3,
BrightnessSlider,
OpacitySlider,
HueSlider,
SaturationSlider,
} from "reanimated-color-picker";
import { AppContext, AppStyles, IsPlatformIos } from "../../utils";
import Card from "../../Components/Card";
import MySwitch from "../../Components/Switch";
import MyIcon from "../../Components/Icon";
import { useTranslation } from "react-i18next";
import MySlider from "../../Components/Slider";
import MyPickerModal from "../../Components/Modal";
const colorModePickerOptions = [
{ label: "Pulse", value: "pulse" },
{ label: "Random", value: "random" },
{ label: "Rainbow", value: "rainbow" },
];
function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
const backgroundColorStyle = useAnimatedStyle(() => {
return {
backgroundColor: sharedColor.value,
};
});
const contrastColorText = useAnimatedStyle(() => {
const getContrastRatio = (hexColor) => {
const hex = hexColor.replace("#", "");
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
return luminance > 0.5 ? "#000000" : "#ffffff";
};
let obj = {};
obj.color = getContrastRatio(sharedColor.value);
return obj;
});
const contrastColorBorder = useAnimatedStyle(() => {
const getContrastRatio = (hexColor) => {
const hex = hexColor.replace("#", "");
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
return luminance > 0.5 ? "#000000" : "#ffffff";
};
let obj = {};
//obj.color = getContrastRatio(sharedColor.value);
if (selected === true) {
obj.borderColor = getContrastRatio(sharedColor.value);
obj.borderBottomWidth = 2;
} else {
obj.borderBottomWidth = 0;
}
return obj;
});
return (
<TouchableHighlight
style={[
{
width: 30,
height: 30,
borderRadius: 10,
marginRight: 10,
elevation: 3,
},
]}
onPress={onPress}
rippleColor="rgba(0, 0, 0, .32)"
>
<Animated.View
style={[
{
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
},
backgroundColorStyle,
]}
>
<Animated.View style={contrastColorBorder}>
<Animated.Text
style={[
{
fontSize: 16,
fontWeight: "bold",
},
contrastColorText,
]}
>
{layerNumber}
</Animated.Text>
</Animated.View>
</Animated.View>
</TouchableHighlight>
);
}
export default function LightView() {
const appContext = useContext(AppContext);
const { t } = useTranslation();
const [switchState, setSwitchState] = useState(false);
const [selectedGlasLayer, setSelectedGlasLayer] = useState(1);
const [colorSwatchesFavorites, setColorSwatchesFavorites] = useState([]);
const [modalDeviceColorModeVisible, setModalDeviceColorModeVisible] =
useState(false);
const [selectedDeviceColorMode, setSelectedDeviceColorMode] = useState("");
const selectedColorPickerColor = useSharedValue("#ddd");
const selectedColorLayer1 = useSharedValue(selectedColorPickerColor.value);
const selectedColorLayer2 = useSharedValue(selectedColorPickerColor.value);
const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
const [sliderBrightness, setSliderBrightness] = useState(10);
const onColorSelect = (color) => {
selectedColorPickerColor.value = color.hex;
switch (selectedGlasLayer) {
case 1:
selectedColorLayer1.value = color.hex;
break;
case 2:
selectedColorLayer2.value = color.hex;
break;
case 3:
selectedColorLayer3.value = color.hex;
break;
case 4:
selectedColorLayer4.value = color.hex;
break;
}
};
return (
<>
<Card>
<TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
<View
style={[
{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
IsPlatformIos() && { marginBottom: 10 },
]}
>
<View>
<Text style={{ color: appContext.appTheme.text }}>
{t("screens.device.light.pickerColorModeText")}
</Text>
<Text style={{ color: appContext.appTheme.colors.primary }}>
{selectedDeviceColorMode === ""
? t("screens.device.light.pickerColorModePlaceholder")
: colorModePickerOptions.find(
(item) => item.value === selectedDeviceColorMode
).label}
</Text>
</View>
<MyIcon
name="chevron-down"
size={24}
color={appContext.appTheme.icon}
/>
</View>
</TouchableOpacity>
<MyPickerModal
searchFilter
isOpen={modalDeviceColorModeVisible}
setIsOpen={setModalDeviceColorModeVisible}
items={colorModePickerOptions.map((item) => {
return {
label: item.label,
onPress: () => setSelectedDeviceColorMode(item.value),
selected: selectedDeviceColorMode === item.value,
};
})}
/>
<View
style={[
{ flexDirection: "row", alignItems: "center" },
IsPlatformIos() && { gap: 10 },
]}
>
<MySwitch
value={switchState}
onValueChange={(e) => setSwitchState(e)}
/>
<MyIcon
name={
sliderBrightness < 1
? "brightness-5"
: sliderBrightness < 40
? "brightness-4"
: sliderBrightness < 80
? "brightness-6"
: "brightness-7"
}
color={appContext.appTheme.icon}
size={20}
/>
<MySlider
style={{ flex: 1 }}
minimumValue={0}
maximumValue={100}
value={sliderBrightness}
onValueChange={(v) => setSliderBrightness(v)}
/>
</View>
<Animated.View>
<ColorPicker
value={selectedColorPickerColor.value}
thumbSize={26}
onChange={onColorSelect}
>
<View
style={{
justifyContent: "center",
flexDirection: "row",
alignItems: "center",
marginBottom: 10,
}}
>
<ColorLayer
layerNumber={1}
sharedColor={selectedColorLayer1}
selected={selectedGlasLayer === 1}
onPress={() => {
setSelectedGlasLayer(1);
selectedColorPickerColor.value = selectedColorLayer1.value;
}}
/>
<ColorLayer
layerNumber={2}
sharedColor={selectedColorLayer2}
selected={selectedGlasLayer === 2}
onPress={() => {
setSelectedGlasLayer(2);
selectedColorPickerColor.value = selectedColorLayer2.value;
}}
/>
<ColorLayer
layerNumber={3}
sharedColor={selectedColorLayer3}
selected={selectedGlasLayer === 3}
onPress={() => {
setSelectedGlasLayer(3);
selectedColorPickerColor.value = selectedColorLayer3.value;
}}
/>
<ColorLayer
layerNumber={4}
sharedColor={selectedColorLayer4}
selected={selectedGlasLayer === 4}
onPress={() => {
setSelectedGlasLayer(4);
selectedColorPickerColor.value = selectedColorLayer4.value;
}}
/>
</View>
<TouchableOpacity
onPress={() =>
setColorSwatchesFavorites([
...colorSwatchesFavorites,
selectedColorPickerColor.value,
])
}
style={{
position: "absolute",
top: 20,
right: 0,
}}
>
<MyIcon
name="star-outline"
color={appContext.appTheme.icon}
size={20}
/>
</TouchableOpacity>
<View
style={{ flexDirection: "row", justifyContent: "space-evenly" }}
>
<Panel3 style={{ width: 200 }} />
<BrightnessSlider style={styles.sliderStyle} vertical reverse />
<OpacitySlider style={styles.sliderStyle} vertical reverse />
</View>
<Swatches
style={styles.swatchesContainer}
swatchStyle={styles.swatchStyle}
colors={colorSwatchesFavorites}
/>
{appContext.isUserExpertModeEnabled && (
<View style={styles.previewTxtContainer}>
<InputWidget
inputStyle={{
color: appContext.appTheme.text,
paddingVertical: 2,
borderColor: "#707070",
fontSize: 12,
marginLeft: 5,
}}
iconColor="#707070"
/>
</View>
)}
</ColorPicker>
</Animated.View>
</Card>
<Card>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<MyIcon
name="brightness-6"
size={24}
color={appContext.appTheme.icon}
/>
<Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
Auto brightness
</Text>
</View>
<MySwitch
value={switchState}
onValueChange={(e) => setSwitchState(e)}
/>
</View>
</Card>
</>
);
}
const styles = StyleSheet.create({
previewTxtContainer: {
paddingTop: 20,
marginTop: 20,
borderTopWidth: 1,
borderColor: "#bebdbe",
},
panelStyle: {
width: "60%",
height: "60%",
alignSelf: "center",
borderRadius: 16,
},
sliderStyle: {
borderRadius: 20,
marginTop: 20,
width: 10,
},
swatchesContainer: {
borderTopWidth: 1,
borderColor: "#bebdbe",
marginTop: 20,
paddingTop: 20,
justifyContent: "center",
gap: 10,
},
swatchStyle: {
borderRadius: 20,
height: 25,
width: 25,
margin: 0,
marginBottom: 0,
marginHorizontal: 0,
marginVertical: 0,
},
});

33
src/Screens/DeviceOld/motor.js
View File

@ -1,33 +0,0 @@
import { View } from "react-native";
import Card from "../../Components/Card";
import { useContext, useState } from "react";
import MySwitch from "../../Components/Switch";
import MySlider from "../../Components/Slider";
import { AppContext, IsPlatformIos } from "../../utils";
import MyIcon from "../../Components/Icon";
export default function MotorView() {
const appContext = useContext(AppContext);
const [switchState, setSwitchState] = useState(false);
return (
<Card>
<View
style={[
{ flexDirection: "row", alignItems: "center" },
IsPlatformIos() && { gap: 10 },
]}
>
<MySwitch
value={switchState}
onValueChange={(e) => setSwitchState(e)}
/>
<MyIcon name="fan" color={appContext.appTheme.icon} size={20} />
<View style={{ flex: 1 }}>
<MySlider />
</View>
</View>
</Card>
);
}

174
src/Screens/DeviceOld/settings.js
View File

@ -1,174 +0,0 @@
import { Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { useContext, useState } from "react";
import { AppContext, AppStyles } from "../../utils";
import { Divider } from "../../Components/Divider";
import { useTranslation } from "react-i18next";
import MySwitch from "../../Components/Switch";
import MyIcon from "../../Components/Icon";
import { MyTextInputModal } from "../../Components/Modal";
export default function SettingsView() {
const appContext = useContext(AppContext);
const { t } = useTranslation();
const [modalTextInputVisible, setModalTextInputVisible] = useState(false);
const [switchState, setSwitchState] = useState(false);
return (
<>
<Card>
<Text
style={[
AppStyles.typography20,
{
color: appContext.appTheme.text,
marginBottom: 10,
},
]}
>
{t("screens.device.settings.settingsTitle")}
</Text>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View style={{ width: "80%" }}>
<Text
style={[
AppStyles.typography16,
{ color: appContext.appTheme.text },
]}
>
{t("screens.device.settings.wifiStandByTitle")}
</Text>
<Text
style={[
AppStyles.typography14,
{ color: appContext.appTheme.textSecondary },
]}
>
{t("screens.device.settings.wifiStandByDescription")}
</Text>
</View>
<MySwitch
value={switchState}
onValueChange={(e) => setSwitchState(e)}
/>
</View>
</Card>
<Card>
<Text
style={[
AppStyles.typography20,
{
color: appContext.appTheme.text,
marginBottom: 10,
},
]}
>
{t("screens.device.settings.deviceInformationText")}
</Text>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View>
<Text
style={
([AppStyles.typography16], { color: appContext.appTheme.text })
}
>
{t("screens.device.settings.deviceNameText")}
</Text>
<Text
style={
([AppStyles.typography14],
{ color: appContext.appTheme.textSecondary })
}
>
Turtle
</Text>
</View>
<TouchableOpacity onPress={() => setModalTextInputVisible(true)}>
<MyIcon name="pencil" size={18} color={appContext.appTheme.icon} />
</TouchableOpacity>
</View>
<MyTextInputModal
isOpen={modalTextInputVisible}
setIsOpen={setModalTextInputVisible}
onTextInputSave={() => console.log("save")}
modalTitle={t("screens.device.settings.deviceNameText")}
inputTitle={t("screens.device.settings.deviceNameText")}
inputDescription={t(
"screens.device.settings.modalTextInputDeviceNameDescription"
)}
/>
<Divider />
<Text
style={
([AppStyles.typography16], { color: appContext.appTheme.text })
}
>
{t("screens.device.settings.deviceModelText")}
</Text>
<Text
style={
([AppStyles.typography14],
{ color: appContext.appTheme.textSecondary })
}
>
Shimmex Aurora
</Text>
<Divider />
<Text
style={
([AppStyles.typography16], { color: appContext.appTheme.text })
}
>
{t("screens.device.settings.deviceFirmwareVersionText")}
</Text>
<Text
style={
([AppStyles.typography14],
{ color: appContext.appTheme.textSecondary })
}
>
1.0.1
</Text>
<Divider />
<Text
style={
([AppStyles.typography16], { color: appContext.appTheme.text })
}
>
{t("screens.device.settings.deviceLastUpdatedText")}
</Text>
<Text
style={
([AppStyles.typography14],
{ color: appContext.appTheme.textSecondary })
}
>
11.07.2023 um 20:33 Uhr
</Text>
</Card>
</>
);
}