iobroker.vis
Version:
Graphical user interface for iobroker.
822 lines (797 loc) • 70.1 kB
HTML
<!DOCTYPE html>
<!--html manifest="cache.manifest" xmlns="http://www.w3.org/1999/html"--><html>
<head>
<!-- vis Version 1.1.8 -->
<!--
Use FireFox or Chrome with --allow-file-access-from-files flag to test DashUI local.
Before you start Chrome anew all other instances should be closed.
For local start lib directory from ccu.io is required and datastore in ../ directory.
-->
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/custom-light/jquery-ui.min.css" id="commonTheme">
<meta charset="utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<link href="img/faviconEdit.png" rel="shortcut icon" type="image/x-icon"/>
<link href="img/faviconEdit.png" rel="apple-touch-icon" />
<title>Edit vis</title>
<link rel="stylesheet" type="text/css" href="lib/css/fancytree/ui.fancytree.min.css" />
<link rel="stylesheet" type="text/css" href="lib/css/superfish/superfish.css" />
<link rel="stylesheet" type="text/css" href="lib/css/jquery.multiselect-1.13.css" />
<link rel="stylesheet" type="text/css" href="lib/css/jquery.jgrowl.min.css" />
<link rel="stylesheet" type="text/css" href="lib/css/farbtastic.css" />
<link rel="stylesheet" type="text/css" href="js/fm/fileManager.css" />
<link rel="stylesheet" type="text/css" href="css/backgrounds.css" />
<link rel="stylesheet" type="text/css" href="css/vis.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/vis-editor.css" />
<link rel="stylesheet" type="text/css" href="../../lib/css/iob/selectID.css" />
<script type="text/javascript" src="../../lib/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui-1.11.4.full.min.js"></script>
<script type="text/javascript" src="lib/js/jquery.fancytree-all.min.js"></script>
<script type="text/javascript" src="lib/js/colResizable-1.5.min.js"></script>
<script type="text/javascript" src="../../lib/js/selectID.js"></script>
<script type="text/javascript" src="../../lib/js/socket.io.js"></script>
<script type="text/javascript" src="lib/js/translate.js"></script>
<script type="text/javascript" src="lib/js/jquery.multiselect-1.13.min.js"></script>
<script type="text/javascript" src="lib/js/loStorage.js"></script>
<script type="text/javascript" src="lib/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="lib/js/dropzone.js"></script>
<script type="text/javascript" src="lib/js/can.custom.min.js"></script>
<script type="text/javascript" src="lib/js/html2canvas.min.js"></script>
<script type="text/javascript" src="lib/js/jquery.jgrowl.min.js"></script>
<script type="text/javascript" src="lib/js/superclick.js"></script>
<script type="text/javascript" src="lib/ace/ace.js"></script>
<script type="text/javascript" src="lib/ace/ext-language_tools.js"></script>
<script type="text/javascript" src="lib/js/farbtastic.js"></script>
<script type="text/javascript" src="lib/js/moment-with-locales.min.js"></script>
<script type="text/javascript" src="js/fm/fileManager.js"></script>
<script type="text/javascript" src="js/config.js"></script> <!-- this file must be before vis.js -->
<script type="text/javascript" src="js/words.js"></script>
<script type="text/javascript" src="js/visAbout.js"></script>
<script type="text/javascript" src="_socket/info.js"></script>
<script type="text/javascript" src="js/conn.js"></script>
<script type="text/javascript" src="js/visUtils.js"></script>
<script type="text/javascript" src="js/vis.js"></script>
<script type="text/javascript" src="js/visEditWelcome.js"></script>
<script type="text/javascript" src="js/visEdit.js"></script>
<script type="text/javascript" src="js/visEditExt.js"></script>
<script type="text/javascript" src="js/visEditInspect.js"></script>
<script type="text/javascript" src="js/visEditTemplates.js"></script>
</head>
<body >
<!-- --------------------------------------- DO NOT EDIT INSIDE THIS LINE - BEGIN ------------------------------------------- -->
<!-- --------------------------------------- DO NOT EDIT INSIDE THIS LINE - END ------------------------------------------- -->
<div id='waitScreen' class='vis-wait-screen'>
<div id='waitDialog' class='waitDialog'>
<div class='vis-progressbar '></div>
<div class='vis-wait-text' id='waitText'></div>
</div>
</div>
<div style="display: none;text-align: center" id="dialog_delete">
<table style="height: 100%;width: 100%">
<tr>
<td><span class="ui-icon ui-icon-alert" style="display:inline-block"></span><span id="dialog_delete_content"
style="display:inline-block;padding-left:10px"></span>
</td>
</tr>
<tr>
<td style="text-align: left; vertical-align: bottom">
<input type="checkbox" id="dialog_delete_is_show" style="display: inline-block; padding-left: 10px" />
<label for="dialog_delete_is_show" class="translate" style="font-size: small">Do not ask again</label>
</td>
</tr>
</table>
</div>
<div style="display: none;text-align: center" id="dialog_about" title="About" class="translateT"></div>
<div style="display: none;" id="dialog_export_view" title="export view" class="translateT">
<textarea rows="60" cols="160" style="width: calc(100% - 5px); height: calc(100% - 5px); font-size: 11px;"
id="textarea_export_view"></textarea>
</div>
<div style="display: none;" id="dialog_import_view" title="import view" class="translateT">
<textarea rows="50" cols="160" style="width: 99%; height: calc(98% - 45px); font-size: 11px;"
id="textarea_import_view"></textarea>
<table class="table-no-space">
<tr class="table-no-space">
<td class="translate table-no-space">View name: </td>
<td class="table-no-space"><input id="name_import_view"></td>
<td class="table-no-space"><button id="start_import_view" class="translateB">import view</button></td>
</tr>
</table>
</div>
<div style="display: none; overflow: hidden" id="dialog_import_project" title="import project" class="translateT">
<div class="vis-drop-zone" style="display: none">
<div style="padding-top: 20%" class="translate vis-drop-text"></div>
<input type="file" class="vis-drop-file" style="display: none">
</div>
<div class="vis-import-text-drop">
<span class="vis-file-name translate">Drop files here or click to select one</span>
<span class="vis-import-text-drop-plus">+</span>
</div>
<table style="padding: 15px; width: calc(100% - 30px);">
<tr class="table-no-space">
<td class="translate table-no-space" style="width: 20%">Project name:</td>
<td class="table-no-space" style="width: 40%"><input id="name_import_project" style="width: 150px;"></td>
<td class="table-no-space" style="width: 50%"><button id="start_import_project" class="translateB">import project</button></td>
</tr>
</table>
</div>
<div style="display: none;" id="dialog_export_widgets" title="export widgets title" class="translateT">
<div><span class="translate">Export as zip:</span><input id="dialog_export_widgets_as_zip" type="checkbox"/></div>
<textarea rows="60" cols="160" style="width: calc(100% - 15px); height: calc(100% - 45px); font-size: 11px;"
id="textarea_export_widgets"></textarea>
</div>
<div style="display: none;" id="dialog_import_widgets" title="import widgets" class="translateT">
<textarea rows="50" cols="160" style="width: 99%; height: calc(98% - 40px); font-size: 11px;"
id="textarea_import_widgets"></textarea>
<button id="start_import_widgets" class="translateB">import widgets</button>
</div>
<div style="display: none ;text-align: center" id="dialog_shortcuts" title="Shortcuts" class="translateT">
<table style="height: 100%;width: 100%">
<colgroup>
<col style="text-align: left">
<col style="text-align: center">
<col style="text-align: center">
</colgroup>
<tr>
<td class="translate">Full screen</td>
<td></td>
<td>F3</td>
</tr>
<tr>
<td class="translate">Next View</td>
<td></td>
<td class="translate">PgUp</td>
</tr>
<tr>
<td class="translate">Prev. View</td>
<td></td>
<td class="translate">PgDown</td>
</tr>
<tr>
<td class="translate">Move Widget 1px</td>
<td>
</td>
<td class="translate">Arrow Keys</td>
</tr>
<tr>
<td class="translate">Move Widget 10px</td>
<td class="translate">Ctrl / CMD</td>
<td class="translate">Arrow Keys</td>
</tr>
<tr>
<td class="translate" style="color:rgba(1,1,1,0.05)">Show develop ribbon</td>
<td></td>
<td style="color:rgba(1,1,1,0.05)">F2</td>
</tr>
</table>
</div>
<div style="height: 34px; width: 100%; position: absolute; top: 0;left:0" class="ui-widget-header ">
</div>
<div id="menu_body" style="display: none; padding: 0;border: none; background: transparent;z-index: 999 ">
<div style="margin-left: 5px; display: inline-block; position: relative;top:-4px"><span class="ui-widget-header" style="border: 0">vis </span><span id="vis-version" class="ui-widget-header" style="border: 0"></span></div>
<div class="vis-menu-line" style="position: absolute; top: 37px; left: 0; height: 5px; width: 100%; background: #3C98D3; z-index: 1000;"></div>
<ul style="border-radius: 0;display: inline-block; background: transparent; border: none;margin-bottom: -4px;position: relative; z-index: 2">
<li id="ribbon_tab_datei" style="display: none">
<a href="#ribbon_file" style="padding: 2px 4px 2px 4px" class="translate">File</a>
</li>
<li>
<a href="#ribbon_view" style="padding: 2px 4px 2px 4px" class=" translate">Views</a>
</li>
<li>
<a href="#ribbon_widget" style="padding: 2px 4px 2px 4px" class="translate">Widgets</a>
</li>
<li id="ribbon_tab_dev" style="display: none">
<a href="#ribbon_dev" style="padding: 2px 4px 2px 4px" class="translate">Dev</a>
</li>
<li>
<a href="#ribbon_tools" style="padding: 2px 4px 2px 4px" class="translate">Tools</a>
</li>
</ul>
<div id="menu_sf" style="display: inline-block; margin-bottom: -4px; margin-left: -14px;">
<ul id="menu" style="margin: 0; height: auto;" class="ui-tabs-nav sf-menu" >
<li class="ui-state-default ui-corner-top menu-tab" role="tab" style="padding: 1px 4px 1px 4px"><a class="menu-tab-text translate">Setup</a>
<ul style="display: none;" class="ui-widget-content">
<li class="ui-state-default menu-item" role="tab">
<a class="menu-tab-text"><span class="translate">Theme</span><span style="float: right;margin-top:4px" class="ui-icon ui-icon-carat-1-e"></span></a>
<ul id="ul_theme" class="ui-widget-content">
<li class="ui-state-default menu-item" data-theme="custom-light">
<a data-info="custom-light">Light</a>
</li>
<li class="ui-state-default menu-item" data-theme="custom-dark">
<a data-info="custom-dark">Dark</a>
</li>
<li class="ui-state-default menu-item" data-theme="dark-hive">
<a data-info="dark-hive">Dark-Hive</a>
</li>
<li class="ui-state-default menu-item" data-theme="redmond">
<a data-info="redmond">redmond</a>
</li>
</ul>
</li>
<li class="ui-state-default menu-item" role="tab">
<a class="menu-tab-text"><span class="translate">Language</span><span style="float: right;margin-top:4px" class="ui-icon ui-icon-carat-1-e"></span></a>
<ul class="ui-widget-content">
<li class="ui-state-default language-select menu-item" data-language="de">
<a>Deutsch</a>
</li>
<li class="ui-state-default language-select menu-item" data-language="en">
<a>English</a>
</li>
<li class="ui-state-default language-select menu-item" data-language="ru">
<a>русский</a>
</li>
</ul>
</li>
<li id="li_menu_projects" class="ui-state-default menu-item" role="tab">
<a class="menu-tab-text"><span class="translate">Projects</span><span style="float: right; margin-top:4px" class="ui-icon ui-icon-carat-1-e"></span></a>
<ul id="menu_projects" class="ui-widget-content">
<li class="ui-state-default project-select menu-item" data-language="de"><a>Main</a></li>
</ul>
</li>
<li id="li_menu_export" class="ui-state-default menu-item" role="tab">
<a class="menu-tab-text"><span class="translate">Project export/import</span><span style="float: right; margin-top:4px" class="ui-icon ui-icon-carat-1-e"></span></a>
<ul class="ui-widget-content">
<li class="ui-state-default menu-item translate export-normal">Export normal</li>
<li class="ui-state-default menu-item translate export-anonymized">Export anonymized</li>
<li class="ui-state-default menu-item translate import-normal">Import</li>
</ul>
</li>
<li id="li_menu_new_project" class="ui-state-default menu-item project-new" role="tab">
<a class="menu-tab-text"><span class="translate">New project...</span></a>
</li>
<li id="li_menu_file_manager" class="ui-state-default menu-item" role="tab" >
<a class="menu-tab-text"><span class="translate">File manager...</span></a>
</li>
<li id="li_menu_setup_settings" class="ui-state-default menu-item setup-settings" role="tab">
<a class="menu-tab-text"><span class="translate">Settings...</span></a>
</li>
<li id="li_menu_object_browser" class="ui-state-default menu-item" role="tab" >
<a class="menu-tab-text"><span class="translate">Object browser...</span></a>
</li>
</ul>
</li>
<li class="ui-state-default ui-corner-top menu-tab" role="tab" style="padding: 1px 4px 1px 4px"><a class="menu-tab-text translate">Help</a>
<ul style="display: none;" class="ui-widget-content">
<li class="ui-state-default menu-item" style="width: 252px ; background-image: none"><a id="m_shortcuts" class="translate">Shortcuts</a></li>
<li class="ui-state-default menu-item" style="width: 252px ; background-image: none"><a id="m_about" class="translate">About</a></li>
</ul>
</li>
</ul>
</div>
<button id="button_undo"></button>
<table style="display: inline-block; float: right">
<tr>
<td>
<div class="ui-widget-header" style="border: 0; padding-right: 10px; height: 16px">
<span style="display: inline-block;" id="current-project"></span> [<span style="display: inline-block;" class="ui-icon ui-icon-person"></span>
<span style="display: inline-block;" id="current-user"></span>]
</div>
</td>
<td style="width:30px"><button id="saving_progress"></button></td>
<td><button id="logout_button" class="ui-state-default ui-corner-top translateT" style="display: none;" title="Logout"></button></td>
<td><div><button id="exit_button"></button>
<button id="exit_button_select"></button></div>
<ul style="display: none; position: absolute; z-index: 1000; width: 400px" id="exit_button_select_menu">
<li data-value="close"><span class="ui-icon ui-icon-close"></span><span class="translate">Switch to runtime in this window</span></li>
<li data-value="play"><span class="ui-icon ui-icon-play"></span><span class="translate">Switch to runtime in new window</span></li>
<li data-value="refresh"><span class="ui-icon ui-icon-refresh"></span><span class="translate">Reload all runtimes</span></li>
</ul>
</td>
</tr>
</table>
<div class="ribbon_tab" id="ribbon_file">
<div class="ribbon_tab_content ui-widget-content"></div>
</div>
<div class="ribbon_tab" id="ribbon_view">
<div class="ribbon_tab_content ui-widget-content">
<div class="ribbon_field ui-widget-content ui-corner-all" style="width: 500px;">
<table style="border-spacing: 0; width: 100%">
<colgroup>
<col width="80px" style="text-align:left"/>
<col width="100%"/>
<col span="10" width="26px"/>
</colgroup>
<tr id="rib_view_add_tr" style="display:none">
<td style=" height: 22px; padding-right:3px" class="translate">New Name:</td>
<td>
<input id="rib_view_addname" >
</td>
<td>
<div id="rib_view_add_ok" class="btn-iconbar ui-corner-all"></div>
</td>
<td>
<div id="rib_view_add_cancel" class="btn-iconbar ui-corner-all"></div>
</td>
</tr>
<tr id="rib_view_rename_tr" style="display:none">
<td style=" height: 22px; padding-right:3px" class="translate">New Name:</td>
<td>
<input id="rib_view_newname" >
</td>
<td>
<div id="rib_view_rename_ok" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/ok.png"></div>
</td>
<td>
<div id="rib_view_rename_cancel" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/cancel.png"></div>
</td>
</tr>
<tr id="rib_view_copy_tr" style="display:none">
<td style=" height: 22px; padding-right:3px" class="translate">New Name:</td>
<td>
<input id="rib_view_copyname" >
</td>
<td>
<div id="rib_view_copy_ok" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/ok.png"></div>
</td>
<td>
<div id="rib_view_copy_cancel" class="btn-iconbar ui-corner-all"><img class="icon-on-iconbar" src="icon/cancel.png"></div>
</td>
</tr>
<tr id="rib_view">
<td style=" height: 22px; padding-right:3px" class="translate">Active View:</td>
<td>
<select id="select_view" style="width: 310px"></select>
</td>
<td>
<div id="rib_view_add" class="btn-iconbar ui-corner-all translateT" title="Add new view"><img class="icon-on-iconbar" src="icon/add.png" style="width: 16px;height: 16px;margin: 3px;"></div>
</td>
<td>
<div id="rib_view_del" class="btn-iconbar ui-corner-all translateT" title="Delete actual view"><img class="icon-on-iconbar" src="icon/delete.png"></div>
</td>
<td>
<div id="rib_view_rename" class="btn-iconbar ui-corner-all translateT" title="Rename view"><img class="icon-on-iconbar" src="icon/rename.png"></div>
</td>
<td>
<div id="rib_view_copy" class="btn-iconbar ui-corner-all translateT" title="Copy view"><img class="icon-on-iconbar" src="icon/copy.png"></div>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td>
<button class="vis-editor translateB" id="export_view">export view</button>
</td>
<td>
<button class="vis-editor translateB" id="import_view">import view</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="ribbon_tab" id="ribbon_widget">
<div class="ribbon_tab_content ui-widget-content">
<div class="ribbon_field ui-widget-content ui-corner-all" style="width: 461px;">
<table style="border-spacing: 0; width: 100%; text-align: left">
<colgroup>
<col width="80px" style="text-align: left"/>
<col width="100%"/>
<col span="10" width="26px"/>
<col span="10" width="26px"/>
<col span="10" width="26px"/>
</colgroup>
<tr id="rib_wid_copy_tr" style="display:none">
<td style="height: 22px; padding-right: 3px" class="translate">To View:</td>
<td><select id="rib_wid_copy_view" style="width: 310px"></select></td>
<td><div id="rib_wid_copy_ok" class="btn-iconbar ui-corner-all"></div></td>
<td colspan="2"><div id="rib_wid_copy_cancel" class="btn-iconbar ui-corner-all"></div></td>
</tr>
<tr id="rib_wid">
<td style=" height: 22px; padding-right:3px" class="translate">Active Widget:</td>
<td><select id="select_active_widget" multiple="multiple" data-multiselect-width="400" data-multiselect-height="250"></select></td>
<td><div id="rib_wid_del" class="btn-iconbar ui-corner-all translateT" title="Delete widget"></div></td>
<td><div id="rib_wid_copy" class="btn-iconbar ui-corner-all translateT" title="Copy widget"></div></td>
<td><div id="rib_wid_doc" class="btn-iconbar ui-corner-all translateT" title="Help about widget"></div></td>
</tr>
</table>
</div>
<!--<div class="ribbon_field ui-widget-content ui-corner-all"style="display:none">-->
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td class="translate" style="text-align: center; height: 22px; padding-right: 3px">Align widgets:</td>
<td>
<div id="wid_align_left" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/left"><img class="icon-on-iconbar" src="icon/align-horizontal-left.png"></div>
</td>
<td>
<div id="wid_align_right" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/right"><img class="icon-on-iconbar" src="icon/align-horizontal-right-2.png"></div>
</td>
<td>
<div id="wid_align_top" class="btn-iconbar ui-corner-all translateT" title="Align vertical/top"><img class="icon-on-iconbar" src="icon/align-vertical-top-2.png"></div>
</td>
<td>
<div id="wid_align_bottom" class="btn-iconbar ui-corner-all translateT" title="Align vertical/bottom"><img class="icon-on-iconbar" src="icon/align-vertical-bottom-2.png"></div>
</td>
<td>
<div id="wid_align_hc" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/center"><img class="icon-on-iconbar" src="icon/align-horizontal-center-2.png"></div>
</td>
<td>
<div id="wid_align_vc" class="btn-iconbar ui-corner-all translateT" title="Align vertical/center"><img class="icon-on-iconbar" src="icon/align-vertical-center-2.png"></div>
</td>
<td>
<div id="wid_dis_h" class="btn-iconbar ui-corner-all translateT" title="Align horizontal/equal"><img class="icon-on-iconbar" src="icon/distribute-horizontal-equal.png"></div>
</td>
<td>
<div id="wid_dis_v" class="btn-iconbar ui-corner-all translateT" title="Align vertical/equal"><img class="icon-on-iconbar" src="icon/distribute-vertical-equal.png"></div>
</td>
<td>
<div id="wid_align_width" class="btn-iconbar ui-corner-all translateT" title="Align width"><img class="icon-on-iconbar" src="icon/align-width.png"></div>
</td>
<td>
<div id="wid_align_height" class="btn-iconbar ui-corner-all translateT" title="Align height"><img class="icon-on-iconbar" src="icon/align-height.png"></div>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all" style="">
<table style="border-spacing: 0">
<tr>
<td class="translate" style="text-align: center; height: 22px; padding-right: 3px">All widgets:</td>
<td>
<input id="wid_all_lock_function" type="checkbox" /><label style="width: 23px; height: 23px" id="wid_all_lock_f" for="wid_all_lock_function" class="translateT ttt" title="Lock Widget function"></label>
</td>
<td>
<input id="wid_all_lock_drag" type="checkbox" /><label style="width: 23px;height: 23px" id="wid_all_lock_d" for="wid_all_lock_drag" class="translateT" title="Lock Widget dragging"></label>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td>
<button class="vis-editor translateB" id="export_widgets">export widgets</button>
</td>
<td>
<button class="vis-editor translateB" id="import_widgets">import widgets</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="ribbon_tab" id="ribbon_tools" >
<div class="ribbon_tab_content ui-widget-content" >
<div class="ribbon_field ui-widget-content ui-corner-all" style="width: 550px">
<table style="border-spacing: 0; width: 100%">
<colgroup>
<col width="80px" style="text-align:left"/>
<col width="100%"/>
<col span="10" width="26px"/>
</colgroup>
<tr id="rib_tools_resolution_manuel" style="display:none">
<td class="translate">Resolution:</td>
<td><table style="border: 0"><tr>
<td><div style="display: inline-block" class="translate">Width</div></td>
<td><input id="screen_size_x" type="number" style="width: 60px" value=""/></td>
<td><div style="display: inline-block" class="translate">Height</div></td>
<td><input id="screen_size_y" type="number" style="width: 60px" value=""/></td>
</tr></table>
</td>
<td>
<div class="rib_tool_resolution_toggle"></div>
</td>
<td>
<table style="border: 0">
<tr>
<td><label for="screen_default_man" title="Default screen" class="translate translateT">Default:</label></td><td><input class="vis-screen-default" id="screen_default_man" type="checkbox"/></td>
<td><label for="render_always_man" title="Render always" class="translate translateT">Render always:</label></td><td><input class="vis-screen-render-always" id="render_always_man" type="checkbox"/></td>
</tr>
</table>
</td>
</tr>
<tr id="rib_tools_resolution_fix">
<td class="translate">Resolution:</td>
<td>
<select id="screen_size">
<option value="" class="translate">not defined</option>
<option value="user" class="translate">User defined</option>
<option value="320x460">iPhone 3G, 3GS, 4, 4S - Portrait</option>
<option value="480x300">iPhone 3G, 3GS, 4, 4S - Landscape</option>
<option value="320x548">iPhone 5, 5S - Portrait</option>
<option value="568x300">iPhone 5, 5S - Landscape</option>
<option value="768x1004">iPad - Portrait</option>
<option value="1024x748">iPad - Landscape</option>
<option value="320x533">Samsung S2 - Portrait</option>
<option value="533x320">Samsung S2 - Landscape</option>
<option value="360x640">Samsung S3, Note 2 - Portrait</option>
<option value="640x360">Samsung S3, Note 2 - Landscape</option>
<option value="360x640">Samsung S4, S5, Note 3 - Portrait</option>
<option value="640x360">Samsung S4, S5, Note 3 - Landscape</option>
<option value="384x640">Nexus 4 - Portrait</option>
<option value="640x384">Nexus 4 - Landscape</option>
<option value="360x640">Nexus 5 - Portrait</option>
<option value="640x360">Nexus 5 - Landscape</option>
<option value="604x966">Nexus 7 (2012) - Portrait</option>
<option value="966x604">Nexus 7 (2012) - Landscape</option>
<option value="800x1280">Nexus 10 - Portrait</option>
<option value="1280x800">Nexus 10 - Landscape</option>
<option value="720x1280">HD - Portrait</option>
<option value="1280x720">HD - Landscape</option>
<option value="1080x1920">Full HD - Portrait</option>
<option value="1920x1080">Full HD - Landscape</option>
</select>
</td>
<td>
<div class="rib_tool_resolution_toggle"></div>
</td>
<td>
<table style="border: 0">
<tr>
<td><label for="screen_default_fix" title="Default screen" class="translate translateT">Default:</label></td><td><input class="vis-screen-default" id="screen_default_fix" type="checkbox"/></td>
<td><label for="render_always_fix" title="Render always" class="translate translateT">Render always:</label></td><td><input class="vis-screen-render-always" id="render_always_fix" type="checkbox"/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td>
<span style=" display: inline-block;" class="translate">Grid</span>
</td>
<td style="padding-left: 5px">
<select id="snap_type">
<option value="0" class="translate">disabled</option>
<option value="1" class="translate">elements</option>
<option value="2" class="translate">grid</option>
</select>
</td>
<td class="translate" style="padding-left: 5px">grid size</td>
<td><input id="grid_size" type="number" value=""></td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td>
<span style="display: inline-block" class="translate">Instance ID</span>
</td>
<td>
<input id="vis_instance"/>
</td>
<td>
<button type="button" class="vis-editor translateB" id="create_instance">create_instance</button>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td>
<span style="display: inline-block" class="translate translateT" title="Make available for all users">Available for all:</span>
</td>
<td>
<input type="checkbox" id="vis_access_mode"/>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all" style="display: none">
<table style="border-spacing: 0">
<tr>
<td style="width: 80px" class='translate'>Room:</td>
<td><select id="wizard_rooms"></select></td>
<td style="width: 80px" class='translate'>Function:</td>
<td><select id="wizard_funcs"></select></td>
<td style="width: 80px" class='translate'>Widget:</td>
<td><select id="wizard_widgets"></select></td>
</tr>
</table>
</div>
</div>
</div>
<div class="ribbon_tab" id="ribbon_dev">
<div class="ribbon_tab_content ui-widget-content">
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td>
<button id="dev_show_html">Show Widget HTML</button>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0">
<tr>
<td>
<button class="vis-editor translateB" id="export_local_view">export views</button>
</td>
<td>
<button class="vis-editor translateB" id="import_local_view">import views</button>
</td>
<td>
<button class="vis-editor translateB" id="clear_local_view">clear cached views</button>
</td>
</tr>
</table>
</div>
<div class="ribbon_field ui-widget-content ui-corner-all">
<table style="border-spacing: 0; text-align: center">
<tr>
<td class="translate">dev1</td>
<td class="translate">dev2</td>
<td class="translate">dev3</td>
<td class="translate">dev4</td>
<td class="translate">dev5</td>
<td class="translate">dev6</td>
</tr>
<tr>
<td>
<input type="number" value="0" step="1" class="vis-editor oid-dev" id="oid_dev1"/>
</td>
<td>
<input type="number" value="0" step="1" class="vis-editor oid-dev" id="oid_dev2"/>
</td>
<td>
<input type="number" value="0" step="1" class="vis-editor oid-dev" id="oid_dev3"/>
</td>
<td>
<input type="number" value="0.0" step="0.1" class="vis-editor oid-dev" id="oid_dev4"/>
</td>
<td>
<input type="number" value="1" step="1" class="vis-editor oid-dev" id="oid_dev5"/>
</td>
<td>
<input value="string" class="vis-editor oid-dev" id="oid_dev6"/>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="panel_body" class="ui-widget-content" style="display: none; height: 100%">
<div class="ui-widget-content" id="pan_add_wid">
<div class="ui-state-default" style="height:16px;font-size:16px;padding: 5px;font-weight: bolder;">
<span class="translate">Add Widget</span>
<div id="btn_prev_type" title="Show type of widgets" class="translateT"><span class="ui-icon ui-icon-tag"></span></div>
<div id="btn_prev_zoom" title="Small widgets" class="translateT"><span class="ui-icon ui-icon-zoomout"></span></div>
</div>
<input id="filter_set" value="*" style="width: 100%" class="translateT" title="Widgets filter. Double click to clear."/>
<select id="select_set" style="width: 100%" class="select-set"></select>
<div id="toolbox" class="toolbox">
<ul id="context_menu_template" style="position: absolute; display: none; z-index: 999; min-width: 100px">
<li id="context_menu_template_edit" class="context-template-submenu" data-action="edit">
<span class="translate">Edit</span>
</li>
<li id="context_menu_template_delete" class="context-template-submenu" data-action="delete">
<span class="translate">Delete</span>
</li>
</ul>
</div>
</div>
<div id="vis_wrap">
<div id="view_select" class="ui-widget-content">
<button id="view_select_left"></button>
<button id="view_select_list"></button>
<button id="view_select_right"></button>
<div id="view_select_tabs_wrap">
<div id="view_select_tabs"></div>
</div>
</div>
<div id="vis_container" style="width: 100%; height: 100%; overflow: auto" class="ui-widget-content vis_container_edit vis_container">
<div id="size_x"
style="display: none; z-index: 99; position: absolute; top: 0; width:0; border-right: 1px solid red; height: 100%; border-left: 1px solid green;"></div>
<div id="size_y"
style="display:none; z-index: 99; position: absolute; left: 0; height:0; border-bottom: 1px solid red; width: 100%; border-top: 1px solid green;"></div>
<ul id="context_menu" style="position: absolute; display: none; z-index: 999; min-width: 150px">
<li id="context_menu_wid" class="ui-state-disabled"></li>
<li id="context_menu_select" class="context-submenu context-menu-common-item" data-action="select">
<span class="translate">Select</span>
</li>
<li id="context_menu_group" class="context-menu-common-item" data-action="group">
<span class="ui-icon ui-icon-newwin"></span>
<span class="translate">to group</span>
</li>
<li id="context_menu_ungroup" class="context-menu-common-item" data-action="ungroup">
<span class="ui-icon ui-icon-arrow-4-diag"></span>
<span class="translate">Ungroup</span>
</li>
<li id="context_menu_group2template" class="context-menu-common-item" data-action="group2template">
<span class="ui-icon ui-icon-tag"></span>
<span class="translate">Make template</span>
</li>
<li id="context_menu_copy" class="context-menu-action context-menu-common-item" data-action="copy">
<span class="ui-icon ui-icon-copy"></span>
<span class="translate">Copy</span>
</li>
<li id="context_menu_cut" class="context-menu-action context-menu-common-item" data-action="cut">
<span class="ui-icon ui-icon-scissors"></span>
<span class="translate">Cut</span>
</li>
<li id="context_menu_paste" class="context-menu-common-item" data-action="paste">
<span class="ui-icon ui-icon-document"></span>
<span class="translate">Paste</span>
</li>
<li id="context_menu_delete" class="context-menu-action context-menu-common-item" data-action="delete">
<span class="ui-icon ui-icon-trash"></span>
<span class="translate">Delete</span>
</li>
<li id="context_menu_more"><span class="translate">More</span>
<ul style="min-width: 150px">
<li id="context_menu_lock" class="context-menu-action context-menu-common-item" data-action="lock">
<span class="ui-icon ui-icon-locked"></span>
<span class="translate">Lock</span>
</li>
<li id="context_menu_unlock" class="context-menu-action context-menu-common-item" data-action="unlock">
<span class="ui-icon ui-icon-unlocked"></span>
<span class="translate">Unlock</span>
</li>
<li id="context_menu_front" class="context-menu-action context-menu-common-item" data-action="bringToFront">
<span class="ui-icon ui-icon-arrowthick-1-n"></span>
<span class="translate">Bring to front</span>
</li>
<li id="context_menu_back" class="context-menu-action context-menu-common-item" data-action="bringToBack">
<span class="ui-icon ui-icon-arrowthick-1-s"></span>
<span class="translate">Move to back</span>
</li>
<li id="context_menu_export" class="context-menu-action context-menu-common-item" data-action="export">
<span class="ui-icon ui-icon-arrowthickstop-1-e"></span>
<span class="translate">export widgets</span>
</li>
<li id="context_menu_import">
<span class="ui-icon ui-icon-arrowthickstop-1-w"></span>
<span class="translate">import widgets</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="attr_wrap">
<div id="pan_attr">
<div class="ui-state-default" style="height: 16px;font-size: 16px;padding: 5px;font-weight: bolder;"><span class="translate">Attributes</span><button id="btn_accordeon" style="float: right;"></button></div>
<ul style="border-radius: 0; display: inline-block; background: transparent; border: none; margin-bottom: -2px">
<li>
<a href="#tab_view_attr" style="padding: 2px 4px 2px 4px" class="translate">View</a>
</li>
<li>
<a id="widget_tab" href="#tab_wid_attr" style="padding: 2px 4px 2px 4px" class="translate">Widget</a>
</li>
<li>
<a id="cssEditor_tab" href="#tab_css_edit" style="padding: 2px 4px 2px 4px" class="translate">CSS</a>
</li>
<li>
<a id="script_editor_tab" href="#tab_script_edit" style="padding: 2px 4px 2px 4px" class="translate">Scripts</a>
</li>
</ul>
<div class="tab_attr ui-widget-content" id="tab_view_attr">
<div id="view_inspector">
<table style="width: 100%; border: 0">
<colgroup>
<col width="40%"/>
<col width="60%" style="padding-right: 5px"/>
<col width="26px" style=""/>
</colgroup>
<tbody>
<tr><td colspan="3" class="ui-state-default"><span class="translate">group_css_common</span><button class="view-group" style="float:right" data-group="view-css-common"></button></td></tr>
<tr class="group-view-css-common">
<td class="vis-edit-td-caption translate">comment</td>
<td class="vis-edit-td-field" colspan="2"><input id="inspect_view_comment" class="vis-inspect-view vis-edit-textbox"/></td>
</tr>
<tr class="group-view-css-common">
<td class="vis-edit-td-caption translate">class</td>
<td class="vis-edit-td-field" colspan="2"><input id="inspect_view_class" class="vis-inspect-view vis-edit-textbox"/></td>
</tr>
<tr class="group-view-css-common">
<td class="vis-edit-td-caption translateT" style="font-style: italic" title="filter_key_tooltip"><span class="translate">filter_key</span></td>
<td class="vis-edit-td-field" colspan="2"><input id="inspect_view_filterkey" class="vis-inspect-view vis-edit-textbox"/></td>
</tr>
<tr class="group-view-css-common">
<td class="vis-edit-td-caption translate">Theme</td>
<td class="vis-edit-td-field" colspan="2">
<select id="inspect_view_theme" class="vis-edit-textbox" style="width:100%">
<option value="black-tie">black-tie</option>
<option value="blitzer">blitzer</option>
<option value="cupertino">cupertino</option>
<option value="custom-dark">custom-dark</option>
<option value="custom-light">custom-light</option>
<opt