├── LICENSE ├── README.md ├── mobile ├── android.html ├── epg.html ├── images │ ├── arts.png │ ├── book_open.png │ ├── children.png │ ├── clearsearch.png │ ├── date_next.png │ ├── date_previous.png │ ├── desktop.png │ ├── gradient.png │ ├── hobbies.png │ ├── layout_add.png │ ├── layout_delete.png │ ├── magazine.png │ ├── mobile.png │ ├── movies.png │ ├── music.png │ ├── news.png │ ├── pb_left.png │ ├── pb_middle.png │ ├── pb_right.png │ ├── pb_trans.png │ ├── resultset_next.png │ ├── resultset_previous.png │ ├── science.png │ ├── show.png │ ├── social.png │ ├── special.png │ ├── sports.png │ ├── tick.png │ ├── timeline.png │ ├── timeline200.png │ ├── tvheadend128.png │ └── white75.png ├── index.html ├── iui │ ├── ext-sandbox │ │ ├── TbBMod │ │ │ ├── Read Me.txt │ │ │ ├── TbBMod.js │ │ │ ├── ajaxhelp.html │ │ │ ├── formno.html │ │ │ ├── formyes.html │ │ │ ├── how.html │ │ │ ├── index.html │ │ │ ├── instruction2.html │ │ │ └── xtra.css │ │ ├── cache-manager │ │ │ ├── cache-demo.html │ │ │ ├── cache-demo.manifest │ │ │ └── iui-cache-manager.js │ │ ├── canvg │ │ │ ├── canvg.js │ │ │ ├── index.html │ │ │ ├── iui-canvg.js │ │ │ ├── rgbcolor.js │ │ │ └── testimages │ │ │ │ ├── ball.svg │ │ │ │ ├── butterfly.svg │ │ │ │ ├── tiger.svg │ │ │ │ └── world.svg │ │ ├── ext-css │ │ │ ├── iui-buttons.css │ │ │ ├── iui-deflist.css │ │ │ ├── iui-ext.css │ │ │ └── iui-lists.css │ │ ├── google-analytics │ │ │ └── iui-google-analytics.js │ │ ├── jit-loader │ │ │ ├── gmaps.frag │ │ │ ├── jit-loader.js │ │ │ ├── jit-test-gmaps.js │ │ │ ├── jstest.frag │ │ │ ├── jstest1.js │ │ │ ├── jstest2.js │ │ │ └── test-jit-loader.html │ │ ├── masabi │ │ │ ├── iui_ext.js │ │ │ └── t │ │ │ │ └── default │ │ │ │ ├── dpBack.png │ │ │ │ ├── dpFwd.png │ │ │ │ ├── iui_ext.css │ │ │ │ ├── listArrow.png │ │ │ │ └── tick.png │ │ ├── reachability │ │ │ ├── iui-reachability.js │ │ │ └── reachability-demo.html │ │ ├── t │ │ │ ├── android │ │ │ │ ├── android-theme.css │ │ │ │ ├── cancel.png │ │ │ │ ├── droidsans.ttf │ │ │ │ ├── listArrow.png │ │ │ │ ├── loading.gif │ │ │ │ ├── panelTitle.png │ │ │ │ ├── thumb.png │ │ │ │ ├── toggle.png │ │ │ │ └── toggleOn.png │ │ │ ├── defaulthd │ │ │ │ ├── backButton-hd.png │ │ │ │ ├── backButtonBack-hd.png │ │ │ │ ├── backButtonBackSel-hd.png │ │ │ │ ├── backButtonBrdr-hd.png │ │ │ │ ├── backButtonSel-hd.png │ │ │ │ ├── backButtonSelBrdr-hd.png │ │ │ │ ├── blueButton-hd.png │ │ │ │ ├── defaulthd-theme.css │ │ │ │ ├── listArrow-hd.png │ │ │ │ ├── listArrowSel-hd.png │ │ │ │ ├── selection-hd.png │ │ │ │ ├── toolButton-hd.png │ │ │ │ ├── toolButtonSel-hd.png │ │ │ │ └── toolbar-hd.png │ │ │ ├── svg │ │ │ │ ├── backButton.svg │ │ │ │ └── backButtonSqCorners.svg │ │ │ └── webos │ │ │ │ ├── cancel.png │ │ │ │ ├── grayButton.png │ │ │ │ ├── list.png │ │ │ │ ├── listArrow.png │ │ │ │ ├── listArrowSel.png │ │ │ │ ├── listGroup.png │ │ │ │ ├── loading.gif │ │ │ │ ├── selection.png │ │ │ │ ├── thumb.png │ │ │ │ ├── toggle.png │ │ │ │ ├── toggleOn.png │ │ │ │ ├── webos-theme.css │ │ │ │ └── whiteButton.png │ │ ├── unloader │ │ │ ├── ajax.frag │ │ │ ├── index.html │ │ │ └── iui-unloader.js │ │ ├── video │ │ │ ├── index.html │ │ │ ├── iui-video-logger.js │ │ │ ├── iui-video.css │ │ │ └── iui-video.js │ │ └── view │ │ │ ├── iui-views.js │ │ │ ├── view-test.html │ │ │ └── view-test.js │ ├── iui-favicon.png │ ├── iui-logo-touch-icon-hd.png │ ├── iui-logo-touch-icon.png │ ├── iui-startup-ipad.jpg │ ├── iui-startup.jpg │ ├── iui.css │ ├── iui.js │ ├── iuix.css │ ├── iuix.js │ ├── js │ │ ├── iui-event-log.js │ │ └── iui-theme-switcher.js │ └── t │ │ ├── ThemeImageCatalog.html │ │ ├── default │ │ ├── back-img.png │ │ ├── backButton.png │ │ ├── backButtonBack.png │ │ ├── backButtonBrdr.png │ │ ├── backButtonSel.png │ │ ├── blueButton.png │ │ ├── cancel.png │ │ ├── default-theme.css │ │ ├── grayButton.png │ │ ├── listArrow.png │ │ ├── listArrowSel.png │ │ ├── listGroup.png │ │ ├── loading.gif │ │ ├── pinstripes.png │ │ ├── redButton.png │ │ ├── selection.png │ │ ├── thumb.png │ │ ├── title-img.png │ │ ├── toggle.png │ │ ├── toggleOn.png │ │ ├── toolButton.png │ │ ├── toolbar.png │ │ └── whiteButton.png │ │ ├── defaultgrad │ │ └── defaultgrad-theme.css │ │ └── ipdc │ │ ├── Logo_DevCamp.png │ │ ├── backButton.png │ │ ├── beige.png │ │ ├── blueButton.png │ │ ├── ipdc-theme.css │ │ ├── listGroup.png │ │ ├── pinstripes.png │ │ ├── redButton.png │ │ ├── toggleOn.png │ │ ├── toolButton.png │ │ └── toolbar.png ├── mag.html ├── mobile.html ├── tvh.css ├── tvh.js ├── tvh_common.js ├── tvh_custom.js ├── tvh_epg.css ├── tvh_epg.js ├── tvh_lang.js ├── tvh_mag.css └── tvh_mag.js └── screenshots ├── channels.png ├── epg.png ├── epg_entry.png ├── home.png ├── magazine.png └── timeline.png /README.md: -------------------------------------------------------------------------------- 1 | TvheadendMobileUI 2 | ================= 3 | 4 | Tvheadend mobile web interface 5 | 6 | ## Introduction 7 | 8 | This is a mobile web interface for the Tvheadend streaming/recording server {https://www.lonelycoder.com/tvheadend/}. You need a current version of Tvheadend (3.3). 9 | 10 | It uses the framework iUI {http://www.iui-js.org/}, which provides an iPhone-like look and feel. It works on different modern browsers 11 | 12 | Have a look at the screenshots in the folder "screenshots"! 13 | 14 | ![ScreenShot](https://raw.github.com/polini/TvheadendMobileUI/master/screenshots/home.png) 15 | 16 | ## Features 17 | 18 | - Show channels by channel tag 19 | - Show channel epg by channel 20 | - Record/cancel epg entries 21 | - Show upcoming/finished/failed recordings 22 | - Cancel/Delete recording entries 23 | - Show/Editing automatic recorder entries 24 | - Show subscriptions 25 | - Show adapters 26 | - Show about 27 | - Search epg by title 28 | - Suport for different DVR configurations 29 | - Support for different languages 30 | - English 31 | - German 32 | 33 | ## EPG Timeline 34 | 35 | - Also included is a nice EPG timeline (vertical EPG) with the channels on y-axis and time on x-axis. It is possible to schedule and cancel recordings from the timeline. Just click on an entry and you see a detailed entry with buttons. 36 | 37 | ![ScreenShot](https://raw.github.com/polini/TvheadendMobileUI/master/screenshots/timeline.png) 38 | 39 | 40 | ## Listings magazine 41 | 42 | - Also included is a listings magazine with the channels each on a separate column. You can select a tag, skip to the next day or skip to the next page. You can also show and hide columns. It is possible to schedule and recordings from the listing. Just click on a title or subtitle. 43 | 44 | ![ScreenShot](https://raw.github.com/polini/TvheadendMobileUI/master/screenshots/magazine.png) 45 | 46 | 47 | ## Installation 48 | 49 | First checkout repository 50 | 51 | $ git clone git://github.com/polini/TvheadendMobileUI.git 52 | 53 | Then copy directory 54 | 55 | $ sudo cp -r TvheadendMobileUI/mobile/ /usr/local/share/tvheadend/src/webui/static/ 56 | 57 | or create symlink 58 | 59 | $ sudo ln -s `pwd`/TvheadendMobileUI/mobile/ /usr/local/share/tvheadend/src/webui/static/mobile 60 | 61 | The target directory may vary. It could also be /usr/share/tvheadend/src/webui/static/mobile. 62 | 63 | ### OpenELEC Tvheadend add-on 64 | 65 | When you installed Tvheadend as an OpenELEC add-on, you can not use TvheadendMobileUI at the moment, as the static html pages are bundled in the Tvheadend binary. 66 | 67 | ## Usage 68 | 69 | - You can now access the web interface: http://ip:9981/static/mobile/index.html 70 | - The mobile page can be accessed via: http://ip:9981/static/mobile/mobile.html 71 | - The EPG timeline can accessed via: http://ip:9981/static/mobile/epg.html 72 | - The listings magazine can be accessed via: http://ip:9981/static/mobile/mag.html 73 | 74 | ## Please notice 75 | 76 | - This software has beta status, so be careful. I am not responsible for missed or deleted recordings. 77 | - Please feel free to give feedback or to create issue tickets. 78 | 79 | ## License 80 | 81 | Licensed under GPLv3 (see LICENSE) 82 | -------------------------------------------------------------------------------- /mobile/android.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tvheadend 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Tvheadend

21 | Reload 22 |
23 | 24 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /mobile/epg.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | Tvh. EPG 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /mobile/images/arts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/arts.png -------------------------------------------------------------------------------- /mobile/images/book_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/book_open.png -------------------------------------------------------------------------------- /mobile/images/children.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/children.png -------------------------------------------------------------------------------- /mobile/images/clearsearch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/clearsearch.png -------------------------------------------------------------------------------- /mobile/images/date_next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/date_next.png -------------------------------------------------------------------------------- /mobile/images/date_previous.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/date_previous.png -------------------------------------------------------------------------------- /mobile/images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/desktop.png -------------------------------------------------------------------------------- /mobile/images/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/gradient.png -------------------------------------------------------------------------------- /mobile/images/hobbies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/hobbies.png -------------------------------------------------------------------------------- /mobile/images/layout_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/layout_add.png -------------------------------------------------------------------------------- /mobile/images/layout_delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/layout_delete.png -------------------------------------------------------------------------------- /mobile/images/magazine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/magazine.png -------------------------------------------------------------------------------- /mobile/images/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/mobile.png -------------------------------------------------------------------------------- /mobile/images/movies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/movies.png -------------------------------------------------------------------------------- /mobile/images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/music.png -------------------------------------------------------------------------------- /mobile/images/news.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/news.png -------------------------------------------------------------------------------- /mobile/images/pb_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/pb_left.png -------------------------------------------------------------------------------- /mobile/images/pb_middle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/pb_middle.png -------------------------------------------------------------------------------- /mobile/images/pb_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/pb_right.png -------------------------------------------------------------------------------- /mobile/images/pb_trans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/pb_trans.png -------------------------------------------------------------------------------- /mobile/images/resultset_next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/resultset_next.png -------------------------------------------------------------------------------- /mobile/images/resultset_previous.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/resultset_previous.png -------------------------------------------------------------------------------- /mobile/images/science.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/science.png -------------------------------------------------------------------------------- /mobile/images/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/show.png -------------------------------------------------------------------------------- /mobile/images/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/social.png -------------------------------------------------------------------------------- /mobile/images/special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/special.png -------------------------------------------------------------------------------- /mobile/images/sports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/sports.png -------------------------------------------------------------------------------- /mobile/images/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/tick.png -------------------------------------------------------------------------------- /mobile/images/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/timeline.png -------------------------------------------------------------------------------- /mobile/images/timeline200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/timeline200.png -------------------------------------------------------------------------------- /mobile/images/tvheadend128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/tvheadend128.png -------------------------------------------------------------------------------- /mobile/images/white75.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/images/white75.png -------------------------------------------------------------------------------- /mobile/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Tvheadend 7 | 8 | 9 | 10 | 11 | 12 | 36 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/Read Me.txt: -------------------------------------------------------------------------------- 1 | TbBMod version 0.1 ---- For Modding toolbar buttons on per page basis 2 | View Index for examples, instructions, and info on how it works 3 | 4 | Plans for the future-- 5 | Turn right toolbar button into form submit on the fly 6 | 7 | On the fly control of back button 8 | --- to enable things like form submission for more iPhone like preference setting 9 | --- Click back after adjusting settings will do form via ajax 10 | --- then slide pageout to right returning to previous page 11 | --- also to better handle ajax list typ things like check book transactions 12 | --- Ex. you have a list. You click "+" button in upper right of toolbar 13 | --- and get a form to add something to list from the usual right side. 14 | --- When you submit form list slides back in from left with the list page reloaded via ajax showing new item. 15 | 16 | Feel free to contact me through iui-developergroup or iPhoneWebdevgroup to report bugs or suggest other features. 17 | 18 | Vic -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/TbBMod.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2007-9, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // requires querySelectorAll, therefore iPhone OS 2.x or later 7 | // or Safari 3.x or later 8 | 9 | 10 | (function() { 11 | 12 | 13 | var eventNames = ['blur', 'focus'/*, 'load', 'unload', 'beforetransition', 'aftertransition' */]; 14 | 15 | // Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method 16 | // We need to register before iui's main onload handler so we can get the 'load' and 'focus' events 17 | // for the default 'page' (view). 18 | // 19 | 20 | addEventListener("DOMContentLoaded", function(event) 21 | { 22 | document.body.addEventListener('beforeinsert', registerTbBModEvents, false); 23 | document.body.addEventListener('afterinsert', afterInsert, false); 24 | // This will register event handlers on all initial nodes 25 | // We'll also need to register handlers on inserted (via ajax) nodes 26 | // To do that we'll need to use the beforeInsert event 27 | nodes = document.querySelectorAll("ul, div, form"); // select all of the usual page containers 28 | for (var i = 0; i < nodes.length ; i++){ // loop through them 29 | registerTbBModEvents(nodes[i]); // adding event listener 30 | 31 | } 32 | }, false); 33 | 34 | function registerTbBModEvents(node){ // add TbBMod event listener to page containers 35 | for (var i = 0; i < eventNames.length ; i++){ 36 | node.addEventListener(eventNames[i], TbBModHandler, false); 37 | } 38 | } 39 | 40 | function afterInsert(e){ 41 | //TbBModHandler(e); 42 | registerTbBModEvents(e.insertedNode); // Set event handlers on newly added node 43 | } 44 | 45 | ////////////////////////////////////////////////////////////// Variables used for mustiple functions 46 | var TbBModForm; // The form with TbBMods in it 47 | var theMods = []; // array(stack)to save TbBMods in so we can restore later 48 | var labels = []; // array(stack)to save the original button labels so we can restore later 49 | var urls = []; // array(stack)to save the origanl button links so we can restore later 50 | 51 | ////////////////////////////////////////////////////////////// TbBModHandler(e) 52 | function TbBModHandler(e){ // function called on page focus and blur to mod buttons 53 | if (e.type == "focus"){ // focus event - look in page for TbBMods 54 | var page = e.target; // assign event target page to variable 55 | if (page.tagName == "FORM" && hasTbBMod(page)){ // page is a form and has TbBMods 56 | doTbBMods(); // take care of TbBMods in form 57 | } else if (hasForm(page) && checkForms(page)) // page has a form and has TbBMods 58 | doTbBMods(); // take care of TbBMods in form 59 | } else if (e.type == "blur"){ // blur event - reset TbBMods before leaving 60 | undoTbBMods(); // undo buttons modded before leaving page 61 | } 62 | } 63 | ////////////////////////////////////////////////////////////// doTbBMods() 64 | function doTbBMods(){ // take care of TbBMods in form 65 | inputs = T(TbBModForm,"input") ; // get form inputs 66 | for (var k = 0; k < inputs.length; k++){ // loop through inputs 67 | if (inputs[k].name.substr(0,6) == "TbBMod"){ // check id for TbBMod and save in array if found 68 | theMods.push(inputs[k].name); // save mods so we can undo them on page blur 69 | buttonId = inputs[k].name.substr(11); // the id of the button to mod 70 | mod = inputs[k].name.substr(6,4); // the mod operation to perform 71 | button = $(buttonId); // the actual button we're going to mod 72 | if (button){ // make sure the button exists before we operate on it 73 | if (mod == "HIDE") // need to hide the button 74 | hideButton(button); // hide the button 75 | else if (mod == "TEXT"){ // need to change the label on button 76 | label = inputs[k].value // get the new label from form input 77 | labels.push(button.innerHTML); // save original button label to restore later 78 | changeLabel(button , label); // change the button label 79 | } else if (mod == "HREF"){ // need to change the link address for button 80 | newLink = inputs[k].value; // get the new link from form input 81 | urls.push(button.href); // save original button link to restore later 82 | changeLink(button , newLink); // change the button link 83 | } 84 | } 85 | } 86 | } 87 | } 88 | ////////////////////////////////////////////////////////////// undoTbBMods() 89 | function undoTbBMods(){ // function to reset buttons on page blur 90 | for (var k = theMods.length - 1; k >= 0; k--){ // loop through mods that were done 91 | theMod = theMods.pop(); // get mods one at a time and undo them 92 | buttonId = theMod.substr(11); // the id of the button to unMod 93 | mod = theMod.substr(6,4); // the mod operation to undo 94 | button = $(buttonId); // the actual button we're going to unMod 95 | if (button){ // make sure the button exists before we operate on it 96 | if (mod == "HIDE") // button was hidden and needs to be shown 97 | showButton(button); // show the button 98 | else if (mod == "TEXT"){ // button label was modded and needs replaced 99 | label = labels.pop() // get the original label 100 | changeLabel(button , label); // change the button label 101 | } else if (mod == "HREF"){ // button link location was changed and needs replaced 102 | oldLink = urls.pop() // get the original link 103 | changeLink(button , oldLink); // change the button link 104 | } 105 | } 106 | } 107 | } 108 | ////////////////////////////////////////////////////////////// checkForms(page) 109 | function checkForms(page){ // if page any forms have TbBMods returns true 110 | theForms = T(page,"form") // get all forms that may be on page 111 | for ( var i = 0; i < theForms.length; i++){ // loop through forms 112 | if (hasTbBMod(theForms[i])) // check each form for TbBMod 113 | return true; // return true if found 114 | } 115 | return false; // no TbBMod found return false 116 | } 117 | ////////////////////////////////////////////////////////////// hasForm(page) 118 | function hasForm(page){ // Checks a page for forms returns true or false 119 | if (T(page,"form")) // page has form 120 | return true; // return true 121 | return false; // no form return false 122 | } 123 | ////////////////////////////////////////////////////////////// hasTbBMod(theForm) 124 | function hasTbBMod(theForm){ // takes a form and checks for inputs with id starting TbBMod 125 | inputs = T(theForm,"input"); // get all inputs of form 126 | for (var k = 0; k < inputs.length; k++){ // loop through inputs 127 | if (inputs[k].name.substr(0,6) == "TbBMod"){ // check input name for TbBMod 128 | TbBModForm = theForm; // Save the form which has TbBMods in it for reference in other functions 129 | return true; // return true if found 130 | } 131 | } 132 | return false; // No TbBMod input return false 133 | } 134 | ////////////////////////////////////////////////////////////// hideButton(button) 135 | function hideButton(button){ // function to hide button 136 | button.style.display = "none"; // hide the button 137 | } 138 | ////////////////////////////////////////////////////////////// showButton(button) 139 | function showButton(button){ // function to show button 140 | button.style.display = "inline"; // show the button 141 | } 142 | ////////////////////////////////////////////////////////////// changeLabel(button, label) 143 | function changeLabel(button, label){ // function to change a button label 144 | button.innerHTML = label; // change the button label 145 | } 146 | ////////////////////////////////////////////////////////////// changeLink(button, newLink) 147 | function changeLink(button, newLink){ // function to change the buttons link 148 | button.href = newLink; // change the button link 149 | } 150 | ////////////////////////////////////////////////////////////// simple functions for shorthand 151 | function $(i) { return document.getElementById(i); } // document.getElementById 152 | function T(node,tag){return node.getElementsByTagName(tag);}// getElementsByTagName - (parent, tag your looking for) 153 | 154 | })(); -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/ajaxhelp.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

