Add new SliderValue GUI widget

Signed-off-by: Vojtech Bocek <vbocek@gmail.com>

Change-Id: Ic5d44314f501341140dd7059d1cb753341f5844c
diff --git a/gui/devices/1024x600/res/ui.xml b/gui/devices/1024x600/res/ui.xml
index 1615ee9..b24bda3 100755
--- a/gui/devices/1024x600/res/ui.xml
+++ b/gui/devices/1024x600/res/ui.xml
@@ -197,6 +197,14 @@
 		<variable name="mount_storage_row" value="500" />
 		<variable name="wipe_list_height" value="300" />
 		<variable name="wipe_button_y" value="190" />
+		<variable name="slidervalue_x" value="256" />
+		<variable name="slidervalue_w" value="512" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="2" />
+		<variable name="slidervalue_padding" value="0" />
+		<variable name="slidervalue_sliderw" value="10" />
+		<variable name="slidervalue_sliderh" value="50" />
 	</variables>
 
 	<templates>
@@ -2289,100 +2297,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row4_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="slidervalue_x" y="%row5_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="slidervalue_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/1024x768/res/ui.xml b/gui/devices/1024x768/res/ui.xml
index d160562..5b9c3fc 100644
--- a/gui/devices/1024x768/res/ui.xml
+++ b/gui/devices/1024x768/res/ui.xml
@@ -197,6 +197,14 @@
 		<variable name="mount_storage_row" value="500" />
 		<variable name="wipe_list_height" value="400" />
 		<variable name="wipe_button_y" value="190" />
+		<variable name="slidervalue_x" value="256" />
+		<variable name="slidervalue_w" value="512" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="2" />
+		<variable name="slidervalue_padding" value="0" />
+		<variable name="slidervalue_sliderw" value="10" />
+		<variable name="slidervalue_sliderh" value="50" />
 	</variables>
 
 	<templates>
@@ -2289,100 +2297,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row4_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="slidervalue_x" y="%row5_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="slidervalue_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/1080x1920/res/ui.xml b/gui/devices/1080x1920/res/ui.xml
index 93d539c..625cad8 100644
--- a/gui/devices/1080x1920/res/ui.xml
+++ b/gui/devices/1080x1920/res/ui.xml
@@ -182,6 +182,13 @@
 		<variable name="storage_list_height" value="1313" />
 		<variable name="wipe_list_height" value="1305" />
 		<variable name="wipe_button_y" value="975" />
+		<variable name="slidervalue_w" value="1060" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="3" />
+		<variable name="slidervalue_padding" value="30" />
+		<variable name="slidervalue_sliderw" value="15" />
+		<variable name="slidervalue_sliderh" value="90" />
 	</variables>
 
 	<templates>
@@ -2266,100 +2273,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row3_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="col1_x" y="%row4_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="col1_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/1280x800/res/ui.xml b/gui/devices/1280x800/res/ui.xml
index 5ba4700..3ffa79d 100644
--- a/gui/devices/1280x800/res/ui.xml
+++ b/gui/devices/1280x800/res/ui.xml
@@ -197,6 +197,14 @@
 		<variable name="mount_storage_row" value="550" />
 		<variable name="wipe_list_height" value="420" />
 		<variable name="wipe_button_y" value="250" />
+		<variable name="slidervalue_x" value="320" />
+		<variable name="slidervalue_w" value="640" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="2" />
+		<variable name="slidervalue_padding" value="0" />
+		<variable name="slidervalue_sliderw" value="15" />
+		<variable name="slidervalue_sliderh" value="60" />
 	</variables>
 
 	<templates>
@@ -2289,100 +2297,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row4_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="slidervalue_x" y="%row5_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="slidervalue_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/1920x1200/res/ui.xml b/gui/devices/1920x1200/res/ui.xml
index 935080a..af9aba6 100644
--- a/gui/devices/1920x1200/res/ui.xml
+++ b/gui/devices/1920x1200/res/ui.xml
@@ -197,6 +197,14 @@
 		<variable name="mount_storage_row" value="850" />
 		<variable name="wipe_list_height" value="850" />
 		<variable name="wipe_button_y" value="375" />
+		<variable name="slidervalue_x" value="540" />
+		<variable name="slidervalue_w" value="960" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="3" />
+		<variable name="slidervalue_padding" value="0" />
+		<variable name="slidervalue_sliderw" value="20" />
+		<variable name="slidervalue_sliderh" value="80" />
 	</variables>
 
 	<templates>
@@ -2289,100 +2297,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row4_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="slidervalue_x" y="%row5_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="slidervalue_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/2560x1600/res/ui.xml b/gui/devices/2560x1600/res/ui.xml
index 7c46a99..12c032b 100644
--- a/gui/devices/2560x1600/res/ui.xml
+++ b/gui/devices/2560x1600/res/ui.xml
@@ -197,6 +197,14 @@
 		<variable name="mount_storage_row" value="1100" />
 		<variable name="wipe_list_height" value="1100" />
 		<variable name="wipe_button_y" value="500" />
