├── design ├── 01-Animations.jpg ├── 02-Animations mouseover.jpg ├── 03-Animations clicked.jpg ├── 04-Animations animation done.jpg └── 05-Animations tags not showing.jpg ├── static ├── img │ ├── application-screenshot.jpg │ ├── application-screenshot-v2.0.png │ ├── cozmo-logo.svg │ ├── cozmo_blank.svg │ ├── cozmo_playing.svg │ └── cozmo_eyes.svg ├── css │ ├── images │ │ ├── ui-icons_444444_256x240.png │ │ ├── ui-icons_555555_256x240.png │ │ ├── ui-icons_777620_256x240.png │ │ ├── ui-icons_777777_256x240.png │ │ ├── ui-icons_cc0000_256x240.png │ │ └── ui-icons_ffffff_256x240.png │ ├── cozmo_animation_list_old.css │ ├── cozmo_animation_list.css │ └── jquery-ui.css └── js │ ├── jquery.ui.touch-punch.min.js │ ├── jquery.hideseek.js │ └── engine.js ├── play_animation.py ├── README.md ├── templates ├── index_old.html └── index.html ├── flask_helpers.py └── animation_explorer.py /design/01-Animations.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/design/01-Animations.jpg -------------------------------------------------------------------------------- /design/02-Animations mouseover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/design/02-Animations mouseover.jpg -------------------------------------------------------------------------------- /design/03-Animations clicked.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/design/03-Animations clicked.jpg -------------------------------------------------------------------------------- /design/04-Animations animation done.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/design/04-Animations animation done.jpg -------------------------------------------------------------------------------- /static/img/application-screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/img/application-screenshot.jpg -------------------------------------------------------------------------------- /design/05-Animations tags not showing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/design/05-Animations tags not showing.jpg -------------------------------------------------------------------------------- /static/img/application-screenshot-v2.0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/img/application-screenshot-v2.0.png -------------------------------------------------------------------------------- /static/css/images/ui-icons_444444_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/css/images/ui-icons_444444_256x240.png -------------------------------------------------------------------------------- /static/css/images/ui-icons_555555_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/css/images/ui-icons_555555_256x240.png -------------------------------------------------------------------------------- /static/css/images/ui-icons_777620_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/css/images/ui-icons_777620_256x240.png -------------------------------------------------------------------------------- /static/css/images/ui-icons_777777_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/css/images/ui-icons_777777_256x240.png -------------------------------------------------------------------------------- /static/css/images/ui-icons_cc0000_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/css/images/ui-icons_cc0000_256x240.png -------------------------------------------------------------------------------- /static/css/images/ui-icons_ffffff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrinningHermit/Cozmo-Animation-Explorer/HEAD/static/css/images/ui-icons_ffffff_256x240.png -------------------------------------------------------------------------------- /play_animation.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | 3 | ''' 4 | Play animation script 5 | 6 | Makes Cozmo execute a sample animation 7 | 8 | If you are looking for the interface to test all animations, run 'animation-explorer.py' 9 | ''' 10 | 11 | import sys 12 | 13 | import cozmo 14 | 15 | 16 | def run(sdk_conn): 17 | '''The run method runs once Cozmo is connected.''' 18 | robot = sdk_conn.wait_for_robot() 19 | robot.play_anim('anim_freeplay_reacttoface_like_01').wait_for_completed() 20 | 21 | print('Run \'animation-explorer.py\' if you want to try other animations') 22 | 23 | if __name__ == '__main__': 24 | cozmo.setup_basic_logging() 25 | 26 | try: 27 | cozmo.connect(run) 28 | except cozmo.ConnectionError as e: 29 | sys.exit('A connection error occurred: %s' % e) 30 | -------------------------------------------------------------------------------- /static/js/jquery.ui.touch-punch.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Touch Punch 0.2.3 3 | * 4 | * Copyright 2011–2014, Dave Furfero 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * 7 | * Depends: 8 | * jquery.ui.widget.js 9 | * jquery.ui.mouse.js 10 | */ 11 | !function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery); -------------------------------------------------------------------------------- /static/img/cozmo-logo.svg: -------------------------------------------------------------------------------- 1 | cozmo-logo -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cozmo Animation Explorer v2.0 2 | Interface to test all animations of the robot Cozmo from Anki 3 | --- 4 | While finding out how the SDK of Cozmo works and how to build stuff with it, it appeared there was no listing provided for all the built-in animations the robot can do. This project attempts to remedy that. 5 | 6 | What does it do exactly? 7 | - 8 | Running the script 'animation-explorer.py' in python will open a web page listing all the animations Cozmo has. A user can click the play button of a listed animation and Cozmo will execute it. It is also possible to search for a particular animation and buttons are provided to group animations based on their naming convention. Triggers and Behaviors can also be played. They have separate lists that can be accessed by choosing their respective menu tabs. 9 | 10 | Changes compared to v1.0 11 | - 12 | - Triggers can now be played. They are group names for a set of similar animations. When played, one of the animations from the set is picked randomly. 13 | - Behaviors can now be played. They are ongoing sets of instructions that can be interrupted. I.e.: Playing 'KnockOverCubes' will cause Cozmo to crash a stack of cubes he sees. If no stacked cubes are visible, he will do nothing. 14 | - An option 'return to pose' can be checked. Depending on the animation Cozmo executes, he can move around. Not every animation ends where he started. This checkbox makes sure he returns to the pose he had before the animation starts. 15 | - Playing an animation is now achieved by clicking a button that appears on the line that has the mouse cursor hovering over it. 16 | - Copying the animation can now be done by clicking a button that appears on the line that has the mouse cursor hovering over it OR by selecting the text of the animation name and using the keyboard shortcut Ctrl-C (Windows/Linux) or Command-C (Mac). 17 | 18 | What do you need to use it? 19 | - 20 | 1. Cozmo himself (http://anki.com/cozmo) 21 | 2. A PC and a mobile device 22 | 3. A little knowledge about Python 23 | 4. Knowledge of the Cozmo SDK (http://cozmosdk.anki.com/docs) 24 | 5. The files in this repository 25 | 26 | If you know how to run an example file from the Cozmo SDK, you should be able to run this script. 27 | 28 | System requirements 29 | - 30 | - PC with Windows OS, mac OSX or Linux 31 | - Python 3.5.1 or later 32 | - WiFi connection 33 | - An iOS or Android mobile device with the Cozmo app installed, connected to the PC via USB cable 34 | 35 | Installation notes 36 | - 37 | - Running 'animation-explorer.py' will attempt to open a browser window at 127.0.0.1:5000. This is similar to 'remote_control_cozmo.py' from the Cozmo SDK examples. 38 | - Install the entire project, not just the .py file, or it won't work. 39 | 40 | 41 | ![Cozmo-Animation-Explorer](static/img/application-screenshot-v2.0.png) 42 | -------------------------------------------------------------------------------- /templates/index_old.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cozmo Animation Explorer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 31 | 36 | 37 |
38 |
39 | 44 |
45 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 46 |
47 |
48 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 49 |
50 |
51 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 52 |
53 |
54 |
55 |
56 | 57 | 58 | 59 |
60 |
61 |
62 | 63 |
64 |
65 |
66 | 67 | 68 | 69 |
70 |
71 |
nothing
72 |
started yet
73 | 74 |
75 |
76 | This is the complete list of animations directly pulled from Cozmo's memory. Click an animation to play it. You can copy an animation for your own use in your python script.

Check the project file 'play_animation.py' on how to play the animation in your own script. 77 |
78 |
79 |
80 | 81 | 82 | -------------------------------------------------------------------------------- /flask_helpers.py: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016 Anki, Inc. 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License in the file LICENSE.txt or at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | '''Wrappers and helpers for using Flask with Cozmo. 16 | 17 | Flask is a Python web framework. remote_control_cozmo.py and other scripts may use 18 | these utility functions to interact with a web browser. 19 | ''' 20 | 21 | import logging 22 | import sys 23 | from threading import Thread 24 | import webbrowser 25 | from time import sleep 26 | from io import BytesIO 27 | try: 28 | from flask import make_response, send_file 29 | except ImportError: 30 | sys.exit("Cannot import from flask: Do `pip3 install --user flask` to install") 31 | 32 | 33 | 34 | def _delayed_open_web_browser(url, delay, new=0, autoraise=True, specific_browser=None): 35 | ''' 36 | Spawn a thread and call sleep_and_open_web_browser from within it so that main thread can keep executing at the 37 | same time. Insert a small sleep before opening a web-browser 38 | this gives Flask a chance to start running before the browser starts requesting data from Flask. 39 | ''' 40 | 41 | def _sleep_and_open_web_browser(url, delay, new, autoraise, specific_browser): 42 | sleep(delay) 43 | browser = webbrowser 44 | 45 | # E.g. On OSX the following would use the Chrome browser app from that location 46 | # specific_browser = 'open -a /Applications/Google\ Chrome.app %s' 47 | if specific_browser: 48 | browser = webbrowser.get(specific_browser) 49 | 50 | browser.open(url, new=new, autoraise=autoraise) 51 | 52 | thread = Thread(target=_sleep_and_open_web_browser, 53 | kwargs=dict(url=url, new=new, autoraise=autoraise, delay=delay, specific_browser=specific_browser)) 54 | thread.daemon = True # Force to quit on main quitting 55 | thread.start() 56 | 57 | 58 | def run_flask(flask_app, host_ip="127.0.0.1", host_port=5000, enable_flask_logging=False, 59 | open_page=True, open_page_delay=1.0): 60 | ''' 61 | Run the Flask webserver on specified host and port 62 | optionally also open that same host:port page in your browser to connect 63 | ''' 64 | 65 | if not enable_flask_logging: 66 | # disable logging in Flask (it's enabled by default) 67 | log = logging.getLogger('werkzeug') 68 | log.setLevel(logging.ERROR) 69 | 70 | if open_page: 71 | # we add a delay (dispatched in another thread) to open the page so that the flask webserver is open 72 | # before the webpage requests any data 73 | _delayed_open_web_browser("http://" + host_ip + ":" + str(host_port), delay=open_page_delay) 74 | 75 | flask_app.run(host=host_ip, port=host_port, use_evalex=False) 76 | 77 | 78 | def make_uncached_response(in_file): 79 | response = make_response(in_file) 80 | response.headers['Pragma-Directive'] = 'no-cache' 81 | response.headers['Cache-Directive'] = 'no-cache' 82 | response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' 83 | response.headers['Pragma'] = 'no-cache' 84 | response.headers['Expires'] = '0' 85 | return response 86 | 87 | 88 | def serve_pil_image(pil_img, serve_as_jpeg=False, jpeg_quality=70): 89 | '''Convert PIL image to relevant image file and send it''' 90 | img_io = BytesIO() 91 | 92 | if serve_as_jpeg: 93 | pil_img.save(img_io, 'JPEG', quality=jpeg_quality) 94 | img_io.seek(0) 95 | return make_uncached_response(send_file(img_io, mimetype='image/jpeg')) 96 | else: 97 | pil_img.save(img_io, 'PNG') 98 | img_io.seek(0) 99 | return make_uncached_response(send_file(img_io, mimetype='image/png')) 100 | -------------------------------------------------------------------------------- /static/css/cozmo_animation_list_old.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; 5 | } 6 | 7 | #header { 8 | font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; 9 | font-size: 2.5em; 10 | color: #ffffff; 11 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05); 12 | background-image: linear-gradient(to bottom right, #fff022, #ffc736); 13 | padding: 20px; 14 | height: 30px; 15 | line-height: 30px; 16 | } 17 | 18 | #content { 19 | display: flex; 20 | flex-direction: row; 21 | text-align: left; 22 | overflow: hidden; 23 | padding: 0 20px 0 20px; 24 | } 25 | 26 | #l-col { 27 | flex: 1 300px; 28 | } 29 | 30 | #c-col { 31 | flex: 1 auto; 32 | } 33 | 34 | #r-col { 35 | flex: 99999; 36 | padding: 20px; 37 | } 38 | 39 | .flex-col { 40 | flex-direction: column; 41 | } 42 | 43 | .flex-item { 44 | flex: auto; 45 | } 46 | 47 | ul { 48 | display: inline-block; 49 | overflow-y: scroll; 50 | list-style: none; 51 | font-family: "Courier", "Lucida Console", monospace; 52 | font-size: .8em; 53 | width: auto; 54 | margin: 0; 55 | padding: 0; 56 | } 57 | li { 58 | clear: both; 59 | border-bottom: solid 1px #eeeeee; 60 | line-height: 26px; 61 | padding: 0 8px 0 8px; 62 | color: #444444; 63 | background-color: #ffffff; 64 | } 65 | 66 | li:hover { 67 | color: #ffffff; 68 | background-color: #444444; 69 | } 70 | 71 | input { 72 | height: 30px; 73 | font-size: 1em; 74 | outline: none; 75 | margin: 0 5px 0 20px; 76 | width: 270px; 77 | } 78 | 79 | select:focus, 80 | textarea:focus, 81 | button:focus { 82 | outline: none; 83 | } 84 | 85 | #filtersubmit { 86 | position: relative; 87 | z-index: 1; 88 | left: -40px; 89 | top: 1px; 90 | color: #dddddd; 91 | width: 0; 92 | } 93 | 94 | #filterclear { 95 | position: relative; 96 | z-index: 2; 97 | left: -34px; 98 | top: 1px; 99 | color: #aaaaaa; 100 | cursor: pointer; 101 | width: 0; 102 | visibility: hidden; 103 | } 104 | 105 | .ui-button{ 106 | margin: 5px 5px 0 0; 107 | font-size: .7em; 108 | } 109 | 110 | .logo { 111 | filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.05)); 112 | height: 30px; 113 | } 114 | 115 | .bg-grey { 116 | background-color: #eeeeee; 117 | margin: 0 0 0 -20px; 118 | padding: 5px 0 5px 0; 119 | } 120 | 121 | .cozmo { 122 | position: absolute; 123 | width: 200px; 124 | } 125 | 126 | #c-play { 127 | display: none; 128 | animation-name: blink; 129 | animation-duration: 1.2s; 130 | animation-iteration-count: infinite; 131 | } 132 | 133 | #c-eyes { 134 | animation-name: eyeblink; 135 | animation-duration: 10s; 136 | animation-iteration-count: infinite; 137 | } 138 | 139 | @keyframes eyeblink { 140 | 0% {opacity: 1;} 141 | 50% {opacity: 1;} 142 | 50.1% {opacity: 0;} 143 | 51% {opacity: 0;} 144 | 51.1% {opacity: 1;} 145 | 100% {opacity: 1;} 146 | } 147 | 148 | @keyframes blink { 149 | 0% {opacity: 1;} 150 | 50% {opacity: 1;} 151 | 50.1% {opacity: 0;} 152 | 99.9% {opacity: 0;} 153 | 100% {opacity: 1;} 154 | } 155 | 156 | #animation-name { 157 | color: #444444; 158 | font-size: .8em; 159 | text-align: center; 160 | background-color: #eeeeee; 161 | padding: 5px; 162 | line-height: 24px; 163 | position: absolute; 164 | top: 300px; 165 | width: 200px; 166 | } 167 | 168 | #mono { 169 | font-family: "Courier", "Lucida Console", monospace; 170 | word-wrap: break-word; 171 | } 172 | 173 | #status { 174 | color: #aaaaaa; 175 | } 176 | 177 | #animation-name .ui-button { 178 | font-size: 1em; 179 | } 180 | 181 | .content-text { 182 | position: absolute; 183 | top: 440px; 184 | width:200px; 185 | color: #aaaaaa; 186 | font-size: .8em; 187 | } 188 | 189 | .ui-effects-transfer { border: 2px dotted gray; } 190 | 191 | .hermit { 192 | float: right; 193 | font-size: .3em; 194 | color: #bbbbbb; 195 | padding: 11px 0 0 0; 196 | } 197 | 198 | .hermit a{ 199 | color: #bbbbbb; 200 | } 201 | -------------------------------------------------------------------------------- /animation_explorer.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python3 2 | 3 | """ 4 | List all Cozmo animations on a web page with buttons to try the animations. 5 | In order to run this script, you also need all the other files inside the project. 6 | If that is the case, running this script will load the interface. 7 | """ 8 | 9 | from flask import Flask, render_template, request 10 | import flask_helpers 11 | import cozmo 12 | import json 13 | import random 14 | import time 15 | import logging 16 | logging.basicConfig(format='%(asctime)s animation explorer %(levelname)s %(message)s', level=logging.INFO) 17 | 18 | robot = None 19 | cozmoEnabled = True 20 | return_to_pose = False 21 | flask_app = Flask(__name__) 22 | rndID = random.randrange(1000000000, 9999999999) 23 | animations = '' 24 | triggers = '' 25 | behaviors = '' 26 | action = [] 27 | pose = None 28 | 29 | 30 | @flask_app.route('/') 31 | def index(): 32 | return render_template('index.html', randomID=rndID, animations=animations, triggers=triggers, behaviors=behaviors) 33 | 34 | 35 | @flask_app.route('/toggle_pose', methods=['POST']) 36 | def toggle_pose(): 37 | global return_to_pose 38 | # Toggle for returning to pose after finishing animation 39 | return_to_pose = not return_to_pose 40 | logging.info('return_to_pose is set to: ' + str(return_to_pose)) 41 | return str(return_to_pose) 42 | 43 | 44 | @flask_app.route('/play_animation', methods=['POST']) 45 | def play_animation(): 46 | # Handling of received animation 47 | global pose 48 | animation = json.loads(request.data.decode('utf-8')) 49 | if cozmoEnabled: 50 | pose = robot.pose 51 | robot.play_anim(animation).wait_for_completed() 52 | logging.info('Animation \'' + animation + '\' started') 53 | check_pose_return() 54 | else: 55 | time.sleep(2) 56 | 57 | return 'true' 58 | 59 | 60 | @flask_app.route('/play_trigger', methods=['POST']) 61 | def play_trigger(): 62 | # Handling of received trigger 63 | global pose 64 | trigger = json.loads(request.data.decode('utf-8')) 65 | if cozmoEnabled: 66 | pose = robot.pose 67 | robot.play_anim_trigger(getattr(cozmo.anim.Triggers, trigger)).wait_for_completed() 68 | logging.info('Trigger \'' + trigger + '\' started') 69 | check_pose_return() 70 | else: 71 | time.sleep(2) 72 | 73 | return 'true' 74 | 75 | 76 | @flask_app.route('/play_behavior', methods=['POST']) 77 | def play_behavior(): 78 | # Handling of received behavior 79 | global pose 80 | global action 81 | behavior = json.loads(request.data.decode('utf-8')) 82 | if cozmoEnabled: 83 | pose = robot.pose 84 | action = [robot.start_behavior(getattr(cozmo.behavior.BehaviorTypes, behavior)), behavior] 85 | logging.info('Behavior \'' + behavior + '\' started') 86 | 87 | else: 88 | time.sleep(2) 89 | 90 | return 'true' 91 | 92 | 93 | @flask_app.route('/stop', methods=['POST']) 94 | def stop(): 95 | global action 96 | if action is not []: 97 | robot.stop_freeplay_behaviors() 98 | logging.info('behavior \'' + action[1] + '\' stopped') 99 | action = [] 100 | check_pose_return() 101 | else: 102 | robot.abort_all_actions() 103 | 104 | return 'false' 105 | 106 | 107 | def check_pose_return(): 108 | if return_to_pose: 109 | robot.go_to_pose(pose) 110 | logging.info('Cozmo returning to pose he had before animation started') 111 | 112 | 113 | def cozmo_program(_robot: cozmo.robot.Robot): 114 | global robot 115 | robot = _robot 116 | 117 | try: 118 | global animations 119 | global triggers 120 | global behaviors 121 | for a in robot.conn.anim_names: 122 | animations += a + ',' 123 | animations = animations[:-1] 124 | for t in dir(cozmo.anim.Triggers): 125 | if '__' not in t: 126 | triggers += t + ',' 127 | triggers = triggers[:-1] 128 | for b in dir(cozmo.behavior.BehaviorTypes): 129 | if '__' not in b: 130 | behaviors += b + ',' 131 | behaviors = behaviors[:-1] 132 | logging.info('Attempting to open browser window at 127.0.0.1:5000') 133 | flask_helpers.run_flask(flask_app) 134 | 135 | except KeyboardInterrupt: 136 | print("\nExit requested by user") 137 | 138 | try: 139 | cozmo.run_program(cozmo_program) 140 | except SystemExit as e: 141 | cozmoEnabled = False 142 | try: 143 | flask_helpers.run_flask(flask_app) 144 | except KeyboardInterrupt: 145 | print("\nExit requested by user") 146 | 147 | print('e = "%s"' % e) 148 | print('\nNo Cozmo detected') 149 | -------------------------------------------------------------------------------- /templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cozmo Animation Explorer 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 40 |
41 |
42 | 51 |
52 |
53 |
54 | 55 | 56 | 57 |
58 |
    59 |
    60 |
    61 |
    62 |

    Info

    63 |
    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 |
    96 |
    nothing
    97 |
    started yet
    98 | 99 |
    100 |
    101 | This is the complete list of animations directly pulled from Cozmo's memory. Click an animation to play it. You can copy an animation for your own use in your python script.

    Check the project file 'play_animation.py' on how to play the animation in your own script. 102 |
    103 |
    104 | #} 105 |
    106 | 107 | 108 | -------------------------------------------------------------------------------- /static/css/cozmo_animation_list.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100%; 5 | width: 100%; 6 | } 7 | 8 | body { 9 | display: flex; 10 | flex-direction: column; 11 | font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; 12 | text-align: center; 13 | } 14 | 15 | #header { 16 | flex: 0 1 auto; 17 | font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; 18 | color: #ffffff; 19 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05); 20 | background-image: linear-gradient(to bottom right, #fff022, #ffc736); 21 | height: 70px; 22 | line-height: 70px; 23 | width: 100%; 24 | } 25 | 26 | #header .contentarea { 27 | width: 800px; 28 | text-align: left; 29 | margin: 0 auto 0 auto; 30 | } 31 | 32 | #header span { 33 | display: inline-block; 34 | float: left; 35 | line-height: 16px; 36 | vertical-align: middle; 37 | font-size: 1em; 38 | margin: 20px 0 0 5px; 39 | } 40 | 41 | #header span i { 42 | transform: scale(-1, 1); 43 | } 44 | 45 | #header .v-align { 46 | float: left; 47 | margin: 10px 0 0 0; 48 | } 49 | 50 | #content { 51 | display: flex; 52 | flex-direction: column; 53 | flex: 0 1 auto; 54 | width: 800px; 55 | margin: 0 auto 0 auto; 56 | padding: 0; 57 | } 58 | 59 | .flex-cstm { 60 | display: flex; 61 | flex-direction: row; 62 | text-align: left; 63 | overflow: hidden !important; 64 | padding: 0 !important; 65 | width: 800px; 66 | margin: 2px 0 -2px 0; 67 | } 68 | 69 | .l-col { 70 | display: flex; 71 | flex-direction: column; 72 | flex: 0 1 auto; 73 | overflow: hidden; 74 | min-height: 0px; 75 | } 76 | 77 | .r-col { 78 | display: flex; 79 | flex-direction: column; 80 | flex: 1 1 250px; 81 | padding: 2px; 82 | border: 1px solid #dddddd; 83 | margin: 0 0 2px 2px; 84 | min-height: 0px; 85 | } 86 | 87 | #tabs { 88 | width: 800px; 89 | } 90 | 91 | #tabs-list li:before, #tabs-list li:after { 92 | content: ""; 93 | position: absolute; 94 | background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%); 95 | top: -1px; 96 | bottom: -1px; 97 | width: 1px; 98 | } 99 | 100 | #tabs-list li:before { 101 | left: -1px; 102 | } 103 | 104 | #tabs-list li:after { 105 | right: -1px; 106 | } 107 | 108 | .ul-list { 109 | display: inline-block; 110 | overflow-y: scroll; 111 | list-style: none; 112 | font-family: "Courier", "Lucida Console", monospace; 113 | font-size: .8em; 114 | width: 500px; 115 | margin: 0 0 2px 0; 116 | padding: 0; 117 | } 118 | 119 | .item-list { 120 | border-bottom: solid 1px #eeeeee; 121 | line-height: 24px; 122 | padding: 0 0 0 11px; 123 | color: #444444; 124 | background-color: white; 125 | opacity: 1; 126 | transition: background 0.25s ease-out, opacity 0.4s ease-in-out; 127 | } 128 | 129 | .item-list:hover { 130 | color: #ffffff; 131 | background: #cccccc; 132 | transition: none; 133 | background-image: linear-gradient(to right, #000000, #dddddd); 134 | opacity: 1 !important; 135 | } 136 | 137 | #list-buttons { 138 | float: right; 139 | background-color: white; 140 | color: black; 141 | padding: 0; 142 | margin: 0; 143 | line-height: 22px; 144 | width: auto; 145 | height: 22px; 146 | border-top: 1px solid black; 147 | border-right: 1px solid black; 148 | border-bottom: 1px solid black; 149 | z-index: 9993; 150 | } 151 | 152 | .box { 153 | float:right; 154 | line-height: 22px; 155 | width: 22px; 156 | height: 22px; 157 | text-align: center; 158 | margin: 0; 159 | font-size: 1.2em; 160 | position: relative; 161 | border-left: 1px solid black; 162 | } 163 | 164 | .box-shadow { 165 | box-shadow: 0 1px 1px rgba(0,0,0,0.1); 166 | } 167 | 168 | #accordion { 169 | display: block; 170 | 171 | } 172 | 173 | #search-btns { 174 | display: block; 175 | padding: 0 4px; 176 | } 177 | 178 | .box:hover { 179 | background-color: black; 180 | color: white; 181 | } 182 | 183 | .red, .box:active { 184 | color: red !important; 185 | } 186 | 187 | .greyed-out { 188 | opacity: 0.4; 189 | } 190 | 191 | /* 192 | .bg-playing { 193 | background-image: linear-gradient(to right, green, lightgreen) !important; 194 | color: white; 195 | } 196 | */ 197 | 198 | .bg-just-played { 199 | background-image: linear-gradient(to right, white, #aaaaaa); 200 | } 201 | 202 | input { 203 | height: 30px; 204 | font-size: 1em; 205 | outline: none; 206 | margin: 0; 207 | padding: 0 0 0 5px; 208 | width: 470px; 209 | border: 1px solid #cccccc; 210 | } 211 | 212 | select:focus, 213 | textarea:focus, 214 | button:focus { 215 | outline: none; 216 | } 217 | 218 | .filtersubmit { 219 | position: relative; 220 | z-index: 1; 221 | left: -29px; 222 | top: 1px; 223 | color: #cccccc; 224 | width: 0; 225 | } 226 | 227 | .filterclear { 228 | position: relative; 229 | z-index: 2; 230 | left: -24px; 231 | top: 1px; 232 | color: #aaaaaa; 233 | cursor: pointer; 234 | width: 0; 235 | visibility: hidden; 236 | } 237 | 238 | .ui-button{ 239 | margin: 5px 5px 0 0; 240 | font-size: .7em; 241 | } 242 | 243 | .logo { 244 | filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.05)); 245 | height: 30px; 246 | } 247 | 248 | .bg-grey { 249 | background-image: linear-gradient(to bottom, #cccccc, white); 250 | padding: 5px 0 5px 5px; 251 | width: 495px; 252 | } 253 | 254 | #cozmo-container { 255 | float: right; 256 | width: 60px; 257 | height: 60px; 258 | position: relative; 259 | margin: 5px 0 0 10px; 260 | } 261 | 262 | .cozmo { 263 | position: absolute; 264 | width: 60px; 265 | } 266 | 267 | #c-play { 268 | display: none; 269 | animation-name: blink; 270 | animation-duration: 1.2s; 271 | animation-iteration-count: infinite; 272 | } 273 | 274 | #c-eyes { 275 | animation-name: eyeblink; 276 | animation-duration: 10s; 277 | animation-iteration-count: infinite; 278 | } 279 | 280 | @keyframes eyeblink { 281 | 0% {opacity: 1;} 282 | 50% {opacity: 1;} 283 | 50.1% {opacity: 0;} 284 | 51% {opacity: 0;} 285 | 51.1% {opacity: 1;} 286 | 100% {opacity: 1;} 287 | } 288 | 289 | @keyframes blink { 290 | 0% {opacity: 1;} 291 | 50% {opacity: 1;} 292 | 50.1% {opacity: 0;} 293 | 99.9% {opacity: 0;} 294 | 100% {opacity: 1;} 295 | } 296 | 297 | .bg-playing { 298 | color: white; 299 | background: linear-gradient(to right, lightgreen 0%, green 25%, lightgreen 50%, green 75%, lightgreen 100%) repeat-x 100% 0 !important; 300 | background-size: 400% 100% !important; 301 | animation-name: playing !important; 302 | animation-duration: 10s !important; 303 | animation-timing-function: linear !important; 304 | animation-iteration-count: infinite !important; 305 | animation-play-state: running !important; 306 | opacity: 1 !important; 307 | } 308 | 309 | @keyframes playing { 310 | from {background-position: 400% 0;} 311 | to {background-position: 0 0;} 312 | } 313 | 314 | #copied { 315 | display: inline-block; 316 | color: #ffffff; 317 | transition: none; 318 | background-image: linear-gradient(to right, #000000, #dddddd); 319 | position: absolute; 320 | left: 0; 321 | width: 474px; 322 | height: 24px; 323 | padding: 0 0 0 11px; 324 | margin: 0 0 0 2px; 325 | z-index: 9994; 326 | } 327 | 328 | .hermit { 329 | float: right; 330 | font-size: .6em; 331 | color: #999999; 332 | margin: 25px 0 0 0; 333 | text-align: right; 334 | line-height: 14px; 335 | } 336 | 337 | .hermit a{ 338 | color: #999999; 339 | } 340 | 341 | .hermit a:hover { 342 | color: black; 343 | } 344 | 345 | *:focus { 346 | outline: none !important; 347 | } 348 | 349 | .checkbox { 350 | float: right; 351 | display: inline-block; 352 | padding: 8px 5px 0 0; 353 | } 354 | 355 | .checkbox input { 356 | display: inline-block; 357 | float: right; 358 | width: 19px; 359 | margin: -3px 0 0 5px; 360 | cursor: pointer; 361 | } 362 | 363 | .checkbox label { 364 | font-size: 0.7em; 365 | font-weight: normal; 366 | cursor: pointer; 367 | user-select: none; 368 | } 369 | -------------------------------------------------------------------------------- /static/js/jquery.hideseek.js: -------------------------------------------------------------------------------- 1 | /** 2 | * HideSeek jQuery plugin 3 | * 4 | * @copyright Copyright 2015, Dimitris Krestos 5 | * @license Apache License, Version 2.0 (http://www.opensource.org/licenses/apache2.0.php) 6 | * @link http://vdw.staytuned.gr 7 | * @version v0.7.1 8 | * 9 | * Dependencies are include in minified versions at the bottom: 10 | * 1. Highlight v4 by Johann Burkard 11 | * 12 | */ 13 | 14 | /* Sample html structure 15 | 16 | 17 | 22 | 23 | or 24 | 25 | 26 |
    27 | item 1 28 | ... 29 | item 2 30 |
    31 | 32 | or any similar structure... 33 | 34 | */ 35 | 36 | ;(function($, window, undefined) { 37 | "use strict"; 38 | 39 | $.fn.hideseek = function(options) { 40 | 41 | var defaults = { 42 | list: '.hideseek-data', 43 | nodata: '', 44 | attribute: 'text', 45 | highlight: false, 46 | ignore: '', 47 | headers: '', 48 | navigation: false, 49 | ignore_accents: false, 50 | hidden_mode: false, 51 | min_chars: 1 52 | }; 53 | 54 | var options = $.extend(defaults, options); 55 | 56 | return this.each(function() { 57 | 58 | var $this = $(this); 59 | 60 | $this.opts = []; 61 | 62 | $.map( ['list', 'nodata', 'attribute', 'highlight', 'ignore', 'headers', 'navigation', 'ignore_accents', 'hidden_mode', 'min_chars'], function( val, i ) { 63 | $this.opts[val] = $this.data(val) || options[val]; 64 | } ); 65 | 66 | if ($this.opts.headers) 67 | $this.opts.ignore += $this.opts.ignore ? ', ' + $this.opts.headers : $this.opts.headers; 68 | 69 | var $list = $($this.opts.list); 70 | 71 | if ($this.opts.navigation) $this.attr('autocomplete', 'off'); 72 | 73 | if ($this.opts.hidden_mode) $list.children().hide(); 74 | 75 | $this.keyup(function(e) { 76 | 77 | if (e.keyCode != 38 && e.keyCode != 40 && e.keyCode != 13 && ( e.keyCode != 8 ? $this.val().length >= $this.opts.min_chars : true ) ) { 78 | 79 | var q = $this.val().toLowerCase(); 80 | 81 | $list.children($this.opts.ignore.trim() ? ":not(" + $this.opts.ignore + ")" : '').removeClass('selected').each(function() { 82 | 83 | var data = ( 84 | $this.opts.attribute != 'text' 85 | ? ($(this).attr($this.opts.attribute) || '') 86 | : $(this).text() 87 | ).toLowerCase(); 88 | 89 | var treaty = data.removeAccents($this.opts.ignore_accents).indexOf(q) == -1 || q === ($this.opts.hidden_mode ? '' : false) 90 | 91 | if (treaty) { 92 | 93 | $(this).hide(); 94 | 95 | $this.trigger('_after_each'); 96 | 97 | } else { 98 | 99 | $this.opts.highlight ? $(this).removeHighlight().highlight(q).show() : $(this).show(); 100 | 101 | $this.trigger('_after_each'); 102 | 103 | } 104 | 105 | }); 106 | 107 | // No results message 108 | if ($this.opts.nodata) { 109 | 110 | $list.find('.no-results').remove(); 111 | 112 | if (!$list.children(':not([style*="display: none"])').length) { 113 | 114 | $list 115 | .children() 116 | .first() 117 | .clone() 118 | .removeHighlight() 119 | .addClass('no-results') 120 | .show() 121 | .prependTo($this.opts.list) 122 | .text($this.opts.nodata); 123 | 124 | $this.trigger('_after_nodata'); 125 | 126 | } 127 | 128 | } 129 | 130 | // hide headers with no results 131 | if ($this.opts.headers) { 132 | $($this.opts.headers, $list).each(function() { 133 | if (!$(this).nextUntil($this.opts.headers).not('[style*="display: none"],' + $this.opts.ignore).length) { 134 | $(this).hide(); 135 | } else { 136 | $(this).show(); 137 | } 138 | }); 139 | } 140 | 141 | $this.trigger('_after'); 142 | 143 | }; 144 | 145 | // Navigation 146 | function current(element) { 147 | return element.children('.selected:visible'); 148 | }; 149 | 150 | function prev(element) { 151 | return current(element).prevAll(":visible:first"); 152 | }; 153 | 154 | function next(element) { 155 | return current(element).nextAll(":visible:first"); 156 | }; 157 | 158 | if ($this.opts.navigation) { 159 | 160 | if (e.keyCode == 38) { 161 | 162 | if (current($list).length) { 163 | 164 | prev($list).addClass('selected'); 165 | 166 | current($list).last().removeClass('selected'); 167 | 168 | } else { 169 | 170 | $list.children(':visible').last().addClass('selected'); 171 | 172 | }; 173 | 174 | } else if (e.keyCode == 40) { 175 | 176 | if (current($list).length) { 177 | 178 | next($list).addClass('selected'); 179 | 180 | current($list).first().removeClass('selected'); 181 | 182 | } else { 183 | 184 | $list.children(':visible').first().addClass('selected'); 185 | 186 | }; 187 | 188 | } else if (e.keyCode == 13) { 189 | 190 | if (current($list).find('a').length) { 191 | 192 | document.location = current($list).find('a').attr('href'); 193 | 194 | } else { 195 | 196 | $this.val(current($list).text()); 197 | 198 | }; 199 | 200 | }; 201 | 202 | }; 203 | 204 | }); 205 | 206 | }); 207 | 208 | }; 209 | 210 | $(document).ready(function () { $('[data-toggle="hideseek"]').hideseek(); }); 211 | 212 | })(jQuery); 213 | 214 | /* 215 | 216 | highlight v4 217 | 218 | Highlights arbitrary terms. 219 | 220 | 221 | 222 | MIT license. 223 | 224 | Johann Burkard 225 | 226 | 227 | 228 | */ 229 | jQuery.fn.highlight=function(t){function e(t,i){var n=0;if(3==t.nodeType){var a=t.data.removeAccents(true).toUpperCase().indexOf(i);if(a>=0){var s=document.createElement("mark");s.className="highlight";var r=t.splitText(a);r.splitText(i.length);var o=r.cloneNode(!0);s.appendChild(o),r.parentNode.replaceChild(s,r),n=1}}else if(1==t.nodeType&&t.childNodes&&!/(script|style)/i.test(t.tagName))for(var h=0;hcozmo_blank -------------------------------------------------------------------------------- /static/img/cozmo_playing.svg: -------------------------------------------------------------------------------- 1 | cozmo_playing -------------------------------------------------------------------------------- /static/img/cozmo_eyes.svg: -------------------------------------------------------------------------------- 1 | cozmo_eyes -------------------------------------------------------------------------------- /static/js/engine.js: -------------------------------------------------------------------------------- 1 | var isRunning = false; 2 | var isMouseDown = false; 3 | var tempListID = null; 4 | var isPlayingListID = null; 5 | var returnToPose = false; 6 | var stopTimeOut; 7 | 8 | var currentTab = 'animations'; 9 | 10 | if(anims_raw == ''){ 11 | // test data for running without Cozmo connected 12 | anims_raw = 'anim_cozmo_test_01anim_cozmo_test_01,anim_cozmo_test_02,anim_cozmo_test_03,anim_cozmo_test_04,anim_cozmo_test_05,anim_more_test_01,anim_more_test_02,anim_more_test_03,anim_more_test_04,anim_more_test_01,anim_cozmo_test_01,anim_cozmo_test_02,anim_cozmo_test_03,anim_cozmo_test_04,anim_cozmo_test_05,anim_more_test_01,anim_more_test_02,anim_more_test_03,anim_more_test_04,anim_more_test_01,anim_cozmo_test_01,anim_cozmo_test_02,anim_cozmo_test_03,anim_cozmo_test_04,anim_cozmo_test_05,anim_more_test_01,anim_more_test_02,anim_more_test_03,anim_more_test_04,anim_more_test_01'; 13 | triggers_raw = 'TestTriggerClass01,TestTriggrClass02,TestTriggerClass03,TestTriggerClass04,TestTriggerClass05,TestTriggerClass06,TestTriggerClass07'; 14 | behaviors_raw = 'InCaseYouDidNotNotice,ThisIsTestData:,CozmoIsNotConnected'; 15 | } 16 | 17 | stringSorting = function (str) { 18 | var array = str.split(','); 19 | array.sort(); 20 | return array 21 | }; 22 | 23 | var animations = { 24 | name: 'animations', 25 | list: stringSorting(anims_raw), 26 | str: '', 27 | active: 0, 28 | info: 'A list of animations. Pick an animation from the list and click the play button to animate Cozmo.

    For copying to clipboard:
    A.) use the copy button, OR
    B.) select a line of text and press Ctrl-C'}; 29 | var triggers = { 30 | name: 'triggers', 31 | list: stringSorting(triggers_raw), 32 | str: '', 33 | active: 0, 34 | info: 'A list of animation sets. This differs from the Animation list in that each time you press the same animation from the list, it may play out slightly different. This offers variety: it makes Cozmo seem more alive if you use triggers in your own code.

    For copying to clipboard:
    A.) use the copy button, OR
    B.) select a line of text and press Ctrl-C'}; 35 | var behaviors = { 36 | name: 'behaviors', 37 | list: stringSorting(behaviors_raw), 38 | str: '', 39 | active: 0, 40 | info: 'A list of behaviors. Behaviors represent a task that Cozmo may perform for an indefinite amount of time. Animation Explorer limits active time to 30 seconds. You can abort by pressing the \'stop\' button.

    For copying to clipboard:
    A.) use the copy button, OR
    B.) select a line of text and press Ctrl-C'}; 41 | 42 | var listArray = [animations, triggers, behaviors]; 43 | 44 | var listButtons = '' + 45 | '
    ' + 46 | // '' + 47 | '' + 48 | '' + 49 | '
    '; 50 | 51 | // sending and receiving json from server 52 | getHttpRequest = function (url, dataSet) { 53 | if(url != 'toggle_pose' && !isRunning) { 54 | checkRunning(true); 55 | } 56 | var xhr = new XMLHttpRequest(); 57 | xhr.onreadystatechange = function() { 58 | if (xhr.readyState == XMLHttpRequest.DONE) { 59 | if(isRunning) { 60 | if (currentTab == 'behaviors'){ 61 | stopTimeOut = setTimeout(function(){ 62 | if(isRunning && currentTab == 'behaviors') { 63 | console.log('stopTimeOut triggered'); 64 | getHttpRequest('stop', ''); 65 | checkRunning(false); 66 | } 67 | }, 68 | 30000 // run behavior for 30 seconds 69 | ); 70 | } else { 71 | checkRunning(false); 72 | } 73 | } 74 | } 75 | }; 76 | xhr.open('POST', url, true); 77 | xhr.send(JSON.stringify(dataSet)); 78 | }; 79 | 80 | // while running (or not) toggle elements 81 | checkRunning = function (bool) { 82 | console.log('checkRunning: ' + bool); 83 | isRunning = bool; 84 | 85 | if (bool){ 86 | $('.item-list').addClass('greyed-out'); 87 | $('#list-buttons').parent().addClass('bg-playing'); 88 | $('#c-play').show(); 89 | $('#c-eyes').hide(); 90 | $('#btn-play-stop').addClass('red'); 91 | if(currentTab == 'behaviors') { 92 | $('#btn-play-stop').addClass('fa-stop'); 93 | } else { 94 | $('#btn-play-stop').hide(); 95 | } 96 | $('.bg-just-played').removeClass('bg-just-played'); 97 | isPlayingListID = $('#list-buttons').parent(); 98 | } else { 99 | if(isPlayingListID != null) { 100 | isPlayingListID.toggleClass('bg-playing bg-just-played'); 101 | isPlayingListID = null; 102 | } 103 | $('.item-list').removeClass('greyed-out'); 104 | $('#c-play').hide(); 105 | $('#c-eyes').show(); 106 | if(currentTab == 'behaviors') { 107 | $('#btn-play-stop').removeClass('fa-stop'); 108 | } else { 109 | $('#btn-play-stop').show(); 110 | } 111 | if($('#list-buttons').length && $('#list-buttons').parent().is(':hover')){ 112 | $('#btn-play-stop').removeClass('red'); 113 | } else { 114 | $('#list-buttons').remove(); 115 | if(tempListID != null){ 116 | createListButtons(tempListID); 117 | } 118 | } 119 | } 120 | }; 121 | 122 | // store text value in OS clipboard 123 | function copyTextToClipboard(text) { 124 | var textArea = document.createElement('textarea'); 125 | textArea.value = text; 126 | document.body.appendChild(textArea); 127 | textArea.select(); 128 | 129 | try { 130 | document.execCommand('copy'); 131 | } catch (err) { 132 | console.log('ERROR: unable to copy text to clipboard'); 133 | } 134 | 135 | document.body.removeChild(textArea); 136 | } 137 | 138 | function loadArray(){ 139 | var array = []; 140 | if (currentTab == 'animations'){ 141 | array = animations; 142 | } else if (currentTab == 'triggers'){ 143 | array = triggers; 144 | } else if (currentTab == 'behaviors'){ 145 | array = behaviors; 146 | } 147 | return array 148 | } 149 | 150 | // hide list item if string from search box does not match list item text 151 | function matchCharacters(str){ 152 | var array = loadArray(); 153 | 154 | for(var i = 0; i < array.list.length; i++){ 155 | var elem = $('#li_' + i); 156 | if (array.list[i].toLowerCase().indexOf(str.toLowerCase()) != -1){ 157 | elem.show(); 158 | } else { 159 | elem.hide(); 160 | } 161 | } 162 | console.log('matching character(s): ' + str); 163 | showClear(str); 164 | } 165 | 166 | // show clear button when search box value is not empty 167 | function showClear(str){ 168 | if(str == ''){ 169 | $('.filterclear').css('visibility', 'hidden'); 170 | $('.filtersubmit').css('visibility', 'visible'); 171 | } else { 172 | $('.filterclear').css('visibility', 'visible'); 173 | $('.filtersubmit').css('visibility', 'hidden'); 174 | } 175 | } 176 | 177 | // create list 178 | function createList(array){ 179 | for (var i =0; i < array.list.length; i++) { 180 | $('#ul-' + array.name).append('
  • ' + array.list[i] + '
    • '); 181 | var li = $('#li_' + i); 182 | li.mouseenter(function () { 183 | if(!isRunning) { 184 | if ($('#list-buttons').length) { 185 | $('#list-buttons').remove(); 186 | } 187 | tempListID = $(this); 188 | createListButtons($(this)); 189 | } 190 | }); 191 | li.mouseleave(function () { 192 | tempListID = null; 193 | if($('#list-buttons').length && !isRunning) { 194 | $('#list-buttons').remove(); 195 | } 196 | }) 197 | } 198 | } 199 | 200 | // create buttons for list item 201 | function createListButtons(item){ 202 | if(!isRunning && !isMouseDown) { 203 | item.append(listButtons); 204 | $('#btn-play-stop').click(function () { 205 | var array = loadArray(); 206 | if(!isRunning) { 207 | getHttpRequest('play_' + array.name.substr(0, array.name.length - 1), $('#list-buttons').parent().text()); // start specific animation 208 | }else { 209 | getHttpRequest('stop', ''); // abort action 210 | checkRunning(false); 211 | } 212 | }); 213 | $('#btn-copy-clipboard').click(function () { 214 | var textObj = $('#list-buttons').parent().children(":first"); 215 | var str = textObj.text(); 216 | textObj.text('copied to clipboard'); 217 | //parent.mouseenter(); // this behaves quirky 218 | copyTextToClipboard(str); 219 | console.log(str); 220 | setTimeout(function() { 221 | textObj.text(str); 222 | //parent.mouseenter(); // this behaves quirky 223 | }, 600); 224 | }); 225 | $('#btn-explanation').click(function () { 226 | /* 227 | if (!$('#copied').length) { 228 | var str = $('#list-buttons').parent().text(); 229 | copyTextToClipboard(str); 230 | $('#list-buttons').parent().append('
    copied to clipboard
    '); 231 | console.log(str); 232 | setTimeout(function () { 233 | $('#copied').remove(); 234 | }, 600); 235 | } 236 | */ 237 | }) 238 | } 239 | } 240 | 241 | function initSearch() { 242 | // evaluate search input value after every entered key 243 | $('.search').bind('input', function (){ 244 | var str = $('.search').val(); 245 | matchCharacters(str); 246 | }); 247 | 248 | // clear search box value 249 | $('.filterclear').click(function (){ 250 | $('.search').val(''); 251 | matchCharacters(''); 252 | }); 253 | } 254 | 255 | function createGroupButtons() { 256 | // create group buttons 257 | var groupButtons = []; 258 | 259 | for (var j=0; j < animations.list.length; j++){ 260 | var str = animations.list[j]; 261 | var n = str.indexOf("_"); 262 | str = str.substr(n+1); 263 | n = str.indexOf("_"); 264 | str = str.substr(0, n); 265 | 266 | var match = false; 267 | for(var k = 0; k < groupButtons.length;k++){ 268 | if(groupButtons[k] == str){ 269 | match = true; 270 | break 271 | } 272 | } 273 | if(!match && animations.list[j].indexOf('anim_') > -1){ 274 | groupButtons[groupButtons.length] = str; 275 | $('#search-btns').append(''); 276 | $('#btn-' + str).click(function(){ 277 | if (!isRunning) { 278 | var str = $(this).text(); 279 | if ($('.search').val() == str) { 280 | str = ''; 281 | } 282 | $('.search').val(str); 283 | matchCharacters(str); 284 | } 285 | }) 286 | } 287 | } 288 | } 289 | 290 | function createAccordeon() { 291 | var list = {}; 292 | for (var i = 0; i < listArray.length; i++){ 293 | if (listArray[i].name == currentTab){ 294 | list = listArray[i]; 295 | $('#accordion p').append(list.info); 296 | } 297 | } 298 | $('#accordion').accordion({ 299 | collapsible: true, 300 | activate: function(event, ui){ 301 | ui.oldHeader.removeClass('box-shadow'); 302 | list.active = $(this).accordion( "option", "active" ); 303 | }, 304 | active: list.active 305 | }); 306 | } 307 | 308 | var waitForFinalEvent = (function () { 309 | var timers = {}; 310 | return function (callback, ms, uniqueId) { 311 | if (!uniqueId) { 312 | uniqueId = 'Do not call this twice without a uniqueId'; 313 | } 314 | if (timers[uniqueId]) { 315 | clearTimeout (timers[uniqueId]); 316 | } 317 | timers[uniqueId] = setTimeout(callback, ms); 318 | }; 319 | })(); 320 | 321 | 322 | /*** INITIALIZATION ***/ 323 | $( function () { 324 | // creating list of cozmo animations (active tab) 325 | createList(animations); 326 | createAccordeon(); 327 | createGroupButtons(); 328 | initSearch(); 329 | 330 | // enable clipboard copy button 331 | $('#btn-copy').click(function(){ 332 | copyTextToClipboard($('#mono').text()); 333 | $('#status').text('copied to clipboard'); 334 | $('#mono').effect( 'transfer', {to: '#btn-copy', className: 'ui-effects-transfer'}, 300); 335 | $(this).css({'background-color': '#05BE00', 'color': '#ffffff'}); 336 | }); 337 | 338 | $( "#tabs" ).tabs({ 339 | heightStyle: 'fill', 340 | beforeActivate: function(event, ui){ 341 | if(isRunning){ 342 | getHttpRequest('stop', ''); // abort action 343 | checkRunning(false); 344 | } 345 | for (var i = 0; i < listArray.length; i++){ 346 | if (listArray[i].name == currentTab){ 347 | listArray[i].str = $('.search').val(); 348 | } 349 | } 350 | var idStr = ui.newTab.attr('aria-controls'); 351 | var oldStr = ui.oldTab.attr('aria-controls') 352 | var id = Number(idStr.substr(9)); 353 | var name = listArray[id].name; 354 | currentTab = name; 355 | $('#' + oldStr).html(''); 356 | $('#' + idStr).html('' + 357 | '
    ' + 358 | '
    ' + 359 | '' + 360 | '' + 361 | '
    ' + 362 | '
      ' + 363 | '
      ' + 364 | '
      ' + 365 | '
      ' + 366 | '

      Info

      ' + 367 | '
      ' + 368 | '

      ' + 369 | '
      ' + 370 | '
      ' + 371 | '
      ' + 372 | '
      ' + 373 | '
      ' 374 | ); 375 | setTimeout(function () { 376 | createAccordeon(); 377 | }, 50); 378 | createList(listArray[id]); 379 | if (currentTab == 'animations'){ 380 | createGroupButtons(); 381 | } 382 | initSearch(); 383 | for (var j = 0; j < listArray.length; j++){ 384 | if (listArray[j].name == currentTab){ 385 | var str = listArray[j].str; 386 | $('.search').val(str); 387 | matchCharacters(str); 388 | } 389 | } 390 | }, 391 | classes: { 392 | 'ui-tabs-nav': 'tabs-nav', 393 | 'ui-tabs': 'tabs' 394 | } 395 | }); 396 | 397 | // global mousedown detection: to prevent list-buttons from being created while mouse is pressed 398 | $('body').mousedown(function () { 399 | isMouseDown = true; 400 | }); 401 | 402 | $('body').mouseup(function () { 403 | isMouseDown = false; 404 | }); 405 | 406 | $('#tablist').removeClass('ui-corner-all'); 407 | 408 | $('#checkbox-1').bind('change', function(){ 409 | getHttpRequest('toggle_pose', ''); 410 | }); 411 | 412 | $(window).resize(function () { 413 | waitForFinalEvent(function(){ 414 | $('.flex-cstm').outerHeight($(window).height() - $('.flex-cstm').offset().top); 415 | $('.ul-list').outerHeight($(window).height() - $('.ul-list').offset().top); 416 | }, 500, 'uniqueID'); 417 | }); 418 | 419 | $(window).resize(); 420 | 421 | }); 422 | -------------------------------------------------------------------------------- /static/css/jquery-ui.css: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.12.1 - 2017-01-10 2 | * http://jqueryui.com 3 | * Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css 4 | * To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=custom-theme&bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=&bgImgOpacityHeader=&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23aaaaaa&iconColorError=%23cc0000&fcError=%235f3f3f&borderColorError=%23f1a899&bgTextureError=flat&bgColorError=%23fddfdf&iconColorHighlight=%23777620&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgTextureHighlight=flat&bgColorHighlight=%23fffa90&iconColorActive=%23ffffff&fcActive=%23ffffff&borderColorActive=%23ffffff&bgTextureActive=flat&bgColorActive=%23828282&iconColorHover=%23555555&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgTextureHover=flat&bgColorHover=%23ededed&iconColorDefault=%23777777&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgTextureDefault=flat&bgColorDefault=%23f6f6f6&iconColorContent=%23444444&fcContent=%23333333&borderColorContent=%23dddddd&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23444444&fcHeader=%23333333&borderColorHeader=%23dddddd&bgTextureHeader=flat&bgColorHeader=%23e9e9e9&cornerRadius=0px&fwDefault=bold&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif 5 | * Copyright jQuery Foundation and other contributors; Licensed MIT */ 6 | 7 | .ui-draggable-handle { 8 | -ms-touch-action: none; 9 | touch-action: none; 10 | } 11 | /* Layout helpers 12 | ----------------------------------*/ 13 | .ui-helper-hidden { 14 | display: none; 15 | } 16 | .ui-helper-hidden-accessible { 17 | border: 0; 18 | clip: rect(0 0 0 0); 19 | height: 1px; 20 | margin: -1px; 21 | overflow: hidden; 22 | padding: 0; 23 | position: absolute; 24 | width: 1px; 25 | } 26 | .ui-helper-reset { 27 | margin: 0; 28 | padding: 0; 29 | border: 0; 30 | outline: 0; 31 | line-height: 1.3; 32 | text-decoration: none; 33 | font-size: 100%; 34 | list-style: none; 35 | } 36 | .ui-helper-clearfix:before, 37 | .ui-helper-clearfix:after { 38 | content: ""; 39 | display: table; 40 | border-collapse: collapse; 41 | } 42 | .ui-helper-clearfix:after { 43 | clear: both; 44 | } 45 | .ui-helper-zfix { 46 | width: 100%; 47 | height: 100%; 48 | top: 0; 49 | left: 0; 50 | position: absolute; 51 | opacity: 0; 52 | filter:Alpha(Opacity=0); /* support: IE8 */ 53 | } 54 | 55 | .ui-front { 56 | z-index: 100; 57 | } 58 | 59 | 60 | /* Interaction Cues 61 | ----------------------------------*/ 62 | .ui-state-disabled { 63 | cursor: default !important; 64 | pointer-events: none; 65 | } 66 | 67 | 68 | /* Icons 69 | ----------------------------------*/ 70 | .ui-icon { 71 | display: inline-block; 72 | vertical-align: middle; 73 | margin-top: -.25em; 74 | position: relative; 75 | text-indent: -99999px; 76 | overflow: hidden; 77 | background-repeat: no-repeat; 78 | } 79 | 80 | .ui-widget-icon-block { 81 | left: 50%; 82 | margin-left: -8px; 83 | display: block; 84 | } 85 | 86 | /* Misc visuals 87 | ----------------------------------*/ 88 | 89 | /* Overlays */ 90 | .ui-widget-overlay { 91 | position: fixed; 92 | top: 0; 93 | left: 0; 94 | width: 100%; 95 | height: 100%; 96 | } 97 | .ui-resizable { 98 | position: relative; 99 | } 100 | .ui-resizable-handle { 101 | position: absolute; 102 | font-size: 0.1px; 103 | display: block; 104 | -ms-touch-action: none; 105 | touch-action: none; 106 | } 107 | .ui-resizable-disabled .ui-resizable-handle, 108 | .ui-resizable-autohide .ui-resizable-handle { 109 | display: none; 110 | } 111 | .ui-resizable-n { 112 | cursor: n-resize; 113 | height: 7px; 114 | width: 100%; 115 | top: -5px; 116 | left: 0; 117 | } 118 | .ui-resizable-s { 119 | cursor: s-resize; 120 | height: 7px; 121 | width: 100%; 122 | bottom: -5px; 123 | left: 0; 124 | } 125 | .ui-resizable-e { 126 | cursor: e-resize; 127 | width: 7px; 128 | right: -5px; 129 | top: 0; 130 | height: 100%; 131 | } 132 | .ui-resizable-w { 133 | cursor: w-resize; 134 | width: 7px; 135 | left: -5px; 136 | top: 0; 137 | height: 100%; 138 | } 139 | .ui-resizable-se { 140 | cursor: se-resize; 141 | width: 12px; 142 | height: 12px; 143 | right: 1px; 144 | bottom: 1px; 145 | } 146 | .ui-resizable-sw { 147 | cursor: sw-resize; 148 | width: 9px; 149 | height: 9px; 150 | left: -5px; 151 | bottom: -5px; 152 | } 153 | .ui-resizable-nw { 154 | cursor: nw-resize; 155 | width: 9px; 156 | height: 9px; 157 | left: -5px; 158 | top: -5px; 159 | } 160 | .ui-resizable-ne { 161 | cursor: ne-resize; 162 | width: 9px; 163 | height: 9px; 164 | right: -5px; 165 | top: -5px; 166 | } 167 | .ui-selectable { 168 | -ms-touch-action: none; 169 | touch-action: none; 170 | } 171 | .ui-selectable-helper { 172 | position: absolute; 173 | z-index: 100; 174 | border: 1px dotted black; 175 | } 176 | .ui-sortable-handle { 177 | -ms-touch-action: none; 178 | touch-action: none; 179 | } 180 | .ui-accordion .ui-accordion-header { 181 | display: block; 182 | cursor: pointer; 183 | position: relative; 184 | margin: 0; 185 | padding: .5em .5em .5em .7em; 186 | font-size: 0.8em; 187 | background-color: rgba(0,0,0,0.1) !important; 188 | background-image: none !important; 189 | } 190 | 191 | .ui-accordion .ui-accordion-content { 192 | padding: 0 20px; 193 | margin: 0 4px 4px 4px; 194 | border-top: 1px solid rgba(0,0,0,0.1); 195 | border-bottom: 1px solid rgba(0,0,0,0.01); 196 | overflow: auto; 197 | height: auto; 198 | font-size: 0.8em; 199 | background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.03));; 200 | 201 | 202 | } 203 | .ui-autocomplete { 204 | position: absolute; 205 | top: 0; 206 | left: 0; 207 | cursor: default; 208 | } 209 | .ui-menu { 210 | list-style: none; 211 | padding: 0; 212 | margin: 0; 213 | display: block; 214 | outline: 0; 215 | } 216 | .ui-menu .ui-menu { 217 | position: absolute; 218 | } 219 | .ui-menu .ui-menu-item { 220 | margin: 0; 221 | cursor: pointer; 222 | /* support: IE10, see #8844 */ 223 | list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); 224 | } 225 | .ui-menu .ui-menu-item-wrapper { 226 | position: relative; 227 | padding: 3px 1em 3px .4em; 228 | } 229 | .ui-menu .ui-menu-divider { 230 | margin: 5px 0; 231 | height: 0; 232 | font-size: 0; 233 | line-height: 0; 234 | border-width: 1px 0 0 0; 235 | } 236 | .ui-menu .ui-state-focus, 237 | .ui-menu .ui-state-active { 238 | margin: -1px; 239 | } 240 | 241 | /* icon support */ 242 | .ui-menu-icons { 243 | position: relative; 244 | } 245 | .ui-menu-icons .ui-menu-item-wrapper { 246 | padding-left: 2em; 247 | } 248 | 249 | /* left-aligned */ 250 | .ui-menu .ui-icon { 251 | position: absolute; 252 | top: 0; 253 | bottom: 0; 254 | left: .2em; 255 | margin: auto 0; 256 | } 257 | 258 | /* right-aligned */ 259 | .ui-menu .ui-menu-icon { 260 | left: auto; 261 | right: 0; 262 | } 263 | .ui-button { 264 | padding: .4em 1em; 265 | display: inline-block; 266 | position: relative; 267 | line-height: normal; 268 | margin-right: .1em; 269 | cursor: pointer; 270 | vertical-align: middle; 271 | text-align: center; 272 | -webkit-user-select: none; 273 | -moz-user-select: none; 274 | -ms-user-select: none; 275 | user-select: none; 276 | 277 | /* Support: IE <= 11 */ 278 | overflow: visible; 279 | } 280 | 281 | .ui-button, 282 | .ui-button:link, 283 | .ui-button:visited, 284 | .ui-button:hover, 285 | .ui-button:active { 286 | text-decoration: none; 287 | } 288 | 289 | /* to make room for the icon, a width needs to be set here */ 290 | .ui-button-icon-only { 291 | width: 2em; 292 | box-sizing: border-box; 293 | text-indent: -9999px; 294 | white-space: nowrap; 295 | } 296 | 297 | /* no icon support for input elements */ 298 | input.ui-button.ui-button-icon-only { 299 | text-indent: 0; 300 | } 301 | 302 | /* button icon element(s) */ 303 | .ui-button-icon-only .ui-icon { 304 | position: absolute; 305 | top: 50%; 306 | left: 50%; 307 | margin-top: -8px; 308 | margin-left: -8px; 309 | } 310 | 311 | .ui-button.ui-icon-notext .ui-icon { 312 | padding: 0; 313 | width: 2.1em; 314 | height: 2.1em; 315 | text-indent: -9999px; 316 | white-space: nowrap; 317 | 318 | } 319 | 320 | input.ui-button.ui-icon-notext .ui-icon { 321 | width: auto; 322 | height: auto; 323 | text-indent: 0; 324 | white-space: normal; 325 | padding: .4em 1em; 326 | } 327 | 328 | /* workarounds */ 329 | /* Support: Firefox 5 - 40 */ 330 | input.ui-button::-moz-focus-inner, 331 | button.ui-button::-moz-focus-inner { 332 | border: 0; 333 | padding: 0; 334 | } 335 | .ui-controlgroup { 336 | vertical-align: middle; 337 | display: inline-block; 338 | } 339 | .ui-controlgroup > .ui-controlgroup-item { 340 | float: left; 341 | margin-left: 0; 342 | margin-right: 0; 343 | } 344 | .ui-controlgroup > .ui-controlgroup-item:focus, 345 | .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { 346 | z-index: 9991; 347 | } 348 | .ui-controlgroup-vertical > .ui-controlgroup-item { 349 | display: block; 350 | float: none; 351 | width: 100%; 352 | margin-top: 0; 353 | margin-bottom: 0; 354 | text-align: left; 355 | } 356 | .ui-controlgroup-vertical .ui-controlgroup-item { 357 | box-sizing: border-box; 358 | } 359 | .ui-controlgroup .ui-controlgroup-label { 360 | padding: .4em 1em; 361 | } 362 | .ui-controlgroup .ui-controlgroup-label span { 363 | font-size: 80%; 364 | } 365 | .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { 366 | border-left: none; 367 | } 368 | .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { 369 | border-top: none; 370 | } 371 | .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { 372 | border-right: none; 373 | } 374 | .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { 375 | border-bottom: none; 376 | } 377 | 378 | /* Spinner specific style fixes */ 379 | .ui-controlgroup-vertical .ui-spinner-input { 380 | 381 | /* Support: IE8 only, Android < 4.4 only */ 382 | width: 75%; 383 | width: calc( 100% - 2.4em ); 384 | } 385 | .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { 386 | border-top-style: solid; 387 | } 388 | 389 | .ui-checkboxradio-label .ui-icon-background { 390 | box-shadow: inset 1px 1px 1px #ccc; 391 | border-radius: .12em; 392 | border: none; 393 | } 394 | .ui-checkboxradio-radio-label .ui-icon-background { 395 | width: 16px; 396 | height: 16px; 397 | border-radius: 1em; 398 | overflow: visible; 399 | border: none; 400 | } 401 | .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, 402 | .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { 403 | background-image: none; 404 | width: 8px; 405 | height: 8px; 406 | border-width: 4px; 407 | border-style: solid; 408 | } 409 | .ui-checkboxradio-disabled { 410 | pointer-events: none; 411 | } 412 | .ui-datepicker { 413 | width: 17em; 414 | padding: .2em .2em 0; 415 | display: none; 416 | } 417 | .ui-datepicker .ui-datepicker-header { 418 | position: relative; 419 | padding: .2em 0; 420 | } 421 | .ui-datepicker .ui-datepicker-prev, 422 | .ui-datepicker .ui-datepicker-next { 423 | position: absolute; 424 | top: 2px; 425 | width: 1.8em; 426 | height: 1.8em; 427 | } 428 | .ui-datepicker .ui-datepicker-prev-hover, 429 | .ui-datepicker .ui-datepicker-next-hover { 430 | top: 1px; 431 | } 432 | .ui-datepicker .ui-datepicker-prev { 433 | left: 2px; 434 | } 435 | .ui-datepicker .ui-datepicker-next { 436 | right: 2px; 437 | } 438 | .ui-datepicker .ui-datepicker-prev-hover { 439 | left: 1px; 440 | } 441 | .ui-datepicker .ui-datepicker-next-hover { 442 | right: 1px; 443 | } 444 | .ui-datepicker .ui-datepicker-prev span, 445 | .ui-datepicker .ui-datepicker-next span { 446 | display: block; 447 | position: absolute; 448 | left: 50%; 449 | margin-left: -8px; 450 | top: 50%; 451 | margin-top: -8px; 452 | } 453 | .ui-datepicker .ui-datepicker-title { 454 | margin: 0 2.3em; 455 | line-height: 1.8em; 456 | text-align: center; 457 | } 458 | .ui-datepicker .ui-datepicker-title select { 459 | font-size: 1em; 460 | margin: 1px 0; 461 | } 462 | .ui-datepicker select.ui-datepicker-month, 463 | .ui-datepicker select.ui-datepicker-year { 464 | width: 45%; 465 | } 466 | .ui-datepicker table { 467 | width: 100%; 468 | font-size: .9em; 469 | border-collapse: collapse; 470 | margin: 0 0 .4em; 471 | } 472 | .ui-datepicker th { 473 | padding: .7em .3em; 474 | text-align: center; 475 | font-weight: bold; 476 | border: 0; 477 | } 478 | .ui-datepicker td { 479 | border: 0; 480 | padding: 1px; 481 | } 482 | .ui-datepicker td span, 483 | .ui-datepicker td a { 484 | display: block; 485 | padding: .2em; 486 | text-align: right; 487 | text-decoration: none; 488 | } 489 | .ui-datepicker .ui-datepicker-buttonpane { 490 | background-image: none; 491 | margin: .7em 0 0 0; 492 | padding: 0 .2em; 493 | border-left: 0; 494 | border-right: 0; 495 | border-bottom: 0; 496 | } 497 | .ui-datepicker .ui-datepicker-buttonpane button { 498 | float: right; 499 | margin: .5em .2em .4em; 500 | cursor: pointer; 501 | padding: .2em .6em .3em .6em; 502 | width: auto; 503 | overflow: visible; 504 | } 505 | .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { 506 | float: left; 507 | } 508 | 509 | /* with multiple calendars */ 510 | .ui-datepicker.ui-datepicker-multi { 511 | width: auto; 512 | } 513 | .ui-datepicker-multi .ui-datepicker-group { 514 | float: left; 515 | } 516 | .ui-datepicker-multi .ui-datepicker-group table { 517 | width: 95%; 518 | margin: 0 auto .4em; 519 | } 520 | .ui-datepicker-multi-2 .ui-datepicker-group { 521 | width: 50%; 522 | } 523 | .ui-datepicker-multi-3 .ui-datepicker-group { 524 | width: 33.3%; 525 | } 526 | .ui-datepicker-multi-4 .ui-datepicker-group { 527 | width: 25%; 528 | } 529 | .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, 530 | .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { 531 | border-left-width: 0; 532 | } 533 | .ui-datepicker-multi .ui-datepicker-buttonpane { 534 | clear: left; 535 | } 536 | .ui-datepicker-row-break { 537 | clear: both; 538 | width: 100%; 539 | font-size: 0; 540 | } 541 | 542 | /* RTL support */ 543 | .ui-datepicker-rtl { 544 | direction: rtl; 545 | } 546 | .ui-datepicker-rtl .ui-datepicker-prev { 547 | right: 2px; 548 | left: auto; 549 | } 550 | .ui-datepicker-rtl .ui-datepicker-next { 551 | left: 2px; 552 | right: auto; 553 | } 554 | .ui-datepicker-rtl .ui-datepicker-prev:hover { 555 | right: 1px; 556 | left: auto; 557 | } 558 | .ui-datepicker-rtl .ui-datepicker-next:hover { 559 | left: 1px; 560 | right: auto; 561 | } 562 | .ui-datepicker-rtl .ui-datepicker-buttonpane { 563 | clear: right; 564 | } 565 | .ui-datepicker-rtl .ui-datepicker-buttonpane button { 566 | float: left; 567 | } 568 | .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, 569 | .ui-datepicker-rtl .ui-datepicker-group { 570 | float: right; 571 | } 572 | .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, 573 | .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { 574 | border-right-width: 0; 575 | border-left-width: 1px; 576 | } 577 | 578 | /* Icons */ 579 | .ui-datepicker .ui-icon { 580 | display: block; 581 | text-indent: -99999px; 582 | overflow: hidden; 583 | background-repeat: no-repeat; 584 | left: .5em; 585 | top: .3em; 586 | } 587 | .ui-dialog { 588 | position: absolute; 589 | top: 0; 590 | left: 0; 591 | padding: .2em; 592 | outline: 0; 593 | } 594 | .ui-dialog .ui-dialog-titlebar { 595 | padding: .4em 1em; 596 | position: relative; 597 | } 598 | .ui-dialog .ui-dialog-title { 599 | float: left; 600 | margin: .1em 0; 601 | white-space: nowrap; 602 | width: 90%; 603 | overflow: hidden; 604 | text-overflow: ellipsis; 605 | } 606 | .ui-dialog .ui-dialog-titlebar-close { 607 | position: absolute; 608 | right: .3em; 609 | top: 50%; 610 | width: 20px; 611 | margin: -10px 0 0 0; 612 | padding: 1px; 613 | height: 20px; 614 | } 615 | .ui-dialog .ui-dialog-content { 616 | position: relative; 617 | border: 0; 618 | padding: .5em 1em; 619 | background: none; 620 | overflow: auto; 621 | } 622 | .ui-dialog .ui-dialog-buttonpane { 623 | text-align: left; 624 | border-width: 1px 0 0 0; 625 | background-image: none; 626 | margin-top: .5em; 627 | padding: .3em 1em .5em .4em; 628 | } 629 | .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 630 | float: right; 631 | } 632 | .ui-dialog .ui-dialog-buttonpane button { 633 | margin: .5em .4em .5em 0; 634 | cursor: pointer; 635 | } 636 | .ui-dialog .ui-resizable-n { 637 | height: 2px; 638 | top: 0; 639 | } 640 | .ui-dialog .ui-resizable-e { 641 | width: 2px; 642 | right: 0; 643 | } 644 | .ui-dialog .ui-resizable-s { 645 | height: 2px; 646 | bottom: 0; 647 | } 648 | .ui-dialog .ui-resizable-w { 649 | width: 2px; 650 | left: 0; 651 | } 652 | .ui-dialog .ui-resizable-se, 653 | .ui-dialog .ui-resizable-sw, 654 | .ui-dialog .ui-resizable-ne, 655 | .ui-dialog .ui-resizable-nw { 656 | width: 7px; 657 | height: 7px; 658 | } 659 | .ui-dialog .ui-resizable-se { 660 | right: 0; 661 | bottom: 0; 662 | } 663 | .ui-dialog .ui-resizable-sw { 664 | left: 0; 665 | bottom: 0; 666 | } 667 | .ui-dialog .ui-resizable-ne { 668 | right: 0; 669 | top: 0; 670 | } 671 | .ui-dialog .ui-resizable-nw { 672 | left: 0; 673 | top: 0; 674 | } 675 | .ui-draggable .ui-dialog-titlebar { 676 | cursor: move; 677 | } 678 | .ui-progressbar { 679 | height: 2em; 680 | text-align: left; 681 | overflow: hidden; 682 | } 683 | .ui-progressbar .ui-progressbar-value { 684 | margin: -1px; 685 | height: 100%; 686 | } 687 | .ui-progressbar .ui-progressbar-overlay { 688 | background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); 689 | height: 100%; 690 | filter: alpha(opacity=25); /* support: IE8 */ 691 | opacity: 0.25; 692 | } 693 | .ui-progressbar-indeterminate .ui-progressbar-value { 694 | background-image: none; 695 | } 696 | .ui-selectmenu-menu { 697 | padding: 0; 698 | margin: 0; 699 | position: absolute; 700 | top: 0; 701 | left: 0; 702 | display: none; 703 | } 704 | .ui-selectmenu-menu .ui-menu { 705 | overflow: auto; 706 | overflow-x: hidden; 707 | padding-bottom: 1px; 708 | } 709 | .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { 710 | font-size: 1em; 711 | font-weight: bold; 712 | line-height: 1.5; 713 | padding: 2px 0.4em; 714 | margin: 0.5em 0 0 0; 715 | height: auto; 716 | border: 0; 717 | } 718 | .ui-selectmenu-open { 719 | display: block; 720 | } 721 | .ui-selectmenu-text { 722 | display: block; 723 | margin-right: 20px; 724 | overflow: hidden; 725 | text-overflow: ellipsis; 726 | } 727 | .ui-selectmenu-button.ui-button { 728 | text-align: left; 729 | white-space: nowrap; 730 | width: 14em; 731 | } 732 | .ui-selectmenu-icon.ui-icon { 733 | float: right; 734 | margin-top: 0; 735 | } 736 | .ui-slider { 737 | position: relative; 738 | text-align: left; 739 | } 740 | .ui-slider .ui-slider-handle { 741 | position: absolute; 742 | z-index: 2; 743 | width: 1.2em; 744 | height: 1.2em; 745 | cursor: default; 746 | -ms-touch-action: none; 747 | touch-action: none; 748 | } 749 | .ui-slider .ui-slider-range { 750 | position: absolute; 751 | z-index: 1; 752 | font-size: .7em; 753 | display: block; 754 | border: 0; 755 | background-position: 0 0; 756 | } 757 | 758 | /* support: IE8 - See #6727 */ 759 | .ui-slider.ui-state-disabled .ui-slider-handle, 760 | .ui-slider.ui-state-disabled .ui-slider-range { 761 | filter: inherit; 762 | } 763 | 764 | .ui-slider-horizontal { 765 | height: .8em; 766 | } 767 | .ui-slider-horizontal .ui-slider-handle { 768 | top: -.3em; 769 | margin-left: -.6em; 770 | } 771 | .ui-slider-horizontal .ui-slider-range { 772 | top: 0; 773 | height: 100%; 774 | } 775 | .ui-slider-horizontal .ui-slider-range-min { 776 | left: 0; 777 | } 778 | .ui-slider-horizontal .ui-slider-range-max { 779 | right: 0; 780 | } 781 | 782 | .ui-slider-vertical { 783 | width: .8em; 784 | height: 100px; 785 | } 786 | .ui-slider-vertical .ui-slider-handle { 787 | left: -.3em; 788 | margin-left: 0; 789 | margin-bottom: -.6em; 790 | } 791 | .ui-slider-vertical .ui-slider-range { 792 | left: 0; 793 | width: 100%; 794 | } 795 | .ui-slider-vertical .ui-slider-range-min { 796 | bottom: 0; 797 | } 798 | .ui-slider-vertical .ui-slider-range-max { 799 | top: 0; 800 | } 801 | .ui-spinner { 802 | position: relative; 803 | display: inline-block; 804 | overflow: hidden; 805 | padding: 0; 806 | vertical-align: middle; 807 | } 808 | .ui-spinner-input { 809 | border: none; 810 | background: none; 811 | color: inherit; 812 | padding: .222em 0; 813 | margin: .2em 0; 814 | vertical-align: middle; 815 | margin-left: .4em; 816 | margin-right: 2em; 817 | } 818 | .ui-spinner-button { 819 | width: 1.6em; 820 | height: 50%; 821 | font-size: .5em; 822 | padding: 0; 823 | margin: 0; 824 | text-align: center; 825 | position: absolute; 826 | cursor: default; 827 | display: block; 828 | overflow: hidden; 829 | right: 0; 830 | } 831 | /* more specificity required here to override default borders */ 832 | .ui-spinner a.ui-spinner-button { 833 | border-top-style: none; 834 | border-bottom-style: none; 835 | border-right-style: none; 836 | } 837 | .ui-spinner-up { 838 | top: 0; 839 | } 840 | .ui-spinner-down { 841 | bottom: 0; 842 | } 843 | .ui-tabs { 844 | position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ 845 | padding: 2px 2px 0 2px; 846 | } 847 | .ui-tabs .ui-tabs-nav { 848 | margin: 0; 849 | padding: 0 0 0 1px; 850 | } 851 | .ui-tabs .ui-tabs-nav li { 852 | list-style: none; 853 | float: left; 854 | position: relative; 855 | top: 0; 856 | margin: 0px 4px 0 0; 857 | padding: 0; 858 | white-space: nowrap; 859 | border-bottom: 1px solid #cccccc; 860 | background-image: linear-gradient(to bottom, white, #eeeeee); 861 | } 862 | .ui-tabs .ui-tabs-nav .ui-tabs-anchor { 863 | float: left; 864 | padding: .5em 1em; 865 | text-decoration: none; 866 | } 867 | .ui-tabs .ui-tabs-nav li.ui-tabs-active { 868 | margin-bottom: -2px; 869 | padding-bottom: 2px; 870 | background-image: linear-gradient(to bottom, white, #cccccc); 871 | } 872 | 873 | .ui-tabs .ui-tabs-nav li:hover{ 874 | background-image: linear-gradient(to bottom, white, #cccccc); 875 | } 876 | 877 | .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, 878 | .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, 879 | .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { 880 | cursor: text; 881 | } 882 | .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { 883 | cursor: pointer; 884 | } 885 | .ui-tabs .ui-tabs-panel { 886 | border-width: 0; 887 | padding: 1em 1.4em; 888 | background: none; 889 | } 890 | .ui-tooltip { 891 | padding: 8px; 892 | position: absolute; 893 | z-index: 9992; 894 | max-width: 300px; 895 | text-align: left; 896 | font-size: 0.8em !important; 897 | background: #cccccc !important; 898 | color: #333333 !important; 899 | margin: -20px 0 0 0; 900 | } 901 | body .ui-tooltip { 902 | border-width: 2px; 903 | } 904 | 905 | /* Component containers 906 | ----------------------------------*/ 907 | .ui-widget { 908 | font-family: Arial,Helvetica,sans-serif; 909 | font-size: 1em; 910 | } 911 | .ui-widget .ui-widget { 912 | font-size: 1em; 913 | } 914 | .ui-widget input, 915 | .ui-widget select, 916 | .ui-widget textarea, 917 | .ui-widget button { 918 | font-family: Arial,Helvetica,sans-serif; 919 | font-size: 1em; 920 | } 921 | .ui-widget-content { 922 | background: #ffffff; 923 | color: #333333; 924 | } 925 | .ui-widget-content a { 926 | color: #333333; 927 | } 928 | .ui-widget-header { 929 | background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%); 930 | color: #333333; 931 | font-weight: bold; 932 | } 933 | .ui-widget-header a { 934 | color: #333333; 935 | } 936 | 937 | /* Interaction states 938 | ----------------------------------*/ 939 | .ui-state-default, 940 | .ui-widget-content .ui-state-default, 941 | .ui-widget-header .ui-state-default { 942 | background: #f6f6f6; 943 | font-weight: bold; 944 | color: #454545; 945 | } 946 | .ui-button, 947 | /* We use html here because we need a greater specificity to make sure disabled 948 | works properly when clicked or hovered */ 949 | html .ui-button.ui-state-disabled:hover, 950 | html .ui-button.ui-state-disabled:active { 951 | border: 1px solid #c5c5c5; 952 | background: #f6f6f6; 953 | color: #454545; 954 | font-size: 0.7em !important; 955 | } 956 | .ui-state-default a, 957 | .ui-state-default a:link, 958 | .ui-state-default a:visited, 959 | a.ui-button, 960 | a:link.ui-button, 961 | a:visited.ui-button, 962 | .ui-button { 963 | color: #454545; 964 | text-decoration: none; 965 | } 966 | .ui-state-hover, 967 | .ui-widget-content .ui-state-hover, 968 | .ui-widget-header .ui-state-hover, 969 | .ui-state-focus, 970 | .ui-widget-content .ui-state-focus, 971 | .ui-widget-header .ui-state-focus { 972 | background-image: linear-gradient(to bottom, white, #cccccc); 973 | font-weight: bold; 974 | color: #2b2b2b; 975 | } 976 | .ui-button:hover, 977 | .ui-button:focus { 978 | background: #ededed; 979 | color: #2b2b2b; 980 | } 981 | .ui-state-hover a, 982 | .ui-state-hover a:hover, 983 | .ui-state-hover a:link, 984 | .ui-state-hover a:visited, 985 | .ui-state-focus a, 986 | .ui-state-focus a:hover, 987 | .ui-state-focus a:link, 988 | .ui-state-focus a:visited, 989 | a.ui-button:hover, 990 | a.ui-button:focus { 991 | color: #2b2b2b; 992 | text-decoration: none; 993 | } 994 | .ui-visual-focus { 995 | box-shadow: 0 0 3px 1px rgb(94, 158, 214); 996 | } 997 | .ui-state-active, 998 | .ui-widget-content .ui-state-active, 999 | .ui-widget-header .ui-state-active { 1000 | background-image: linear-gradient(to bottom, white, #cccccc); 1001 | font-weight: bold; 1002 | color: #333333; 1003 | } 1004 | a.ui-button:active, 1005 | .ui-button:active, 1006 | .ui-button.ui-state-active:hover { 1007 | background: black; 1008 | color: white; 1009 | } 1010 | .ui-icon-background, 1011 | .ui-state-active .ui-icon-background { 1012 | border: #ffffff; 1013 | background-color: #333333; 1014 | } 1015 | .ui-state-active a, 1016 | .ui-state-active a:link, 1017 | .ui-state-active a:visited { 1018 | text-decoration: none; 1019 | } 1020 | 1021 | /* Interaction Cues 1022 | ----------------------------------*/ 1023 | .ui-state-highlight, 1024 | .ui-widget-content .ui-state-highlight, 1025 | .ui-widget-header .ui-state-highlight { 1026 | border: 1px solid #dad55e; 1027 | background: #fffa90; 1028 | color: #777620; 1029 | } 1030 | .ui-state-checked { 1031 | border: 1px solid #dad55e; 1032 | background: #fffa90; 1033 | } 1034 | .ui-state-highlight a, 1035 | .ui-widget-content .ui-state-highlight a, 1036 | .ui-widget-header .ui-state-highlight a { 1037 | color: #777620; 1038 | } 1039 | .ui-state-error, 1040 | .ui-widget-content .ui-state-error, 1041 | .ui-widget-header .ui-state-error { 1042 | border: 1px solid #f1a899; 1043 | background: #fddfdf; 1044 | color: #5f3f3f; 1045 | } 1046 | .ui-state-error a, 1047 | .ui-widget-content .ui-state-error a, 1048 | .ui-widget-header .ui-state-error a { 1049 | color: #5f3f3f; 1050 | } 1051 | .ui-state-error-text, 1052 | .ui-widget-content .ui-state-error-text, 1053 | .ui-widget-header .ui-state-error-text { 1054 | color: #5f3f3f; 1055 | } 1056 | .ui-priority-primary, 1057 | .ui-widget-content .ui-priority-primary, 1058 | .ui-widget-header .ui-priority-primary { 1059 | font-weight: bold; 1060 | } 1061 | .ui-priority-secondary, 1062 | .ui-widget-content .ui-priority-secondary, 1063 | .ui-widget-header .ui-priority-secondary { 1064 | opacity: .7; 1065 | filter:Alpha(Opacity=70); /* support: IE8 */ 1066 | font-weight: normal; 1067 | } 1068 | .ui-state-disabled, 1069 | .ui-widget-content .ui-state-disabled, 1070 | .ui-widget-header .ui-state-disabled { 1071 | opacity: .35; 1072 | filter:Alpha(Opacity=35); /* support: IE8 */ 1073 | background-image: none; 1074 | } 1075 | .ui-state-disabled .ui-icon { 1076 | filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ 1077 | } 1078 | 1079 | /* Icons 1080 | ----------------------------------*/ 1081 | 1082 | /* states and images */ 1083 | .ui-icon { 1084 | width: 16px; 1085 | height: 16px; 1086 | background-color: #333333; 1087 | border-radius: 10px; 1088 | } 1089 | .ui-icon, 1090 | .ui-widget-content .ui-icon { 1091 | background-image: url("images/ui-icons_ffffff_256x240.png"); 1092 | } 1093 | .ui-widget-header .ui-icon { 1094 | background-image: url("images/ui-icons_444444_256x240.png"); 1095 | } 1096 | .ui-state-hover .ui-icon, 1097 | .ui-state-focus .ui-icon, 1098 | .ui-button:hover .ui-icon, 1099 | .ui-button:focus .ui-icon { 1100 | background-image: url("images/ui-icons_ffffff_256x240.png"); 1101 | } 1102 | .ui-state-active .ui-icon, 1103 | .ui-button:active .ui-icon { 1104 | background-image: url("images/ui-icons_ffffff_256x240.png"); 1105 | } 1106 | .ui-state-highlight .ui-icon, 1107 | .ui-button .ui-state-highlight.ui-icon { 1108 | background-image: url("images/ui-icons_777620_256x240.png"); 1109 | } 1110 | .ui-state-error .ui-icon, 1111 | .ui-state-error-text .ui-icon { 1112 | background-image: url("images/ui-icons_cc0000_256x240.png"); 1113 | } 1114 | .ui-button .ui-icon { 1115 | background-image: url("images/ui-icons_777777_256x240.png"); 1116 | } 1117 | 1118 | /* positioning */ 1119 | .ui-icon-blank { background-position: 16px 16px; } 1120 | .ui-icon-caret-1-n { background-position: 0 0; } 1121 | .ui-icon-caret-1-ne { background-position: -16px 0; } 1122 | .ui-icon-caret-1-e { background-position: -32px 0; } 1123 | .ui-icon-caret-1-se { background-position: -48px 0; } 1124 | .ui-icon-caret-1-s { background-position: -65px 0; } 1125 | .ui-icon-caret-1-sw { background-position: -80px 0; } 1126 | .ui-icon-caret-1-w { background-position: -96px 0; } 1127 | .ui-icon-caret-1-nw { background-position: -112px 0; } 1128 | .ui-icon-caret-2-n-s { background-position: -128px 0; } 1129 | .ui-icon-caret-2-e-w { background-position: -144px 0; } 1130 | .ui-icon-triangle-1-n { background-position: 0 -16px; } 1131 | .ui-icon-triangle-1-ne { background-position: -16px -16px; } 1132 | .ui-icon-triangle-1-e { background-position: -33px -16px; } 1133 | .ui-icon-triangle-1-se { background-position: -48px -16px; } 1134 | .ui-icon-triangle-1-s { background-position: -65px -15px; } 1135 | .ui-icon-triangle-1-sw { background-position: -80px -16px; } 1136 | .ui-icon-triangle-1-w { background-position: -96px -16px; } 1137 | .ui-icon-triangle-1-nw { background-position: -112px -16px; } 1138 | .ui-icon-triangle-2-n-s { background-position: -128px -16px; } 1139 | .ui-icon-triangle-2-e-w { background-position: -144px -16px; } 1140 | .ui-icon-arrow-1-n { background-position: 0 -32px; } 1141 | .ui-icon-arrow-1-ne { background-position: -16px -32px; } 1142 | .ui-icon-arrow-1-e { background-position: -32px -32px; } 1143 | .ui-icon-arrow-1-se { background-position: -48px -32px; } 1144 | .ui-icon-arrow-1-s { background-position: -65px -32px; } 1145 | .ui-icon-arrow-1-sw { background-position: -80px -32px; } 1146 | .ui-icon-arrow-1-w { background-position: -96px -32px; } 1147 | .ui-icon-arrow-1-nw { background-position: -112px -32px; } 1148 | .ui-icon-arrow-2-n-s { background-position: -128px -32px; } 1149 | .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } 1150 | .ui-icon-arrow-2-e-w { background-position: -160px -32px; } 1151 | .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } 1152 | .ui-icon-arrowstop-1-n { background-position: -192px -32px; } 1153 | .ui-icon-arrowstop-1-e { background-position: -208px -32px; } 1154 | .ui-icon-arrowstop-1-s { background-position: -224px -32px; } 1155 | .ui-icon-arrowstop-1-w { background-position: -240px -32px; } 1156 | .ui-icon-arrowthick-1-n { background-position: 1px -48px; } 1157 | .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } 1158 | .ui-icon-arrowthick-1-e { background-position: -32px -48px; } 1159 | .ui-icon-arrowthick-1-se { background-position: -48px -48px; } 1160 | .ui-icon-arrowthick-1-s { background-position: -64px -48px; } 1161 | .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } 1162 | .ui-icon-arrowthick-1-w { background-position: -96px -48px; } 1163 | .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } 1164 | .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } 1165 | .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } 1166 | .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } 1167 | .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } 1168 | .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } 1169 | .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } 1170 | .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } 1171 | .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } 1172 | .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } 1173 | .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } 1174 | .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } 1175 | .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } 1176 | .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } 1177 | .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } 1178 | .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } 1179 | .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } 1180 | .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } 1181 | .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } 1182 | .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } 1183 | .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } 1184 | .ui-icon-arrow-4 { background-position: 0 -80px; } 1185 | .ui-icon-arrow-4-diag { background-position: -16px -80px; } 1186 | .ui-icon-extlink { background-position: -32px -80px; } 1187 | .ui-icon-newwin { background-position: -48px -80px; } 1188 | .ui-icon-refresh { background-position: -64px -80px; } 1189 | .ui-icon-shuffle { background-position: -80px -80px; } 1190 | .ui-icon-transfer-e-w { background-position: -96px -80px; } 1191 | .ui-icon-transferthick-e-w { background-position: -112px -80px; } 1192 | .ui-icon-folder-collapsed { background-position: 0 -96px; } 1193 | .ui-icon-folder-open { background-position: -16px -96px; } 1194 | .ui-icon-document { background-position: -32px -96px; } 1195 | .ui-icon-document-b { background-position: -48px -96px; } 1196 | .ui-icon-note { background-position: -64px -96px; } 1197 | .ui-icon-mail-closed { background-position: -80px -96px; } 1198 | .ui-icon-mail-open { background-position: -96px -96px; } 1199 | .ui-icon-suitcase { background-position: -112px -96px; } 1200 | .ui-icon-comment { background-position: -128px -96px; } 1201 | .ui-icon-person { background-position: -144px -96px; } 1202 | .ui-icon-print { background-position: -160px -96px; } 1203 | .ui-icon-trash { background-position: -176px -96px; } 1204 | .ui-icon-locked { background-position: -192px -96px; } 1205 | .ui-icon-unlocked { background-position: -208px -96px; } 1206 | .ui-icon-bookmark { background-position: -224px -96px; } 1207 | .ui-icon-tag { background-position: -240px -96px; } 1208 | .ui-icon-home { background-position: 0 -112px; } 1209 | .ui-icon-flag { background-position: -16px -112px; } 1210 | .ui-icon-calendar { background-position: -32px -112px; } 1211 | .ui-icon-cart { background-position: -48px -112px; } 1212 | .ui-icon-pencil { background-position: -64px -112px; } 1213 | .ui-icon-clock { background-position: -80px -112px; } 1214 | .ui-icon-disk { background-position: -96px -112px; } 1215 | .ui-icon-calculator { background-position: -112px -112px; } 1216 | .ui-icon-zoomin { background-position: -128px -112px; } 1217 | .ui-icon-zoomout { background-position: -144px -112px; } 1218 | .ui-icon-search { background-position: -160px -112px; } 1219 | .ui-icon-wrench { background-position: -176px -112px; } 1220 | .ui-icon-gear { background-position: -192px -112px; } 1221 | .ui-icon-heart { background-position: -208px -112px; } 1222 | .ui-icon-star { background-position: -224px -112px; } 1223 | .ui-icon-link { background-position: -240px -112px; } 1224 | .ui-icon-cancel { background-position: 0 -128px; } 1225 | .ui-icon-plus { background-position: -16px -128px; } 1226 | .ui-icon-plusthick { background-position: -32px -128px; } 1227 | .ui-icon-minus { background-position: -48px -128px; } 1228 | .ui-icon-minusthick { background-position: -64px -128px; } 1229 | .ui-icon-close { background-position: -80px -128px; } 1230 | .ui-icon-closethick { background-position: -96px -128px; } 1231 | .ui-icon-key { background-position: -112px -128px; } 1232 | .ui-icon-lightbulb { background-position: -128px -128px; } 1233 | .ui-icon-scissors { background-position: -144px -128px; } 1234 | .ui-icon-clipboard { background-position: -160px -128px; } 1235 | .ui-icon-copy { background-position: -176px -128px; } 1236 | .ui-icon-contact { background-position: -192px -128px; } 1237 | .ui-icon-image { background-position: -208px -128px; } 1238 | .ui-icon-video { background-position: -224px -128px; } 1239 | .ui-icon-script { background-position: -240px -128px; } 1240 | .ui-icon-alert { background-position: 0 -144px; } 1241 | .ui-icon-info { background-position: -16px -144px; } 1242 | .ui-icon-notice { background-position: -32px -144px; } 1243 | .ui-icon-help { background-position: -48px -144px; } 1244 | .ui-icon-check { background-position: -64px -144px; } 1245 | .ui-icon-bullet { background-position: -80px -144px; } 1246 | .ui-icon-radio-on { background-position: -96px -144px; } 1247 | .ui-icon-radio-off { background-position: -112px -144px; } 1248 | .ui-icon-pin-w { background-position: -128px -144px; } 1249 | .ui-icon-pin-s { background-position: -144px -144px; } 1250 | .ui-icon-play { background-position: 0 -160px; } 1251 | .ui-icon-pause { background-position: -16px -160px; } 1252 | .ui-icon-seek-next { background-position: -32px -160px; } 1253 | .ui-icon-seek-prev { background-position: -48px -160px; } 1254 | .ui-icon-seek-end { background-position: -64px -160px; } 1255 | .ui-icon-seek-start { background-position: -80px -160px; } 1256 | /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ 1257 | .ui-icon-seek-first { background-position: -80px -160px; } 1258 | .ui-icon-stop { background-position: -96px -160px; } 1259 | .ui-icon-eject { background-position: -112px -160px; } 1260 | .ui-icon-volume-off { background-position: -128px -160px; } 1261 | .ui-icon-volume-on { background-position: -144px -160px; } 1262 | .ui-icon-power { background-position: 0 -176px; } 1263 | .ui-icon-signal-diag { background-position: -16px -176px; } 1264 | .ui-icon-signal { background-position: -32px -176px; } 1265 | .ui-icon-battery-0 { background-position: -48px -176px; } 1266 | .ui-icon-battery-1 { background-position: -64px -176px; } 1267 | .ui-icon-battery-2 { background-position: -80px -176px; } 1268 | .ui-icon-battery-3 { background-position: -96px -176px; } 1269 | .ui-icon-circle-plus { background-position: 0 -192px; } 1270 | .ui-icon-circle-minus { background-position: -16px -192px; } 1271 | .ui-icon-circle-close { background-position: -32px -192px; } 1272 | .ui-icon-circle-triangle-e { background-position: -48px -192px; } 1273 | .ui-icon-circle-triangle-s { background-position: -64px -192px; } 1274 | .ui-icon-circle-triangle-w { background-position: -80px -192px; } 1275 | .ui-icon-circle-triangle-n { background-position: -96px -192px; } 1276 | .ui-icon-circle-arrow-e { background-position: -112px -192px; } 1277 | .ui-icon-circle-arrow-s { background-position: -128px -192px; } 1278 | .ui-icon-circle-arrow-w { background-position: -144px -192px; } 1279 | .ui-icon-circle-arrow-n { background-position: -160px -192px; } 1280 | .ui-icon-circle-zoomin { background-position: -176px -192px; } 1281 | .ui-icon-circle-zoomout { background-position: -192px -192px; } 1282 | .ui-icon-circle-check { background-position: -208px -192px; } 1283 | .ui-icon-circlesmall-plus { background-position: 0 -208px; } 1284 | .ui-icon-circlesmall-minus { background-position: -16px -208px; } 1285 | .ui-icon-circlesmall-close { background-position: -32px -208px; } 1286 | .ui-icon-squaresmall-plus { background-position: -48px -208px; } 1287 | .ui-icon-squaresmall-minus { background-position: -64px -208px; } 1288 | .ui-icon-squaresmall-close { background-position: -80px -208px; } 1289 | .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } 1290 | .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } 1291 | .ui-icon-grip-solid-vertical { background-position: -32px -224px; } 1292 | .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } 1293 | .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } 1294 | .ui-icon-grip-diagonal-se { background-position: -80px -224px; } 1295 | 1296 | 1297 | /* Misc visuals 1298 | ----------------------------------*/ 1299 | 1300 | /* Corner radius */ 1301 | .ui-corner-all, 1302 | .ui-corner-top, 1303 | .ui-corner-left, 1304 | .ui-corner-tl { 1305 | border-top-left-radius: 0px; 1306 | } 1307 | .ui-corner-all, 1308 | .ui-corner-top, 1309 | .ui-corner-right, 1310 | .ui-corner-tr { 1311 | border-top-right-radius: 0px; 1312 | } 1313 | .ui-corner-all, 1314 | .ui-corner-bottom, 1315 | .ui-corner-left, 1316 | .ui-corner-bl { 1317 | border-bottom-left-radius: 0px; 1318 | } 1319 | .ui-corner-all, 1320 | .ui-corner-bottom, 1321 | .ui-corner-right, 1322 | .ui-corner-br { 1323 | border-bottom-right-radius: 0px; 1324 | } 1325 | 1326 | .ui-button { 1327 | border-radius: 4px; 1328 | } 1329 | 1330 | /* Overlays */ 1331 | .ui-widget-overlay { 1332 | background: #aaaaaa; 1333 | opacity: .3; 1334 | filter: Alpha(Opacity=30); /* support: IE8 */ 1335 | } 1336 | .ui-widget-shadow { 1337 | /*-webkit-box-shadow: 0px 0px 5px #666666;*/ 1338 | /*box-shadow: 0px 0px 5px #666666;*/ 1339 | } 1340 | 1341 | 1342 | --------------------------------------------------------------------------------