This is help for AJAX pages

4 |
5 |
6 | 7 |
8 |
-------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/formno.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
-------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/formyes.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 |
-------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/how.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

TbBMod Extension - how it works

5 |
6 |

TbBMod works by monitoring for special form fields hidden in pages. Each time a page comes into focus, the extension checks to see if it has these form fields. If it finds them it saves the current state of all changes to be made to the button then makes the changes. When a page blurs the focus before leaving the extension restores the button to its previous state. The Changes are done page by page so there is no need to save multiple changes, just the ones for the current page. When no Mods are flagged on the page it will return to its default state as when you made your page.

7 |

Future plans for the extension include the ability to mod the back button, and form submission with the option to slide results in from the left. Ex. you have a list. You click "+" button in upper right of toolbar and get a form to add something to list from the usual right side. When you submit form list slides back in from left with the list page reloaded via ajax showing new item.

8 |
9 |
10 | 11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | TbBMod Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

18 | 19 | 20 | ?
21 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |

About TbBMod Extension

41 |
42 |

TbBMod.js is an extension for the iUI framework. It was designed to offer some flexibility to some of the default behaviors of iUI, namely page context controlling of toolbar button behavior. In short it gives you the flexibility to control what the toolbar buttons do on a per page basis.

43 |

If your previewing this app, you're already seeing it in action. Just click the "?" button at the top of each page to see info about that page, (the extension is hiding it on this page now!). This button is a static link, but the url changes for each page. About and Instruction Page 1 are an internal (#link) page Demo, and Instruction Page 2 is external(AJAX) page Demo. Pages where the button is not modded will default back here.

44 |

For info on how to use this extension see Instructions. For info on how it works click the "How" button on instruction page 2. Thanks for using TbBMod. I hope it helps your web-app development needs.

Special Thanks to all in the iUI dev community. Without you this extension may not exist. It is my pleasure to share freely with everyone. Stay tuned to the iphonewebdev and iui-developers googlegroups for updates as I am currently working to add the ability to mod the back button on demand.

45 |

Vic Hudson

46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 |

This is help for internal pages

55 |
56 |
57 | 58 |
59 |
60 | 61 | 62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |

TbBMod - instructions for use.

79 |
80 |

TbBMod is easy to install on your iUI powered web app. It requires no changes to existing iUI components. Start by linking the TbBMod.js to your main index file just like the you would iui.js. Next make sure your right toolbar button has a unique id attribute, and links to some generic page for the pages you don't mod it on. Installation is now done!

81 |

The rest is done by setting some flags in the pages you want to mod buttons for. The flags are pretty simple to use and there are currently three different options to use on your button. You may hide the button, change the buttons text, and change the buttons link address all on a per page basis. The flags used are hidden form fields on your page. If the page you need to mod the button on is, or already has, a form just add the hidden inputs to it. If it is a list or static panel just add a form with the hidden inputs to the end of your page(just before your closing ul or div tag).

82 |

The key is in the naming of the form inputs and their value. The standard naming convention is TbBMod followed by the mod option you want then an underscore followed by the id of the button to mod. This example changes the link of a button with id = "help" to page2help.html

83 |
84 |
85 |

<form>

86 |

<input type = "hidden" name = "TbBModHREF_help" value = "help2.html" />

87 |

</form>

88 |
89 |
90 |

Since it is my "?" button above and would serve to deliver help info about the current page I don't really want to change it's text label most of the time, but on the current page for example it changes to a "How" button linking to explanation of how the extension works. It is done like this.

91 |
92 |
93 |

<form>

94 |

<input type = "hidden" name = "TbBModTEXT_help" value = "How" />

95 |

<input type = "hidden" name = "TbBModHREF_help" value = "how.html" />

96 |

</form>

97 |
98 |
99 | 100 | 101 |
102 |
103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/instruction2.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Of course when you get to the "How" page, it is just a static explanation of how the extension works and doesn't need the button up there at all, so on that page I hide it like this.

4 |
5 |
6 |

<form>

7 |

<input type = "hidden" name = "TbBModHIDE_help" value = "true" />

8 |

</form>

9 |
10 |
11 |

Things to remember!

12 |

-Button must have unique id attribute!

13 |

-Don't forget to link it to a generic page.

14 |

-No extra form needed if page is, or already has form. Just add the hidden inputs to it.

15 |

-Naming convention for inputs is "TbBModOPTION_buttonId"

16 |

-Options are HIDE, TEXT, and HREF