+		<variable name="slidervalue_x" value="640" />
+		<variable name="slidervalue_w" value="1280" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="4" />
+		<variable name="slidervalue_padding" value="0" />
+		<variable name="slidervalue_sliderw" value="30" />
+		<variable name="slidervalue_sliderh" value="90" />
 	</variables>
 
 	<templates>
diff --git a/gui/devices/320x480/res/ui.xml b/gui/devices/320x480/res/ui.xml
index c85db3a..66865a7 100644
--- a/gui/devices/320x480/res/ui.xml
+++ b/gui/devices/320x480/res/ui.xml
@@ -177,6 +177,13 @@
 		<variable name="storage_list_height" value="340" />
 		<variable name="wipe_list_height" value="330" />
 		<variable name="wipe_button_y" value="270" />
+		<variable name="slidervalue_w" value="304" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="1" />
+		<variable name="slidervalue_padding" value="8" />
+		<variable name="slidervalue_sliderw" value="4" />
+		<variable name="slidervalue_sliderh" value="20" />
 	</variables>
 
 	<templates>
@@ -2253,100 +2260,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row3_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="col1_x" y="%row4_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="col1_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/480x800/res/ui.xml b/gui/devices/480x800/res/ui.xml
index 6efca35..e33e5b1 100644
--- a/gui/devices/480x800/res/ui.xml
+++ b/gui/devices/480x800/res/ui.xml
@@ -177,6 +177,13 @@
 		<variable name="storage_list_height" value="400" />
 		<variable name="wipe_list_height" value="550" />
 		<variable name="wipe_button_y" value="400" />
+		<variable name="slidervalue_w" value="460" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="1" />
+		<variable name="slidervalue_padding" value="13" />
+		<variable name="slidervalue_sliderw" value="7" />
+		<variable name="slidervalue_sliderh" value="40" />
 	</variables>
 
 	<templates>
@@ -2253,100 +2260,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row3_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="col1_x" y="%row4_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="col1_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/480x854/res/ui.xml b/gui/devices/480x854/res/ui.xml
index de4d159..e4487f6 100644
--- a/gui/devices/480x854/res/ui.xml
+++ b/gui/devices/480x854/res/ui.xml
@@ -176,6 +176,13 @@
 		<variable name="storage_list_height" value="400" />
 		<variable name="wipe_list_height" value="550" />
 		<variable name="wipe_button_y" value="400" />
+		<variable name="slidervalue_w" value="460" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="1" />
+		<variable name="slidervalue_padding" value="13" />
+		<variable name="slidervalue_sliderw" value="7" />
+		<variable name="slidervalue_sliderh" value="40" />
 	</variables>
 
 	<templates>
@@ -2252,100 +2259,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row3_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="col1_x" y="%row4_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="col1_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/540x960/res/ui.xml b/gui/devices/540x960/res/ui.xml
index febc3db..6ea2e1c 100644
--- a/gui/devices/540x960/res/ui.xml
+++ b/gui/devices/540x960/res/ui.xml
@@ -177,6 +177,13 @@
 		<variable name="storage_list_height" value="675" />
 		<variable name="wipe_list_height" value="670" />
 		<variable name="wipe_button_y" value="475" />
+		<variable name="slidervalue_w" value="520" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="2" />
+		<variable name="slidervalue_padding" value="15" />
+		<variable name="slidervalue_sliderw" value="8" />
+		<variable name="slidervalue_sliderh" value="45" />
 	</variables>
 
 	<templates>
@@ -2253,100 +2260,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row3_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="col1_x" y="%row4_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="col1_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/720x1280/res/ui.xml b/gui/devices/720x1280/res/ui.xml
index e2a02b1..d43aae9 100644
--- a/gui/devices/720x1280/res/ui.xml
+++ b/gui/devices/720x1280/res/ui.xml
@@ -182,6 +182,13 @@
 		<variable name="storage_list_height" value="875" />
 		<variable name="wipe_list_height" value="870" />
 		<variable name="wipe_button_y" value="650" />
+		<variable name="slidervalue_w" value="700" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="2" />
+		<variable name="slidervalue_padding" value="20" />
+		<variable name="slidervalue_sliderw" value="10" />
+		<variable name="slidervalue_sliderh" value="60" />
 	</variables>
 
 	<templates>
@@ -2266,100 +2273,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row3_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="col1_x" y="%row4_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="col1_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/800x1280/res/ui.xml b/gui/devices/800x1280/res/ui.xml
index 7282c92..f7226f0 100755
--- a/gui/devices/800x1280/res/ui.xml
+++ b/gui/devices/800x1280/res/ui.xml
@@ -178,6 +178,13 @@
 		<variable name="storage_list_height" value="875" />
 		<variable name="wipe_list_height" value="870" />
 		<variable name="wipe_button_y" value="650" />
+		<variable name="slidervalue_w" value="780" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="2" />
+		<variable name="slidervalue_padding" value="20" />
+		<variable name="slidervalue_sliderw" value="10" />
+		<variable name="slidervalue_sliderh" value="60" />
 	</variables>
 
 	<templates>
@@ -2254,100 +2261,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row3_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%col1_x%" y="%row2_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="col1_x" y="%row4_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="col1_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>
 
diff --git a/gui/devices/800x480/res/ui.xml b/gui/devices/800x480/res/ui.xml
index 97fdf44..bb324df 100755
--- a/gui/devices/800x480/res/ui.xml
+++ b/gui/devices/800x480/res/ui.xml
@@ -197,6 +197,14 @@
 		<variable name="mount_storage_row" value="500" />
 		<variable name="wipe_list_height" value="300" />
 		<variable name="wipe_button_y" value="150" />
+		<variable name="slidervalue_x" value="200" />
+		<variable name="slidervalue_w" value="400" />
+		<variable name="slidervalue_line_clr" value="#FFFFFF" />
+		<variable name="slidervalue_slider_clr" value="#33B5E5" />
+		<variable name="slidervalue_lineh" value="1" />
+		<variable name="slidervalue_padding" value="0" />
+		<variable name="slidervalue_sliderw" value="7" />
+		<variable name="slidervalue_sliderh" value="40" />
 	</variables>
 
 	<templates>
@@ -2297,100 +2305,47 @@
 				<text>Screen Settings</text>
 			</object>
 
-			<object type="text" color="%text_color%">
-				<font resource="font" />
-				<placement x="%center_x%" y="%row4_text_y%" placement="5" />
-				<text>Screen Timeout: %tw_screen_timeout_secs% seconds</text>
-			</object>
-
 			<object type="button">
-				<placement x="%col1_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>None</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=0</action>
-			</object>
-
-			<object type="button">
-				<placement x="%col2_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>60</text>
-				<image resource="medium_button" />
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_false" />
 				<action function="set">tw_screen_timeout_secs=60</action>
 			</object>
 
 			<object type="button">
-				<placement x="%col3_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>120</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=120</action>
+				<placement x="%slidervalue_x%" y="%row3_text_y%" />
+				<font resource="font" color="%text_color%" />
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<text>Enable screen timeout.</text>
+				<image resource="checkbox_true" />
+				<action function="set">tw_screen_timeout_secs=0</action>
 			</object>
 
-			<object type="button">
-				<placement x="%col4_medium_x%" y="%row2_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>180</text>
-				<image resource="medium_button" />
-				<action function="set">tw_screen_timeout_secs=180</action>
+			<object type="slidervalue">
+				<condition var1="tw_screen_timeout_secs" op="!=" var2="0" />
+				<placement x="slidervalue_x" y="%row5_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Screen timeout in seconds:</text>
+				<data variable="tw_screen_timeout_secs" min="15" max="300" />
 			</object>
 
-			<object type="text" color="%text_color%">
+			<object type="slidervalue">
 				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<font resource="font" />
-				<placement x="%center_x%" y="%row12_text_y%" placement="5" />
-				<text>Brightness: %tw_brightness_display%</text>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col1_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>25%</text>
-				<image resource="medium_button" />
+				<placement x="slidervalue_x" y="%row12_text_y%" w="%slidervalue_w%" />
+				<font resource="font" color="%text_color%" />
+				<colors line="%slidervalue_line_clr%" slider="%slidervalue_slider_clr%" />
+				<dimensions lineh="%slidervalue_lineh%" linepadding="%slidervalue_padding%" sliderw="%slidervalue_sliderw%" sliderh="%slidervalue_sliderh%" />
+				<text>Brightness: %tw_brightness_pct%%</text>
+				<data variable="tw_brightness_pct" min="10" max="100" />
 				<actions>
-					<action function="cmd">echo %tw_brightness_25% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=25%</action>
-					<action function="set">tw_brightness=%tw_brightness_25%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col2_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>50%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_50% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=50%</action>
-					<action function="set">tw_brightness=%tw_brightness_50%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col3_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>75%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_75% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=75%</action>
-					<action function="set">tw_brightness=%tw_brightness_75%</action>
-				</actions>
-			</object>
-
-			<object type="button">
-				<condition var1="tw_has_brightnesss_file" var2="1" />
-				<placement x="%col4_medium_x%" y="%row4_medium_y%" />
-				<font resource="font" color="%button_text_color%" />
-				<text>100%</text>
-				<image resource="medium_button" />
-				<actions>
-					<action function="cmd">echo %tw_brightness_100% > &quot;%tw_brightness_file%&quot;</action>
-					<action function="set">tw_brightness_display=100%</action>
-					<action function="set">tw_brightness=%tw_brightness_100%</action>
+					<action function="set">tw_brightness=%tw_brightness_max%</action>
+					<action function="compute">tw_brightness*%tw_brightness_pct%</action>
+					<action function="compute">tw_brightness/100</action>
+					<action function="cmd">echo %tw_brightness% > &quot;%tw_brightness_file%&quot;</action>
 				</actions>
 			</object>