Source: components/system_settings/index.js

  1. import NumericSlider from "../../components/numeric_slider";
  2. import {useState, useEffect} from "preact/hooks";
  3. import {
  4. 	updateDeviceSettings,
  5. 	getDeviceSettings} from "../../utils/api";
  6. import {useConnectivity} from "../../context/online_context";
  7. import useInterval from "../../utils/use_interval";
  8. import SimpleChooser from '../../components/single_chooser';
  9. import { LabelSpinner } from '../../components/spinner';
  10. import RANGE_CONSTANTS from '../../utils/constants';
  11. import style from './style.css';
  13. /**
  14.  * @brief Generates a UI element for changing NanoLux device system settings.
  15.  */
  16. const SystemControls = () => {
  18. 	// Checks if the web app is connected to the device.
  19. 	const { isConnected } = useConnectivity();
  21. 	// Flag representing if initial data has been obtained from
  22. 	// the device.
  23. 	const [loading, setLoading] = useState(true);
  25. 	// Flag that tells the object to update the NanoLux device with new data.
  26. 	const [updated, setUpdated] = useState(false);
  28. 	// System settings data structure
  29. 	const [data, setData] = useState({
  30. 		length: 60,
  31. 		loop: 40,
  32. 		debug: 0
  33. 	});
  35. 	/**
  36. 	 * @brief Manages initial querying of the data from the NanoLux device.
  37. 	 * 		  Sets the loading flag to false when done.
  38. 	 */
  39. 	useEffect(() => {
  40. 		if (isConnected) {
  41. 			getDeviceSettings()
  42. 				.then(data => setData(data))
  43. 				.then(setLoading(false));
  44. 		}  
  45. 	}, [isConnected])
  47. 	
  48. 	/**
  49. 	 * @brief Updates the pattern on the Nanolux device 
  50. 	 * if it is connected and has modified data,
  51. 	 * then flags the data structure.
  52. 	 */
  53. 	useInterval(() => {
  54. 		if (isConnected && updated) {
  55. 			updateDeviceSettings(data);
  56. 			setUpdated(false);
  57. 		}
  58. 	}, 100);
  60. 	/**
  61. 	 * @brief Updates a parameter in the subpattern data structure with a new value.
  62. 	 * @param ref The string reference to update in the data structure
  63. 	 * @param value The new value to update the data structure with
  64. 	 */
  65. 	const update = (ref, value) => {
  66. 		if(!loading){		
  67. 			setData((oldData) => {
  68. 				let newData = Object.assign({}, oldData);
  69. 				newData[ref] = value;
  70. 				return newData;
  71. 			})
  72. 		}
  73. 		setUpdated(true);
  74. 	}
  76. 	/**
  77. 	 * @brief Generates the UI element for adjusting system settings.
  78. 	 */
  79. 	return (
  80. 		(!loading ? 
  81. 			<div>
  82. 				<NumericSlider
  83. 					className={style.settings_control}
  84. 					label="LED Strip Length"
  85. 					tooltip={{
  86. 						id: 'length',
  87. 						content: 'Adjusts how much of the LED strip is used by the device to display patterns',
  88. 					}}
  89. 					min={RANGE_CONSTANTS.LENGTH_MIN}
  90. 					max={RANGE_CONSTANTS.LENGTH_MAX}
  91. 					initial={data.length}
  92. 					structure_ref="length"
  93. 					update={update}
  94. 				/>
  95. 				<br />
  96. 				<NumericSlider
  97. 					className={style.settings_control}
  98. 					label="LED Update Time (ms)"
  99. 					tooltip={{
  100. 						id: 'update',
  101. 						content: 'Adjusts how fast patterns are updated on the LED strip. Lower values mean patterns are updated faster.',
  102. 					}}
  103. 					min={RANGE_CONSTANTS.LOOP_MIN}
  104. 					max={RANGE_CONSTANTS.LOOP_MAX}
  105. 					initial={data.loop}
  106. 					structure_ref="loop"
  107. 					update={update}
  108. 				/>
  109. 				<br />
  110. 				<SimpleChooser
  111. 					className={style.settings_control}
  112. 					label="Debug Mode"
  113. 					tooltip={{
  114. 						id: 'debug',
  115. 						content: 'Optional debugging modes for development.',
  116. 					}}
  117. 					options={[
  118. 						{option : "Debug Out", idx : 1, tooltip : "Prints pattern and strip data to the serial console for debugging."},
  119. 						{option : "Simulator Out", idx : 2, tooltip : "Prints full LED frames as comma-separated (R,G,B) values to the serial console for simulating patterns externally."},
  120. 					]}
  121. 					noSelection={true}
  122. 					initial={data.debug}
  123. 					structure_ref="debug"
  124. 					update={update}	
  125. 				/>
  126. 				<br />
  127. 			</div> 
  128. 		: <LabelSpinner />)		
  129. 	);
  130. }
  132. export default SystemControls;