removed
parent
260f40fef3
commit
30210e6f99
284
old.js
284
old.js
|
|
@ -1,284 +0,0 @@
|
|||
import { lazy, useContext, useState } from "react";
|
||||
import {
|
||||
Image,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
TouchableOpacity,
|
||||
Dimensions,
|
||||
Platform,
|
||||
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;
|
||||
|
||||
for (let i = 0; i < deviceLeds; i++) {
|
||||
data.push("lime");
|
||||
}
|
||||
|
||||
export default function DeviceScreen() {
|
||||
const appContext = useContext(AppContext);
|
||||
const [selectedView, setSelectedView] = useState(0);
|
||||
const [deviceLedsColors, setDeviceLedsColor] = useState(data);
|
||||
|
||||
console.log(
|
||||
"wD",
|
||||
Platform.OS,
|
||||
windowDimensions.width,
|
||||
windowDimensions.width / 16
|
||||
);
|
||||
|
||||
const SelectedView = () => {
|
||||
switch (selectedView) {
|
||||
case 0:
|
||||
return <LightView />;
|
||||
case 2:
|
||||
return <MotorView />;
|
||||
case 3:
|
||||
return <SettingsView />;
|
||||
case 4:
|
||||
return <ColorScenesView />;
|
||||
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 = ({ style }) => {
|
||||
/*
|
||||
<Leds style={{ top: 118, right: "8%" }} />
|
||||
<Leds style={{ top: 119, right: "8%" }} />
|
||||
<Leds style={{ top: 120, right: "8%" }} />
|
||||
<Leds style={{ top: 121, right: "8%" }} />
|
||||
*/
|
||||
|
||||
let elements = [];
|
||||
let test = 400;
|
||||
|
||||
for (let l = 0; l < ledLines; l++) {
|
||||
let left = 0;
|
||||
let ledsElements = [];
|
||||
|
||||
console.log("l", l);
|
||||
|
||||
for (let p = 0; p < ledsPerLine; p++) {
|
||||
left = left + 1.5;
|
||||
|
||||
ledsElements.push(
|
||||
<View
|
||||
key={`${l}-${p}`}
|
||||
style={{
|
||||
width: 0.1 * (test / 16),
|
||||
height: 0.1 * (test / 16),
|
||||
backgroundColor: "lime",
|
||||
borderRadius: 0.5,
|
||||
left: l,
|
||||
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 + l,
|
||||
right: "8%",
|
||||
}}
|
||||
>
|
||||
{ledsElements}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
for (let i = 0; i < 16; i++) {
|
||||
l = l + 1.5;
|
||||
|
||||
elements.push(
|
||||
<View
|
||||
key={i}
|
||||
style={{
|
||||
width: 0.1 * (test / 16),
|
||||
height: 0.1 * (test / 16),
|
||||
backgroundColor: "lime",
|
||||
borderRadius: 0.5,
|
||||
left: l,
|
||||
marginRight:
|
||||
windowDimensions.width > 360
|
||||
? 0.27 * (test / 16)
|
||||
: 0.26 * (test / 16),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}*/
|
||||
|
||||
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,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue