Added new graphics to radio demo

Change-Id: I64ad58a2f559055adeef6d1525fbdb4f76af04af
Reviewed-by: Lasse Räihä <lasse.raiha@digia.com>

7 files changed, 215 insertions, 4 deletions

diff --git a/QtDemo/qml/QtDemo/demos/radio/VolumeButton.qml b/QtDemo/qml/QtDemo/demos/radio/VolumeButton.qml
index d6978e5..abd8dd3 100644
--- a/QtDemo/qml/QtDemo/demos/radio/VolumeButton.qml
+++ b/QtDemo/qml/QtDemo/demos/radio/VolumeButton.qml
@@ -43,8 +43,8 @@ Item {
             height: parent.height*.6
 
             Image {
-                anchors.fill: parent
-                source: !root.playing ? "images/play.png" : "images/pause.png"
+                anchors {fill: parent; margins: parent.height*.3}
+                source: !root.playing ? "images/radio_btn_play.svg" : "images/radio_btn_pause.svg"
             }
 
             MouseArea {
@@ -81,8 +81,8 @@ Item {
             border {width:1; color: "#888888"}
 
             Image {
-                anchors.fill: parent
-                source: "images/volume.png"
+                anchors {fill: parent; margins: parent.height*.2}
+                source: "images/radio_sound_icon.svg"
                 rotation: -volumeRotation.angle
             }
         }
diff --git a/QtDemo/qml/QtDemo/demos/radio/images/pause.png b/QtDemo/qml/QtDemo/demos/radio/images/pause.png
deleted file mode 100644
index 0fbc7ee..0000000
--- a/QtDemo/qml/QtDemo/demos/radio/images/pause.png
+++ /dev/null
diff --git a/QtDemo/qml/QtDemo/demos/radio/images/play.png b/QtDemo/qml/QtDemo/demos/radio/images/play.png
deleted file mode 100644
index 8dfdaab..0000000
--- a/QtDemo/qml/QtDemo/demos/radio/images/play.png
+++ /dev/null
diff --git a/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_pause.svg b/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_pause.svg
new file mode 100644
index 0000000..017a65b
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_pause.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="108px" height="118px" viewBox="0 0 108 118" enable-background="new 0 0 108 118" xml:space="preserve">

+<g>

+	<g>

+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="22.5" y1="0" x2="22.5" y2="118.0005">

+			<stop  offset="0" style="stop-color:#052E41"/>

+			<stop  offset="1" style="stop-color:#0C5577"/>

+		</linearGradient>

+		<path fill="url(#SVGID_1_)" d="M35,0H10C4.5,0,0,4.5,0,10v98c0,5.5,4.5,10,10,10h25c5.5,0,10-4.5,10-10V10C45,4.5,40.5,0,35,0

+			L35,0z"/>

+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="22.5" y1="0" x2="22.5" y2="118.0005">

+			<stop  offset="0" style="stop-color:#1E1B18"/>

+			<stop  offset="0.0238" style="stop-color:#2B2825"/>

+			<stop  offset="0.1251" style="stop-color:#5C5A58"/>

+			<stop  offset="0.2313" style="stop-color:#888684"/>

+			<stop  offset="0.3404" style="stop-color:#ACABAA"/>

+			<stop  offset="0.4531" style="stop-color:#CACAC9"/>

+			<stop  offset="0.5706" style="stop-color:#E2E1E1"/>

+			<stop  offset="0.6949" style="stop-color:#F2F2F2"/>

+			<stop  offset="0.8309" style="stop-color:#FCFCFC"/>

+			<stop  offset="1" style="stop-color:#FFFFFF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_2_)" fill-opacity="0.1" d="M35,0H10C4.5,0,0,4.5,0,10v98c0,5.5,4.5,10,10,10h25c5.5,0,10-4.5,10-10V10

+			C45,4.5,40.5,0,35,0L35,0z"/>

+		<path fill="#FFFFFF" d="M41,10c0-3.309-2.691-6-6-6H10c-3.309,0-6,2.691-6,6v98c0,3.309,2.691,6,6,6h25c3.309,0,6-2.691,6-6V10z"

+			/>

+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="22.5" y1="4" x2="22.5" y2="14">

+			<stop  offset="0" style="stop-color:#AEADAC"/>

+			<stop  offset="1" style="stop-color:#E1E0DF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_3_)" d="M35,4H10c-3.309,0-6,2.691-6,6v4c0-3.309,2.691-6,6-6h25c3.309,0,6,2.691,6,6v-4

+			C41,6.691,38.309,4,35,4z"/>

+	</g>

+	<g>

+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="85.5" y1="0" x2="85.5" y2="118.0005">

+			<stop  offset="0" style="stop-color:#052E41"/>

+			<stop  offset="1" style="stop-color:#0C5577"/>

+		</linearGradient>

+		<path fill="url(#SVGID_4_)" d="M98,0H73c-5.5,0-10,4.5-10,10v98c0,5.5,4.5,10,10,10h25c5.5,0,10-4.5,10-10V10

+			C108,4.5,103.5,0,98,0L98,0z"/>

+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="85.5" y1="0" x2="85.5" y2="118.0005">

+			<stop  offset="0" style="stop-color:#1E1B18"/>

+			<stop  offset="0.0238" style="stop-color:#2B2825"/>

+			<stop  offset="0.1251" style="stop-color:#5C5A58"/>

+			<stop  offset="0.2313" style="stop-color:#888684"/>

+			<stop  offset="0.3404" style="stop-color:#ACABAA"/>

+			<stop  offset="0.4531" style="stop-color:#CACAC9"/>

+			<stop  offset="0.5706" style="stop-color:#E2E1E1"/>

+			<stop  offset="0.6949" style="stop-color:#F2F2F2"/>

+			<stop  offset="0.8309" style="stop-color:#FCFCFC"/>

+			<stop  offset="1" style="stop-color:#FFFFFF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_5_)" fill-opacity="0.1" d="M98,0H73c-5.5,0-10,4.5-10,10v98c0,5.5,4.5,10,10,10h25c5.5,0,10-4.5,10-10V10

+			C108,4.5,103.5,0,98,0L98,0z"/>

+		<path fill="#FFFFFF" d="M104,10c0-3.309-2.691-6-6-6H73c-3.309,0-6,2.691-6,6v98c0,3.309,2.691,6,6,6h25c3.309,0,6-2.691,6-6V10z"

+			/>

+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="85.5" y1="4" x2="85.5" y2="14">

+			<stop  offset="0" style="stop-color:#AEADAC"/>

+			<stop  offset="1" style="stop-color:#E1E0DF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_6_)" d="M98,4H73c-3.309,0-6,2.691-6,6v4c0-3.309,2.691-6,6-6h25c3.309,0,6,2.691,6,6v-4

+			C104,6.691,101.309,4,98,4z"/>

+	</g>

+</g>

+</svg>

diff --git a/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_play.svg b/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_play.svg
new file mode 100644
index 0000000..b90afd4
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_play.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="109px" height="131px" viewBox="0 0 109 131" enable-background="new 0 0 109 131" xml:space="preserve">

+<g>

+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="54.4956" y1="0" x2="54.4956" y2="130.0981">

+		<stop  offset="0" style="stop-color:#00293C"/>

+		<stop  offset="1" style="stop-color:#115A79"/>

+	</linearGradient>

+	<path fill="url(#SVGID_1_)" d="M8.601,0L8.601,0C3.537,0,0,4.133,0,10.049l0,110c0,5.917,3.537,10.049,8.601,10.049

+		c1.972,0,3.996-0.628,6.015-1.866l88.95-54.545c3.447-2.114,5.426-5.263,5.426-8.638s-1.979-6.523-5.426-8.638L14.616,1.866

+		C12.596,0.628,10.572,0,8.601,0L8.601,0z"/>

+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="54.4956" y1="0" x2="54.4956" y2="130.0981">

+		<stop  offset="0" style="stop-color:#1E1B18"/>

+		<stop  offset="0.0238" style="stop-color:#2B2825"/>

+		<stop  offset="0.1251" style="stop-color:#5C5A58"/>

+		<stop  offset="0.2313" style="stop-color:#888684"/>

+		<stop  offset="0.3404" style="stop-color:#ACABAA"/>

+		<stop  offset="0.4531" style="stop-color:#CACAC9"/>

+		<stop  offset="0.5706" style="stop-color:#E2E1E1"/>

+		<stop  offset="0.6949" style="stop-color:#F2F2F2"/>

+		<stop  offset="0.8309" style="stop-color:#FCFCFC"/>

+		<stop  offset="1" style="stop-color:#FFFFFF"/>

+	</linearGradient>

+	<path fill="url(#SVGID_2_)" fill-opacity="0.1" d="M8.601,0L8.601,0C3.537,0,0,4.133,0,10.049l0,110

+		c0,5.917,3.537,10.049,8.601,10.049c1.972,0,3.996-0.628,6.015-1.866l88.95-54.545c3.447-2.114,5.426-5.263,5.426-8.638

+		s-1.979-6.523-5.426-8.638L14.616,1.866C12.596,0.628,10.572,0,8.601,0L8.601,0z"/>

+	<path fill="#FFFFFF" d="M101.475,59.821L12.525,5.276C11.112,4.41,9.777,4,8.601,4C5.873,4,4,6.206,4,10.049l0,110

+		c0,3.843,1.873,6.049,4.601,6.049c1.176,0,2.512-0.41,3.924-1.276l88.949-54.545C106.164,67.401,106.164,62.696,101.475,59.821z"/>

+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="54.4907" y1="4" x2="54.4907" y2="126.0356">

+		<stop  offset="0" style="stop-color:#AEADAC"/>

+		<stop  offset="1" style="stop-color:#E1E0DF"/>

+	</linearGradient>

+	<path fill="url(#SVGID_3_)" d="M8,10.049C8,8.65,8.366,8.084,8.451,8.016C8.462,8.012,8.512,8,8.601,8

+		c0.215,0,0.823,0.066,1.833,0.687l94.392,57.547c0.593-2.268-0.516-4.674-3.352-6.412L12.525,5.276C11.112,4.41,9.777,4,8.601,4

+		C5.873,4,4,6.206,4,10.049l0,110c0,3.549,1.607,5.678,4,5.986L8,10.049z"/>

+</g>

+<rect fill="none" width="109" height="131"/>

+</svg>

diff --git a/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_stop.svg b/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_stop.svg
new file mode 100644
index 0000000..98567de
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/radio/images/radio_btn_stop.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="108px" height="108px" viewBox="0 0 108 108" enable-background="new 0 0 108 108" xml:space="preserve">

+<g>

+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="53.9995" y1="0" x2="53.9995" y2="108.0005">

+		<stop  offset="0" style="stop-color:#052E41"/>

+		<stop  offset="1" style="stop-color:#0C5577"/>

+	</linearGradient>

+	<path fill="url(#SVGID_1_)" d="M98,0H10C4.5,0,0,4.5,0,10v88c0,5.5,4.5,10,10,10h88c5.5,0,10-4.5,10-10V10C108,4.5,103.5,0,98,0

+		L98,0z"/>

+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="53.9995" y1="0" x2="53.9995" y2="108.0005">

+		<stop  offset="0" style="stop-color:#1E1B18"/>

+		<stop  offset="0.0238" style="stop-color:#2B2825"/>

+		<stop  offset="0.1251" style="stop-color:#5C5A58"/>

+		<stop  offset="0.2313" style="stop-color:#888684"/>

+		<stop  offset="0.3404" style="stop-color:#ACABAA"/>

+		<stop  offset="0.4531" style="stop-color:#CACAC9"/>

+		<stop  offset="0.5706" style="stop-color:#E2E1E1"/>

+		<stop  offset="0.6949" style="stop-color:#F2F2F2"/>

+		<stop  offset="0.8309" style="stop-color:#FCFCFC"/>

+		<stop  offset="1" style="stop-color:#FFFFFF"/>

+	</linearGradient>

+	<path fill="url(#SVGID_2_)" fill-opacity="0.1" d="M98,0H10C4.5,0,0,4.5,0,10v88c0,5.5,4.5,10,10,10h88c5.5,0,10-4.5,10-10V10

+		C108,4.5,103.5,0,98,0L98,0z"/>

+	<path fill="#FFFFFF" d="M104,10c0-3.309-2.691-6-6-6H10c-3.309,0-6,2.691-6,6v88c0,3.309,2.691,6,6,6h88c3.309,0,6-2.691,6-6V10z"

+		/>

+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="53.9995" y1="4" x2="53.9995" y2="14">

+		<stop  offset="0" style="stop-color:#AEADAC"/>

+		<stop  offset="1" style="stop-color:#E1E0DF"/>

+	</linearGradient>

+	<path fill="url(#SVGID_3_)" d="M98,4H10c-3.309,0-6,2.691-6,6v4c0-3.309,2.691-6,6-6h88c3.309,0,6,2.691,6,6v-4

+		C104,6.691,101.309,4,98,4z"/>

+</g>

+</svg>

diff --git a/QtDemo/qml/QtDemo/demos/radio/images/radio_sound_icon.svg b/QtDemo/qml/QtDemo/demos/radio/images/radio_sound_icon.svg
new file mode 100644
index 0000000..5e0be55
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/radio/images/radio_sound_icon.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="59px" height="45px" viewBox="0 0 59 45" enable-background="new 0 0 59 45" xml:space="preserve">

+<g>

+	<g>

+		<path fill="#FFFFFF" d="M0,28.645c0,1.65,1.35,3,3,3h4c1.65,0,4.042,0.858,5.316,1.907l12.368,10.186

+			c0.454,0.374,0.878,0.552,1.236,0.552c0.647,0,1.08-0.582,1.08-1.645v-41C27,0.582,26.568,0,25.92,0

+			c-0.358,0-0.783,0.178-1.236,0.552L12.316,10.737C11.042,11.786,8.65,12.645,7,12.645H3c-1.65,0-3,1.35-3,3V28.645z"/>

+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.4771" y1="0" x2="13.477" y2="31.4595">

+			<stop  offset="0" style="stop-color:#AEADAC"/>

+			<stop  offset="1" style="stop-color:#E1E0DF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_1_)" d="M2,28.645v-13c0-0.542,0.458-1,1-1h4c2.119,0,4.951-1.016,6.587-2.363L26.954,1.229

+			C26.85,0.445,26.473,0,25.92,0c-0.358,0-0.783,0.178-1.236,0.552L12.316,10.737C11.042,11.786,8.65,12.645,7,12.645H3

+			c-1.65,0-3,1.35-3,3v13c0,1.298,0.84,2.399,2,2.814V28.645z"/>

+	</g>

+	<g>

+		<path fill="#FFFFFF" d="M37.809,8.95c-0.256-0.223-0.572-0.333-0.888-0.333c-0.347,0-0.691,0.132-0.954,0.396l-2.508,2.508

+			c-0.267,0.267-0.409,0.634-0.393,1.011c0.016,0.376,0.189,0.73,0.478,0.972c2.564,2.161,4.034,5.311,4.034,8.642

+			s-1.47,6.48-4.034,8.642c-0.288,0.241-0.462,0.596-0.478,0.972c-0.017,0.378,0.126,0.745,0.393,1.011l2.508,2.508

+			c0.263,0.264,0.607,0.396,0.954,0.396c0.315,0,0.632-0.11,0.888-0.333c3.811-3.333,5.996-8.142,5.996-13.194

+			C43.805,17.093,41.619,12.284,37.809,8.95z"/>

+		<path fill="#FFFFFF" d="M49.428,0.386c-0.26-0.241-0.588-0.359-0.916-0.359c-0.346,0-0.691,0.132-0.954,0.395l-3.121,3.122

+			c-0.261,0.26-0.403,0.615-0.396,0.984c0.009,0.366,0.167,0.716,0.439,0.965c4.676,4.272,7.357,10.343,7.357,16.652

+			s-2.682,12.38-7.357,16.652c-0.272,0.249-0.431,0.599-0.439,0.965c-0.008,0.369,0.135,0.724,0.396,0.984l3.122,3.122

+			c0.263,0.263,0.607,0.395,0.953,0.395c0.328,0,0.656-0.118,0.916-0.359c6.044-5.599,9.512-13.529,9.512-21.759

+			C58.939,13.916,55.472,5.985,49.428,0.386z"/>

+	</g>

+	<g>

+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="38.4355" y1="8.6172" x2="38.4355" y2="23.145">

+			<stop  offset="0" style="stop-color:#AEADAC"/>

+			<stop  offset="1" style="stop-color:#E1E0DF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_2_)" d="M35.967,11.013c0.263-0.264,0.607-0.396,0.954-0.396c0.315,0,0.632,0.11,0.888,0.333

+			c3.557,3.112,5.674,7.514,5.942,12.194c0.019-0.333,0.054-0.664,0.054-1c0-5.052-2.186-9.86-5.996-13.194

+			c-0.256-0.223-0.572-0.333-0.888-0.333c-0.347,0-0.691,0.132-0.954,0.396l-2.508,2.508c-0.267,0.267-0.409,0.634-0.393,1.011

+			c0.016,0.36,0.178,0.697,0.445,0.938L35.967,11.013z"/>

+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="35.3223" y1="23.1445" x2="35.3223" y2="32.8203">

+			<stop  offset="0" style="stop-color:#AEADAC"/>

+			<stop  offset="1" style="stop-color:#E1E0DF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_3_)" d="M33.512,32.82c0.012-0.011,0.02-0.024,0.032-0.034c2.564-2.161,4.034-5.311,4.034-8.642

+			c0-0.336-0.025-0.668-0.055-1c-0.264,2.955-1.674,5.698-3.979,7.642c-0.288,0.241-0.462,0.596-0.478,0.972

+			c-0.017,0.378,0.126,0.745,0.393,1.011L33.512,32.82z"/>

+	</g>

+	<g>

+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="51.4902" y1="0.0264" x2="51.4902" y2="23.145">

+			<stop  offset="0" style="stop-color:#AEADAC"/>

+			<stop  offset="1" style="stop-color:#E1E0DF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_4_)" d="M44.484,5.496l3.073-3.075c0.263-0.263,0.608-0.395,0.954-0.395c0.328,0,0.656,0.118,0.916,0.359

+			c5.799,5.372,9.217,12.891,9.484,20.759c0.012-0.333,0.027-0.666,0.027-1c0-8.229-3.468-16.159-9.512-21.759

+			c-0.26-0.241-0.588-0.359-0.916-0.359c-0.346,0-0.691,0.132-0.954,0.395l-3.121,3.122c-0.261,0.26-0.403,0.615-0.396,0.984

+			c0.009,0.366,0.167,0.716,0.439,0.965C44.481,5.493,44.482,5.494,44.484,5.496z"/>

+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="47.9395" y1="23.1445" x2="47.9395" y2="40.793">

+			<stop  offset="0" style="stop-color:#AEADAC"/>

+			<stop  offset="1" style="stop-color:#E1E0DF"/>

+		</linearGradient>

+		<path fill="url(#SVGID_5_)" d="M44.484,40.793c4.674-4.271,7.354-10.341,7.354-16.648c0-0.334-0.012-0.667-0.026-1

+			c-0.268,5.947-2.902,11.606-7.331,15.652c-0.272,0.249-0.431,0.599-0.439,0.965c-0.008,0.369,0.135,0.724,0.396,0.984

+			L44.484,40.793z"/>

+	</g>

+</g>

+<rect fill="none" width="59" height="45"/>

+</svg>