TbBMod can be used on internal(#link) or external AJAX pages

17 |

-You can change the button link to internal(#link) or external AJAX pages

18 |

-The ability to mod the Back Button is coming!!!!

19 | 20 |
21 | 22 | 23 |
24 |
-------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/TbBMod/xtra.css: -------------------------------------------------------------------------------- 1 | 2 | .panel p.normalText { 3 | text-align: left; 4 | text-indent:10px; 5 | padding: 0 10px 0 10px; 6 | 7 | } 8 | .panel p.code { 9 | text-align: left; 10 | padding: 0; 11 | margin: 0; 12 | font-size: 16px; 13 | } 14 | 15 | .panel > h2 { 16 | margin: 3px 0 10px 10px; 17 | } 18 | 19 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/cache-manager/cache-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cache Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

18 | 19 |
20 | 21 | 25 | 26 |
27 |

Status

28 |
29 |
30 | 31 | ? 32 |
33 |
34 | 35 | ? 36 |
37 |
38 | Update Cache 39 | Swap Cache 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/cache-manager/cache-demo.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | # Date Thu Mar 11 08:43:10 PST 2010 3 | iui-cache-manager.js 4 | ../../iui-favicon.png 5 | ../../iui-logo-touch-icon.png 6 | ../../iui.css 7 | ../../iui.js 8 | ../../t/default/back-img.png 9 | ../../t/default/backButton.png 10 | ../../t/default/backButtonBack.png 11 | ../../t/default/backButtonBrdr.png 12 | ../../t/default/blueButton.png 13 | ../../t/default/cancel.png 14 | ../../t/default/default-theme.css 15 | ../../t/default/grayButton.png 16 | ../../t/default/listArrow.png 17 | ../../t/default/listArrowSel.png 18 | ../../t/default/listGroup.png 19 | ../../t/default/loading.gif 20 | ../../t/default/pinstripes.png 21 | ../../t/default/redButton.png 22 | ../../t/default/selection.png 23 | ../../t/default/thumb.png 24 | ../../t/default/title-img.png 25 | ../../t/default/toggle.png 26 | ../../t/default/toggleOn.png 27 | ../../t/default/toolbar.png 28 | ../../t/default/toolButton.png 29 | ../../t/default/whiteButton.png 30 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/cache-manager/iui-cache-manager.js: -------------------------------------------------------------------------------- 1 | // iUI Cache Manager Extension 2 | // 3 | // Requires DOMContentLoaded event 4 | // Requires document.querySelector() 5 | // 6 | 7 | (function() { 8 | 9 | var cache = window.applicationCache; 10 | 11 | var cacheStatusStrings = { 0: 'UNCACHED', 1:'IDLE', 2:'CHECKING', 3:'DOWNLOADING', 4:'UPDATEREADY', 5:'OBSOLETE' }; 12 | 13 | var updateButton; 14 | var swapButton; 15 | 16 | addEventListener("DOMContentLoaded", function(event) 17 | { 18 | if (cache) 19 | { 20 | cache.addEventListener('checking', cacheEventListener, false); 21 | cache.addEventListener('downloading', cacheEventListener, false); 22 | cache.addEventListener('noupdate', cacheEventListener, false); 23 | cache.addEventListener('updateready', cacheEventListener, false); 24 | cache.addEventListener('progress', cacheEventListener, false); 25 | cache.addEventListener('cached', cacheEventListener, false); 26 | cache.addEventListener('error', cacheEventListener, false); 27 | cache.addEventListener('obsolete', cacheEventListener, false); 28 | } 29 | var cacheView = document.getElementById('iui-cache-panel'); 30 | cacheView.addEventListener('focus', infoPanelFocus, false); 31 | 32 | updateButton = document.querySelector('.iui-cache-update-button'); 33 | updateButton.addEventListener('click', updateClicked, false); 34 | 35 | swapButton = document.querySelector('.iui-cache-swap-button'); 36 | swapButton.addEventListener('click', swapClicked, false); 37 | 38 | }, false); 39 | 40 | 41 | function infoPanelFocus(e) 42 | { 43 | // console.log("infoPanelFocus type: " + e.type + " target " + e.target.tagName + "#" + e.target.id); 44 | var node = e.target; 45 | updateInfoPanel(); 46 | } 47 | 48 | function updateClicked() 49 | { 50 | console.log("Update button clicked."); 51 | if (window.applicationCache.status != 0) 52 | { 53 | window.applicationCache.update(); 54 | } 55 | else 56 | { 57 | console.log("App is not cached."); 58 | } 59 | return false; 60 | } 61 | 62 | function swapClicked() 63 | { 64 | console.log("Swap button clicked."); 65 | if (window.applicationCache) 66 | { 67 | if (window.applicationCache.status == 4) 68 | { 69 | window.applicationCache.swapCache(); 70 | updateInfoPanel(); 71 | } 72 | else 73 | { 74 | console.log("No update is ready."); 75 | } 76 | } 77 | return false; 78 | } 79 | 80 | function cacheEventListener() 81 | { 82 | console.log("applicationCache event, status is: " + cacheStatusStrings[window.applicationCache.status]); 83 | updateInfoPanel(); 84 | return true; 85 | } 86 | 87 | function updateInfoPanel() 88 | { 89 | var onlineStatusNode = document.querySelector('.iui-online-status'); 90 | if (onlineStatusNode) 91 | { 92 | onlineStatusNode.innerText = navigator.onLine; 93 | } 94 | var cacheStatusNode = document.querySelector('.iui-cache-status'); 95 | if (cacheStatusNode && window.applicationCache) 96 | { 97 | cacheStatusNode.innerText = cacheStatusStrings[window.applicationCache.status]; 98 | } 99 | } 100 | 101 | })(); 102 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/canvg/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CanVG Extension Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

21 | 22 |
23 | 24 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |

About CanVG Extension

41 |
42 |

iui-canvg.js is an extension for the iUI framework. It is currently EXPERIMENTAL

43 |

It uses CanVG to render SVG images into HTML5 canvas tags.

44 |

SVG support is not required, but canvas support is required.

45 |

For info on how to use this extension see Instructions.

46 |

Sean Gilligan

47 |
48 |
49 | 50 | 51 |
52 |

CanVG Ext - instructions for use.

53 |
54 |

The CanVG Extension is easy to install into your iUI powered web app. It requires no changes to existing iUI components. Start by linking the iui-canvg.js to your main index file just like the you would iui.js.

55 |

The canvg extension requires canvg.js and rgbcolor.js. It requires HTML5 canvas support in the browser, but does not require SVG support.

56 |

You can now place compatible SVG content in iUI "pages" and have it automatically rendered in an HTML canvas

57 |

Use the following markup for each iUI view ("page") that contains an SVG image:

58 |
59 |
60 |

<div id="svg1" >

61 |

    <a href="path/to/image.svg" target="_self" rel="iuicanvg" >

62 |

        <canvas></canvas>

63 |

    </a>

64 |

</div>

65 |
66 |
67 |

The CanVG Extension will use JavaScript to render the SVG image into the canvas tag before the iUI view (aka "page") is made active.

68 |
69 |
70 | 71 |
72 | 73 | 74 | 75 |
76 | 77 |
78 | 79 | 80 | 81 |
82 | 83 |
84 | 85 | 86 | 87 |
88 | 89 |
90 | 91 | 92 | 93 |
94 | 95 |
96 | 97 |
98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/canvg/iui-canvg.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2010, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // requires querySelectorAll, therefore iPhone OS 2.x or later 7 | // or Safari 3.x or later 8 | // 9 | // requires HTML support, but does *not* require SVG 10 | // 11 | 12 | (function() { 13 | 14 | 15 | // Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method (Issue #204?) 16 | // We need to register before iui's main onload handler so we can get the 'load' and 'focus' events 17 | // for the default 'page' (view). 18 | // 19 | // The "better method" may be related to http://code.google.com/p/iui/issues/detail?id=204 20 | // but there may need to be more than one hook for iUI loading... 21 | // 22 | addEventListener("DOMContentLoaded", function(event) 23 | { 24 | document.body.addEventListener('afterinsert', afterInsert, false); 25 | // This will register event handlers on all initial nodes 26 | // We'll also need to register handlers on inserted (via ajax) nodes 27 | // To do that we'll need to use the beforeInsert event 28 | var nodes = iui.getAllViews(); 29 | for (var i = 0; i < nodes.length ; i++) 30 | { 31 | registerAllEvents(nodes[i]); 32 | } 33 | }, false); 34 | 35 | function registerAllEvents(node) 36 | { 37 | node.addEventListener('load', onLoad, false); 38 | } 39 | 40 | function afterInsert(e) 41 | { 42 | registerAllEvents(e.insertedNode); // Set event handlers on newly added node 43 | } 44 | 45 | function onLoad(e) 46 | { 47 | if (e.target) 48 | { 49 | console.log("onLoad: " + e.target); 50 | var aNode = e.target.querySelector("a[rel='iuicanvg']"); 51 | if (aNode && !iui.hasClass(aNode, 'iuiloaded')) 52 | { 53 | var canvasNode = aNode.querySelector("canvas"); 54 | if (canvasNode) 55 | { 56 | canvg(canvasNode, aNode.href, {ignoreMouse: true, ignoreAnimation: true}); 57 | iui.addClass(aNode, 'iuiloaded'); 58 | } 59 | } 60 | } 61 | } 62 | 63 | 64 | })(); 65 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/canvg/testimages/ball.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/ext-css/iui-buttons.css: -------------------------------------------------------------------------------- 1 | /*** EHANCEMENTS ***/ 2 | 3 | body > * > a.halfsize /* Half sized buttons */ 4 | { 5 | float: left; 6 | width: 36%; 7 | } 8 | body > *.panel > a.halfsize { 9 | width: 35%; 10 | } 11 | body > * > a.halfsize[orient="landscape"], 12 | body[orient="landscape"] > * > a.halfsize 13 | { 14 | width: 45%; 15 | } 16 | body > *.panel > a.halfsize[orient="landscape"], 17 | body[orient="landscape"] > *.panel > a.halfsize 18 | { 19 | width: 40%; 20 | } -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/ext-css/iui-deflist.css: -------------------------------------------------------------------------------- 1 | /* dl.tabular is for when dd's can fit on one line */ 2 | /* This is a quick hack to remind us to make a better, more-integrated version */ 3 | dl.tabular { 4 | /* Should behave similarly to fieldset/row */ 5 | position: relative; 6 | margin: 0 0 20px 0; 7 | padding: 0; 8 | background: #FFFFFF; 9 | -webkit-border-radius: 10px; 10 | -moz-border-radius: 10px; 11 | border: 1px solid #999999; 12 | font-size: 16px; 13 | } 14 | 15 | dl.tabular > dt { 16 | /* Should behave similarly to .row > label */ 17 | float: left; 18 | clear: left; 19 | width: 100px; 20 | padding: 0 0 0 14px; 21 | line-height: 42px; 22 | font-weight: bold; 23 | border-bottom: 1px solid #999999; 24 | } 25 | 26 | dl.tabular > dt:last-of-type { 27 | border-bottom: none !important; 28 | } 29 | 30 | dl.tabular > dd { 31 | /* Should behave similarly to .row > span */ 32 | margin-left: 110px; 33 | line-height: 42px; 34 | border-bottom: 1px solid #999999; 35 | } 36 | 37 | dl.tabular > dd:last-of-type { 38 | border-bottom: none !important; 39 | } 40 | 41 | /* dl.long is for when dd's need multiple lines */ 42 | dl.long > dt { 43 | margin: 0 0 8px 14px; 44 | font-size: inherit; 45 | font-weight: bold; 46 | color: #4d4d70; 47 | text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0; 48 | } 49 | 50 | dl.long > dd { 51 | position: relative; 52 | margin: 0 0 20px 0; 53 | text-align: left; 54 | padding: 6px 12px 6px 12px; 55 | background: #FFFFFF; 56 | -webkit-border-radius: 10px; 57 | -moz-border-radius: 10px; 58 | border: 1px solid #999999; 59 | font-size: 16px; 60 | } 61 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/ext-css/iui-ext.css: -------------------------------------------------------------------------------- 1 | /**** BUG FIXES ***/ 2 | body > *:not(.toolbar), 3 | body > .panel 4 | { 5 | height: auto; 6 | min-height: 415px; 7 | } 8 | 9 | body[orient="landscape"] > *:not(.toolbar), 10 | body[orient="landscape"] > .panel 11 | { 12 | height: auto; 13 | min-height: 255px; 14 | } 15 | body > .toolbar > h1 16 | { 17 | width: 150px; 18 | height: 32px; 19 | margin: 1px 0 0 -75px; 20 | padding-top: 10px; 21 | } 22 | 23 | body[orient="landscape"] > .toolbar > h1 24 | { 25 | width: 300px; 26 | margin: 1px 0 0 -150px; 27 | } 28 | body > *.panel > fieldset > div.row > label 29 | { 30 | width: 100px; 31 | } 32 | 33 | 34 | body > *.panel > fieldset > div.row > select 35 | { 36 | margin: 12px 12px 12px 0; 37 | width: 160px; 38 | } 39 | body[orient="landscape"] > *.panel > fieldset > div.row > select 40 | { 41 | width: 270px; 42 | } 43 | 44 | body > *:not(.toolbar) > fieldset .text { 45 | width: auto; 46 | height: auto; 47 | text-align: left; 48 | padding: 0 12px; 49 | } 50 | 51 | body > *:not(.toolbar) > fieldset .text p { 52 | height: auto; 53 | } 54 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/ext-css/iui-lists.css: -------------------------------------------------------------------------------- 1 | body > div.board /*sets up the "ul" class for board type arrangement*/ 2 | { 3 | float: left; 4 | margin: 0px; 5 | padding: 0px; 6 | height: auto; 7 | background: #000; 8 | } 9 | body > div.board[orient="landscape"] 10 | { 11 | min-height: 255px; 12 | } 13 | body > div.board > ul 14 | { 15 | float: left; 16 | min-height: 255px; 17 | margin: 0px; 18 | padding: 0px; 19 | background: #000; 20 | } 21 | body > div.board > ul > li 22 | { 23 | float: left; 24 | list-style: none; 25 | list-style-position:inside; 26 | width: auto; 27 | margin: 0px; 28 | padding: 0px; 29 | } 30 | 31 | body > div.board > ul > li > a 32 | { 33 | display: block; 34 | float: left; 35 | width: 65px; 36 | margin: 3px; 37 | padding: 4px; 38 | text-align: center; 39 | text-decoration: none; 40 | } 41 | div.board > ul > li > a:active, 42 | div.board > ul > li > a[selected] /* to reset system sets */ 43 | { 44 | background-color: #000 !important; 45 | background-image: none !important; 46 | } 47 | div.board > ul > li > a > img /* icon itself */ 48 | { 49 | display: block; 50 | width: auto; 51 | height: auto; 52 | border: none; 53 | margin: 0px auto 2px auto; 54 | } 55 | div.board > ul > li > a > span /* icon label */ 56 | { 57 | display: block; 58 | width: 100%; 59 | height: 15px; 60 | text-align: center; 61 | font-size: 11px; 62 | color: #fff; 63 | overflow: hidden; 64 | text-overflow-mode: ellipsis; 65 | white-space : nowrap; 66 | } 67 | 68 | .tleft { text-align: left; } 69 | .tright { text-align: right; } 70 | .tcenter { text-align: center; } 71 | 72 | 73 | /**** EXTENDED LISTING ****/ 74 | body > ul > li > span.caption { 75 | color: #444; 76 | font-size: 12px; 77 | } 78 | /* icon in list */ 79 | body > ul.iconL > li, 80 | body > ul.iconR > li { 81 | display: list-item; 82 | float: left; 83 | width: 100%; 84 | padding: 0px; 85 | } 86 | body > ul.iconL > li > img, 87 | body > ul.iconL > li > span, 88 | body > ul.iconR > li > img, 89 | body > ul.iconR > li > span { 90 | display: block; 91 | float: left; 92 | margin: 0px; 93 | } 94 | body > ul.iconR > li > img { 95 | float: right; 96 | } 97 | body > ul.iconL > li > span, 98 | body > ul.iconR > li > span { 99 | display: block; 100 | margin: 9px 0 0 10px; 101 | } 102 | 103 | /* icon on list title */ 104 | body > ul > li.iconL > img, 105 | body > ul > li.iconL > span { 106 | display: block; 107 | } 108 | 109 | 110 | 111 | /* bubble */ 112 | body > ul > li > a > span.bubble { 113 | display: block; 114 | float: right; 115 | font-size: 12px; 116 | margin-top: 1px; 117 | padding: 4px 10px; 118 | color: #fff; 119 | background-color: #7389a6; 120 | -moz-border-radius: 10px; 121 | -webkit-border-radius: 10px; 122 | } 123 | body > ul > li > a.selected > span.bubble { 124 | color: #026deb; 125 | background-color: #fff; 126 | } -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/google-analytics/iui-google-analytics.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2007-10, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // 7 | // For an example see web-app/index.html 8 | // 9 | // requires querySelectorAll, therefore iPhone OS 2.x or later 10 | // or Safari 3.x or later 11 | // 12 | // Assumes that Google Analytics has been installed in the page in asynchronous mode 13 | // Typically this is done by inserting the recommended script tag and contents at the bottom 14 | // of the head section of the page 15 | // 16 | 17 | (function() { 18 | 19 | // Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method (Issue #204?) 20 | // We need to register before iui's main onload handler so we can get the 'load' and 'focus' events 21 | // for the default 'page' (view). 22 | // 23 | // The "better method" may be related to http://code.google.com/p/iui/issues/detail?id=204 24 | // but there may need to be more than one hook for iUI loading... 25 | // 26 | addEventListener("DOMContentLoaded", function(event) 27 | { 28 | document.body.addEventListener('afterinsert', afterInsert, false); 29 | // This will register event handlers on all initial nodes 30 | // We'll also need to register handlers on inserted (via ajax) nodes 31 | // To do that we'll need to use the afterInsert event 32 | var nodes = iui.getAllViews(); 33 | for (var i = 0; i < nodes.length ; i++) 34 | { 35 | registerEvents(nodes[i]); 36 | } 37 | }, false); 38 | 39 | function registerEvents(node) 40 | { 41 | node.addEventListener('focus', trackEvent, false); 42 | } 43 | 44 | function afterInsert(e) 45 | { 46 | registerEvents(e.insertedNode); // Set event handlers on newly added node 47 | } 48 | 49 | function trackEvent(e) 50 | { 51 | // console.log("trackEvent type: " + e.type + " target " + e.target.tagName + "#" + e.target.id); 52 | _gaq.push(['_trackEvent', 'iUI', 'focus', e.target.tagName + "#" + e.target.id]); 53 | } 54 | 55 | 56 | })(); 57 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/jit-loader/gmaps.frag: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
8 |
9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/jit-loader/jit-loader.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2007-10, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // iUI Just In Time (JavaScript) Loader 7 | // 8 | // Based on work submitted by C.W. Zachary for Issue #128 9 | // and Wayne Pan for Issue #102 10 | // 11 | // This is a work-in-progress and that's why it's in the "sandbox" 12 | // This version should load external scripts that referenced in the @src attribute 13 | // of 15 | 16 | 19 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/jit-loader/jstest1.js: -------------------------------------------------------------------------------- 1 | function f1(who) 2 | { 3 | return "Hello " + who + "!"; 4 | } 5 | 6 | function sub1() 7 | { 8 | return f1("sub1") + " " + new Date(); 9 | } 10 | 11 | function sub2() 12 | { 13 | return f1("sub2") + " " + new Date(); 14 | } 15 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/jit-loader/jstest2.js: -------------------------------------------------------------------------------- 1 | function runJS() 2 | { 3 | var elsub1 = document.getElementById('sub1'); 4 | var elsub2 = document.getElementById('sub2'); 5 | var els1 = document.getElementById('s1'); 6 | var els2 = document.getElementById('s2'); 7 | elsub1.addEventListener("focus", function() 8 | { 9 | els1.innerText = sub1() 10 | }, false); 11 | elsub2.addEventListener("focus", function() 12 | { 13 | els2.innerText = sub2() 14 | }, false); 15 | } 16 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/jit-loader/test-jit-loader.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Loader Test 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |

26 | 27 |
28 | 29 | 33 | 34 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/masabi/t/default/dpBack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/masabi/t/default/dpBack.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/masabi/t/default/dpFwd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/masabi/t/default/dpFwd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/masabi/t/default/iui_ext.css: -------------------------------------------------------------------------------- 1 | /* iUI EXTENSIONS */ 2 | .panel > ul { margin:5px 0 15px 0; padding:0; list-style:none; -webkit-border-radius:0; border-width:0; background-color:transparent; } 3 | .panel > ul > li { margin:0; padding:0; border-width:0; } 4 | .panel > ul > li a, .row > a { text-align:left; padding:11px 0 9px 10px; background:url(listArrow.png) center right no-repeat; display:block; text-decoration:none; overflow:hidden; text-overflow:ellipsis; color:#000; font-weight:bold; font-size:17px; } 5 | .panel > ul > li a { margin:0; border:1px solid #aaa; border-bottom-width:0 !important; margin-top:-1px; background-color:#fff; } 6 | .panel > ul > li:first-child a { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } 7 | .panel > ul > li:last-child a { -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; border-bottom-width:1px !important; } 8 | .panel > ul > li a img { vertical-align:middle; margin-left:-4px; } 9 | 10 | .panel > form > div img { vertical-align:middle; margin-left:-4px; } 11 | 12 | body > .text { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:10px 7px; background-color:#fff; min-height:408px;} 13 | .text p { margin-top:5px; } 14 | .text p:first-child { margin-top:0; } 15 | 16 | .panel > p { text-align:center; margin:10px 10px 0 10px; color:#4d4d70; text-shadow:rgba(255, 255, 255, 0.75) 2px 2px 0; } 17 | 18 | 19 | /* FORM STYLING */ 20 | .panel a { position:relative; } 21 | .panel var { position:absolute; right:23px; top:12px; font-size:14px; color:#666; font-weight:normal; font-style:normal; } 22 | a[selected] var, a:active var, a[selected] .details, a:active .details { color:#ccf } 23 | .panel a > small { display:block; color:#99a; } 24 | a[selected] small, a:active small { color:#bbc } 25 | 26 | label img { margin-bottom:-5px; } 27 | fieldset.radiogroup label { display:block; text-align:left; width:94%; } 28 | fieldset.radiogroup input[type="radio"] { display:none; } 29 | fieldset.radiogroup label > input:checked { display:block !important; float:right; -khtml-appearance:none; width:20px; height:27px; background:url(tick.png) bottom right no-repeat; } 30 | 31 | 32 | /* SORTED LISTS */ 33 | ul.az > nav { display:block; position:absolute; top:6px; right:0; font-size:11px; width:4em; z-index:1000; } 34 | ul.az > nav > div { display:block; text-decoration:none; color:#666; text-align:center; padding-bottom:1px; font-weight:bold; } 35 | ul.az > li.selected { background:url(tick.png) 90% 50% no-repeat; } 36 | ul.az > li > a { display:inline; background:none; } 37 | 38 | 39 | /* DATE PICKER */ 40 | #_dptable { background-color:#e3e2e5; border:1px solid #666; padding:0; margin:0 auto; -webkit-border-radius:2px; -moz-border-radius:2px; } 41 | #_dptable tr, #_dptable col { padding:0; margin:0 } 42 | #_dptable th { font-size:12px; text-align:center; padding:5px 0 0 0; margin:0; border-bottom:1px solid #b2b5bc; color:#37424d; background:-webkit-gradient(linear, left top, left bottom, from(#eeedf0), to(#ceced2)); } 43 | #_dptable tr > td { font-size:22px; font-weight:bold; text-align:center; width:46px; padding:0; height:40px; margin:0; color:#37424d; border:1px solid #b2b5bc; border-top-color:#fff; border-right-color:#fff; } 44 | #_dptable tr > td.other { opacity:0.3; } 45 | #_dptable tr > td.outofrange { opacity:0.2; } 46 | #_dptable tr > td.selected { background:#d33; /*-webkit-gradient(linear,left top,left bottom,from(#f00),to(#c00));*/ color:#fff; } 47 | #_dptable td.today { background-color:#b0abbf; color:#000; border-color:#000; } 48 | #_datepicker #_dptable col.sat td, #_datepicker #_dptable col.sun td { background-color:#cecaaf; } 49 | #_datepicker p, #dp_table th, #dp_table tr > td { text-shadow:rgba(255, 255, 255, 0.7) 0 1px 0; } 50 | 51 | #_datepicker .wk2 td { background-color:#dbdbde } 52 | #_datepicker .wk3 td { background-color:#d5d5d9 } 53 | #_datepicker .wk4 td { background-color:#d0cfd4 } 54 | #_datepicker .wk5 td { background-color:#c9c8ce } 55 | #_datepicker .wk6 td { background-color:#c8c8cd } 56 | 57 | #_datepicker p { padding-bottom:3px; margin:0; min-height:33px; /*background:-webkit-gradient(linear, left top, left bottom, from(#c8c8cd), to(#e3e2e5));*/ font-size:22px; font-weight:bold; text-align:center; } 58 | #_datepicker p > .back, #_datepicker p > .fwd { width:36px; height:30px; display:block; background-repeat:no-repeat; background-position:center center; } 59 | #_datepicker p > .back { background-image:url(dpBack.png); float:left; } 60 | #_datepicker p > .fwd { background-image:url(dpFwd.png); float:right; } 61 | 62 | 63 | /* DESKTOP HACKS */ 64 | ul.az li, fieldset.radiogroup label, #_dptable td { cursor:pointer; } 65 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/masabi/t/default/listArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/masabi/t/default/listArrow.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/masabi/t/default/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/masabi/t/default/tick.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/reachability/iui-reachability.js: -------------------------------------------------------------------------------- 1 | // iUI Reachability Extension 2 | // 3 | // Requires DOMContentLoaded event 4 | // Requires document.querySelector() 5 | // 6 | // 7 | // 8 | (function() { 9 | 10 | var endPoints = []; 11 | var errFunc = null; 12 | 13 | addEventListener("DOMContentLoaded", function(event) 14 | { 15 | if (errFunc == null) 16 | { 17 | errFunc = defErrFunc; 18 | } 19 | 20 | iui.ajaxErrHandler = errFunc; 21 | 22 | // console.log("DOMContentLoaded in iui-reachability.js"); 23 | if (navigator.onLine == false) 24 | { 25 | console.log("Browser is offline. Try again later"); 26 | } 27 | for (var i = 0; i < endPoints.length ; i++) 28 | { 29 | // console.log("Checking: " + endPoints[i].url); 30 | endPoints[i].checking = true; 31 | ajaxCall(endPoints[i]); 32 | } 33 | 34 | }, false); 35 | 36 | 37 | window.iui.reach = 38 | { 39 | addURL: function(url, displayName) 40 | { 41 | // console.log("Adding: " + url); 42 | endPoints.push({ lastCheck: 0, checking: false, url: url, hostName: displayName }); 43 | }, 44 | 45 | setErrorHandler: function(func) 46 | { 47 | errFunc = func; 48 | } 49 | }; 50 | 51 | 52 | function ajaxCall(endpoint) 53 | { 54 | function reachCB(xhr) 55 | { 56 | console.log("reachCB() readyState = " + xhr.readyState); 57 | if (xhr.readyState == 4 || xhr.aborted) 58 | { 59 | if (xhr.status != 200) 60 | { 61 | errFunc("Host " + endpoint.hostName + " not available"); 62 | } 63 | } 64 | } 65 | 66 | iui.ajax(endpoint.url, null, "GET", reachCB); 67 | } 68 | 69 | function defErrFunc(message) 70 | { 71 | console.log("defErrFunc : " + message); 72 | alert(message); 73 | } 74 | 75 | })(); 76 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/reachability/reachability-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Reachability Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 45 | 46 | 47 | 100 | 101 | 102 | 103 |
104 |

105 | 106 |
107 | 108 | 114 | 115 |
116 |

About Reachability Extension

117 |
118 |

iui-reachability.js is an extension for the iUI framework. It is in the early development stages. 119 | It is intended to perform "reachability" testing for hybrid webapps that are wrapped in the UIWebView Cocoa Class. It may 120 | also be useful for webapps that are cached using the HTML5 webapp cache -- but hasn't been tested in that configuration yet.

121 |

iUI has recently been improved so that it provides better handling of network failures during Ajax operations. 122 | At this writing that work is still in-process and reachability-demo.html can be used to test that error handling as well.

123 |

If you have any questions (or valuable suggestions!) please post them to either the iphonewebdev and iui-developers Google group.

124 |

The best way to test error handling is to use the iPhone Simulator on your Mac with airport 125 | disabled -- unplug and replug your Ethernet cable to test error handling and recovery.

126 |
127 |
128 | 129 |
130 |
131 |
132 | 133 | 134 |
135 |
136 | 137 | 138 |
139 |
140 | 141 | (seconds) 142 |
143 |
144 | Submit 145 | 146 |
147 | 148 |
149 |
150 |
151 | 152 | 153 |
154 |
155 | 156 | 157 |
158 |
159 | 160 | (seconds) 161 |
162 |
163 | Submit 164 | 165 |
166 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/android-theme.css: -------------------------------------------------------------------------------- 1 | /* Theme created by Remi Grumeau http://www.remi-grumeau.com */ 2 | 3 | @font-face { 4 | font-family: droid; 5 | src: local(DroidSans), 6 | url(droidsans.ttf); 7 | } 8 | 9 | body { 10 | font-family: droid; 11 | color: #f0f0f0; 12 | background: #181818; 13 | } 14 | body > *:not(.toolbar) { 15 | top: 25px; 16 | } 17 | 18 | li > a[selected], li > a:active { 19 | color: #000; 20 | background-image: url(listArrow.png), 21 | -webkit-gradient(linear, left top, left bottom, 22 | from(#ad4500), 23 | color-stop(0.1, #ff7500), 24 | color-stop(0.5, #ff9200), 25 | color-stop(0.8, #ff9200), 26 | to(#ff6900) 27 | ); 28 | background-image: url(listArrow.png), 29 | -moz-linear-gradient(270deg, 30 | #ad4500 0%, 31 | #ff7500 10%, 32 | #ff9200 50%, 33 | #ff9200 50%, 34 | #ff6900 100% 35 | ); 36 | } 37 | 38 | li > a[selected="progress"] { 39 | background-image: url(loading.gif), 40 | -webkit-gradient(linear, left top, left bottom, 41 | from(#ad4500), 42 | color-stop(0.1, #ff7500), 43 | color-stop(0.5, #ff9200), 44 | color-stop(0.8, #ff9200), 45 | to(#ff6900) 46 | ); 47 | background-image: url(loading.gif), 48 | -moz-linear-gradient(270deg, 49 | #ad4500 0%, 50 | #ff7500 10%, 51 | #ff9200 50%, 52 | #ff9200 50%, 53 | #ff6900 100% 54 | ); 55 | } 56 | 57 | /************************************************************************************************/ 58 | 59 | body > .toolbar { 60 | border: 0px; 61 | padding: 0px 5px 10px 5px; 62 | height: 25px; 63 | background: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#7b7d7b)); 64 | background: -moz-linear-gradient(270deg, #9a9a9a 0%, #7b7d7b 100%); 65 | } 66 | .toolbar > h1, 67 | .dialog > h1 { 68 | position: absolute; 69 | left: 50%; 70 | height: auto; 71 | margin: 3px 0 0 -75px; 72 | padding: 0px; 73 | font-size: 16px; 74 | width: 150px; 75 | color: #FFF; 76 | text-align: center; 77 | text-shadow: rgba(0,0,0,.7) 0 1px 4px; 78 | } 79 | 80 | #backButton, 81 | .toolbar > .button, 82 | .dialog .button { 83 | top: 2px; 84 | right: 2px; 85 | width: auto; 86 | height: auto; 87 | margin: 0; 88 | padding: 0px 8px; 89 | color: #000; 90 | font-size: 12px; 91 | line-height: 20px; 92 | text-shadow: none; 93 | background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#d9d9d9)); 94 | background-image: -moz-linear-gradient(270deg, #ebebeb 0%, #d9d9d9 100%); 95 | -webkit-border-radius: 2px; 96 | -moz-border-radius: 2px; 97 | border-radius: 2px; 98 | } 99 | #backButton { 100 | left: 2px; 101 | right: auto; 102 | } 103 | 104 | .toolbar > .blueButton { 105 | color: #d5d4d4; 106 | background-image: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#363636)); 107 | background-image: -moz-linear-gradient(270deg, #757575 0%, #363636 100%); 108 | } 109 | .toolbar > .redButton { 110 | color: #fff; 111 | background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#be0000))!important; 112 | background-image: -moz-linear-gradient(270deg, #ff0000 0%, #be0000 100%)!important; 113 | } 114 | 115 | 116 | .whiteButton, 117 | .grayButton { 118 | font-weight: normal; 119 | font-size: 16px; 120 | -webkit-border-radius: 5px; 121 | -moz-border-radius: 5px; 122 | border: 1px solid #565756; 123 | text-shadow: none; 124 | margin: 2px 0; 125 | } 126 | 127 | .whiteButton[selected], .whiteButton:active, 128 | .grayButton[selected], .grayButton:active { 129 | background-image: -webkit-gradient(linear, left top, left bottom, 130 | from(#ff6900), 131 | color-stop(0.2, #ff9200), 132 | color-stop(0.5, #ff9c00), 133 | color-stop(0.8, #ff9200), 134 | to(#ff6900) 135 | ) !important; 136 | } 137 | 138 | .whiteButton { 139 | color: #424142; 140 | background-image: -webkit-gradient(linear, left top, left bottom, 141 | from(#f4f4f4), 142 | to(#c4c4c4) 143 | ) !important; 144 | } 145 | .grayButton { 146 | background-image: -webkit-gradient(linear, left top, left bottom, 147 | from(#797979), 148 | to(#444444) 149 | ) !important; 150 | } 151 | 152 | /************************************************************************************************/ 153 | 154 | body > ul > li { 155 | padding: 15px 0 15px 10px; 156 | font-size: 18px; 157 | font-weight: normal; 158 | border: 0px; 159 | border-bottom: 1px solid rgba(255,255,255,.3); 160 | background: url(listArrow.png) no-repeat center right, #000; 161 | } 162 | body > ul > li.group { 163 | padding: 2px 10px; 164 | font-size: 14px; 165 | font-weight: normal; 166 | text-shadow: rgba(0, 0, 0, 0.9) 1px 1px 3px; 167 | border: 0px; 168 | background: -webkit-gradient(linear, left top, left bottom, from(#9c9a9c), to(#848284)); 169 | background: -moz-linear-gradient(270deg, #9c9a9c 0%, #848284 100%); 170 | } 171 | body > ul > li > a { 172 | margin: -15px 0 -15px -10px; 173 | padding: 15px 0 15px 10px; 174 | background: none; 175 | } 176 | 177 | /************************************************************************************************/ 178 | 179 | body > .dialog { 180 | top: 0px; 181 | min-height: 437px; 182 | } 183 | .dialog .button { 184 | left: auto; 185 | width: auto; 186 | } 187 | .dialog .leftButton { 188 | left: 2px; 189 | right: auto; 190 | width: auto; 191 | } 192 | .dialog > fieldset { 193 | border: 0px; 194 | padding: 0px 5px 10px 5px; 195 | background-color: #CCC; 196 | background-repeat: repeat-x; 197 | background-size: auto 25px; 198 | background-image: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#7b7d7b)); 199 | background-image: -moz-linear-gradient(270deg, #9a9a9a 0%, #7b7d7b 100%); 200 | } 201 | .dialog > fieldset > h1 { 202 | padding-top: 3px; 203 | font-size: 16px; 204 | text-shadow: rgba(0,0,0,.7) 0 1px 4px; 205 | } 206 | .dialog > fieldset label { 207 | margin-top: 17px; 208 | } 209 | 210 | /************************************************************************************************/ 211 | 212 | body > .panel { 213 | color: #181818; 214 | background: #FFF; 215 | border: 4px solid #181818; 216 | border-position: inside; 217 | -webkit-border-radius: 15px; 218 | -moz-border-radius: 15px; 219 | } 220 | body > .panel > h2 { 221 | font-size: 20px; 222 | margin: -7px -7px 10px -7px; 223 | padding: 12px 0 12px 50px; 224 | font-weight: normal; 225 | color: #fff; 226 | text-shadow: none; 227 | background: #424542 url(panelTitle.png) no-repeat 10px 9px; 228 | -webkit-border-top-left-radius: 10px; 229 | -webkit-border-top-right-radius: 10px; 230 | -moz-border-radius-topleft: 10px; 231 | -moz-border-radius-topright: 10px; 232 | } 233 | 234 | .toggle { 235 | border: 1px solid #888888; 236 | background: #FFFFFF url(toggle.png) repeat-x; 237 | } 238 | .toggle[toggled="true"] { 239 | border: 1px solid #444; 240 | } 241 | 242 | .toggle[toggled="true"] { 243 | background: #194fdb url(toggleOn.png) repeat-x; 244 | } 245 | 246 | .thumb { 247 | background: #ffffff url(thumb.png) repeat-x; 248 | } 249 | 250 | /************************************************************************************************/ 251 | #preloader { 252 | display: none; 253 | background-image: url(loading.gif), 254 | url(selectionn.png), 255 | url(blueButton.png), 256 | url(listArrowSel.png), 257 | url(listGroup.png); 258 | } 259 | 260 | .toolbar > h1.titleImg { 261 | background: url(title-img.png) no-repeat top center; 262 | color: rgba(0,0,0,0); 263 | } 264 | 265 | .backButtonImg { 266 | width: 50px; 267 | background: url(back-img.png) no-repeat center left, 268 | url(backButtonBack.png) repeat-x top left !important; 269 | color: rgba(0,0,0,0); 270 | } 271 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/cancel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/cancel.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/droidsans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/droidsans.ttf -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/listArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/listArrow.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/loading.gif -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/panelTitle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/panelTitle.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/thumb.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/toggle.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/android/toggleOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/android/toggleOn.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/backButton-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/backButton-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/backButtonBack-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/backButtonBack-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/backButtonBackSel-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/backButtonBackSel-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/backButtonBrdr-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/backButtonBrdr-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/backButtonSel-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/backButtonSel-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/backButtonSelBrdr-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/backButtonSelBrdr-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/blueButton-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/blueButton-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/defaulthd-theme.css: -------------------------------------------------------------------------------- 1 | /* default-theme.css (c) 2007-2012 by iUI Project Members, see LICENSE.txt for license */ 2 | body { 3 | color: #000000; 4 | } 5 | 6 | li > a[selected], li > a:active { 7 | background-image: url(../../../t/default/listArrowSel.png), url(../../../t/default/selection.png) !important; 8 | -webkit-tap-highlight-color: transparent; 9 | } 10 | 11 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 12 | li > a[selected], li > a:active { 13 | background-image: url(listArrowSel-hd.png), url(selection-hd.png) !important; 14 | background-size: 25px 20px, 1px 43px; 15 | -webkit-tap-highlight-color: transparent; 16 | } 17 | } 18 | 19 | li > a[selected="progress"] { 20 | background-image: url(../../../t/default/loading.gif), url(selection-hd.png) !important; 21 | background-size: , 1px 43px; 22 | -webkit-tap-highlight-color: transparent; 23 | } 24 | 25 | /************************************************************************************************/ 26 | 27 | body > .toolbar { 28 | background: url(../../../t/default/toolbar.png) #6d84a2 repeat-x; 29 | } 30 | 31 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 32 | body > .toolbar { 33 | background: url(toolbar-hd.png) #6d84a2 repeat-x; 34 | background-size: 1px 43px; 35 | } 36 | } 37 | 38 | .button { 39 | -webkit-border-image: url(../../../t/default/toolButton.png) 0 5 0 5; 40 | -moz-border-image: url(../../../t/default/toolButton.png) 0 5 0 5; 41 | -webkit-tap-highlight-color: transparent; 42 | } 43 | 44 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 45 | .button { 46 | -webkit-border-image: url(toolButton-hd.png) 0 10 0 10; 47 | -moz-border-image: url(toolButton-hd.png) 0 10 0 10; 48 | -webkit-tap-highlight-color: transparent; 49 | } 50 | } 51 | 52 | .button:active { 53 | -webkit-border-image: url(../../../t/default/toolButtonSel.png) 0 5 0 5; 54 | -moz-border-image: url(../../../t/default/toolButtonSel.png) 0 5 0 5; 55 | background: url(../../../t/default/backButtonBackSel.png) repeat-x; 56 | -webkit-tap-highlight-color: transparent; 57 | } 58 | 59 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 60 | .button:active { 61 | -webkit-border-image: url(toolButtonSel-hd.png) 0 10 0 10; 62 | -moz-border-image: url(toolButtonSel-hd.png) 0 10 0 10; 63 | background: url(backButtonBackSel-hd.png) repeat-x; 64 | -webkit-tap-highlight-color: transparent; 65 | } 66 | } 67 | 68 | .blueButton { 69 | -webkit-border-image: url(../../../t/default/blueButton.png) 0 5 0 5; 70 | -moz-border-image: url(../../../t/default/blueButton.png) 0 5 0 5; 71 | -webkit-tap-highlight-color: transparent; 72 | } 73 | 74 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 75 | .blueButton { 76 | -webkit-border-image: url(blueButton-hd.png) 0 10 0 10; 77 | -moz-border-image: url(blueButton-hd.png) 0 10 0 10; 78 | -webkit-tap-highlight-color: transparent; 79 | } 80 | } 81 | 82 | #backButton { 83 | -webkit-border-image: url(../../../t/default/backButtonBrdr.png) 0 8 0 12; 84 | -moz-border-image: url(../../../t/default/backButtonBrdr.png) 0 8 0 12; 85 | background: url(../../../t/default/backButtonBack.png) repeat-x; 86 | -webkit-tap-highlight-color: transparent; 87 | } 88 | 89 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 90 | #backButton { 91 | -webkit-border-image: url(backButtonBrdr-hd.png) 0 16 0 24; 92 | -moz-border-image: url(backButtonBrdr-hd.png) 0 16 0 24; 93 | background: url(backButtonBack-hd.png) repeat-x; 94 | background-size: 1px 30px; 95 | -webkit-tap-highlight-color: transparent; 96 | } 97 | } 98 | 99 | #backButton:active { 100 | -webkit-border-image: url(../../../t/default/backButtonSel.png) 0 8 0 12; 101 | -moz-border-image: url(../../../t/default/backButtonSel.png) 0 8 0 12; 102 | background: url(../../../t/default/backButtonSel.png) repeat-x; 103 | -webkit-tap-highlight-color: transparent; 104 | } 105 | 106 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 107 | #backButton:active { 108 | -webkit-border-image: url(backButtonSel-hd.png) 0 16 0 24; 109 | -moz-border-image: url(backButtonSel-hd.png) 0 16 0 24; 110 | background: url(backButtonSel-hd.png) repeat-x; 111 | background-size: 43px 30px; 112 | -webkit-tap-highlight-color: transparent; 113 | } 114 | } 115 | 116 | .whiteButton { 117 | -webkit-border-image: url(../../../t/default/whiteButton.png) 0 12 0 12; 118 | -moz-border-image: url(../../../t/default/whiteButton.png) 0 12 0 12; 119 | text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; 120 | } 121 | 122 | .redButton { 123 | -webkit-border-image: url(../../../t/default/redButton.png) 0 12 0 12; 124 | -moz-border-image: url(../../../t/default/redButton.png) 0 12 0 12; 125 | } 126 | 127 | .grayButton { 128 | -webkit-border-image: url(../../../t/default/grayButton.png) 0 12 0 12; 129 | -moz-border-image: url(../../../t/default/grayButton.png) 0 12 0 12; 130 | color: #FFFFFF; 131 | } 132 | 133 | /************************************************************************************************/ 134 | 135 | body > ul > li.group { 136 | opacity:0.7; 137 | background: url(../../../t/default/listGroup.png) repeat-x; 138 | } 139 | 140 | body > ul > li > a { 141 | background: url(../../../t/default/listArrow.png) no-repeat right center; 142 | -webkit-tap-highlight-color: transparent; 143 | } 144 | 145 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 146 | body > ul > li > a { 147 | background: url(listArrow-hd.png) no-repeat right center; 148 | background-size: 25px 20px; 149 | -webkit-tap-highlight-color: transparent; 150 | } 151 | } 152 | 153 | /************************************************************************************************/ 154 | 155 | .dialog > fieldset { 156 | background: url(../../../t/default/toolbar.png) #7388a5 repeat-x; 157 | } 158 | 159 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 160 | .dialog > fieldset { 161 | background: url(toolbar-hd.png) #7388a5 repeat-x; 162 | } 163 | } 164 | 165 | /************************************************************************************************/ 166 | 167 | body > .panel { 168 | background: #c5ccd4 url(../../../t/default/pinstripes.png); 169 | } 170 | 171 | .toggle { 172 | border: 1px solid #888888; 173 | background: #FFFFFF url(../../../t/default/toggle.png) repeat-x; 174 | } 175 | 176 | .toggle[toggled="true"] { 177 | background: #194fdb url(../../../t/default/toggleOn.png) repeat-x; 178 | } 179 | 180 | .thumb { 181 | background: #ffffff url(../../../t/default/thumb.png) repeat-x; 182 | } 183 | 184 | /************************************************************************************************/ 185 | #preloader { 186 | display: none; 187 | background-image: url(../../../t/default/loading.gif), url(../../../t/default/backButtonSel.png), url(../../../t/default/selection.png), url(../../../t/default/blueButton.png), url(../../../t/default/listArrowSel.png), url(../../../t/default/listArrowSel.png), url(../../../t/default/listGroup.png); 188 | } 189 | 190 | .toolbar > h1.titleImg { 191 | background: url(../../../t/default/title-img.png) no-repeat top center; 192 | color: rgba(0,0,0,0); 193 | } 194 | 195 | .backButtonImg { 196 | width: 50px; 197 | background: url(../../../t/default/back-img.png) no-repeat center left, url(../../../t/default/backButtonBack.png) repeat-x top left !important; 198 | color: rgba(0,0,0,0); 199 | } 200 | 201 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { 202 | .backButtonImg { 203 | width: 50px; 204 | background: url(../../../t/default/back-img.png) no-repeat center left, url(backButtonBack-hd.png) repeat-x top left !important; 205 | background-size: 45px 30px, 1px 30px; 206 | color: rgba(0,0,0,0); 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/listArrow-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/listArrow-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/listArrowSel-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/listArrowSel-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/selection-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/selection-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/toolButton-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/toolButton-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/toolButtonSel-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/toolButtonSel-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/defaulthd/toolbar-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/defaulthd/toolbar-hd.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/svg/backButton.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/svg/backButtonSqCorners.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/cancel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/cancel.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/grayButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/grayButton.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/list.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/listArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/listArrow.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/listArrowSel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/listArrowSel.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/listGroup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/listGroup.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/loading.gif -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/selection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/selection.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/thumb.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/toggle.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/toggleOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/toggleOn.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/webos-theme.css: -------------------------------------------------------------------------------- 1 | /* PalmOS theme for iUI framework 2 | /* Created by Remi Grumeau 3 | /* Dec 2009 4 | /* http://www.remi-grumeau.com 5 | */ 6 | body { 7 | background: #000; 8 | } 9 | body > *:not(.toolbar) { 10 | top: 30px; 11 | -webkit-border-radius: 15px; 12 | -moz-border-radius: 15px; 13 | border-radius: 15px; 14 | background: #e8e8e6; 15 | } 16 | 17 | li > a[selected], li > a:active { 18 | color: #fff; 19 | background-image: url(listArrowSel.png), url(selection.png) !important; 20 | } 21 | 22 | li > a[selected="progress"] { 23 | background-image: url(loading.gif), url(selection.png) !important; 24 | } 25 | 26 | /************************************************************************************************/ 27 | 28 | body > .toolbar { 29 | position: absolute; 30 | width: 100%; 31 | margin: 0; 32 | background: #000; 33 | border: 0px; 34 | } 35 | body > .toolbar > h1, 36 | body > .dialog > h1 { 37 | left: 50%; 38 | margin: 1px 0 0 -75px; 39 | height: auto; 40 | font-size: 14px; 41 | padding: 5px 0 5px 0; 42 | text-shadow: none; 43 | } 44 | 45 | #backButton, 46 | .toolbar > .button, 47 | .dialog .button { 48 | position: absolute; 49 | overflow: hidden; 50 | top: 0px; 51 | right: 0px; 52 | max-width: 65px; 53 | margin-top: 0px; 54 | padding: 0px 14px; 55 | background-image: -webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#000))!important; 56 | background-image: -moz-linear-gradient(-90deg, #4d4d4d, #272727, #000, #111, #1f1f1f); 57 | -moz-border-top-left-radius: 7px; 58 | -webkit-border-top-left-radius: 7px; 59 | -moz-border-top-right-radius: 7px; 60 | -webkit-border-top-right-radius: 7px; 61 | border-width: none; 62 | } 63 | .blueButton { 64 | background-image: -webkit-gradient(linear, left top, left bottom, from(#51abff), to(#000)); 65 | background-image: -moz-linear-gradient(-90deg, #51abff 0%, #000 100%); 66 | } 67 | 68 | #backButton { 69 | display: none; 70 | left: 0px; 71 | right: auto; 72 | } 73 | 74 | 75 | .whiteButton, .grayButton { 76 | font-weight: normal; 77 | font-size: 18px; 78 | } 79 | .whiteButton { 80 | -moz-border-image: url(whiteButton.png) 0 12 0 12; 81 | -webkit-border-image: url(whiteButton.png) 0 12 0 12; 82 | text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; 83 | } 84 | .grayButton { 85 | -moz-border-image: url(grayButton.png) 0 12 0 12; 86 | -webkit-border-image: url(grayButton.png) 0 12 0 12; 87 | text-shadow: rgba(0,0,0,.7) 0 -1px 0; 88 | } 89 | .whiteButton[selected], .whiteButton:active { 90 | color: #fff; 91 | text-shadow: rgba(0,0,0,.7) 0 -1px 0; 92 | } 93 | .grayButton[selected], .grayButton:active { 94 | color: #ccc; 95 | text-shadow: rgba(0,0,0,.7) 0 1px 0; 96 | } 97 | 98 | /************************************************************************************************/ 99 | 100 | body > ul { 101 | background: #e8e8e6; 102 | } 103 | 104 | body > ul > li { 105 | padding: 12px 0 12px 10px; 106 | font-weight: normal; 107 | font-size: 18px; 108 | color: #000; 109 | border-top: 1px solid #fff; 110 | border-bottom: 1px solid #cdcdcb; 111 | } 112 | body > ul > li:first-child { 113 | border-top: none; 114 | } 115 | body > ul > li.group 116 | { 117 | padding: 1px auto; 118 | padding-left: 24px; 119 | background: url(listgroup.png) no-repeat top left, -webkit-gradient(linear, left top, left bottom, 120 | from(#88afd0), 121 | color-stop(0.3, #91bde1) 122 | )!important; 123 | background: url(listgroup.png) no-repeat top left, -moz-linear-gradient(-90deg, #88afd0 0%, #91bde1 30%)!important; 124 | border: 0px; 125 | z-index: 2; 126 | } 127 | 128 | body > ul > li > a 129 | { 130 | margin: -12px 0 -12px -10px; 131 | padding: 12px 0 12px 10px; 132 | border-right: 0px!important; 133 | border-bottom: none; 134 | background: url(listArrow.png) no-repeat right center; 135 | 136 | } 137 | 138 | /************************************************************************************************/ 139 | 140 | body > .dialog { 141 | top: 0px; 142 | top: 0px; 143 | min-height: 445px; 144 | background: rgba(0,0,0,.5); 145 | -webkit-border-radius: 0; 146 | -moz-border-radius: 0; 147 | border-radius: 0; 148 | } 149 | .dialog .button { 150 | left: auto; 151 | width: auto; 152 | } 153 | .dialog .leftButton { 154 | left: 0px; 155 | right: auto; 156 | width: auto; 157 | } 158 | .dialog > fieldset { 159 | border: 0px; 160 | padding: 0px 5px 10px 5px; 161 | background-color: #000; 162 | } 163 | .dialog > fieldset > h1 { 164 | padding: 6px 0; 165 | font-size: 14px; 166 | } 167 | .dialog > fieldset label { 168 | margin-top: 17px; 169 | font-size: 12px; 170 | color: #fff; 171 | } 172 | .dialog > fieldset input { 173 | color: #fff; 174 | border: 0px; 175 | background: #656564; 176 | background: -webkit-gradient(linear, left top, left bottom, 177 | from(#222), 178 | color-stop(.1, #656564), 179 | to(#656564)); 180 | background: -moz-linear-gradient(-90deg, 181 | #222 0%, 182 | #656564 10%, 183 | #656564 100%); 184 | -webkit-border-radius: 10px; 185 | -moz-border-radius: 10px; 186 | border-radius: 10px; 187 | } 188 | 189 | /************************************************************************************************/ 190 | 191 | .panel > h2 { 192 | margin: 0px auto 5px 0px; 193 | padding: 11px 0px 11px 25px; 194 | font-size: 18px; 195 | font-weight: normal; 196 | color: #000; 197 | text-shadow: none; 198 | background: -webkit-gradient(linear, left top, left bottom, 199 | from(#babab8), 200 | to(#bdbdbb), 201 | color-stop(0.1, #a5a5a3), 202 | color-stop(0.5, #cdcdcb) 203 | )!important; 204 | background: -moz-linear-gradient(-90deg, #babab8 0%, #a5a5a3 10%, #cdcdcb 50%, #bdbdbb 100%)!important; 205 | -moz-border-top-left-radius: 15px; 206 | -webkit-border-top-left-radius: 15px; 207 | -moz-border-top-right-radius: 15px; 208 | -webkit-border-top-right-radius: 15px; 209 | 210 | } 211 | body > .panel { 212 | padding: 0px 0px 10px 0px; 213 | background: #e4e4e2; 214 | } 215 | body > .panel > *:not(h2) { 216 | margin-left: 10px; 217 | margin-right: 10px; 218 | } 219 | body > .panel > fieldset { 220 | border: 3px solid #7e7e7d; 221 | background: #e4e4e2; 222 | } 223 | .row > label { 224 | font-weight: normal; 225 | text-align: left; 226 | font-size: 14px; 227 | color: #5099d8; 228 | } 229 | 230 | /************************************************************************************************/ 231 | 232 | .toggle { 233 | border: 1px solid #888888; 234 | background: #FFFFFF url(toggle.png) repeat-x; 235 | } 236 | 237 | .toggle[toggled="true"] { 238 | background: #194fdb url(toggleOn.png) repeat-x; 239 | } 240 | 241 | .thumb { 242 | background: #ffffff url(thumb.png) repeat-x; 243 | } 244 | 245 | /************************************************************************************************/ 246 | #preloader { 247 | display: none; 248 | background-image: url(loading.gif), url(selection.png), url(blueButton.png), url(listArrowSel.png), url(listGroup.png); 249 | } 250 | 251 | 252 | .backButtonImg { 253 | width: 50px; 254 | background: url(back-img.png) no-repeat center left, 255 | url(backButtonBack.png) repeat-x top left !important; 256 | color: rgba(0,0,0,0); 257 | } 258 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/t/webos/whiteButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/ext-sandbox/t/webos/whiteButton.png -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/unloader/ajax.frag: -------------------------------------------------------------------------------- 1 |
2 |

Ajax Fragment

3 |

This should be unloaded when you hit the back button

4 |
5 | 6 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/unloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Unloader Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 | 20 |
21 | 22 | 29 | 30 | 31 | 32 | 33 | 34 |
35 |

About Video Extension

36 |
37 |

iui-unlaoder.js is an extension for the iUI framework. It is currently EXPERIMENTAL

38 |

For info on how to use this extension see Instructions.

39 |

Sean Gilligan

40 |
41 |
42 | 43 | 44 |
45 |

Unloader Ext - instructions for use.

46 |
47 |

The Video Extension is easy to install into your iUI powered web app. It requires no changes to existing iUI components. Start by linking the iui-unloader.js to your main index file just like you would iui.js.

48 |

All AJAX-loaded fragments will be unload when they receive the iUI 'unload' event when they are navigated away from (back button).

49 |
50 |
51 | 52 |
53 |

Internal Fragment

54 |

This should not be unloaded when you hit the back button

55 |
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/unloader/iui-unloader.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2007-10, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // 7 | // iui-unloader.js 8 | // 9 | // An iUI extension that will remove any iUI fragment or view (aka "page") when it receives 10 | // an 'unload' event from iUI core. 11 | // 12 | // This will prevent your DOM from getting overloaded. It can also be used as a template 13 | // for a more advanced unloading scheme. 14 | // 15 | // requires querySelectorAll, therefore iPhone OS 2.x or later 16 | // or Safari 3.x or later 17 | // 18 | // 19 | 20 | (function() { 21 | 22 | // Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method (Issue #204?) 23 | // We need to register before iui's main onload handler so we can get the 'load' and 'focus' events 24 | // for the default 'page' (view). 25 | // 26 | // The "better method" may be related to http://code.google.com/p/iui/issues/detail?id=204 27 | // but there may need to be more than one hook for iUI loading... 28 | // 29 | addEventListener("DOMContentLoaded", function(event) 30 | { 31 | document.body.addEventListener('afterinsert', afterInsert, false); 32 | // This will register event handlers on all initial nodes 33 | // We'll also need to register handlers on inserted (via ajax) nodes 34 | // To do that we'll need to use the afterInsert event 35 | nodes = document.querySelectorAll("body > *:not(.toolbar)"); 36 | for (var i = 0; i < nodes.length ; i++) 37 | { 38 | registerEvents(nodes[i]); 39 | } 40 | }, false); 41 | 42 | function registerEvents(node) 43 | { 44 | node.addEventListener('unload', unloader, false); 45 | } 46 | 47 | function afterInsert(e) 48 | { 49 | registerEvents(e.insertedNode); // Set event handlers on newly added node 50 | console.log("Marking " + e.insertedNode + " for removal from DOM on unload"); 51 | e.insertedNode.unloadMe = true; // Mark everything inserted by Ajax for removal 52 | } 53 | 54 | function unloader(e) 55 | { 56 | if (e.target.unloadMe) // If marked for removal 57 | { 58 | console.log("About to remove " + e.target + " from " + e.target.parentNode); 59 | e.target.parentNode.removeChild(e.target); // remove the node after unloaded 60 | } 61 | } 62 | 63 | 64 | })(); 65 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Video Extension Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

21 | 22 |
23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 |
39 |

About Video Extension

40 |
41 |

iui-video.js is an extension for the iUI framework. It is currently EXPERIMENTAL

42 |

For info on how to use this extension see Instructions.

43 |

Sean Gilligan

44 |
45 |
46 | 47 | 48 |
49 |

Video Ext - instructions for use.

50 |
51 |

The Video Extension is easy to install into your iUI powered web app. It requires no changes to existing iUI components. Start by linking the iui-video.js to your main index file just like the you would iui.js.

52 |

You can now place compatible HTML5 video in iUI "pages".

53 |

Use the following markup for each iUI view ("page") that contains a video:

54 |
55 |
56 |

<div id="video1" >

57 |

    <a href="path/to/video.mp4" target="_self" rel="iuiposter" >

58 |

        <img src="path/to/poster.jpg" width="nnn" height="mmm" />

59 |

    </a>

60 |

</div>

61 |
62 |
63 |

The Video Extension will automatically create a video tag and play the video when the iUI view (aka "page") is active.

64 |
65 |
66 | 67 |
68 | 69 | 70 | 71 | 72 |
73 | 74 |
75 | 76 | 77 | 78 | 79 |
80 | 81 |
82 | 83 | 84 | 85 |
86 | 87 |
88 | 89 | 90 | 91 |
92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/video/iui-video-logger.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2010, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | 5 | (derived from Apple Sample code) 6 | */ 7 | 8 | function addVideoLoggers(vid) 9 | { 10 | /* add logVideoEvent for all events for HTML5 media element events */ 11 | vid.addEventListener('loadstart', function(evt) { logVideoEvent(evt,'#000099'); }, false); 12 | vid.addEventListener('canplaythrough',function(evt) { logVideoEvent(evt,'#66CC33'); }, false); 13 | vid.addEventListener('canplay', function(evt) { logVideoEvent(evt,'#66CC33'); }, false); 14 | vid.addEventListener('loadeddata', function(evt) { logVideoEvent(evt,'#00CCCC'); }, false); 15 | vid.addEventListener('loadedmetadata', function(evt) { logVideoEvent(evt,'#00CCCC'); }, false); 16 | 17 | vid.addEventListener('abort', function(evt) { logVideoEvent(evt,'red'); }, false); 18 | vid.addEventListener('emptied', function(evt) { logVideoEvent(evt,'red'); }, false); 19 | vid.addEventListener('error', function(evt) { logVideoEvent(evt,'red'); }, false); 20 | vid.addEventListener('stalled', function(evt) { logVideoEvent(evt,'red'); }, false); 21 | vid.addEventListener('suspend', function(evt) { logVideoEvent(evt,'red'); }, false); 22 | vid.addEventListener('waiting', function(evt) { logVideoEvent(evt,'red'); }, false); 23 | 24 | vid.addEventListener('pause', function(evt) { logVideoEvent(evt,'orange'); }, false); 25 | vid.addEventListener('play', function(evt) { logVideoEvent(evt,'orange'); }, false); 26 | vid.addEventListener('volumechange', function(evt) { logVideoEvent(evt,'orange'); }, false); 27 | 28 | vid.addEventListener('playing', function(evt) { logVideoEvent(evt,'purple'); }, false); 29 | 30 | vid.addEventListener('seeked', function(evt) { logVideoEvent(evt,'teal'); }, false); 31 | vid.addEventListener('seeking', function(evt) { logVideoEvent(evt,'teal'); }, false); 32 | 33 | vid.addEventListener('durationchange', function(evt) { logVideoEvent(evt,'#cc0066'); }, false); 34 | vid.addEventListener('progress', function(evt) { logVideoEvent(evt,'#cc0066'); }, false); 35 | vid.addEventListener('ratechange', function(evt) { logVideoEvent(evt,'#cc0066'); }, false); 36 | 37 | vid.addEventListener('timeupdate', function(evt) { /* logVideoEvent(evt,'gray'); */ }, false); 38 | 39 | vid.addEventListener('ended', function(evt) { logVideoEvent(evt,'#000099'); }, false); 40 | } 41 | 42 | 43 | function logVideoEvent(evt, color) 44 | { 45 | console.log(evt.type); 46 | if (evt.type == 'abort' || evt.type == 'error') 47 | { 48 | failed(evt); 49 | } 50 | } 51 | 52 | function failed(e) { 53 | // video playback failed - show a message saying why 54 | if (e.target.error == null || typeof e.target.error != 'object') 55 | { 56 | console.log("error is not an object"); 57 | } 58 | else 59 | { 60 | switch (e.target.error.code) { 61 | case e.target.error.MEDIA_ERR_ABORTED: 62 | console.log('You aborted the video playback.'); 63 | break; 64 | case e.target.error.MEDIA_ERR_NETWORK: 65 | console.log('A network error caused the video download to fail part-way.'); 66 | break; 67 | case e.target.error.MEDIA_ERR_DECODE: 68 | console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.'); 69 | break; 70 | case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: 71 | alert('The video could not be loaded, either because the server or network failed or because the format is not supported.'); 72 | console.log; 73 | default: 74 | console.log('An unknown error occurred.'); 75 | break; 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/video/iui-video.css: -------------------------------------------------------------------------------- 1 | a[rel='iuiposter'] { 2 | position: absolute; 3 | top: 0px; 4 | left: 0px; 5 | z-index: 1; 6 | } 7 | 8 | video { 9 | position: absolute; 10 | top: 0px; 11 | left: 0px; 12 | z-index: 1; 13 | } 14 | 15 | video.video-out { 16 | // display: none; 17 | opacity: 0; 18 | // z-index: -1; 19 | } 20 | 21 | .poster-out { 22 | opacity: 0; 23 | z-index: -1; 24 | } 25 | 26 | .poster-anim-out { 27 | -webkit-animation-name: posterout; 28 | -webkit-animation-duration: 500ms; 29 | } 30 | 31 | 32 | @-webkit-keyframes posterout { 33 | 0% { 34 | opacity: 1; 35 | } 36 | 100% { 37 | opacity: 0; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/video/iui-video.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2010, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // requires querySelectorAll, therefore iPhone OS 2.x or later 7 | // or Safari 3.x or later 8 | 9 | (function() { 10 | 11 | var vidEventLogging = true; 12 | var waitForPlayThrough = false; 13 | 14 | // Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method (Issue #204?) 15 | // We need to register before iui's main onload handler so we can get the 'load' and 'focus' events 16 | // for the default 'page' (view). 17 | // 18 | // The "better method" may be related to http://code.google.com/p/iui/issues/detail?id=204 19 | // but there may need to be more than one hook for iUI loading... 20 | // 21 | addEventListener("DOMContentLoaded", function(event) 22 | { 23 | document.body.addEventListener('afterinsert', afterInsert, false); 24 | // This will register event handlers on all initial nodes 25 | // We'll also need to register handlers on inserted (via ajax) nodes 26 | // To do that we'll need to use the beforeInsert event 27 | var nodes = document.querySelectorAll("body > *:not(.toolbar)"); 28 | for (var i = 0; i < nodes.length ; i++) 29 | { 30 | registerAllEvents(nodes[i]); 31 | } 32 | 33 | if (false) 34 | { 35 | // Code to install listeners for video tags already in the document 36 | // We dont' want to do this (without other changes) 37 | // because videos will start playing even 38 | // when they are not shown 39 | var vnodes = document.querySelectorAll("video"); 40 | for (var i = 0; i < vnodes.length ; i++) 41 | { 42 | var vid = vnodes[i]; 43 | if (!vid.listenersInstalled) 44 | { 45 | console.log("installing videoListeners"); 46 | addVideoListeners(vid); 47 | vid.listenersInstalled = true; 48 | } 49 | } 50 | } 51 | 52 | }, false); 53 | 54 | function registerAllEvents(node) 55 | { 56 | node.addEventListener('aftertransition', afterTrans, false); 57 | node.addEventListener('blur', onBlur, false); 58 | // node.addEventListener('beforetransition', beforeTrans, false); 59 | } 60 | 61 | function afterInsert(e) 62 | { 63 | registerAllEvents(e.insertedNode); // Set event handlers on newly added node 64 | } 65 | 66 | function afterTrans(e) 67 | { 68 | if (!e.out) 69 | { 70 | console.log("afterTransition-in: " + e.target); 71 | var vid = e.target.querySelector("video"); 72 | var aNode = e.target.querySelector("a[rel='iuiposter']"); 73 | if (!vid) 74 | { 75 | console.log("no vid found") 76 | var aNode = e.target.querySelector("a[rel='iuiposter']"); 77 | if (aNode) 78 | { 79 | console.log("iuiposter found, creating vid"); 80 | var img = aNode.querySelector("img"); 81 | var vid = document.createElement("video"); 82 | vid.src = aNode.href; 83 | // vid.loop = true; 84 | vid.width = img.width; 85 | vid.height = img.height; 86 | vid.poster = img.src; 87 | iui.addClass(vid, 'video-out'); 88 | aNode.parentNode.insertBefore(vid, aNode); //aNode); 89 | } 90 | } 91 | if (aNode) 92 | { 93 | iui.addClass(aNode, 'poster-out'); 94 | } 95 | if (vid) 96 | { 97 | if (!vid.listenersInstalled) 98 | { 99 | console.log("installing videoListeners"); 100 | addVideoListeners(vid); 101 | vid.listenersInstalled = true; 102 | } 103 | setTimeout(startLoad, 0, vid); 104 | } 105 | 106 | } 107 | } 108 | 109 | function onBlur(e) 110 | { 111 | var vid = e.target.querySelector("video"); 112 | if (vid) 113 | { 114 | console.log("onBlur of video div"); 115 | vid.pause(); 116 | iui.addClass(vid, 'video-out'); 117 | var aNode = e.target.querySelector("a[rel='iuiposter']"); 118 | if (aNode) 119 | { 120 | //aNode.style.visibility = 'visible'; 121 | //vid.style.visibility = 'hidden'; 122 | iui.removeClass(aNode, 'poster-out'); 123 | } 124 | } 125 | } 126 | 127 | function beforeTrans(e) 128 | { 129 | if (e.out) 130 | { 131 | var vid = e.target.querySelector("video"); 132 | if (vid) 133 | { 134 | console.log("beforeTrans of video div"); 135 | vid.pause(); 136 | iui.addClass(vid, 'video-out'); 137 | var aNode = e.target.querySelector("a[rel='iuiposter']"); 138 | if (aNode) 139 | { 140 | //aNode.style.visibility = 'visible'; 141 | //vid.style.visibility = 'hidden'; 142 | iui.removeClass(aNode, 'poster-out'); 143 | } 144 | } 145 | } 146 | } 147 | 148 | function startLoad(vid) 149 | { 150 | console.log("readyState is: " + vid.readyState); 151 | console.log("networkState is: " + vid.networkState); 152 | console.log("startLoad()"); 153 | iui.removeClass(vid, 'video-out'); 154 | vid.load(); 155 | console.log("readyState is: " + vid.readyState); 156 | console.log("networkState is: " + vid.networkState); 157 | } 158 | 159 | function onReadyToPlay(evt) 160 | { 161 | console.log("onReadyToPlay()"); 162 | evt.target.play(); 163 | } 164 | 165 | function onPlaying(evt) 166 | { 167 | console.log("onPlaying()"); 168 | var vid = evt.target; 169 | var posterElem = vid.parentNode.querySelector("a[rel='iuiposter']"); 170 | posterOut(posterElem); 171 | } 172 | 173 | function posterOut(posterElem) 174 | { 175 | var remove1 = function() { 176 | // reset classname so that 177 | // it can be applied again animations are only 178 | // triggered when classnames are first applied 179 | // posterElem.className = 'poster-out'; 180 | iui.removeClass(posterElem, 'poster-anim-out'); 181 | iui.addClass(posterElem, 'poster-out'); 182 | // remove this listener because webkitAnimationEnd 183 | // is triggered every time ANY animation ends on theDiv 184 | posterElem.removeEventListener('webkitAnimationEnd', remove1); 185 | }; 186 | // listen for animation end 187 | posterElem.addEventListener('webkitAnimationEnd', remove1, false); 188 | /// FINALLY, start the animation animation 189 | // posterElem.className = 'poster-anim-out'; 190 | iui.addClass(posterElem, 'poster-anim-out'); 191 | } 192 | 193 | function addVideoListeners(vid) 194 | { 195 | // vid.addEventListener('pause', function(evt) { onPause(); }, false); 196 | vid.addEventListener('playing', function(evt) { onPlaying(evt); }, false); 197 | if (waitForPlayThrough) 198 | { 199 | vid.addEventListener('canplaythrough', function(evt) { onReadyToPlay(evt); }, false); 200 | } 201 | else 202 | { 203 | vid.addEventListener('canplay', function(evt) { onReadyToPlay(evt); }, false); 204 | } 205 | if (vidEventLogging) 206 | { 207 | // Make sure to include iui-video-logger.js if you enable this setting 208 | addVideoLoggers(vid); 209 | } 210 | } 211 | 212 | 213 | })(); 214 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/view/iui-views.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2007-9, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // requires iui.js 7 | // requires querySelectorAll, therefore iPhone OS 2.x or later 8 | // or Safari 3.x or later 9 | // requires DOMContentLoaded event 10 | 11 | (function() { 12 | 13 | // global, byClass, and byID need to be setup at page load time and be ready 14 | // when DOMContentLoaded is called. 15 | window.iui.views = 16 | { 17 | global: null, 18 | byClass: [], 19 | byID: [] 20 | } 21 | 22 | var eventNames = ['load', 'unload', 'focus', 'blur', 'beforetransition', 'aftertransition' ]; 23 | 24 | // Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method 25 | // We need to register before iui's main onload handler so we can get the 'load' and 'focus' events 26 | // for the default 'page' (view). 27 | // 28 | addEventListener("DOMContentLoaded", function(event) 29 | { 30 | document.body.addEventListener('afterinsert', afterInsert, false); 31 | // This will register event handlers on all initial nodes 32 | // We'll also need to register handlers on inserted (via ajax) nodes 33 | // To do that we'll need to use the beforeInsert event 34 | nodes = document.querySelectorAll("body > *:not(.toolbar)"); 35 | for (var i = 0; i < nodes.length ; i++) 36 | { 37 | registerNode(nodes[i]); 38 | } 39 | }, false); 40 | 41 | function registerNode(node) 42 | { 43 | console.log("registerNode: " + node.id + " = " + node); 44 | 45 | // One view per node, first one found is used. 46 | // If id match, use that, else first class match, else global (if any) 47 | var view = window.iui.views.byID[node.id] || 48 | viewByClass(node) || 49 | window.iui.views.global; 50 | 51 | if (view) 52 | { 53 | for (var i = 0; i < eventNames.length ; i++) 54 | { 55 | var name = eventNames[i]; 56 | var onName = "on" + name; 57 | if (view[onName]) 58 | { 59 | console.log("addlistener: " + name + " func: " + onName + "() on #" + node.id + " = " + node); 60 | node.addEventListener(name, view[onName], false); 61 | } 62 | } 63 | } 64 | } 65 | 66 | function viewByClass(node) 67 | { 68 | var view = null; 69 | var classString = node.getAttribute("class"); 70 | if (classString) 71 | { 72 | var classes = classString.split(' '); 73 | for (var i=0; i < classes.length ; i++) 74 | { 75 | view = window.iui.views.byClass[classes[i]]; 76 | if (view) break; 77 | } 78 | } 79 | return view; 80 | } 81 | 82 | function afterInsert(e) 83 | { 84 | logEvent(e); 85 | registerNode(e.insertedNode); // Set event handlers on newly added node 86 | } 87 | 88 | function logEvent(e) 89 | { 90 | console.log("logEvent type: " + e.type + " target " + e.target.tagName + "#" + e.target.id); 91 | if (e.type == "beforetransition" || e.type == "aftertransition") 92 | { 93 | console.log(" out trans = " + e.out); 94 | } 95 | else if (e.type == "beforeinsert") { 96 | console.log(" fragment = " + e.fragment); 97 | } 98 | else if (e.type == "afterinsert") { 99 | console.log(" node = " + e.insertedNode); 100 | } 101 | } 102 | 103 | 104 | })(); 105 | 106 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/view/view-test.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | View Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 20 | 21 | 22 | 23 |
24 |

25 | 26 |
27 | 28 | 31 | 32 |
33 |

Panel (read/only)

34 |
35 |
36 | 37 | Text in a span 38 |
39 |
40 | 41 | More text 42 |
43 |
44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /mobile/iui/ext-sandbox/view/view-test.js: -------------------------------------------------------------------------------- 1 | var myView = { 2 | onload: function(e) { 3 | window.logEvent(e); 4 | }, 5 | onunload: function(e) { 6 | window.logEvent(e); 7 | }, 8 | onfocus: function(e) { 9 | window.logEvent(e); 10 | }, 11 | onblur: function(e) { 12 | window.logEvent(e); 13 | }, 14 | onbeforetransition: function(e) { 15 | window.logEvent(e); 16 | }, 17 | onaftertransition: function(e) { 18 | window.logEvent(e); 19 | }, 20 | 21 | } 22 | 23 | // 24 | // The following lines allow you to attach myView to either 25 | // 1) All views 26 | // 2) All views having class 'panel' 27 | // 3) The view having the id 'main' 28 | // 29 | // Comment or uncomment the lines to test/demonstrate the different 30 | // behaviors 31 | // 32 | //window.iui.views.global = myView; 33 | window.iui.views.byClass['panel'] = myView; 34 | //window.iui.views.byID['main'] = myView; 35 | 36 | 37 | function logEvent(e) 38 | { 39 | console.log("logEvent type: " + e.type + " target " + e.target.tagName + "#" + e.target.id); 40 | if (e.type == "beforetransition" || e.type == "aftertransition") 41 | { 42 | console.log(" out trans = " + e.out); 43 | } 44 | else if (e.type == "beforeinsert") { 45 | console.log(" fragment = " + e.fragment); 46 | } 47 | else if (e.type == "afterinsert") { 48 | console.log(" node = " + e.insertedNode); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /mobile/iui/iui-favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/iui-favicon.png -------------------------------------------------------------------------------- /mobile/iui/iui-logo-touch-icon-hd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/iui-logo-touch-icon-hd.png -------------------------------------------------------------------------------- /mobile/iui/iui-logo-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/iui-logo-touch-icon.png -------------------------------------------------------------------------------- /mobile/iui/iui-startup-ipad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/iui-startup-ipad.jpg -------------------------------------------------------------------------------- /mobile/iui/iui-startup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/iui-startup.jpg -------------------------------------------------------------------------------- /mobile/iui/iui.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2007-12, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | Version 0.4 5 | */ 6 | body { 7 | margin: 0; 8 | font-family: Helvetica; 9 | background: #FFFFFF; 10 | color: #000000; 11 | overflow-x: hidden; 12 | -webkit-user-select: none; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | body > *:not(.toolbar) { 17 | display: none; 18 | position: absolute; 19 | margin: 0; 20 | padding: 0; 21 | left: 0; 22 | top: 45px; 23 | width: 100%; 24 | height: auto; 25 | min-height: 415px; 26 | -webkit-transition-duration: 300ms; 27 | -webkit-transition-property: -webkit-transform; 28 | -webkit-transform: translateX(0%); 29 | } 30 | 31 | body.landscape > *:not(.toolbar) { 32 | height: auto; 33 | min-height: 268px; 34 | } 35 | 36 | body > *[selected="true"] { 37 | display: block; 38 | } 39 | 40 | li > a[selected], li > a:active { 41 | background-color: #194fdb !important; 42 | background-repeat: no-repeat, repeat-x !important; /* TG: !important */ 43 | background-position: right center, left top !important; /* TG: !important */ 44 | color: #FFFFFF !important; 45 | } 46 | 47 | li > a[selected="progress"] { 48 | } 49 | 50 | /************************************************************************************************/ 51 | 52 | body > .toolbar { 53 | box-sizing: border-box; 54 | -webkit-box-sizing: border-box; 55 | -moz-box-sizing: border-box; 56 | border-bottom: 1px solid #2d3642; 57 | border-top: 1px solid #6d84a2; 58 | padding: 0 10px 10px 10px; 59 | height: 45px; 60 | } 61 | 62 | .toolbar > h1 { 63 | position: absolute; 64 | overflow: hidden; 65 | left: 50%; 66 | margin: 1px 0 0 -75px; 67 | padding-top: 10px; 68 | height: 45px; 69 | font-size: 20px; 70 | width: 150px; 71 | font-weight: bold; 72 | text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; 73 | text-align: center; 74 | text-overflow: ellipsis; 75 | white-space: nowrap; 76 | color: #FFFFFF; 77 | } 78 | 79 | body.landscape > .toolbar > h1 { 80 | margin-left: -125px; 81 | width: 250px; 82 | } 83 | 84 | .button { 85 | position: absolute; 86 | overflow: hidden; 87 | top: 8px; 88 | right: 6px; 89 | margin: 0; 90 | border-width: 0 5px; 91 | padding: 0 3px; 92 | width: auto; 93 | height: 30px; 94 | line-height: 30px; 95 | font-family: inherit; 96 | font-size: 12px; 97 | font-weight: bold; 98 | color: #FFFFFF; 99 | text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0; 100 | text-overflow: ellipsis; 101 | text-decoration: none; 102 | white-space: nowrap; 103 | background: none; 104 | } 105 | 106 | .blueButton { 107 | border-width: 0 5px; 108 | } 109 | 110 | .leftButton { 111 | left: 6px; 112 | right: auto; 113 | } 114 | 115 | #backButton { 116 | display: none; 117 | left: 6px; 118 | right: auto; 119 | padding: 0; 120 | max-width: 55px; 121 | border-width: 0 8px 0 14px; 122 | } 123 | 124 | .whiteButton, 125 | .redButton, 126 | .grayButton { 127 | display: block; 128 | border-width: 0 12px; 129 | padding: 10px; 130 | text-align: center; 131 | font-size: 20px; 132 | font-weight: bold; 133 | text-decoration: inherit; 134 | color: inherit; 135 | } 136 | 137 | /* TG */ .grayButton[selected], .grayButton:active, 138 | .whiteButton { 139 | text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; 140 | /* TG */ background:transparent !important; 141 | } 142 | 143 | .redButton { 144 | /* TG */ background:transparent !important; 145 | color:#fff; 146 | text-shadow: #7a0001 0 -1px 0; 147 | } 148 | 149 | /* TG */ .whiteButton[selected], .whiteButton:active, 150 | .grayButton { 151 | color: #FFFFFF; 152 | /* TG */ background:transparent !important; 153 | } 154 | 155 | /************************************************************************************************/ 156 | 157 | body > ul > li { 158 | position: relative; 159 | margin: 0; 160 | border-bottom: 1px solid #E0E0E0; 161 | padding: 8px 0 8px 10px; 162 | font-size: 20px; 163 | font-weight: bold; 164 | list-style: none; 165 | } 166 | 167 | body > ul > li.group { 168 | position: relative; 169 | top: -1px; 170 | margin-bottom: -2px; 171 | border-top: 1px solid #7d7d7d; 172 | border-bottom: 1px solid #999999; 173 | padding: 1px 10px; 174 | font-size: 17px; 175 | font-weight: bold; 176 | text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0; 177 | color: #FFFFFF; 178 | } 179 | 180 | body > ul > li.group:first-child { 181 | top: 0; 182 | border-top: none; 183 | } 184 | 185 | body > ul > li > a { 186 | display: block; 187 | margin: -8px 0 -8px -10px; 188 | padding: 8px 32px 8px 10px; 189 | text-decoration: none; 190 | color: inherit; 191 | } 192 | 193 | a[target="_replace"] { 194 | box-sizing: border-box; 195 | -webkit-box-sizing: border-box; 196 | -moz-box-sizing: border-box; 197 | padding-top: 25px; 198 | padding-bottom: 25px; 199 | font-size: 18px; 200 | color: cornflowerblue; 201 | background-color: #FFFFFF; 202 | background-image: none; 203 | } 204 | 205 | /************************************************************************************************/ 206 | 207 | body > .dialog { 208 | top: 0; 209 | width: 100%; 210 | min-height: 417px; 211 | z-index: 2; 212 | background: rgba(0, 0, 0, 0.8); 213 | padding: 0; 214 | text-align: right; 215 | } 216 | 217 | .dialog > fieldset { 218 | box-sizing: border-box; 219 | -webkit-box-sizing: border-box; 220 | -moz-box-sizing: border-box; 221 | width: 100%; 222 | margin: 0; 223 | border: none; 224 | border-top: 1px solid #6d84a2; 225 | padding: 10px 6px; 226 | } 227 | 228 | .dialog > fieldset > h1 { 229 | margin: 0 10px 0 10px; 230 | padding: 0; 231 | font-size: 20px; 232 | font-weight: bold; 233 | color: #FFFFFF; 234 | text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; 235 | text-align: center; 236 | } 237 | 238 | .dialog > fieldset > label { 239 | position: absolute; 240 | margin: 16px 0 0 6px; 241 | font-size: 14px; 242 | color: #999999; 243 | width: 5em; 244 | text-align: left; 245 | } 246 | 247 | input:not([type|=submit]):not([type|=radio]):not([type|=checkbox]) { 248 | box-sizing: border-box; 249 | -webkit-box-sizing: border-box; 250 | -moz-box-sizing: border-box; 251 | width: 100%; 252 | margin: 8px 0 0 0; 253 | padding: 6px 6px 6px 5em; 254 | font-size: 14px; 255 | font-weight: normal; 256 | } 257 | 258 | /************************************************************************************************/ 259 | 260 | body > .panel { 261 | box-sizing: border-box; 262 | -webkit-box-sizing: border-box; 263 | -moz-box-sizing: border-box; 264 | padding: 10px; 265 | } 266 | 267 | .panel > ul, 268 | .panel > fieldset { 269 | position: relative; 270 | margin: 0 0 20px 0; 271 | padding: 0; 272 | background: #FFFFFF; 273 | -webkit-border-radius: 10px; 274 | -moz-border-radius: 10px; 275 | border: 1px solid #999999; 276 | font-size: 16px; 277 | } 278 | 279 | .panel > ul li, 280 | .row { 281 | position: relative; 282 | min-height: 42px; 283 | border-bottom: 1px solid #999999; 284 | -webkit-border-radius: 0; 285 | -moz-border-radius: 0; 286 | } 287 | 288 | .panel > ul li:last-child, 289 | fieldset > .row:last-child { 290 | border-bottom: none !important; 291 | } 292 | 293 | .row > input:not([type|=radio]):not([type|=checkbox]) { 294 | box-sizing: border-box; 295 | -webkit-box-sizing: border-box; 296 | -moz-box-sizing: border-box; 297 | margin: 0; 298 | border: none; 299 | padding: 12px 10px 0 110px; 300 | height: 42px; 301 | background: none; 302 | } 303 | 304 | .row > input[type|=radio], .row > input[type|=checkbox], 305 | .row > select { 306 | float: right; 307 | margin: 7px 7px 0 0; 308 | height: 25px; 309 | width: 25px; 310 | } 311 | 312 | .panel input[type|=submit] { 313 | width: 100% 314 | } 315 | 316 | .row > select { 317 | width: auto; 318 | margin: 9px 7px 0 0; 319 | } 320 | 321 | .row > label { 322 | position: absolute; 323 | top: 0; 324 | left: 0; 325 | margin: 0 0 0 14px; 326 | line-height: 42px; 327 | font-weight: bold; 328 | } 329 | 330 | .row > span { 331 | position: absolute; 332 | padding: 12px 10px 0 110px; 333 | margin: 0; 334 | } 335 | 336 | .row > .toggle { 337 | position: absolute; 338 | top: 6px; 339 | right: 6px; 340 | width: 100px; 341 | height: 28px; 342 | } 343 | 344 | .toggle { 345 | border: 1px solid #888888; 346 | -webkit-border-radius: 6px; 347 | -moz-border-radius: 6px; 348 | font-size: 19px; 349 | font-weight: bold; 350 | line-height: 30px; 351 | } 352 | 353 | .toggle[toggled="true"] { 354 | border: 1px solid #143fae; 355 | } 356 | 357 | .toggleOn { 358 | display: none; 359 | position: absolute; 360 | width: 60px; 361 | text-align: center; 362 | left: 0; 363 | top: 0; 364 | color: #FFFFFF; 365 | text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; 366 | } 367 | 368 | .toggleOff { 369 | position: absolute; 370 | width: 60px; 371 | text-align: center; 372 | right: 0; 373 | top: 0; 374 | color: #666666; 375 | } 376 | 377 | .toggle[toggled="true"] > .toggleOn { 378 | display: block; 379 | } 380 | 381 | .toggle[toggled="true"] > .toggleOff { 382 | display: none; 383 | } 384 | 385 | .thumb { 386 | position: absolute; 387 | top: -1px; 388 | left: -1px; 389 | width: 40px; 390 | height: 28px; 391 | border: 1px solid #888888; 392 | -webkit-border-radius: 6px; 393 | -moz-border-radius: 6px; 394 | } 395 | 396 | .toggle[toggled="true"] > .thumb { 397 | left: auto; 398 | right: -1px; 399 | } 400 | 401 | .panel > h2 { 402 | margin: 0 0 8px 14px; 403 | font-size: inherit; 404 | font-weight: bold; 405 | color: #4d4d70; 406 | text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0; 407 | } 408 | 409 | /************************************************************************************************/ 410 | 411 | #preloader { 412 | display: none; 413 | } 414 | -------------------------------------------------------------------------------- /mobile/iui/iuix.css: -------------------------------------------------------------------------------- 1 | body{margin:0;font-family:Helvetica;background:#FFF;color:#000;overflow-x:hidden;-webkit-user-select:none;-webkit-text-size-adjust:none;}body>*:not(.toolbar){display:none;position:absolute;margin:0;padding:0;left:0;top:45px;width:100%;height:auto;min-height:415px;-webkit-transition-duration:300ms;-webkit-transition-property:-webkit-transform;-webkit-transform:translateX(0%);}body.landscape>*:not(.toolbar){height:auto;min-height:268px;}body>*[selected="true"]{display:block;}li>a[selected],li>a:active{background-color:#194fdb!important;background-repeat:no-repeat,repeat-x!important;background-position:right center,left top!important;color:#FFF!important;}body>.toolbar{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border-bottom:1px solid #2d3642;border-top:1px solid #6d84a2;padding:0 10px 10px 10px;height:45px;}.toolbar>h1{position:absolute;overflow:hidden;left:50%;margin:1px 0 0 -75px;padding-top:10px;height:45px;font-size:20px;width:150px;font-weight:bold;text-shadow:rgba(0,0,0,0.4) 0 -1px 0;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:#FFF;}body.landscape>.toolbar>h1{margin-left:-125px;width:250px;}.button{position:absolute;overflow:hidden;top:8px;right:6px;margin:0;border-width:0 5px;padding:0 3px;width:auto;height:30px;line-height:30px;font-family:inherit;font-size:12px;font-weight:bold;color:#FFF;text-shadow:rgba(0,0,0,0.6) 0 -1px 0;text-overflow:ellipsis;text-decoration:none;white-space:nowrap;background:none;}.blueButton{border-width:0 5px;}.leftButton{left:6px;right:auto;}#backButton{display:none;left:6px;right:auto;padding:0;max-width:55px;border-width:0 8px 0 14px;}.whiteButton,.redButton,.grayButton{display:block;border-width:0 12px;padding:10px;text-align:center;font-size:20px;font-weight:bold;text-decoration:inherit;color:inherit;}.grayButton[selected],.grayButton:active,.whiteButton{text-shadow:rgba(255,255,255,0.7) 0 1px 0;background:transparent!important;}.redButton{background:transparent!important;color:#fff;text-shadow:#7a0001 0 -1px 0;}.whiteButton[selected],.whiteButton:active,.grayButton{color:#FFF;background:transparent!important;}body>ul>li{position:relative;margin:0;border-bottom:1px solid #E0E0E0;padding:8px 0 8px 10px;font-size:20px;font-weight:bold;list-style:none;}body>ul>li.group{position:relative;top:-1px;margin-bottom:-2px;border-top:1px solid #7d7d7d;border-bottom:1px solid #999;padding:1px 10px;font-size:17px;font-weight:bold;text-shadow:rgba(0,0,0,0.4) 0 1px 0;color:#FFF;}body>ul>li.group:first-child{top:0;border-top:none;}body>ul>li>a{display:block;margin:-8px 0 -8px -10px;padding:8px 32px 8px 10px;text-decoration:none;color:inherit;}a[target="_replace"]{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding-top:25px;padding-bottom:25px;font-size:18px;color:cornflowerblue;background-color:#FFF;background-image:none;}body>.dialog{top:0;width:100%;min-height:417px;z-index:2;background:rgba(0,0,0,0.8);padding:0;text-align:right;}.dialog>fieldset{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:100%;margin:0;border:none;border-top:1px solid #6d84a2;padding:10px 6px;}.dialog>fieldset>h1{margin:0 10px 0 10px;padding:0;font-size:20px;font-weight:bold;color:#FFF;text-shadow:rgba(0,0,0,0.4) 0 -1px 0;text-align:center;}.dialog>fieldset>label{position:absolute;margin:16px 0 0 6px;font-size:14px;color:#999;width:5em;text-align:left;}input:not([type|=submit]):not([type|=radio]):not([type|=checkbox]){box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:100%;margin:8px 0 0 0;padding:6px 6px 6px 5em;font-size:14px;font-weight:normal;}body>.panel{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:10px;}.panel>ul,.panel>fieldset{position:relative;margin:0 0 20px 0;padding:0;background:#FFF;-webkit-border-radius:10px;-moz-border-radius:10px;border:1px solid #999;font-size:16px;}.panel>ul li,.row{position:relative;min-height:42px;border-bottom:1px solid #999;-webkit-border-radius:0;-moz-border-radius:0;}.panel>ul li:last-child,fieldset>.row:last-child{border-bottom:none!important;}.row>input:not([type|=radio]):not([type|=checkbox]){box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;border:none;padding:12px 10px 0 110px;height:42px;background:none;}.row>input[type|=radio],.row>input[type|=checkbox],.row>select{float:right;margin:7px 7px 0 0;height:25px;width:25px;}.panel input[type|=submit]{width:100%;}.row>select{width:auto;margin:9px 7px 0 0;}.row>label{position:absolute;top:0;left:0;margin:0 0 0 14px;line-height:42px;font-weight:bold;}.row>span{position:absolute;padding:12px 10px 0 110px;margin:0;}.row>.toggle{position:absolute;top:6px;right:6px;width:100px;height:28px;}.toggle{border:1px solid #888;-webkit-border-radius:6px;-moz-border-radius:6px;font-size:19px;font-weight:bold;line-height:30px;}.toggle[toggled="true"]{border:1px solid #143fae;}.toggleOn{display:none;position:absolute;width:60px;text-align:center;left:0;top:0;color:#FFF;text-shadow:rgba(0,0,0,0.4) 0 -1px 0;}.toggleOff{position:absolute;width:60px;text-align:center;right:0;top:0;color:#666;}.toggle[toggled="true"]>.toggleOn{display:block;}.toggle[toggled="true"]>.toggleOff{display:none;}.thumb{position:absolute;top:-1px;left:-1px;width:40px;height:28px;border:1px solid #888;-webkit-border-radius:6px;-moz-border-radius:6px;}.toggle[toggled="true"]>.thumb{left:auto;right:-1px;}.panel>h2{margin:0 0 8px 14px;font-size:inherit;font-weight:bold;color:#4d4d70;text-shadow:rgba(255,255,255,0.75) 2px 2px 0;}#preloader{display:none;} -------------------------------------------------------------------------------- /mobile/iui/js/iui-event-log.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2007-9, iUI Project Members 3 | See LICENSE.txt for licensing terms 4 | */ 5 | 6 | // requires querySelectorAll, therefore iPhone OS 2.x or later 7 | // or Safari 3.x or later 8 | 9 | (function() { 10 | 11 | var eventNames = ['blur', 'focus', 'load', 'unload', 'beforetransition', 'aftertransition' ]; 12 | 13 | // Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method (Issue #204?) 14 | // We need to register before iui's main onload handler so we can get the 'load' and 'focus' events 15 | // for the default 'page' (view). 16 | // 17 | // The "better method" may be related to http://code.google.com/p/iui/issues/detail?id=204 18 | // but there may need to be more than one hook for iUI loading... 19 | // 20 | addEventListener("DOMContentLoaded", function(event) 21 | { 22 | document.body.addEventListener('beforeinsert', logEvent, false); 23 | document.body.addEventListener('afterinsert', afterInsert, false); 24 | // This will register event handlers on all initial nodes 25 | // We'll also need to register handlers on inserted (via ajax) nodes 26 | // To do that we'll need to use the afterInsert event 27 | var nodes = iui.getAllViews(); 28 | for (var i = 0; i < nodes.length ; i++) 29 | { 30 | registerAllEvents(nodes[i]); 31 | } 32 | }, false); 33 | 34 | function registerAllEvents(node) 35 | { 36 | for (var i = 0; i < eventNames.length ; i++) 37 | { 38 | console.log("addlistener: " + eventNames[i] + " on #" + node.id + " = " + node); 39 | node.addEventListener(eventNames[i], logEvent, false); 40 | } 41 | } 42 | 43 | function afterInsert(e) 44 | { 45 | logEvent(e); 46 | registerAllEvents(e.insertedNode); // Set event handlers on newly added node 47 | } 48 | 49 | function logEvent(e) 50 | { 51 | console.log("logEvent type: " + e.type + " target " + e.target.tagName + "#" + e.target.id); 52 | if (e.type == "beforetransition" || e.type == "aftertransition") 53 | { 54 | console.log(" out trans = " + e.out); 55 | } 56 | else if (e.type == "beforeinsert") { 57 | console.log(" fragment = " + e.fragment); 58 | } 59 | else if (e.type == "afterinsert") { 60 | console.log(" node = " + e.insertedNode); 61 | } 62 | } 63 | 64 | 65 | })(); 66 | -------------------------------------------------------------------------------- /mobile/iui/js/iui-theme-switcher.js: -------------------------------------------------------------------------------- 1 | /* 2 | iUI Theme Switcher 3 | Copyright (c) 2007-2012, iUI Project Members 4 | See LICENSE.txt for licensing terms 5 | */ 6 | 7 | iui.ts = { 8 | basePath: "/iui/", /* Path to directory containing iui.css */ 9 | // theme map id->{namepath (path is relative to iui.css) 10 | themes: { "default": {name:"Default", path:"t/default/default-theme.css"}, 11 | defaultgrad: {name:"Default w/Gradients", path:"t/defaultgrad/defaultgrad-theme.css"}, 12 | defaulthd: {name:"Default w/HD support", path:"ext-sandbox/t/defaulthd/defaulthd-theme.css"}, 13 | ipdc: {name:"iOSDevCamp", path:"t/ipdc/ipdc-theme.css"}, 14 | android: {name:"Android", path:"ext-sandbox/t/android/android-theme.css"}, 15 | webos: {name:"WebOS", path:"ext-sandbox/t/webos/webos-theme.css"} 16 | }, 17 | 18 | themeSelect: function(select) 19 | { 20 | var newThemeID = select.options[select.selectedIndex].value; 21 | iui.ts.setTheme(newThemeID); 22 | return false; 23 | }, 24 | 25 | setTheme: function(themeID) 26 | { 27 | var linkEl = document.getElementById("iui-theme"); 28 | linkEl.setAttribute('href', this.basePath + iui.ts.themes[themeID].path); 29 | } 30 | }; -------------------------------------------------------------------------------- /mobile/iui/t/ThemeImageCatalog.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | iUI Theme Image Catalog 7 | 8 | 62 | 63 | 64 |

65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 87 | 88 | 89 | 90 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 115 | 116 | 117 | 118 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 173 | 174 | 175 | 176 | 177 | 178 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 211 | 212 | 213 | 214 | 218 | 219 |
FilenameDescriptionNotesStatusExample
toolbar.pngBackground image used for top "toolbar"
    85 |
  • 1-pixel wide and horizontally repeated
    • 86 |
???
title-img.pngToolbar w/Image
???
backButtonBack.pngBackground image for back button
    113 |
  • 1-pixel wide and horizontally repeated
    • 114 |
???
back-img.png"Logo" image for back button???
backButtonBrdr.pngBack button border???
- multiple -Back Button Complete (text)
Back
- multiple -Back Button Complete (image)
???
pinstripes.png"Panel" background (grey & white pinstripes in default 179 | theme)
selection.pngBackground for selected (list) items???
loading.gifspinner used when loading new page elements via Ajax
    207 |
  • The only .gif file -- since there is no animated .png
    • 208 | 209 |
  • Displayed on background image of selection.png
    • 210 |
???
220 | 221 | -------------------------------------------------------------------------------- /mobile/iui/t/default/back-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/back-img.png -------------------------------------------------------------------------------- /mobile/iui/t/default/backButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/backButton.png -------------------------------------------------------------------------------- /mobile/iui/t/default/backButtonBack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/backButtonBack.png -------------------------------------------------------------------------------- /mobile/iui/t/default/backButtonBrdr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/backButtonBrdr.png -------------------------------------------------------------------------------- /mobile/iui/t/default/backButtonSel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/backButtonSel.png -------------------------------------------------------------------------------- /mobile/iui/t/default/blueButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/blueButton.png -------------------------------------------------------------------------------- /mobile/iui/t/default/cancel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/cancel.png -------------------------------------------------------------------------------- /mobile/iui/t/default/default-theme.css: -------------------------------------------------------------------------------- 1 | /* default-theme.css (c) 2007-2012 by iUI Project Members, see LICENSE.txt for license */ 2 | body { 3 | color: #000000; 4 | } 5 | 6 | li > a[selected], li > a:active { 7 | background-image: url(listArrowSel.png), url(selection.png) !important; 8 | } 9 | 10 | li > a[selected="progress"] { 11 | background-image: url(loading.gif), url(selection.png) !important; 12 | } 13 | 14 | /************************************************************************************************/ 15 | 16 | body > .toolbar { 17 | background: url(toolbar.png) #6d84a2 repeat-x; 18 | } 19 | 20 | .button { 21 | -webkit-border-image: url(toolButton.png) 0 5 0 5; 22 | -moz-border-image: url(toolButton.png) 0 5 0 5; 23 | } 24 | 25 | .blueButton { 26 | -webkit-border-image: url(blueButton.png) 0 5 0 5; 27 | -moz-border-image: url(blueButton.png) 0 5 0 5; 28 | } 29 | 30 | #backButton { 31 | -webkit-border-image: url(backButtonBrdr.png) 0 8 0 14; 32 | -moz-border-image: url(backButtonBrdr.png) 0 8 0 14; 33 | background: url(backButtonBack.png) repeat-x; 34 | } 35 | 36 | #backButton:active { 37 | -webkit-border-image: url(backButtonSel.png) 0 8 0 14; 38 | -moz-border-image: url(backButtonSel.png) 0 8 0 14; 39 | background: url(backButtonSel.png) repeat-x; 40 | } 41 | 42 | .whiteButton { 43 | -webkit-border-image: url(whiteButton.png) 0 12 0 12; 44 | -moz-border-image: url(whiteButton.png) 0 12 0 12; 45 | text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; 46 | } 47 | 48 | .redButton { 49 | -webkit-border-image: url(redButton.png) 0 12 0 12; 50 | -moz-border-image: url(redButton.png) 0 12 0 12; 51 | } 52 | 53 | .grayButton { 54 | -webkit-border-image: url(grayButton.png) 0 12 0 12; 55 | -moz-border-image: url(grayButton.png) 0 12 0 12; 56 | color: #FFFFFF; 57 | } 58 | 59 | /************************************************************************************************/ 60 | 61 | body > ul > li.group { 62 | opacity:0.7; 63 | background: url(listGroup.png) repeat-x; 64 | } 65 | 66 | body > ul > li > a { 67 | background: url(listArrow.png) no-repeat right center; 68 | } 69 | 70 | /************************************************************************************************/ 71 | 72 | .dialog > fieldset { 73 | background: url(toolbar.png) #7388a5 repeat-x; 74 | } 75 | 76 | /************************************************************************************************/ 77 | 78 | body > .panel { 79 | background: #c5ccd4 url(pinstripes.png); 80 | } 81 | 82 | .toggle { 83 | border: 1px solid #888888; 84 | background: #FFFFFF url(toggle.png) repeat-x; 85 | } 86 | 87 | .toggle[toggled="true"] { 88 | background: #194fdb url(toggleOn.png) repeat-x; 89 | } 90 | 91 | .thumb { 92 | background: #ffffff url(thumb.png) repeat-x; 93 | } 94 | 95 | /************************************************************************************************/ 96 | #preloader { 97 | display: none; 98 | background-image: url(loading.gif), url(backButtonSel.png), url(selection.png), 99 | url(blueButton.png), url(listArrowSel.png), url(listArrowSel.png), url(listGroup.png); 100 | } 101 | 102 | .toolbar > h1.titleImg { 103 | background: url(title-img.png) no-repeat top center; 104 | color: rgba(0,0,0,0); 105 | } 106 | 107 | .backButtonImg { 108 | width: 50px; 109 | background: url(back-img.png) no-repeat center left, 110 | url(backButtonBack.png) repeat-x top left !important; 111 | color: rgba(0,0,0,0); 112 | } 113 | -------------------------------------------------------------------------------- /mobile/iui/t/default/grayButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/grayButton.png -------------------------------------------------------------------------------- /mobile/iui/t/default/listArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/listArrow.png -------------------------------------------------------------------------------- /mobile/iui/t/default/listArrowSel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/listArrowSel.png -------------------------------------------------------------------------------- /mobile/iui/t/default/listGroup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/listGroup.png -------------------------------------------------------------------------------- /mobile/iui/t/default/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/loading.gif -------------------------------------------------------------------------------- /mobile/iui/t/default/pinstripes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/pinstripes.png -------------------------------------------------------------------------------- /mobile/iui/t/default/redButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/redButton.png -------------------------------------------------------------------------------- /mobile/iui/t/default/selection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/selection.png -------------------------------------------------------------------------------- /mobile/iui/t/default/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/thumb.png -------------------------------------------------------------------------------- /mobile/iui/t/default/title-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/title-img.png -------------------------------------------------------------------------------- /mobile/iui/t/default/toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/toggle.png -------------------------------------------------------------------------------- /mobile/iui/t/default/toggleOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/toggleOn.png -------------------------------------------------------------------------------- /mobile/iui/t/default/toolButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/toolButton.png -------------------------------------------------------------------------------- /mobile/iui/t/default/toolbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/toolbar.png -------------------------------------------------------------------------------- /mobile/iui/t/default/whiteButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/default/whiteButton.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/Logo_DevCamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/Logo_DevCamp.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/backButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/backButton.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/beige.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/beige.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/blueButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/blueButton.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/ipdc-theme.css: -------------------------------------------------------------------------------- 1 | /* ipdc-theme.css (c) 2007-2012 by iUI Project Members, see LICENSE.txt for license */ 2 | body { 3 | color: #40658A; 4 | background: url(Logo_DevCamp.png); 5 | background-position: 100% 60px; 6 | background-repeat: no-repeat; 7 | } 8 | 9 | li > a[selected], li > a:active { 10 | background-image: url(../default/listArrowSel.png), url(../default/selection.png) !important; 11 | } 12 | 13 | li > a[selected="progress"] { 14 | background-image: url(../default/loading.gif), url(../default/selection.png) !important; 15 | } 16 | 17 | /************************************************************************************************/ 18 | 19 | body > .toolbar { 20 | border-top: 1px solid #585858; 21 | background: url(toolbar.png) #6d84a2 repeat-x; 22 | } 23 | 24 | .button { 25 | -webkit-border-image: url(toolButton.png) 0 5 0 5; 26 | -moz-border-image: url(toolButton.png) 0 5 0 5; 27 | } 28 | 29 | .blueButton { 30 | -webkit-border-image: url(blueButton.png) 0 5 0 5; 31 | -moz-border-image: url(blueButton.png) 0 5 0 5; 32 | } 33 | 34 | #backButton { 35 | -webkit-border-image: url(backButton.png) 0 8 0 14; 36 | -moz-border-image: url(backButton.png) 0 8 0 14; 37 | } 38 | 39 | 40 | .whiteButton { 41 | -webkit-border-image: url(../default/whiteButton.png) 0 12 0 12; 42 | -moz-border-image: url(../default/whiteButton.png) 0 12 0 12; 43 | text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; 44 | } 45 | 46 | .redButton { 47 | -webkit-border-image: url(redButton.png) 0 12 0 12; 48 | -moz-border-image: url(redButton.png) 0 12 0 12; 49 | } 50 | 51 | .grayButton { 52 | -webkit-border-image: url(../default/grayButton.png) 0 12 0 12; 53 | -moz-border-image: url(../default/grayButton.png) 0 12 0 12; 54 | color: #FFFFFF; 55 | } 56 | 57 | /************************************************************************************************/ 58 | 59 | body > ul > li.group { 60 | opacity:0.7; 61 | background: url(listGroup.png) repeat-x; 62 | } 63 | 64 | body > ul > li > a { 65 | background: url(../default/listArrow.png) no-repeat right center; 66 | } 67 | 68 | /************************************************************************************************/ 69 | 70 | .dialog > fieldset { 71 | background: #585858 url(toolbar.png) repeat-x; 72 | } 73 | .dialog > fieldset h1 { 74 | height: 32px; 75 | } 76 | .dialog > fieldset > label { 77 | margin-top: 17px; 78 | } 79 | 80 | /************************************************************************************************/ 81 | 82 | body > .panel { 83 | background: #c5ccd4 url(pinstripes.png); 84 | } 85 | 86 | .toggle { 87 | border: 1px solid #888888; 88 | background: #FFFFFF url(../default/toggle.png) repeat-x; 89 | } 90 | 91 | .toggle[toggled="true"] { 92 | background: #194fdb url(toggleOn.png) repeat-x; 93 | } 94 | 95 | .thumb { 96 | background: #ffffff url(../default/thumb.png) repeat-x; 97 | } 98 | 99 | /************************************************************************************************/ 100 | #preloader { 101 | background-image: url(../default/loading.gif), url(../default/selection.png), 102 | url(blueButton.png), url(../default/listArrowSel.png), url(listGroup.png); 103 | } 104 | -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/listGroup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/listGroup.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/pinstripes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/pinstripes.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/redButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/redButton.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/toggleOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/toggleOn.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/toolButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/toolButton.png -------------------------------------------------------------------------------- /mobile/iui/t/ipdc/toolbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/mobile/iui/t/ipdc/toolbar.png -------------------------------------------------------------------------------- /mobile/mag.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | Tvh. EPG 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /mobile/mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tvheadend 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Tvheadend

21 | Reload 22 |
23 | 24 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /mobile/tvh.css: -------------------------------------------------------------------------------- 1 | li.noBgImage { 2 | background-image: url(images/pb_trans.png); 3 | } 4 | 5 | div.row>input[type="text"] { 6 | padding-bottom: 10px !important; 7 | } 8 | 9 | span.episode { 10 | font-style: italic; 11 | padding-left:0.5em; 12 | color:#999999; 13 | } 14 | 15 | img.pb.left { 16 | background: url(images/pb_left.png) left center no-repeat; 17 | margin-left: 5px; 18 | } 19 | 20 | img.pb.right { 21 | background: url(images/pb_right.png) right center no-repeat; 22 | margin-right: 5px; 23 | } 24 | 25 | img.pb.middle { 26 | background: url(images/pb_middle.png) left center no-repeat; 27 | } 28 | 29 | img.pb { 30 | margin: 4px 0px; 31 | padding: 0px; 32 | vertical-align: middle; 33 | } 34 | 35 | div.current { 36 | padding-left: 75px; 37 | } 38 | 39 | input#searchText { 40 | padding: 6px; 41 | width: 99%; 42 | margin-top: 2px; 43 | } 44 | 45 | span.chno { 46 | border: 1px solid #385487; 47 | background-color:white; 48 | color: #385487; 49 | font-size: 12px; 50 | vertical-align: middle; 51 | padding: 1px 5px; 52 | margin-right: 6px; 53 | } 54 | 55 | .round { 56 | -moz-border-radius: 20px; /* Firefox */ 57 | -webkit-border-radius: 20px; /* Safari, Chrome */ 58 | -khtml-border-radius: 20px; /* Konqueror */ 59 | border-radius: 20px; /* CSS3 */ 60 | } 61 | 62 | body>ul>li>a>img { 63 | padding: 0px; 64 | margin: 0px 5px 0px 0px; 65 | } 66 | 67 | body>ul>li.group { 68 | background-color: #385487; 69 | } 70 | 71 | span.small, div.small { 72 | font-size: 12px; 73 | font-weight: normal; 74 | } 75 | 76 | div.padleft { 77 | padding-left: 22px; 78 | } 79 | 80 | p.description { /*text-align:justify;*/ 81 | 82 | } 83 | 84 | a.more { 85 | text-align: center; 86 | color: #999999; 87 | background: transparent; 88 | } 89 | 90 | a.live { 91 | text-align:center; 92 | font-style:italic; 93 | background: transparent; 94 | } 95 | 96 | a.inactive { 97 | color: #999999; 98 | } 99 | 100 | body>ul.selector>li>a { 101 | background: transparent; 102 | } 103 | 104 | body>ul.selector>li.selected>a { 105 | background: url("images/tick.png") no-repeat scroll right center transparent; 106 | color: #385487; 107 | } 108 | 109 | .panel>h1 { 110 | color: #4D4D70; 111 | font-size: 22px; 112 | font-weight: bold; 113 | margin: 0 0 4px 4px; 114 | text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.75); 115 | } 116 | 117 | img.icon.black { 118 | background-color:black; 119 | } 120 | -------------------------------------------------------------------------------- /mobile/tvh_common.js: -------------------------------------------------------------------------------- 1 | var days = new Array(l('sunday.short'), l('monday.short'), l('tuesday.short'), l('wednesday.short'), l('thursday.short'), l('friday.short'), l('saturday.short'), l('sunday.short') ); 2 | var longdays = new Array(l('sunday'), l('monday'), l('tuesday'), l('wednesday'), l('thursday'), l('friday'), l('saturday'), l('sunday') ); 3 | var tmdbApiKey = ''; 4 | 5 | /** 6 | * %ti title 7 | * %su subtitle 8 | * %ds_su dash with subtitle 9 | * %ds dash 10 | * %ep episode 11 | * %ds_ep dash with episode 12 | * %st start time 13 | * %sdt start date and time 14 | * %et end time 15 | * %edt end date and time 16 | * %pb progress bar 17 | * %du duration 18 | * %ch channel 19 | * %pr priority 20 | * %br break/newline 21 | */ 22 | var layouts = 23 | {'polini': 24 | { 25 | 'current': '%st%pb%et%br%ti%ds_ep%br%su', 26 | 'epg': '%st %ti
%su
', 27 | 'search': '%ti%ds_ep
%st%ds%ch%ds_su
', 28 | 'dvr': '%ti%ds_ep
%st (%du)%ds_su%ds%pr%ch
', 29 | }, 30 | 'gborri': 31 | { 32 | 'current': '%st%pb%et%br%ti%ds_su%br%ep', 33 | 'epg': '%ti%ds_su
%st%ds_ep
', 34 | 'search': '%ti%ds_su
%st%ds%ch%ds_ep
', 35 | 'dvr': '%ti%ds_su
%st (%du)%ds_ep%ds%pr%ch
', 36 | } 37 | }; 38 | 39 | var layout = layouts['gborri']; 40 | 41 | function doPost(path, callback, params) { 42 | doPostWithParam(path, callback, params, null); 43 | } 44 | 45 | function doPostWithParam(path, callback, params, ownParam) { 46 | var http = new XMLHttpRequest(); 47 | http.open("POST", "../../"+path, true); 48 | http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 49 | http.setRequestHeader("Content-length", params.length); 50 | http.setRequestHeader("Connection", "close"); 51 | http.ownParam = ownParam; 52 | 53 | http.onreadystatechange = function() { 54 | if(http.readyState == 4 && http.status == 200) { 55 | var response = eval("[" + http.responseText + "]"); 56 | response[0].param = http.ownParam; 57 | callback(response[0]); 58 | } 59 | }; 60 | 61 | http.send(params); 62 | } 63 | 64 | function nvl(val) { 65 | return val != undefined ? val : ''; 66 | } 67 | 68 | function getDuration(seconds) { 69 | var minutes = seconds/60; 70 | var m = Math.round(minutes % 60); 71 | var h = Math.round((minutes-m) / 60); 72 | var mt = (m < 10 ? '0' : '') + m; 73 | return h + ':' + mt; 74 | } 75 | 76 | function l(key) { 77 | var fallback = 'en'; 78 | var lang = navigator.language != undefined ? navigator.language.substring(0,2) : fallback; 79 | if (i18nstrings[lang] != undefined && i18nstrings[lang][key] != undefined) 80 | return i18nstrings[lang][key]; 81 | else if (i18nstrings[fallback][key] != undefined) 82 | return i18nstrings[fallback][key]; 83 | else 84 | return key; 85 | } 86 | 87 | function getDateTimeFromTimestamp(timestamp, showDay) { 88 | var date = new Date(timestamp*1000); 89 | return getDate(date, showDay)+' '+getTime(date); 90 | } 91 | 92 | function getDateFromTimestamp(timestamp, showDay) { 93 | var date = new Date(timestamp*1000); 94 | return getDate(date, showDay); 95 | } 96 | 97 | function getTimeFromTimestamp(timestamp) { 98 | var date = new Date(timestamp*1000); 99 | return getTime(date); 100 | } 101 | 102 | function z(s){s=''+s;return s.length>1?s:'0'+s;} 103 | 104 | function getDate(d, showDay) 105 | { 106 | var day = days[d.getDay()]; 107 | var y=d.getFullYear(),m=d.getMonth()+1,dd=d.getDate(); 108 | f=l('dateFormat'); 109 | f=f.replace(/yyyy/,y);f=f.replace(/yy/,String(y).substr(2)); 110 | f=f.replace(/MM/,z(m));f=f.replace(/M/,m); 111 | f=f.replace(/dd/,z(dd));f=f.replace(/d/,dd); 112 | return (showDay?day+' ':'')+f; 113 | } 114 | 115 | function getTime(d) 116 | { 117 | return z(d.getHours())+":"+z(d.getMinutes()); 118 | } 119 | 120 | function append(html) { 121 | document.getElementById('last').outerHTML = html + document.getElementById('last').outerHTML; 122 | } 123 | 124 | function loadStandardTable(table, callback) { 125 | doPost("tablemgr", callback, "op=get&table="+table); 126 | } 127 | 128 | function doGet(path, callback) { 129 | var http = new XMLHttpRequest(); 130 | http.open("GET", "../../"+path, true); 131 | http.path = path; 132 | 133 | http.onreadystatechange = function() { 134 | if(http.readyState == 4 && http.status == 200) { 135 | var response = eval("[" + http.responseText + "]"); 136 | response[0].path = http.path; 137 | callback(response[0]); 138 | } 139 | }; 140 | 141 | http.send(null); 142 | } 143 | 144 | function image(url, align, size, black) { 145 | var s = size != undefined ? size : 35; 146 | var a = align != undefined ? align : 'top'; 147 | var b = (black != undefined && black == true) ? ' style="background-color:black;"' : ''; 148 | if (url) 149 | return ''; 150 | else 151 | return ''; 152 | } 153 | 154 | function icon(path,align) { 155 | var alignt = align != undefined ? ' align="'+align+'"' : ''; 156 | if (path) 157 | return ''; 158 | else 159 | return ''; 160 | } 161 | -------------------------------------------------------------------------------- /mobile/tvh_custom.js: -------------------------------------------------------------------------------- 1 | layout = layouts['gborri']; 2 | tmdbApiKey = ''; 3 | blackLogo = false; 4 | -------------------------------------------------------------------------------- /mobile/tvh_epg.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | } 4 | 5 | div#logos { 6 | position: absolute; 7 | left: 0px; 8 | top: 0px; 9 | background-color: white; 10 | box-shadow: 3px 3px 5px #666; 11 | -webkit-box-shadow: 3px 3px 5px #666; 12 | width: 70px; 13 | z-index: 6; 14 | } 15 | 16 | div.ct_16 { background-color: #e0e0e0!important; } 17 | div.ct_16 div.bgimage{ background:url(images/movies.png) no-repeat right top; } 18 | div.ct_32 { background-color: #EFE8AD!important; } 19 | div.ct_32 div.bgimage { background:url(images/news.png) no-repeat right top; } 20 | div.ct_48 { background-color: #C6B5DE!important; } 21 | div.ct_48 div.bgimage{ background:url(images/show.png) no-repeat right top; } 22 | div.ct_64 { background-color: #FFFF6B!important; } 23 | div.ct_64 div.bgimage { background:url(images/sports.png) no-repeat right top; } 24 | div.ct_80 { background-color: #FFCE9C!important; } 25 | div.ct_80 div.bgimage{ background:url(images/children.png) no-repeat right top; } 26 | div.ct_96 { background-color: #94D639!important; } 27 | div.ct_96 div.bgimage{ background:url(images/music.png) no-repeat right top; } 28 | div.ct_112 { background-color: #F7BDDE!important; } 29 | div.ct_112 div.bgimage { background:url(images/arts.png) no-repeat right top; } 30 | div.ct_128 { background-color: #94D6CE!important; } 31 | div.ct_128 div.bgimage{ background:url(images/social.png) no-repeat right top; } 32 | div.ct_144 { background-color: #BDC6DE!important; } 33 | div.ct_144 div.bgimage{ background:url(images/science.png) no-repeat right top; } 34 | div.ct_160 { background-color: #FFC6A5!important; } 35 | div.ct_160 div.bgimage { background:url(images/hobbies.png) no-repeat right top; } 36 | div.ct_178 { background-color: #A5DE94!important; } 37 | div.ct_178 div.bgimage { background:url(images/special.png) no-repeat right top; } 38 | 39 | div#timeline { 40 | position: absolute; 41 | left: 0px; 42 | top: 0px; 43 | height: 12px; 44 | font-size: 10px; 45 | font-family: Arial; 46 | font-weight: normal; 47 | z-index: 4; 48 | } 49 | 50 | div.channelinfo { 51 | position: absolute; 52 | z-index: 8; 53 | box-shadow: 3px 3px 5px #666; 54 | -webkit-box-shadow: 3px 3px 5px #666; 55 | display: none; 56 | min-width: 300px; 57 | background-color: white; 58 | font-family: Arial; 59 | border-radius: 5px; 60 | color: #666; 61 | border:1px solid #666; 62 | } 63 | 64 | div.channelinfo > div.right > h1 { 65 | font-size: 12pt; 66 | margin-bottom: 5px; 67 | } 68 | 69 | div.channelinfo { 70 | text-shadow: 1px 1px 0px #ccc; 71 | } 72 | 73 | div.channelinfo > div.left { 74 | position: absolute; 75 | left: 0px; 76 | top: 60px; 77 | width:75px; 78 | text-align:center; 79 | } 80 | 81 | div.channelinfo > div.right { 82 | margin-left:80px; 83 | } 84 | 85 | div.channelinfo > a.back { 86 | position: absolute; 87 | left: 10px; 88 | top: 140px; 89 | } 90 | 91 | div.left img.back { 92 | margin-top:30px; 93 | } 94 | 95 | span.chno { 96 | border: 1px solid #385487; 97 | background-color:white; 98 | color: #385487; 99 | font-size: 16px; 100 | font-weight: bold; 101 | vertical-align: middle; 102 | padding: 1px 5px; 103 | margin-right: 6px; 104 | } 105 | 106 | .round { 107 | -moz-border-radius: 20px; /* Firefox */ 108 | -webkit-border-radius: 20px; /* Safari, Chrome */ 109 | -khtml-border-radius: 20px; /* Konqueror */ 110 | border-radius: 20px; /* CSS3 */ 111 | } 112 | 113 | div#timeline > div { 114 | background-color: white; 115 | border: 1px solid #999; 116 | position: absolute; 117 | top: 0px; 118 | height: 12px; 119 | box-shadow: 3px 3px 5px #666; 120 | -webkit-box-shadow: 3px 3px 5px #666; 121 | } 122 | 123 | div#current { 124 | border-left: 1px solid red; 125 | top: 0px; 126 | position: absolute; 127 | left: -1px; 128 | height: 0px; 129 | z-index: 5; 130 | box-shadow: 3px 3px 3px #000; 131 | } 132 | 133 | p.tmdb { 134 | display: none; 135 | margin: 0px; 136 | text-align: center; 137 | padding:5px; 138 | } 139 | 140 | div.box { 141 | position: absolute; 142 | background: #ccc url('images/gradient.png') repeat-y right top; 143 | background-size: 100% auto; 144 | border-radius: 5px; 145 | font-family: Arial; 146 | font-size: 10pt; 147 | z-index: 1; 148 | overflow: hidden; 149 | color: #666; 150 | cursor: pointer; 151 | box-shadow: 1px 1px 1.5px #999; 152 | } 153 | 154 | div.box div { 155 | border-radius: 5px; 156 | } 157 | 158 | div.box.backdrop { 159 | background-size: cover; 160 | background-position: left top; 161 | } 162 | 163 | div.box div.head { 164 | height: 50px; 165 | } 166 | 167 | div.box.big div.head { 168 | height: auto; 169 | } 170 | 171 | div.box h1 { 172 | margin: 0px 2px; 173 | font-size: 12pt; 174 | } 175 | 176 | div.box { 177 | text-shadow: 1px 1px 0px #fff; 178 | } 179 | 180 | div.scheduled h1 { 181 | background: url('../icons/clock.png') no-repeat left top; 182 | padding-left: 18px; 183 | } 184 | 185 | div.recording h1 { 186 | background: url('../icons/rec.png') no-repeat left top; 187 | padding-left: 18px; 188 | } 189 | div.poster { 190 | float:right; 191 | } 192 | div.poster img { 193 | box-shadow:3px 3px 5px #666; 194 | -webkit-box-shadow:3px 3px 5px #666; 195 | margin:2px 10px; 196 | } 197 | 198 | div.box div.add > form.record > input, 199 | div.box div.add > form.record > select, 200 | div.box div.add > form.cancel > input, 201 | div.channelinfo select, 202 | div.channelinfo button 203 | { 204 | min-width: 200px; 205 | } 206 | 207 | div.box.backdrop div.gradient { 208 | background:url(images/white75.png); 209 | } 210 | 211 | div.box div.add > form { 212 | padding: 5px; 213 | } 214 | div.box div.add > p { 215 | padding: 2px; 216 | } 217 | 218 | div.box div.add > p.channel { 219 | font-style: italic; 220 | } 221 | 222 | div.box div.add > form.cancel { 223 | display: none; 224 | text-align: center; 225 | } 226 | 227 | div.box div.add > form.record { 228 | text-align: center; 229 | } 230 | 231 | div.scheduled div.add > form.cancel, 232 | div.recording div.add > form.cancel { 233 | display: block; 234 | } 235 | 236 | div.scheduled div.add > form.record, 237 | div.recording div.add > form.record { 238 | display: none; 239 | } 240 | 241 | div.box h2, 242 | div.channelinfo h2 { 243 | margin: 0px 2px; 244 | font-size: 10pt; 245 | } 246 | 247 | div.box div.add > h3 { 248 | margin: 1px 2px; 249 | font-size: 10pt; 250 | text-align: right; 251 | } 252 | 253 | div.box.big { 254 | height: auto !important; 255 | z-index: 10; 256 | box-shadow: 3px 3px 5px #666; 257 | -webkit-box-shadow: 3px 3px 5px #666; 258 | min-width: 300px; 259 | min-height: 60px; 260 | color: #333; 261 | } 262 | 263 | div.box div.add { 264 | padding-top: 5px; 265 | display: none; 266 | } 267 | 268 | div.box.big div.add { 269 | display: block; 270 | } 271 | 272 | img.channel, 273 | div.channel { 274 | position: absolute; 275 | z-index: 7; 276 | cursor:pointer; 277 | max-height: 50px; 278 | max-width: 70px; 279 | height: auto; 280 | width: auto; 281 | } 282 | 283 | img.channel.black { 284 | background-color:black; 285 | } 286 | 287 | div.channel { 288 | font-family: Arial; 289 | text-shadow: 1px 1px 0px #ccc; 290 | } 291 | -------------------------------------------------------------------------------- /mobile/tvh_lang.js: -------------------------------------------------------------------------------- 1 | var i18nstrings = 2 | {'de': 3 | { 4 | 'title': 'Titel', 5 | 'subtitle': 'Untertitel', 6 | 'channel': 'Kanal', 7 | 'channels': 'Kanäle', 8 | 'allChannels': 'Alle Kanäle', 9 | 'search': 'Suchen', 10 | 'priority': 'Priorität', 11 | 'start': 'Start', 12 | 'end': 'Ende', 13 | 'config': 'Konfig.', 14 | 'duration': 'Dauer', 15 | 'status': 'Status', 16 | 'save': 'Speichern', 17 | 'cancel': 'Abbrechen', 18 | 'delete': 'Löschen', 19 | 'description': 'Beschreibung', 20 | 'genre': 'Genre', 21 | 'record': 'Aufnehmen', 22 | 'errorCreatingOrDeleteRecordingEntry': 'Fehler beim Erstellen/Löschen der Aufnahme', 23 | 'recordingEntryNotFound': 'Aufnahme nicht gefunden', 24 | 'errorCancellingEntry': 'Fehler beim Abbrechen der Aufnahme', 25 | 'errorDeletingEntry': 'Fehler beim Löschen der Aufnahme', 26 | 'reallyDeleteItem': 'Möchten Sie diesen Eintrag wirklich löschen?', 27 | 'active': 'aktiv', 28 | 'inactive': 'inaktiv', 29 | 'enabled': 'Aktiviert', 30 | 'yes': 'Ja', 31 | 'no': 'Nein', 32 | 'tags': 'Tags', 33 | 'tag': 'Tag', 34 | 'createdBy': 'Erstellt von', 35 | 'comment': 'Kommentar', 36 | 'loading': 'Lade...', 37 | 'monday': 'Montag', 38 | 'monday.short': 'Mo', 39 | 'tuesday': 'Dienstag', 40 | 'tuesday.short': 'Di', 41 | 'wednesday': 'Mittwoch', 42 | 'wednesday.short': 'Mi', 43 | 'thursday': 'Donnerstag', 44 | 'thursday.short': 'Do', 45 | 'friday': 'Freitag', 46 | 'friday.short': 'Fr', 47 | 'saturday': 'Samstag', 48 | 'saturday.short': 'Sa', 49 | 'sunday': 'Sonntag', 50 | 'sunday.short': 'So', 51 | 'upcomingRecordings': 'Kommende Aufnahmen', 52 | 'finishedRecordings': 'Beendete Aufnahmen', 53 | 'failedRecordings': 'Fehlerhafte Aufnahmen', 54 | 'digitalVideoRecorder': 'Digitaler Videorekorder', 55 | 'automaticRecorder': 'Auto-Aufnahme', 56 | 'informationStatus': 'Informationen/Status', 57 | 'electronicProgramGuide': 'Elektronischer Programmführer', 58 | 'about': 'Über', 59 | 'startingAround': 'Start (ca.)', 60 | 'dateFormat': 'dd.MM.yyyy', 61 | 'getMore': 'mehr...', 62 | 'prio.important': 'Wichtig', 63 | 'prio.high': 'Hoch', 64 | 'prio.normal': 'Normal', 65 | 'prio.low': 'Niedrig', 66 | 'prio.unimportant': 'Unwichtig', 67 | 'newEntry': 'Neuer Eintrag...', 68 | 'subscriptions': 'Verbindungen', 69 | 'adapters': 'Adapter', 70 | 'any': '(egal)', 71 | 'hostname': 'Hostname', 72 | 'name': 'Name', 73 | 'path': 'Pfad', 74 | 'devicename': 'Gerätename', 75 | 'deliverysystem':'System', 76 | 'services':'Services', 77 | 'muxes':'Muxes', 78 | 'signal':'Signal', 79 | 'reload':'Neu laden', 80 | 'desktopSite':'Desktop-Version', 81 | 'episode': 'Episode', 82 | 'status.Scheduled for recording': 'Aufnahme geplant', 83 | 'status.Waiting for program start': 'Warten auf Programmstart', 84 | 'status.Running': 'Läuft', 85 | 'status.Commercial break': 'Werbepause', 86 | 'status.Invalid': 'Ungültig', 87 | 'status.File Missing': 'Datei fehlt', 88 | 'status.Completed OK': 'Korrekt beendet', 89 | 'status.Time missed': 'Zeit verpasst', 90 | 'hour.short': ' Std.', 91 | 'liveTv': 'Live-TV', 92 | 'timeline': 'Zeitleiste', 93 | 'imdbSearch': 'IMDB-Suche', 94 | 'tmdbSearch': 'TMDB-Suche', 95 | 'diskspace': 'Speicherplatz', 96 | 'magazine': 'Programmzeitschrift', 97 | 'backToMobileUi': 'zurück zur mobilen Ansicht', 98 | 'mobileUi': 'mobile Ansicht' 99 | }, 100 | 'en': 101 | { 102 | 'title': 'Title', 103 | 'subtitle': 'Subtitle', 104 | 'channel': 'Channel', 105 | 'channels': 'Channels', 106 | 'allChannels': 'All channels', 107 | 'search': 'Search', 108 | 'priority': 'Priority', 109 | 'start': 'Start', 110 | 'end': 'End', 111 | 'config': 'Config.', 112 | 'duration': 'Duration', 113 | 'status': 'Status', 114 | 'save': 'Save', 115 | 'cancel': 'Cancel', 116 | 'delete': 'Delete', 117 | 'description': 'Description', 118 | 'genre': 'Genre', 119 | 'record': 'Record', 120 | 'errorCreatingOrDeleteRecordingEntry': 'Error creating or delete recording entry', 121 | 'recordingEntryNotFound': 'Recording entry not found', 122 | 'errorCancellingEntry': 'Error cancelling entry', 123 | 'errorDeletingEntry': 'Error deleting entry', 124 | 'reallyDeleteItem': 'Do you really want to delete this item?', 125 | 'active': 'active', 126 | 'inactive': 'inactive', 127 | 'enabled': 'Enabled', 128 | 'yes': 'Yes', 129 | 'no': 'No', 130 | 'tags': 'Tags', 131 | 'tag': 'Tag', 132 | 'createdBy': 'Created by', 133 | 'comment': 'Comment', 134 | 'loading': 'Loading...', 135 | 'monday': 'Monday', 136 | 'monday.short': 'Mon', 137 | 'tuesday': 'Tuesday', 138 | 'tuesday.short': 'Tue', 139 | 'wednesday': 'Wednesday', 140 | 'wednesday.short': 'Wed', 141 | 'thursday': 'Thursday', 142 | 'thursday.short': 'Thu', 143 | 'friday': 'Friday', 144 | 'friday.short': 'Fri', 145 | 'saturday': 'Saturday', 146 | 'saturday.short': 'Sat', 147 | 'sunday': 'Sunday', 148 | 'sunday.short': 'Sun', 149 | 'upcomingRecordings': 'Upcoming recordings', 150 | 'finishedRecordings': 'Finished recordings', 151 | 'failedRecordings': 'Failed recordings', 152 | 'digitalVideoRecorder': 'Digital video recorder', 153 | 'automaticRecorder': 'Automatic recorder', 154 | 'informationStatus': 'Information/Status', 155 | 'electronicProgramGuide': 'Electronic program guide', 156 | 'about': 'About', 157 | 'startingAround': 'Start (ca.)', 158 | 'dateFormat': 'yyyy-MM-dd', 159 | 'getMore': 'more...', 160 | 'prio.important': 'Important', 161 | 'prio.high': 'High', 162 | 'prio.normal': 'Normal', 163 | 'prio.low': 'Low', 164 | 'prio.unimportant': 'Unimportant', 165 | 'newEntry': 'New entry...', 166 | 'subscriptions': 'Subscriptions', 167 | 'adapters': 'Adapters', 168 | 'any': '(any)', 169 | 'hostname': 'Hostname', 170 | 'name': 'Name', 171 | 'path': 'Path', 172 | 'devicename': 'Device name', 173 | 'deliverysystem':'System', 174 | 'services':'Services', 175 | 'muxes':'Muxes', 176 | 'signal':'Signal', 177 | 'reload':'Reload', 178 | 'desktopSite':'Desktop-Site', 179 | 'episode': 'Episode', 180 | 'hour.short': 'h', 181 | 'liveTv': 'Live-TV', 182 | 'timeline': 'Timeline', 183 | 'imdbSearch': 'Search IMDB', 184 | 'tmdbSearch': 'Search TMDB', 185 | 'tmdbAttribution': 'This product uses the TMDb API but is not endorsed or certified by TMDb.', 186 | 'diskspace': 'Disk space', 187 | 'magazine': 'Listings', 188 | 'backToMobileUi': 'back to mobile UI', 189 | 'mobileUi': 'mobile UI' 190 | } 191 | }; -------------------------------------------------------------------------------- /mobile/tvh_mag.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | } 4 | 5 | div#tags { 6 | padding-left:0px; 7 | } 8 | 9 | div#tags a.link { 10 | display:inline-block; 11 | border:1px solid #999; 12 | border-radius: 5px; 13 | padding:2px; 14 | white-space:nowrap; 15 | text-decoration:none; 16 | color:#999; 17 | box-shadow: 1px 1px 1.5px #999; 18 | margin:3px; 19 | } 20 | 21 | div#tags a.link.selected { 22 | background-color:#f0f090; 23 | border-color:#333; 24 | box-shadow: 2px 2px 1.5px #333; 25 | font-weight:bold; 26 | color:black; 27 | } 28 | 29 | div#tags a:hover { 30 | background-color:#ff9; 31 | border-color:#333; 32 | color:black; 33 | box-shadow: 2px 2px 1.5px #333; 34 | } 35 | 36 | table#epg { 37 | width:100%; 38 | background-color:black; 39 | border-spacing:1px; 40 | border-collapse:true; 41 | } 42 | 43 | table#epg > tbody > tr > th, 44 | table#epg > tbody > tr > td { 45 | background-color:white; 46 | } 47 | 48 | th, td { 49 | vertical-align:top; 50 | } 51 | 52 | table#epg > tbody > tr > td.even, 53 | table#epg > tbody > tr > th.even { 54 | background-color:#f0f0f0; 55 | } 56 | 57 | table#epg > tbody > tr > td.odd, 58 | table#epg > tbody > tr > th.odd { 59 | background-color:#ffc; 60 | } 61 | 62 | body,h1,h2,th,td,li,input,select { 63 | font-family:Arial; 64 | font-size:10pt; 65 | } 66 | 67 | div.title { 68 | font-size: 12pt; 69 | cursor:pointer; 70 | } 71 | 72 | span.episode { 73 | padding: 2px; 74 | font-size: 9pt; 75 | background-color: black; 76 | color: white; 77 | font-weight: bold; 78 | } 79 | 80 | td.time { 81 | font-weight:bold; 82 | } 83 | 84 | div.subtitle { 85 | font-weight:bold; 86 | cursor:pointer; 87 | } 88 | 89 | td.scheduled { 90 | background: url('../icons/clock.png') no-repeat 10px 20px; 91 | min-height:36px; 92 | } 93 | 94 | table.inner td.big div.description, 95 | table.inner td.primetime div.description { 96 | display:block; 97 | } 98 | 99 | div.duration { 100 | text-align:right; 101 | margin-right:5px; 102 | } 103 | 104 | div.description { 105 | cursor:pointer; 106 | font-style:italic; 107 | } 108 | 109 | tr.current { 110 | color:#990000!important; 111 | } 112 | 113 | table.inner td.big div.action, 114 | table.inner td.big div.duration { 115 | display:block; 116 | } 117 | 118 | div.action select, 119 | div.action input { 120 | width:100%; 121 | } 122 | 123 | td.recording { 124 | background: url('../icons/rec.png') no-repeat 10px 20px; 125 | min-height:36px; 126 | } 127 | 128 | table.inner { 129 | border-spacing:3px; 130 | background-color:transparent; 131 | } 132 | 133 | table.inner div.description, 134 | table.inner div.duration, 135 | table.inner div.action { 136 | display:none; 137 | } 138 | 139 | div#date { 140 | text-align:center; 141 | font-size:18pt; 142 | } 143 | 144 | div#date span { 145 | padding:5px; 146 | } 147 | 148 | div.stream { 149 | display:none; 150 | } 151 | 152 | div.stream.big { 153 | display:block; 154 | } 155 | 156 | div.stream button { 157 | width:100%; 158 | } 159 | 160 | span.link, a.link, div.link { 161 | cursor:pointer; 162 | } -------------------------------------------------------------------------------- /screenshots/channels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/screenshots/channels.png -------------------------------------------------------------------------------- /screenshots/epg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/screenshots/epg.png -------------------------------------------------------------------------------- /screenshots/epg_entry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/screenshots/epg_entry.png -------------------------------------------------------------------------------- /screenshots/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/screenshots/home.png -------------------------------------------------------------------------------- /screenshots/magazine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/screenshots/magazine.png -------------------------------------------------------------------------------- /screenshots/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polini/TvheadendMobileUI/d614fa0027a0ba83354e389d55372c3d4a737374/screenshots/timeline.png --------------------------------------------------------------------------------