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