iobroker.energiefluss-erweitert
Version:
This ioBroker adapter is the next Version of the energiefluss with the attribute 'erweitert' and allows to display an energyflow animation inside an iframe or HTML DIV.
683 lines (677 loc) • 267 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<title>Energiefluss - erweitert *Configuration*</title>
<meta name="description" content="Provides an animated energy-flow">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#538ea3">
<meta name="theme-color" content="#538ea3">
<link class=favicon rel=icon type=image/ico href="img/icons/favicon.ico">
<link rel="stylesheet" href="style/jquery-ui.css">
<link rel="stylesheet" href="style/multiselect.css">
<link rel="stylesheet" href="style/style.css?v=0.8.2.1">
<script src="/socket.io/socket.io.js"></script>
<script src="js/jquery-3.6.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/multiselect.min.js"></script>
<script src="js/translate.min.js"></script>
<script src="js/words.js?v=0.8.2.1"></script>
<script src="js/jscolor.min.js"></script>
<script src="js/ace/ace.js"></script>
<script src="js/ace/ext-language_tools.js"></script>
<script src="js/ace/ext-searchbox.js"></script>
<script src="js/functions.min.js?v=0.8.2.1"></script>
<style id="style_animation"></style>
<style id="style_user"></style>
</head>
<body>
<div id="help_section" class="translateT" title="Help Section" data-lang-title="lbl_help_section"></div>
<div id="dialog_section" title="Backup Section"></div>
<div id="action_change_value">
<div class="detail_box shortcut" id="shortcuts.action">
<div class="contentBox">
<div class="form_div text">
<input type="text" class="input_number" name="shortcuts.action.value" id="shortcuts.action.value"
placeholder="" spellcheck="false" autocomplete="off">
<label for="shortcuts.action.value" class="form_label translate" data-lang="opt_value">Value</label>
</div>
</div>
</div>
<div class="detail_box shortcut" id="shortcuts.elements"></div>
</div>
<div id="manage_shortcuts_section" class="translateT" title="Manage Direct Accesses"
data-lang-title="value_manage_shortcuts">
<div class="ef-table-div">
<table class="ef-table" id="shortcut-table">
<thead>
<tr>
<th>
<span class="translate" data-lang="lbl_alias">Alias</span>
</th>
<th>
<span class="translate" data-lang="opt_value">Value</span>
</th>
<th>
<span class="translate" data-lang="lbl_action">Actions</span>
</th>
</tr>
</thead>
<tbody>
<tr data-id="-1" id="shortcut_tmp_line">
<td class="translate" data-lang="no_shortcuts_added" colspan="3">
There are currently no shortcuts added!
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="form_div no_margin">
<input type="text" class="input_text translateP" id="shortcut_alias"
name="shortcut_alias" spellcheck="false" autocomplete="off" value=""
form="frm-addQuickAccess" minlength="1" placeholder="Alias"
data-lang-placeholder="lbl_alias">
</div>
</td>
<td>
<div class="form_div no_margin">
<input type="text" class="input_text translateP" id="shortcut_value"
name="shortcut_value" spellcheck="false" autocomplete="off" value=""
form="frm-addQuickAccess" minlength="1" placeholder="Value"
data-lang-placeholder="opt_value" required>
</div>
</td>
<td>
<form id="frm-addQuickAccess">
<input class="input_button auto_width translateV" type="submit" value="Add"
form="frm-addQuickAccess" data-lang-value="value_add">
</form>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="loading">
<div class="loading-spinner">
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
<div class="loading-spinner-dot"></div>
</div>
<span id="loading_text" class="translate" data-lang="msg_loading_workspace">Loading your Energiefluss
Workspace</span>
<div id="stateExplorerContainer" class="popUpContainer">
<div class="title">
<span class="translate" data-lang="title_stateExplorer">Object Browser</span>
<div class="close" onclick="closeEditorContainer('stateExplorer');"></div>
</div>
<div class="formFilter">
<div class="form_div textbox">
<input type="text" class="input_text icon_in_input_pad stateExplorerFilter" placeholder=""
spellcheck="false" autocomplete="off" name="stateExplorerFilter" id="stateExplorerFilter">
<label for="stateExplorerFilter" class="translate form_label" data-lang="lbl_filter">Filter</label>
<div class="icon_wrapper">
<span class="iconify" data-icon="mdi:search" data-width="24" data-height="24"></span>
<div class="ds_search_spinner">
<span class="spinner"></span>
</div>
</div>
</div>
</div>
<div id="stateExplorer" class="">
<div id="stateExplorer_placeholder">
<div class="cv-spinner">
<span class="spinner"></span>
<span class="translate" data-lang="title_stateExplorer_loading">Loading Object Browser
...</span>
</div>
</div>
</div>
<div class="button_area">
<div>
<button class="input_button" id="reloadStateExplorer">
<span class="iconify" data-icon="mdi:refresh" data-width="24" data-height="24"></span>
<span class="translate" data-lang="lbl_reload_stateExplorer">Reload</span>
</button>
</div>
<div>
<button class="input_button" id="select_state" disabled>
<span class="iconify" data-icon="mdi:check" data-width="24" data-height="24"></span>
<span class="translate" data-lang="value_select">Select</span>
</button>
<button class="input_button red" onclick="closeEditorContainer('stateExplorer');">
<span class="iconify" data-icon="mdi:cancel-circle-outline" data-width="24"
data-height="24"></span>
<span class="translate" data-lang="value_cancel">Cancel</span>
</button>
</div>
</div>
</div>
<div id="codeEditorContainer" class="popUpContainer">
<div class="title">
<span class="translate" data-lang="title_codeEditor">Code Editor</span>
<div class="close" onclick="closeEditorContainer('codeEditor');"></div>
</div>
<!-- ACE Editor -->
<div id="codeEditor" class=""></div>
<div class="button_area">
<div>
<button type="button" class="input_button auto_width" id="overrideFormatCode">
<span class="iconify" data-icon="mdi:format-indent-increase" data-width="24"
data-height="24"></span>
<span class="translate" data-lang="lbl_format_json">Format JSON</span>
</button>
</div>
<div>
<button class="input_button" id="save_code" disabled>
<span class="iconify" data-icon="material-symbols:save" data-width="24" data-height="24"></span>
<span class="translate" data-lang="lbl_save">Save</span>
</button>
<button class="input_button red" onclick="closeEditorContainer('codeEditor');">
<span class="iconify" data-icon="mdi:cancel-circle-outline" data-width="24"
data-height="24"></span>
<span class="translate" data-lang="value_cancel">Cancel</span>
</button>
</div>
</div>
</div>
<div id="frameContainer" class="popUpContainer">
<div class="title">
<div class="close" onclick="closeEditorContainer('frame');"></div>
</div>
</div>
<div id="tourContainer" class="popUpContainer">
<div class="title">
<span class="translate" data-lang="title_tour">Tour</span>
<div class="close" onclick="closeEditorContainer('tour');"></div>
</div>
<div id="tooltipText"></div>
<div class="button_area">
<div id="tourSteps"> </div>
<div>
<button type="button" class="input_button" id="tourPreviousStep" onclick="tourNextStep(false)">
<span class="iconify" data-icon="mdi:skip-previous" data-width="24" data-height="24"></span>
<span class="translate" data-lang="tour_previousStep">Previous Step</span>
</button>
<button type="button" class="input_button" id="tourNextStep" onclick="tourNextStep(true)">
<span class="translate" data-lang="tour_nextStep">Next Step</span>
<span class="iconify" data-icon="mdi:skip-next" data-width="24" data-height="24"></span>
</button>
</div>
</div>
</div>
</div>
<div class="tabbed">
<input checked="checked" id="tab1" type="radio" name="tabs">
<input id="tab2" type="radio" name="tabs">
<input id="tab3" type="radio" name="tabs">
<input id="tab4" type="radio" name="tabs">
<input id="tab5" type="radio" name="tabs">
<input id="tab6" type="radio" name="tabs">
<input id="tab7" type="radio" name="tabs">
<input id="tab8" type="radio" name="tabs">
<input id="tabWiki" type="radio" name="tabs">
<nav class="" id="mainNavBar">
<label for="tab1" id="lbl_tab1" class="tooltip" data-title="title_overview"><span
class="iconify menu translate" data-icon="material-symbols:overview-key-outline-rounded"
data-width="24" data-height="24"></span><span class="translate"
data-lang="lbl_overview">Overview</span></label>
<label for="tab2" id="lbl_tab2"><span class="iconify menu" data-icon="mdi:database-search" data-width="24"
data-height="24"></span><span class="translate"
data-lang="lbl_datasources">Datasources</span></label>
<label for="tab3" id="lbl_tab3"><span class="iconify menu" data-icon="material-symbols:animation"
data-width="24" data-height="24"></span><span class="translate"
data-lang="lbl_animation">Animation</span></label>
<label for="tab4" id="lbl_tab4"><span class="iconify menu"
data-icon="material-symbols:calculate-outline-rounded" data-width="24" data-height="24"></span><span
class="translate" data-lang="lbl_calculation">Calculation</span></label>
<label for="tab5" id="lbl_tab5" class="tooltip" data-title="title_gallery"><span class="iconify menu"
data-icon="mdi:file-image" data-width="24" data-height="24"></span><span class="translate"
data-lang="lbl_gallery">Gallery</span></label>
<label for="tab6" id="lbl_tab6"><span class="iconify menu" data-icon="material-symbols:css-rounded"
data-width="24" data-height="24"></span><span class="translate"
data-lang="lbl_styles">Styles</span></label>
<label for="tab7" id="lbl_tab7"><span class="iconify menu" data-icon="mdi:cog" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_settings">Settings</span></label>
<button id="lbl_wiki"
onclick="window.open('https://www.kreyenborg.koeln/wissensdatenbank/Kategorie/iobroker-energiefluss-erweitert/');"><span
class="iconify menu" data-icon="material-symbols:help-outline" data-width="24"
data-height="24"></span><span class="translate" data-lang="lbl_help">Help</span></button>
<label for="tab8" id="lbl_tab8" class="tooltip" data-title="title_save"><span class="iconify menu"
data-icon="material-symbols:save" data-width="24" data-height="24"></span><span class="translate"
data-lang="lbl_save">Save</span></label>
</nav>
<figure>
<div class="tab1">
<div id="config_bar" class="right">
<div class="title">
<span class="translate" data-lang="lbl_config_config">Configuration of the Element</span>
<div id="config_swap" class="swap tooltip" data-title="btn_swap"></div>
<a href="javascript:;" onclick="closeConfigBar();" class="close"></a>
</div>
<div class="tabbed">
<input checked="checked" id="tab1_config" type="radio" name="tabs_config">
<input id="tab2_config" type="radio" name="tabs_config">
<nav>
<label for="tab1_config"><span class="iconify menu"
data-icon="material-symbols:format-list-bulleted" data-width="24"
data-height="24"></span><span class="translate"
data-lang="lbl_config_basic">Basic</span></label>
<label for="tab2_config"><span class="iconify menu"
data-icon="material-symbols:format-list-bulleted-add" data-width="24"
data-height="24"></span><span class="translate"
data-lang="lbl_config_extended">Extended</span></label>
</nav>
<figure>
<div class="tab1_config">
<div class="detail_box noStack">
<span class="config_sec translate" data-lang="lbl_config_element">Element</span>
<div class="contentBox">
<div class="form_div select">
<label for="elm_select" class="form_label">ID</label>
<select class="input_select" name="elm_select" id="elm_select"></select>
</div>
</div>
</div>
<div class="detail_box elm_config_box circle rect icon svg switch image fObj">
<span class="config_sec translate" data-lang="lbl_config_size">Size</span>
<div class="contentBox">
<div class="elm_config_box rect icon svg switch image fObj">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_width" id="elm_width" placeholder=""
spellcheck="false" autocomplete="off">
<label for="elm_width" class="form_label translate"
data-lang="lbl_width">Width</label>
</div>
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_height" id="elm_height" placeholder=""
spellcheck="false" autocomplete="off">
<label for="elm_height" class="form_label translate"
data-lang="lbl_height">Height</label>
</div>
<div class="elm_config_box icon">
<div class="form_div textbox">
<span class="translate" data-lang="ex_config_icon_tipp"><u>Tipp:</u>
Square Icons need same width and
height! Other ones can have other formats.</span>
</div>
</div>
</div>
<div class="elm_config_box rect">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="0"
value="" name="elm_rx" id="elm_rx" placeholder="" spellcheck="false"
autocomplete="off">
<label for="elm_rx" class="form_label translate"
data-lang="lbl_rounded_corners">Rounded Corner</label>
</div>
</div>
<div class="elm_config_box circle">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_radius" id="elm_radius" placeholder=""
spellcheck="false" autocomplete="off">
<label for="elm_radius" class="form_label translate"
data-lang="lbl_radius">Radius</label>
</div>
</div>
<div class="elm_config_box circle rect">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute" min="1"
value="" name="elm_stroke" id="elm_stroke" placeholder=""
spellcheck="false" autocomplete="off">
<label for="elm_stroke" class="form_label translate"
data-lang="lbl_stroke_width">Stroke width</label>
</div>
</div>
</div>
</div>
<div class="detail_box elm_config_box circle rect text icon svg switch image fObj">
<span class="config_sec translate" data-lang="lbl_coordinates">Position</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute"
name="elm_pos_x" id="elm_pos_x" placeholder="" spellcheck="false"
autocomplete="off" min="0.0" step="0.5">
<label for="elm_pos_x" class="form_label translate"
data-lang="lbl_pos_x">Position X-Axis</label>
</div>
<div class="form_div textbox">
<input type="number" class="input_number elm_config attribute"
name="elm_pos_y" id="elm_pos_y" placeholder="" spellcheck="false"
autocomplete="off" min="0.0" step="0.5">
<label for="elm_pos_y" class="form_label translate"
data-lang="lbl_pos_y">Position Y-Axis</label>
</div>
<div class="cb_switch">
<input type="checkbox" name="elm_protected" class="elm_config"
id="elm_protected">
<label for="elm_protected" class="tooltip" data-title="title_protected_elm">
<span></span>
<span class="translate" data-lang="lbl_protected">Protect the element
from moving</span>
</label>
</div>
</div>
</div>
<div class="detail_box noStack">
<span class="config_sec translate" data-lang="lbl_organize">Organize</span>
<div class="contentBox">
<div class="form_div textbox">
<a id="changeOrder_foreground" class="changeOrder tooltip"
data-title="title_arrange_foreground"><span
class="iconify add_element_area"
data-icon="mdi:arrange-bring-forward" data-height="24"
data-width="24"></span></a>
<a id="changeOrder_background" class="changeOrder tooltip"
data-title="title_arrange_background"><span
class="iconify add_element_area"
data-icon="mdi:arrange-send-backward" data-height="24"
data-width="24"></span></a>
<span id="elm_pos"></span>
<div class="form_div text info">
<span class="translate" data-lang="ex_arrange">The lower the number, the
further the element is in the foreground</span>
</div>
<a href="javascript:;" class="help" data-help="help_organize">
<span class="iconify"
data-icon="material-symbols-light:help-outline-rounded"
data-width="32" data-height="32"></span>
</a>
</div>
</div>
</div>
<div class="detail_box elm_config_box text image switch rect">
<span class="config_sec translate" data-lang="legend_alignment">Alignment</span>
<div class="contentBox">
<div class="elm_config_box text">
<div class="form_div select">
<label for="elm_align" class="form_label translate"
data-lang="legend_alignment">Alignment</label>
<div class="select-option">
<select class="input_select elm_config style" id="elm_align"
name="elm_align">
<option value="start" class="translate" data-lang="opt_left">
Left
</option>
<option value="middle" class="translate" data-lang="opt_middle">
Middle
</option>
<option value="end" class="translate" data-lang="opt_right">
Right
</option>
</select>
</div>
</div>
<div class="form_div text info">
<span class="translate" data-lang="ex_config_align">This will change, if
you
rotate the element</span>
</div>
</div>
<div class="slider_basic">
<div class="form_div textbox">
<input type="number" id="elm_degree" min="0" max="360"
class="input_number input_number_small elm_config attribute"
placeholder="" spellcheck="false" autocomplete="off">
<label for="elm_degree" class="form_label translate"
data-lang="lbl_rotation">Rotation</label>
</div>
<div class="form_div noFocusLine">
<input type="range" value="0" id="elm_degree_slider" min="0" max="360"
class="slider elm_config attribute">
</div>
</div>
<div class="elm_config_box_sub" id="sub_RotationApple">
<div class="form_div text info">
<span class="translate" data-lang="ex_config_RotationApple"><b>Note:</b>
Rotating a switch is not supported in Safari/Apple!</span>
</div>
</div>
</div>
</div>
<div class="detail_box elm_config_box icon">
<span class="config_sec translate" data-lang="legend_alignment">Alignment</span>
<div class="contentBox">
<div class="form_div select">
<label for="elm_flip" class="translate form_label"
data-lang="lbl_flip">Horizontal/Vertical flip</label>
<div class="select-option">
<select class="input_select elm_config attribute" id="elm_flip"
name="elm_flip">
<option value="" class="translate" data-lang="opt_none" selected>
Deactivated
</option>
<option value="horizontal" class="translate"
data-lang="opt_horizontal">
Horizontal
</option>
<option value="vertical" class="translate" data-lang="opt_vertical">
Vertical
</option>
<option value="horizontal,vertical" class="translate"
data-lang="opt_horizontal_vertical">
Horizontal and vertical
</option>
</select>
</div>
</div>
<div class="form_div select">
<label for="elm_rotate" class="translate form_label"
data-lang="lbl_rotation">Rotation</label>
<div class="select-option">
<select class="input_select elm_config attribute" id="elm_rotate"
name="elm_rotate">
<option value="0" class="translate" data-lang="opt_none" selected>
Deactivated
</option>
<option value="90deg" class="translate" data-lang="opt_90_deg">
90 Degree
</option>
<option value="180deg" class="translate" data-lang="opt_180_deg">
180 Degree
</option>
<option value="270deg" class="translate" data-lang="opt_270_deg">
270 Degree
</option>
</select>
</div>
</div>
</div>
</div>
<div class="elm_config_box circle rect text use icon svg switch fObj">
<div class="detail_box">
<span class="config_sec translate" data-lang="lbl_color">Color</span>
<div class="contentBox">
<div class="form_div textbox switchNoIcon">
<input type="text" class="input_text color elm_config" name="elm_color"
id="elm_color" placeholder="" spellcheck="false" autocomplete="off"
data-jscolor="{}">
<label for="elm_color"
class="form_label elm_config_box circle rect text icon svg translate"
data-lang="lbl_outline_color">Outline Color</label>
<label for="elm_color" class="form_label elm_config_box use translate"
data-lang="lbl_animation_color">Animation Color</label>
<label for="elm_color"
class="form_label elm_config_box switch translate"
data-lang="lbl_color_knob">Color of the knob</label>
</div>
<!--
<div class="form_div button">
<input type="button" value="Switch to gradient"
class="input_button color_change translateV"
data-lang-value="value_color_change_color">
</div>
-->
<div class="elm_config_box use">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config"
name="elm_line_color" id="elm_line_color" placeholder=""
spellcheck="false" autocomplete="off" data-jscolor="{}">
<label for="elm_line_color" class="form_label translate"
data-lang="lbl_line_color">Line Color</label>
</div>
</div>
<div class="elm_config_box switch switchNoIcon">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config"
name="elm_color_on" id="elm_color_on" placeholder=""
spellcheck="false" autocomplete="off" data-jscolor="{}">
<label for="elm_color_on" class="form_label translate"
data-lang="lbl_color_knob_on">Color of the knob (Active)</label>
</div>
</div>
<div class="elm_config_box circle rect text switch">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config"
name="elm_fill" id="elm_fill" placeholder="" spellcheck="false"
autocomplete="off" data-jscolor="{}">
<label for="elm_fill" class="form_label translate"
data-lang="lbl_fill_color">Fill color</label>
</div>
</div>
<div class="elm_config_box switch">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config"
name="elm_fill_on" id="elm_fill_on" placeholder=""
spellcheck="false" autocomplete="off" data-jscolor="{}">
<label for="elm_fill_on" class="form_label translate"
data-lang="lbl_fill_color_on">Fill color (Active)</label>
</div>
</div>
<div class="elm_config_box_sub" id="sub_SwitchBox">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config"
name="elm_text_off" id="elm_text_off" placeholder=""
spellcheck="false" autocomplete="off" data-jscolor="{}">
<label for="elm_text_off" class="form_label translate"
data-lang="lbl_text_off">Text/icon color</label>
</div>
<div class="form_div textbox">
<input type="text" class="input_text color elm_config"
name="elm_text_on" id="elm_text_on" placeholder=""
spellcheck="false" autocomplete="off" data-jscolor="{}">
<label for="elm_text_on" class="form_label translate"
data-lang="lbl_text_on">Text/icon color (Active)</label>
</div>
</div>
<div class="elm_config_box switch noStack">
<div class="form_div button">
<input id="preview_switch" class="input_button translateV"
type="button" data-lang-value="legend_preview" value="Preview">
</div>
</div>
</div>
</div>
</div>
<div class="elm_config_box switch">
<div class="detail_box">
<span class="config_sec translate" data-lang="lbl_design">Design</span>
<div class="contentBox">
<label for="elm_design" class="translate form_label"
data-lang="lbl_design">Design</label>
<div class="form_div select">
<div class="select-option">
<select class="input_select elm_config" id="elm_design"
name="elm_design">
</select>
</div>
</div>
<div class="elm_config_box_sub" id="sub_SwitchBoxOwnStyle">
<div class="form_div textbox">
<input type="text" class="input_text elm_config icon_autocomplete"
name="elm_icon_off" id="elm_icon_off" placeholder=""
spellcheck="false" autocomplete="off">
<label for="elm_icon_off" class="form_label translate"
data-lang="lbl_icon">Icon</label>
</div>
<div class="form_div textbox">
<input type="text" class="input_text elm_config icon_autocomplete"
name="elm_icon_on" id="elm_icon_on" placeholder=""
spellcheck="false" autocomplete="off">
<label for="elm_icon_on" class="form_label translate"
data-lang="lbl_icon_on">Icon (Active)</label>
</div>
</div>
<a class="help margin" href="javascript:;" data-help="help_design"><span
class="iconify"
data-icon="material-symbols-light:help-outline-rounded"
data-width="32" data-height="32"></span></a>
</div>
</div>
</div>
<div class="detail_box">
<span class="config_sec translate" data-lang="lbl_shadow">Shadow</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text" class="input_text color elm_config" name="elm_shadow"
id="elm_shadow" placeholder="" spellcheck="false" autocomplete="off"
data-jscolor="{}">
<label for="elm_shadow" class="form_label translate"
data-lang="lbl_shadow_color">Shadow color</label>
</div>
</div>
</div>
<div class="detail_box elm_config_box svg">
<span class="config_sec translate" data-lang="lbl_svg_settings">SVG Settings</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text" class="input_text elm_config attribute"
name="elm_viewBox" id="elm_viewBox" placeholder="" spellcheck="false"
autocomplete="off">
<label for="elm_viewBox" class="form_label translate"
data-lang="lbl_viewbox">ViewBox</label>
</div>
<div class="form_div textbox">
<label for="elm_svg_content" class="form_label translate"
data-lang="lbl_svg_content">SVG Content</label>
<textarea id="elm_svg_content" name="elm_svg_content" cols="30" rows="10"
class="input_textarea elm_config attribute" autocomplete="off"
spellcheck="false"></textarea>
</div>
</div>
</div>
<div class="detail_box elm_config_box fObj">
<span class="config_sec translate" data-lang="lbl_fObj_settings">Foreign Object
Settings</span>
<div class="contentBox">
<div class="form_div textbox">
<label for="elm_fObj_content" class="form_label translate"
data-lang="lbl_fObj_content">ForeignObject content</label>
<textarea id="elm_fObj_content" name="elm_fObj_content" cols="30" rows="10"
class="input_textarea elm_config attribute" autocomplete="off"
spellcheck="false"></textarea>
</div>
</div>
</div>
<div class="detail_box elm_config_box image">
<span class="config_sec translate" data-lang="lbl_image_settings">Image
Settings</span>
<div class="contentBox">
<div class="form_div textbox">
<input type="text"
class="input_text elm_config href attribute icon_in_input_pad2"
name="elm_href" id="elm_href" placeholder="" spellcheck="false"
autocomplete="off">
<label for="elm_href" class="form_label translate"
data-lang="lbl_href">Address:</label>
<div class="icon_wrapper">
<a class="icon_in_input tooltip" id="image_href_gallery"
data-title="title_sel_image">
<span class="iconify" data-icon="mdi:file-image" data-width="24"
data-height="24"></span>
</a>
<a class="frm-datasource icon_in_input tooltip"
data-title="title_sel_ds">
<span class="iconify" data-icon="mdi:database-search"
data-width="24" data-height="24"></span>
</a>
</div>