linhes-theme: add image-ui.xml for new gallery

2 files changed, 635 insertions, 2 deletions

diff --git a/abs/core/linhes-theme/PKGBUILD b/abs/core/linhes-theme/PKGBUILD
index 963232e..10fe8e1 100755
--- a/abs/core/linhes-theme/PKGBUILD
+++ b/abs/core/linhes-theme/PKGBUILD
@@ -1,6 +1,6 @@
 pkgname=linhes-theme
 pkgver=8.4
-pkgrel=14
+pkgrel=15
 pkgdesc="Default LinHES MythTV theme"
 arch=('i686' 'x86_64')
 license=('GPL2')
@@ -15,7 +15,7 @@ patches=('readme.txt.patch' 'osd.xml.patch' 'base.xml.patch'
 source=(`echo ${patches[@]:0}` 'themeinfo.xml' 'install-ui.xml' 'osd_subtitle.xml'
         'bubble_background.png' 'preview.png' 'blank_coverart.png'
         'checkmark.png' 'error.png' 'gears.png' 'question.png' 'warning.png'
-        'progdetails_page1.html'
+        'progdetails_page1.html' 'image-ui.xml'
         'LHLogo.png' 'LHLogoAndText.png')
 install=$pkgname.install
 
@@ -114,5 +114,6 @@ md5sums=('2dca856c2a4d1f959473512c94e43b60'
          'e8ac15e38b3dc99c9e889e439ba356de'
          'e8cf0d3a55ba3be47deae55c05432141'
          '58834fbee0230c713802c61e635cbab0'
+         '84fe19ee18a13736534f084f45604809'
          'b51ef0cbf8ed2d3a8c1a8257a89aceff'
          '09ad14842f828b7a8d24070ec8214fe5')
diff --git a/abs/core/linhes-theme/image-ui.xml b/abs/core/linhes-theme/image-ui.xml
new file mode 100644
index 0000000..3d2057b
--- /dev/null
+++ b/abs/core/linhes-theme/image-ui.xml
@@ -0,0 +1,632 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE mythuitheme SYSTEM "http://www.mythtv.org/schema/mythuitheme.dtd">
+<mythuitheme>
+    <!-- A gallery button showing a picture, video or folder -->
+    <window name="gallery">
+
+        <textarea name="heading" from="base_heading">
+            <value>Image Gallery</value>
+        </textarea>
+
+        <shape name="help-instr-backdrop" from="base_backdrop">
+            <area>0,36,1280,40</area>
+            <type>box</type>
+        </shape>
+
+        <shape name="help-instr-top-line" from="base_line">
+            <area>0,37,1280,2</area>
+        </shape>
+
+        <shape name="help-instr-bottom-line" from="base_line">
+            <area>0,73,1280,2</area>
+        </shape>
+
+        <shape name="arrows-backdrop" from="base_backdrop">
+            <area>1215,697,50,20</area>
+        </shape>
+
+        <!--shows path to current image -->
+        <textarea name="breadcrumbs">
+            <area>110,39,900,34</area>
+            <font>basesmallyellow</font>
+            <cutdown>no</cutdown>
+            <scroll direction="horizontal" startdelay="0" returndelay="0"/>
+            <align>left,vcenter</align>
+        </textarea>
+
+        <!-- shows current position in grid eg '1/123' -->
+        <textarea name="position" from="basetextarea">
+            <area>15,39,100,34</area>
+            <font>basesmall</font>
+            <align>left,vcenter</align>
+        </textarea>
+
+        <!-- Mandatory: the image list 10 columns x 6 rows -->
+        <buttonlist name="images0">
+            <area>15,80,100%-10,100%-30</area>
+            <buttonarea>0,15,100%,100%-10</buttonarea>
+            <wrapstyle>flowing</wrapstyle>
+            <layout>grid</layout>
+            <arrange>fixed</arrange>
+            <align>allcenter</align>
+            <spacing>0</spacing>  <!-- (100% - 10*10%) / (10-1) or 0% -->
+            <statetype name="buttonitem">
+                <area>0,0,100%,100%</area>
+                <state name="active">
+                    <area>0,0,10%,16%</area>
+                    <shape name="buttonbackground" from="base_backdrop">
+                        <area>0,0,100%,100%</area>
+                    </shape>
+                    <shape name="buttonbackground-line" from="base_backdrop_line">
+                        <area>1%,1%,99%,99%</area>
+                    </shape>
+                    <!-- Shows a picture image -->
+                    <imagetype name="buttonimage">
+                        <area>4%,4%,96%,96%</area>
+                        <preserveaspect>yes</preserveaspect>
+                    </imagetype>
+                    <!-- Shows a single folder image -->
+                    <imagetype name="folderimage" from="buttonimage">
+                    </imagetype>
+                    <!-- Shows image for default folder -->
+                    <imagetype name="thumbimage0" from="buttonimage">
+                    </imagetype>
+                    <!-- Shows a video image -->
+                    <imagetype name="videoimage"  from="buttonimage">
+                    </imagetype>
+                    <!-- Show a background image depending on node type -->
+                    <statetype name="buttontype">
+                        <area>0,0,100%,100%</area>
+                        <state name="subfolder">
+                            <area>0,0,100%,100%</area>
+                            <imagetype name="background">
+                                <area>30%,30%,55%,55%</area>
+                                <filename>images/folderclosed.png</filename>
+                                <preserveaspect>yes</preserveaspect>
+                            </imagetype>
+                        </state>
+                        <state name="device" from="subfolder"/>
+                        <state name="image">
+                            <area>0,0,100%,100%</area>
+                            <imagetype name="background">
+                                <area>0,0,100%,100%</area>
+                                <filename>images/image_gallery_no_image</filename>
+                                <alpha>64</alpha>
+                            </imagetype>
+                        </state>
+                        <state name="video">
+                            <area>0,0,50%,50%</area>
+                            <imagetype name="background">
+                                <area>0,0,100%,100%</area>
+                                <filename>images/no_preview_with_fanart.png</filename>
+                                <preserveaspect>yes</preserveaspect>
+                            </imagetype>
+                        </state>
+                    </statetype>
+                    <!-- Show how many images / directories are in this directory -->
+                    <textarea name="childcount">
+                        <area>0,0,100%,100%</area>
+                        <font>baseextrasmall</font>
+                        <align>allcenter</align>
+                    </textarea>
+                    <!-- Show up arrow on parent dir with ancestors -->
+                    <statetype name="parenttype">
+                        <area>0,0,100%,100%</area>
+                        <state name="upfolder">
+                            <area>0,0,100%,100%</area>
+                            <imagetype name="icon">
+                                <area>30%,30%,55%,55%</area>
+                                <filename>images/mv_gallery_dir_up.png</filename>
+                                <preserveaspect>yes</preserveaspect>
+                            </imagetype>
+                        </state>
+                    </statetype>
+                    <!-- Darken hidden files/ folders -->
+                    <statetype name="buttonstate">
+                        <area>0,0,100%,100%</area>
+                        <state name="visible"/>
+                        <state name="hidden">
+                            <area>0,0,100%,100%</area>
+                            <shape name="hidden_background_shape">
+                                <area>0,0,100%,100%</area>
+                                <type>box</type>
+                                <fill color="#000000" alpha="128"/>
+                            </shape>
+                        </state>
+                    </statetype>
+                    <!-- Shows that the image was marked/selected and
+                    might be manipulated with other images -->
+                    <statetype name="buttoncheck">
+                        <area>0,0,100%,100%</area>
+                        <state type="full">
+                            <area>70%,5%,76%,26%</area>
+                            <shape name="marked_background">
+                                <area>0,0,100%,100%</area>
+                                <type>ellipse</type>
+                                <fill color="#000000"/>
+                            </shape>
+                            <imagetype name="marked">
+                                <area>4%,4%,96%,96%</area>
+                                <filename>images/checkmark.png</filename>
+                                <preserveaspect>no</preserveaspect>
+                            </imagetype>
+                        </state>
+                    </statetype>
+                    <shape name="buttontext-backdrop" from="base_backdrop" depends="buttontext">
+                        <area>3%,97%-22,97%,22</area>
+                        <type>roundbox</type>
+                        <cornerradius>4</cornerradius>
+                    </shape>                   
+                    <textarea name="buttontext">
+                        <area>2%,97%-22,97%,22</area>
+                        <font>baseextrasmall</font>
+                        <align>allcenter</align>
+                    </textarea>
+                </state>
+
+                <state name="selectedactive" from="active">
+                    <area>-8,-8,10%+16,16%+16</area>
+                    <shape name="buttonbackground">
+                        <area>0,0,100%,100%</area>
+                        <type>roundbox</type>
+                        <fill color="#101017" alpha="255" />
+                        <cornerradius>8</cornerradius>
+                    </shape>
+                    <shape name="buttonbackground-line">
+                        <area>0,0,100%,100%</area>
+                        <type>roundbox</type>
+                        <fill color="#000000" alpha="0" />
+                        <line color="#ffffff" alpha="45" width="4" />
+                        <cornerradius>8</cornerradius>
+                    </shape>
+                    <shape name="buttonbackground-top-highlight-line">
+                        <area>8%,0,92%,4</area>
+                         <type>box</type>
+                        <fill style="gradient">
+                            <gradient direction="horizontal" alpha="0">
+                                <stop position="0" color="#ffffff" />
+                                <stop position="50" color="#ffffff" alpha="180" />
+                                <stop position="100" color="#ffffff" />
+                            </gradient>
+                        </fill>
+                    </shape>
+                    <shape name="buttonbackground-bottom-highlight-line" from="buttonbackground-top-highlight-line">
+                        <area>8%,100%-4,92%,4</area>
+                    </shape>
+                    <shape name="buttonbackground-left-highlight-line">
+                        <area>0,8%,4,92%</area>
+                        <type>box</type>
+                        <fill style="gradient">
+                            <gradient alpha="0" direction="vertical">
+                                <stop position="0" color="#ffffff" />
+                                <stop position="50" color="#ffffff" alpha="220" />
+                                <stop position="100" color="#ffffff" />
+                            </gradient>
+                        </fill>
+                    </shape>
+                    <shape name="buttonbackground-right-highlight-line" from="buttonbackground-left-highlight-line">
+                        <area>100%-4,8%,4,92%</area>
+                    </shape>
+
+                    <statetype name="buttontype" depends="!parenttype">
+                        <area>0,0,100%,100%</area>
+                        <state name="subfolder">
+                            <area>0,0,100%,100%</area>
+                            <imagetype name="background">
+                                <area>30%,30%,55%,55%</area>
+                                <filename>images/folderopen.png</filename>
+                                <preserveaspect>yes</preserveaspect>
+                            </imagetype>
+                        </state>
+                    </statetype>
+
+                    <!-- Show up arrow on parent dir with ancestors -->
+                    <statetype name="parenttype">
+                        <state name="upfolder">
+                            <imagetype name="icon">
+                                <filename>images/mv_gallery_dir_up_open.png</filename>
+                            </imagetype>
+                        </state>
+                    </statetype>
+                    <!-- Show how many images / directories are in this directory -->
+                    <textarea name="childcount">
+                        <font>baseextrasmallyellow</font>
+                    </textarea>
+                    <textarea name="buttontext">
+                        <area>2%,97%-22,97%,22</area>
+                        <font>baseextrasmallyellow</font>
+                        <align>allcenter</align>
+                    </textarea>
+                </state>
+
+                <state name="inactive" from="active"/>
+
+                <state name="selectedinactive" from="active"/>
+            </statetype>
+
+            <statetype name="upscrollarrow">
+                <position>1207,623</position>
+                <state type="off">
+                    <imagetype name="upoff">
+                        <filename>images/lists_up_arrow.png</filename>
+                        <alpha>80</alpha>
+                    </imagetype>
+                </state>
+                <state type="full">
+                    <imagetype name="upon">
+                        <filename>images/lists_up_arrow.png</filename>
+                        <alpha>200</alpha>
+                    </imagetype>
+                </state>
+            </statetype>
+            <statetype name="downscrollarrow">
+                <position>1227,623</position>
+                <state type="off">
+                    <imagetype name="dnoff">
+                        <filename>images/lists_down_arrow.png</filename>
+                        <alpha>80</alpha>
+                    </imagetype>
+                </state>
+                <state type="full">
+                    <imagetype name="dnon">
+                        <filename>images/lists_down_arrow.png</filename>
+                        <alpha>200</alpha>
+                    </imagetype>
+                </state>
+            </statetype>
+
+        </buttonlist>
+
+        <!-- the image list 8 columns x 4 rows -->
+        <buttonlist name="images1" from="images0">
+            <spacing>7</spacing>  <!-- (100% - 8*12%) / (8-1) or 0.57% -->
+            <statetype name="buttonitem">
+                <state name="active">
+                    <area>0,0,12%,24%</area>
+                </state>
+                <state name="selectedactive">
+                    <area>-8,-8,12%+16,24%+16</area>
+                </state>
+            </statetype>
+        </buttonlist>
+
+        <!-- the image list 6 columns x 3 rows -->
+        <buttonlist name="images2" from="images0">
+            <spacing>10</spacing>  <!-- (100% - 6*16%) / (6-1) or 0.8% -->
+            <statetype name="buttonitem">
+                <state name="active">
+                    <area>0,0,16%,32%</area>
+                </state>
+                <state name="selectedactive">
+                    <area>-10,-12,16%+20,32%+20</area>
+                </state>
+            </statetype>
+        </buttonlist>
+
+        <!-- the image list 4 columns x 2 rows -->
+        <buttonlist name="images3" from="images0">
+            <spacing>0</spacing>  <!-- (100% - 4*25%) / (4-1) or 0% -->
+            <statetype name="buttonitem">
+                <state name="active">
+                    <area>0,0,25%,50%</area>
+                </state>
+                <state name="selectedactive">
+                    <area>-9,-9,25%+16,50%+10</area>
+                </state>
+            </statetype>
+        </buttonlist>
+
+        <!-- shows a message when no images are available
+             in the current directory -->
+        <textarea name="noimages" from="basetextarea">
+            <area>20,76,1240,589</area>
+            <font>basemedium</font>
+            <align>allcenter</align>
+        </textarea>
+
+        <!-- Mandatory: Shows file info overlay -->
+        <buttonlist name="infolist" from="base_list">
+            <area>10,80,510,100%-30</area>
+            <layout>vertical</layout>
+            <spacing>0</spacing>
+            <scrollstyle>free</scrollstyle>
+            <arrange>stack</arrange>
+            <wrapstyle>items</wrapstyle>
+            <align>center</align>
+            <buttonarea>0,0,100%,100%</buttonarea>
+            <statetype name="buttonitem">
+                <state name="active">
+                    <area>0,0,100%,30</area>
+                    <group name="select_bar" from="base_select_bar_active_group">
+                        <area>0,0,100%,100%</area>
+                        <shape name="select_bar">
+                            <fill color="#000000" alpha="210" />
+                            <type>box</type>
+                        </shape>
+                    </group>
+                    <textarea name="name" from="basetextarea">
+                        <area>10,0,100%-10,30</area>
+                        <scroll direction="left" />
+                        <cutdown>yes</cutdown>
+                        <template>%NAME%: %VALUE%</template>
+                    </textarea>
+                </state>
+                <state name="selectedactive" from="active" />
+                <state name="selectedinactive" from="active" />
+            </statetype>
+            <statetype name="upscrollarrow">
+                <position>20,-15</position>
+                <state type="off">
+                    <imagetype name="upoff">
+                        <alpha>0</alpha>
+                    </imagetype>
+                </state>
+                <state type="full">
+                    <imagetype name="upon">
+                        <filename>images/lists_up_arrow.png</filename>
+                        <alpha>200</alpha>
+                    </imagetype>
+                </state>
+            </statetype>
+            <statetype name="downscrollarrow">
+                <position>20,100%+10</position>
+                <state type="off">
+                    <imagetype name="dnoff">
+                        <alpha>0</alpha>
+                    </imagetype>
+                </state>
+                <state type="full">
+                    <imagetype name="dnon">
+                        <filename>images/lists_down_arrow.png</filename>
+                        <alpha>200</alpha>
+                    </imagetype>
+                </state>
+            </statetype>
+        </buttonlist>
+
+        <!--Shows scan progress-->
+        <group name="progress">
+            <area>0,0,100%,100%</area>
+
+            <animation trigger="AboutToShow">
+                <section>
+                    <alpha start="0" end="255" easingcurve="OutQuart"/>
+                    <zoom start="0" end="100" easingcurve="OutQuart"/>
+                </section>
+            </animation>
+
+            <animation trigger="AboutToHide">
+                <section>
+                    <alpha start="255" end="0" easingcurve="InQuart"/>
+                    <zoom start="100" end="0" easingcurve="InQuart"/>
+                </section>
+            </animation>
+
+            <shape name="osd-status-backdrop" depends="scanprogresstext">
+                <area>64,624,1152,60</area>
+                <type>roundbox</type>
+                <fill color="#000000" alpha="140" />
+                <cornerradius>8</cornerradius>
+            </shape>
+
+            <shape name="osd-status-backdrop-line" depends="scanprogresstext">
+                <area>65,625,1150,58</area>
+                <type>roundbox</type>
+                <fill color="#000000" alpha="0" />
+                <line color="#ffffff" alpha="45" width="2" />
+                <cornerradius>6</cornerradius>
+            </shape>
+
+            <shape name="top-line" depends="scanprogresstext">
+                <area>66,626,1148,2</area>
+                <type>box</type>
+                <fill style="gradient">
+                    <gradient direction="horizontal" alpha="0">
+                        <stop position="0" color="#ffffff" />
+                        <stop position="50" color="#ffffff" alpha="120" />
+                        <stop position="100" color="#ffffff" />
+                    </gradient>
+                </fill>
+            </shape>
+
+            <shape name="bottom-line" from="top-line" depends="scanprogresstext">
+                <area>66,680,1148,2</area>
+            </shape>
+
+            <shape name="left-line" depends="scanprogresstext">
+                <area>66,628,2,52</area>
+                <type>box</type>
+                <fill style="gradient">
+                    <gradient direction="vertical" alpha="0">
+                        <stop position="0" color="#ffffff" />
+                        <stop position="50" color="#ffffff" alpha="180" />
+                        <stop position="100" color="#ffffff" />
+                    </gradient>
+                </fill>
+            </shape>
+
+            <shape name="right-line" from="left-line" depends="scanprogresstext">
+                <area>1212,628,2,52</area>
+            </shape>
+
+            <!-- Progress bar-->
+            <progressbar name="scanprogressbar">
+                <area>90,650,1100,8</area>
+                <layout>horizontal</layout>
+                <style>reveal</style>
+                <imagetype name="background">
+                    <area>0,0,100%,100%</area>
+                    <filename>images/osd/progressbar_background.png</filename>
+                </imagetype>
+                <imagetype name="progressimage">
+                    <area>0,0,100%,100%</area>
+                    <filename>images/osd/progressbar_fill.png</filename>
+                </imagetype>
+            </progressbar>
+
+            <!--Shows numerical scan progress-->
+            <textarea name="scanprogresstext" from="basetextarea">
+                <area>90,657,1100,24</area>
+                <font>basesmall</font>
+                <align>allcenter</align>
+            </textarea>
+        </group>
+
+        <!-- shows state of type filter -->
+        <textarea name="typefilter" from="basetextarea">
+            <area>1100,39,100,34</area>
+            <font>basesmallblue</font>
+            <align>left,vcenter</align>
+        </textarea>
+        <textarea name="typefilterAll" from="basetextarea" depends="!typefilter">
+            <value>All</value>
+            <area>1100,39,100,34</area>
+            <font>basesmallblue</font>
+            <align>left,vcenter</align>
+        </textarea>
+        <textarea name="typefilterlabel" from="basetextarea">
+            <value>Show:</value>
+            <area>1035,39,60,34</area>
+            <font>basesmallblue</font>
+            <align>right,vcenter</align>
+        </textarea>
+
+        <!-- shows state of hidden filter -->
+        <textarea name="hidefilter" from="basetextarea">
+            <area>1185,39,80,34</area>
+            <font>basesmallblue</font>
+            <align>right,vcenter</align>
+        </textarea>
+    </window>
+
+    <!-- Gallery Slideshow window which shows the a single image only or a slideshow. -->
+    <window name="slideshow">
+
+        <!-- Extra small text for Gallery images -->
+        <fontdef name="gallerytext" from="basesmall">
+            <outlinecolor>#000000</outlinecolor>
+            <outlinesize>2</outlinesize>
+        </fontdef>
+
+        <!-- the background behind the images -->
+        <shape name="background_shape">
+            <area>0,0,100%,100%</area>
+            <fill color="#000000" alpha="255"/>
+        </shape>
+
+        <!-- an image  -->
+        <imagetype name="image">
+            <area>0,0,100%,100%</area>
+            <preserveaspect>yes</preserveaspect>
+        </imagetype>
+
+        <!-- Represents "Show Captions" state for use as a dependancy by other widgets
+         Set = Hide; empty = Show  -->
+        <textarea name="hidecaptions" from="basetextarea">
+            <area>0,0,0,0</area>
+        </textarea>
+
+        <!-- End/Loading/Failed to load status -->
+        <textarea name="status" from="basetextarea" depends="!hidecaptions">
+            <area>200,0,100%-200,30</area>
+            <font>basesmall</font>
+            <align>hcenter,top</align>
+        </textarea>
+
+        <!-- Slide count -->
+        <textarea name="slidecount" from="basetextarea" depends="!hidecaptions">
+            <area>100%-200,0,190,30</area>
+            <font>gallerytext</font>
+            <align>right, vcentre</align>
+        </textarea>
+
+        <!-- Date/Comment -->
+        <textarea name="caption" from="basetextarea" depends="!hidecaptions">
+            <area>10,100%-28,100%-10,30</area>
+            <font>gallerytext</font>
+            <align>right, vcenter</align>
+            <cutdown>no</cutdown>
+            <scroll direction="horizontal"/>
+        </textarea>
+
+        <!-- Shows file info overlay -->
+        <buttonlist name="infolist" from="base_list">
+            <area>10,30,510,100%-30</area>
+            <layout>vertical</layout>
+            <spacing>1</spacing>
+            <scrollstyle>free</scrollstyle>
+            <arrange>stack</arrange>
+            <wrapstyle>items</wrapstyle>
+            <align>center</align>
+            <buttonarea>0,0,100%,100%</buttonarea>
+            <statetype name="buttonitem">
+                <state name="active">
+                    <area>0,0,100%,30</area>
+                    <group name="select_bar" from="base_select_bar_active_group">
+                        <area>0,0,100%,100%</area>
+                    </group>
+                    <textarea name="name" from="basetextarea">
+                        <area>15,0,100%,30</area>
+                        <cutdown>yes</cutdown>
+                        <template>%NAME%: %VALUE%</template>
+                    </textarea>
+                </state>
+                <state name="selectedactive">
+                    <area>0,0,100%,64</area>
+                    <shape name="select_bar_backdrop_line" from="base_backdrop_line">
+                        <area>0,0,100%,100%-2</area>
+                        <type>box</type>
+                    </shape>
+                    <group name="select_bar" from="base_select_bar_selectedactive_group">
+                        <area>1,1,100%-2,100%-2</area>
+                    </group>
+
+                    <shape name="select_bar_left_line" from="base_highlight_vertical_line">
+                        <area>0,0,2,100%</area>
+                    </shape>
+                    <shape name="select_bar_right_line" from="base_highlight_vertical_line">
+                        <area>100%-4,0,2,100%</area>
+                    </shape>
+                    <textarea name="name" from="basetextarea">
+                        <area>15,5,100%,50</area>
+                        <multiline>yes</multiline>
+                        <scroll direction="up" rate="20"/>
+                        <template>%NAME%: %VALUE%</template>
+                        <font>basesmallyellow</font>
+                    </textarea>
+                </state>
+                <state name="selectedinactive" from="active" />
+            </statetype>
+            <statetype name="upscrollarrow">
+                <position>20,-15</position>
+                <state type="off">
+                    <imagetype name="upoff">
+                        <alpha>0</alpha>
+                    </imagetype>
+                </state>
+                <state type="full">
+                    <imagetype name="upon">
+                        <filename>images/lists_up_arrow.png</filename>
+                        <alpha>200</alpha>
+                    </imagetype>
+                </state>
+            </statetype>
+            <statetype name="downscrollarrow">
+                <position>20,100%+10</position>
+                <state type="off">
+                    <imagetype name="dnoff">
+                        <alpha>0</alpha>
+                    </imagetype>
+                </state>
+                <state type="full">
+                    <imagetype name="dnon">
+                        <filename>images/lists_down_arrow.png</filename>
+                        <alpha>200</alpha>
+                    </imagetype>
+                </state>
+            </statetype>
+        </buttonlist>
+
+    </window>
+
+</mythuitheme>