Merge branch '1403-Añadir-relojes-a-consolas-visuales-com1' into 'develop'
Add clocks to visual console - #1403 See merge request artica/pandorafms!1145
This commit is contained in:
vgilc
commit
7d27d5f9a7
|
|
@ -625,6 +625,14 @@ function update_button_palette_callback() {
|
|||
|
||||
setBarsGraph(idItem, values);
|
||||
break;
|
||||
|
||||
case 'clock':
|
||||
|
||||
$("#text_" + idItem).html(values['label']);
|
||||
$("#image_" + idItem).attr("src", "images/spinner.gif");
|
||||
setClock(idItem, values);
|
||||
break;
|
||||
|
||||
case 'auto_sla_graph':
|
||||
if($('input[name=width]').val() == ''){
|
||||
alert('Undefined width');
|
||||
|
|
@ -855,6 +863,9 @@ function readFields() {
|
|||
values['label_position'] = $(".labelpos[sel=yes]").attr('position');
|
||||
values['show_statistics'] = $("input[name=show_statistics]").is(':checked') ? 1 : 0;
|
||||
values['show_on_top'] = $("input[name=show_on_top]").is(':checked') ? 1 : 0;
|
||||
values['time_format'] = $("select[name=time_format]").val();
|
||||
values['timezone'] = $("select[name=timezone]").val();
|
||||
values['clock_animation'] = $("select[name=clock_animation]").val();
|
||||
|
||||
if (is_metaconsole()) {
|
||||
values['metaconsole'] = 1;
|
||||
|
|
@ -1215,6 +1226,7 @@ function toggle_item_palette() {
|
|||
activeToolboxButton('simple_value', true);
|
||||
activeToolboxButton('label', true);
|
||||
activeToolboxButton('icon', true);
|
||||
activeToolboxButton('clock', true);
|
||||
activeToolboxButton('percentile_item', true);
|
||||
activeToolboxButton('group_item', true);
|
||||
activeToolboxButton('box_item', true);
|
||||
|
|
@ -1246,6 +1258,7 @@ function toggle_item_palette() {
|
|||
activeToolboxButton('simple_value', false);
|
||||
activeToolboxButton('label', false);
|
||||
activeToolboxButton('icon', false);
|
||||
activeToolboxButton('clock', false);
|
||||
activeToolboxButton('percentile_item', false);
|
||||
activeToolboxButton('group_item', false);
|
||||
activeToolboxButton('box_item', false);
|
||||
|
|
@ -1556,7 +1569,14 @@ function loadFieldsFromDB(item) {
|
|||
$("#percentile_item_row_6 .ColorPickerDivSample")
|
||||
.css('background-color', val);
|
||||
}
|
||||
|
||||
|
||||
if (key == 'clock_animation')
|
||||
$("select[name=clock_animation]").val(val);
|
||||
if (key == 'time_format')
|
||||
$("select[name=time_format]").val(val);
|
||||
if (key == 'timezone')
|
||||
$("select[name=timezone]").val(val);
|
||||
|
||||
if (key == 'value_show') {
|
||||
$("select[name=value_show]").val(val);
|
||||
}
|
||||
|
|
@ -1867,6 +1887,15 @@ function hiddenFields(item) {
|
|||
|
||||
$("#line_width_row").css('display', 'none');
|
||||
$("#line_width_row." + item).css('display', '');
|
||||
|
||||
$("#timezone_row").css('display', 'none');
|
||||
$("#timezone_row." + item).css('display', '');
|
||||
|
||||
$("#timeformat_row").css('display', 'none');
|
||||
$("#timeformat_row." + item).css('display', '');
|
||||
|
||||
$("#clock_animation_row").css('display', 'none');
|
||||
$("#clock_animation_row." + item).css('display', '');
|
||||
|
||||
$("#line_case").css('display', 'none');
|
||||
$("#line_case." + item).css('display', '');
|
||||
|
|
@ -1907,7 +1936,7 @@ function cleanFields(item) {
|
|||
$("input[name='grid_color']").val('#000000');
|
||||
$("input[name='resume_color']").val('#000000');
|
||||
$("input[name='border_width']").val(3);
|
||||
$("input[name='fill_color']").val('#ffffff');
|
||||
$("input[name='fill_color']").val('#000000');
|
||||
$("input[name='line_width']").val(3);
|
||||
$("input[name='line_color']").val('#000000');
|
||||
$("select[name=type_percentile]").val('');
|
||||
|
|
@ -1916,6 +1945,9 @@ function cleanFields(item) {
|
|||
$("input[name=percentile_label]").val('');
|
||||
$(".ColorPickerDivSample").css('background-color', '#FFF');
|
||||
$("input[name=show_on_top]").prop("checked", false);
|
||||
$("select[name='time_format']").val('time');
|
||||
$("select[name='timezone']").val('Europe/Madrid');
|
||||
$("select[name='clock_animation']").val('analogic_1');
|
||||
|
||||
|
||||
$("#preview").empty();
|
||||
|
|
@ -2101,6 +2133,84 @@ function setBarsGraph(id_data, values) {
|
|||
});
|
||||
}
|
||||
|
||||
function setClock(id_data, values) {
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
parameter = Array();
|
||||
|
||||
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
|
||||
parameter.push ({name: "action", value: "get_module_type_string"});
|
||||
parameter.push ({name: "time_format", value: values['time_format']});
|
||||
parameter.push ({name: "timezone", value: values['timezone']});
|
||||
parameter.push ({name: "clock_animation", value: values['clock_animation']});
|
||||
parameter.push ({name: "label", value: values['label']});
|
||||
parameter.push ({name: "width", value: values['width_percentile']});
|
||||
parameter.push ({name: "always_on_top", value: values['always_on_top']});
|
||||
parameter.push ({name: "id_element", value: id_data});
|
||||
parameter.push ({name: "id_visual_console", value: id_visual_console});
|
||||
jQuery.ajax({
|
||||
url: get_url_ajax(),
|
||||
data: parameter,
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
|
||||
if(values['clock_animation'] == 'analogic_1'){
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/clock.png');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/digital-clock.png');
|
||||
}
|
||||
|
||||
if (values['width_percentile'] == 0) {
|
||||
if(values['clock_animation'] == 'analogic_1'){
|
||||
$("#" + id_data + " img").css('width', 200 + 'px');
|
||||
$("#" + id_data + " img").css('height', 240 + 'px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', 200 + 'px');
|
||||
|
||||
if(values['time_format'] == 'time'){
|
||||
$("#" + id_data + " img").css('height', 71 + 'px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('height', 91 + 'px');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
if(values['clock_animation'] == 'analogic_1'){
|
||||
$("#" + id_data + " img").css('width', values['width_percentile'] + 'px');
|
||||
$("#" + id_data + " img").css('height', parseInt(values['width_percentile'])+40 + 'px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', values['width_percentile'] + 'px');
|
||||
|
||||
if(values['time_format'] == 'time'){
|
||||
$("#" + id_data + " img").css('height', parseInt(values['width_percentile'])/3.9+20 + 'px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('height', parseInt(values['width_percentile'])/3.9+40 + 'px');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
|
||||
$('#'+id_data+ ' img').css('margin-top', parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);
|
||||
}
|
||||
else{
|
||||
$('#'+id_data+ ' img').css('margin-left', parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setModuleGraph(id_data) {
|
||||
var parameter = Array();
|
||||
|
||||
|
|
@ -3392,7 +3502,43 @@ function createItem(type, values, id_data) {
|
|||
}
|
||||
|
||||
|
||||
setBarsGraph(id_data, values);
|
||||
setBarsGraph(id_data, values);
|
||||
break;
|
||||
case 'clock':
|
||||
sizeStyle = '';
|
||||
imageSize = '';
|
||||
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item clock" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'down'){
|
||||
item = $('<div id="' + id_data + '" class="item clock" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'left'){
|
||||
item = $('<div id="' + id_data + '" class="item clock" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img style="float:right" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table style="float:left;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'right'){
|
||||
item = $('<div id="' + id_data + '" class="item clock" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img style="float:left" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table style="float:right;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
setClock(id_data, values);
|
||||
|
||||
break;
|
||||
case 'simple_value':
|
||||
sizeStyle = '';
|
||||
|
|
@ -3623,6 +3769,7 @@ function updateDB_visual(type, idElement , values, event, top, left) {
|
|||
case 'icon':
|
||||
case 'module_graph':
|
||||
case 'bars_graph':
|
||||
case 'clock':
|
||||
case 'auto_sla_graph':
|
||||
case 'donut_graph':
|
||||
|
||||
|
|
@ -4116,6 +4263,15 @@ function eventsItems(drag) {
|
|||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('clock')) {
|
||||
creationItem = null;
|
||||
selectedItem = 'clock';
|
||||
idItem = $(divParent).attr('id');
|
||||
activeToolboxButton('copy_item', true);
|
||||
activeToolboxButton('edit_item', true);
|
||||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('handler_start')) {
|
||||
idItem = $(divParent).attr('id')
|
||||
.replace("handler_start_", "");
|
||||
|
|
@ -4300,6 +4456,9 @@ function eventsItems(drag) {
|
|||
if ($(event.target).hasClass('icon')) {
|
||||
selectedItem = 'icon';
|
||||
}
|
||||
if ($(event.target).hasClass('clock')) {
|
||||
selectedItem = 'clock';
|
||||
}
|
||||
if ($(event.target).hasClass('handler_start')) {
|
||||
selectedItem = 'handler_start';
|
||||
}
|
||||
|
|
@ -4622,6 +4781,10 @@ function click_button_toolbox(id) {
|
|||
toolbuttonActive = creationItem = 'icon';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'clock':
|
||||
toolbuttonActive = creationItem = 'clock';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'group_item':
|
||||
toolbuttonActive = creationItem = 'group_item';
|
||||
toggle_item_palette();
|
||||
|
|
@ -4663,6 +4826,7 @@ function click_button_toolbox(id) {
|
|||
activeToolboxButton('simple_value', false);
|
||||
activeToolboxButton('label', false);
|
||||
activeToolboxButton('icon', false);
|
||||
activeToolboxButton('clock', false);
|
||||
activeToolboxButton('service', false);
|
||||
activeToolboxButton('group_item', false);
|
||||
activeToolboxButton('auto_sla_graph', false);
|
||||
|
|
@ -4696,6 +4860,7 @@ function click_button_toolbox(id) {
|
|||
activeToolboxButton('simple_value', true);
|
||||
activeToolboxButton('label', true);
|
||||
activeToolboxButton('icon', true);
|
||||
activeToolboxButton('clock', true);
|
||||
activeToolboxButton('group_item', true);
|
||||
activeToolboxButton('auto_sla_graph', true);
|
||||
activeToolboxButton('donut_graph', true);
|
||||
|
|
@ -4749,6 +4914,7 @@ function click_button_toolbox(id) {
|
|||
}
|
||||
break;
|
||||
}
|
||||
$('.ColorPickerDivSample').css('background-color',"black");
|
||||
}
|
||||
|
||||
function showPreview(image) {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 599 B |
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -102,7 +102,7 @@ $parent = get_parameter('parent', null);
|
|||
$map_linked = get_parameter('map_linked', null);
|
||||
$map_linked_weight = get_parameter('map_linked_weight', null);
|
||||
$element_group = get_parameter('element_group', null);
|
||||
$width_percentile = get_parameter('width_percentile', null);
|
||||
$width_percentile = get_parameter('width_percentile', 0);
|
||||
$bars_graph_height = get_parameter('bars_graph_height', null);
|
||||
$max_percentile = get_parameter('max_percentile', null);
|
||||
$height_module_graph = get_parameter('height_module_graph', null);
|
||||
|
|
@ -145,6 +145,10 @@ $type_graph = get_parameter('type_graph', 'area');
|
|||
$label_position = get_parameter('label_position', 'down');
|
||||
$show_statistics = get_parameter('show_statistics', 0);
|
||||
|
||||
$clock_animation = get_parameter('clock_animation', 'analogic_1');
|
||||
$time_format = get_parameter('time_format', 'time');
|
||||
$timezone = get_parameter('timezone', 'Europe/Madrid');
|
||||
|
||||
switch ($action) {
|
||||
case 'get_font':
|
||||
$return = array();
|
||||
|
|
@ -735,6 +739,23 @@ switch ($action) {
|
|||
$values['width'] = $width;
|
||||
}
|
||||
|
||||
break;
|
||||
case 'clock':
|
||||
if ($clock_animation !== null) {
|
||||
$values['clock_animation'] = $clock_animation;
|
||||
}
|
||||
if ($time_format !== null) {
|
||||
$values['time_format'] = $time_format;
|
||||
}
|
||||
if ($timezone !== null) {
|
||||
$values['timezone'] = $timezone;
|
||||
}
|
||||
if ($width !== null) {
|
||||
$values['width'] = $width_percentile;
|
||||
}
|
||||
if ($fill_color !== null) {
|
||||
$values['fill_color'] = $fill_color;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if (enterprise_installed()) {
|
||||
|
|
@ -782,6 +803,13 @@ switch ($action) {
|
|||
unset($values['width']);
|
||||
unset($values['id_agent']);
|
||||
break;
|
||||
case 'clock':
|
||||
unset($values['clock_animation']);
|
||||
unset($values['time_format']);
|
||||
unset($values['timezone']);
|
||||
unset($values['fill_color']);
|
||||
unset($values['width']);
|
||||
break;
|
||||
case 'box_item':
|
||||
unset($values['border_width']);
|
||||
unset($values['border_color']);
|
||||
|
|
@ -843,6 +871,7 @@ switch ($action) {
|
|||
case 'simple_value':
|
||||
case 'label':
|
||||
case 'icon':
|
||||
case 'clock':
|
||||
case 'auto_sla_graph':
|
||||
case 'donut_graph':
|
||||
$elementFields = db_get_row_filter('tlayout_data',
|
||||
|
|
@ -945,6 +974,9 @@ switch ($action) {
|
|||
$elementFields['width_module_graph'] = $elementFields['width'];
|
||||
$elementFields['height_module_graph'] = $elementFields['height'];
|
||||
break;
|
||||
case 'clock':
|
||||
$elementFields['width_percentile'] = $elementFields['width'];
|
||||
break;
|
||||
case 'bars_graph':
|
||||
$elementFields['width_percentile'] = $elementFields['width'];
|
||||
$elementFields['bars_graph_height'] = $elementFields['height'];
|
||||
|
|
@ -1120,6 +1152,14 @@ switch ($action) {
|
|||
$values['border_color'] = $grid_color;
|
||||
$values['id_agent'] = $id_agent_string;
|
||||
break;
|
||||
case 'clock':
|
||||
$values['type'] = CLOCK;
|
||||
$values['width'] = $width_percentile;
|
||||
$values['clock_animation'] = $clock_animation;
|
||||
$values['fill_color'] = $fill_color;
|
||||
$values['time_format'] = $time_format;
|
||||
$values['timezone'] = $timezone;
|
||||
break;
|
||||
case 'auto_sla_graph':
|
||||
$values['type'] = AUTO_SLA_GRAPH;
|
||||
$values['period'] = $event_max_time_row;
|
||||
|
|
@ -1183,7 +1223,7 @@ switch ($action) {
|
|||
}
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
$idData = db_process_sql_insert('tlayout_data', $values);
|
||||
|
||||
$return = array();
|
||||
|
|
|
|||
|
|
@ -201,6 +201,7 @@ define('CIRCULAR_PROGRESS_BAR', 15);
|
|||
define('CIRCULAR_INTERIOR_PROGRESS_BAR', 16);
|
||||
define('DONUT_GRAPH', 17);
|
||||
define('BARS_GRAPH', 18);
|
||||
define('CLOCK', 19);
|
||||
//Some styles
|
||||
define('MIN_WIDTH', 300);
|
||||
define('MIN_HEIGHT', 120);
|
||||
|
|
|
|||
|
|
@ -112,6 +112,9 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
$fill_color = $layoutData['fill_color'];
|
||||
$label_position = $layoutData['label_position'];
|
||||
$show_on_top = $layoutData['show_on_top'];
|
||||
$clock_animation = $layoutData['clock_animation'];
|
||||
$time_format = $layoutData['time_format'];
|
||||
$timezone = $layoutData['timezone'];
|
||||
|
||||
if($show_on_top){
|
||||
$show_on_top_index = 10;
|
||||
|
|
@ -154,6 +157,35 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
else {
|
||||
$tableheight0 = $height;
|
||||
}
|
||||
|
||||
if ($layoutData['width'] == 0){
|
||||
switch($type) {
|
||||
case 19:
|
||||
if($layoutData['clock_animation'] == 'analogic_1'){
|
||||
$himg = '200';
|
||||
$wimg ='200';
|
||||
}
|
||||
else{
|
||||
$himg = '60';
|
||||
$wimg ='200';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
else{
|
||||
switch($type) {
|
||||
case 19:
|
||||
if($layoutData['clock_animation'] == 'analogic_1'){
|
||||
$himg = $width;
|
||||
$wimg = $width;
|
||||
}
|
||||
else{
|
||||
$himg = $width/3.9;
|
||||
$wimg = $width;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if ($layoutData['width'] == 0 || $layoutData['height'] == 0) {
|
||||
switch($type) {
|
||||
|
|
@ -1426,6 +1458,125 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
case BOX_ITEM:
|
||||
$z_index = 1;
|
||||
break;
|
||||
case CLOCK:
|
||||
if ((get_parameter('action') == 'edit') || (get_parameter('operation') == 'edit_visualmap')) {
|
||||
if($width == 0){
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
if($layoutData['clock_animation'] == 'analogic_1'){
|
||||
$img = '<img src="../../images/console/signes/clock.png" style="width:200px;height:240px;">';
|
||||
}
|
||||
else{
|
||||
|
||||
if($layoutData['time_format'] = 'time'){
|
||||
$img = '<img src="../../images/console/signes/digital-clock.png" style="width:200px;height:71px;">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="../../images/console/signes/digital-clock.png" style="width:200px;height:91px;">';
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
if($layoutData['clock_animation'] == 'analogic_1'){
|
||||
$img = '<img src="images/console/signes/clock.png" style="width:200px;height:240px;">';
|
||||
}
|
||||
else{
|
||||
|
||||
if($layoutData['time_format'] == 'time'){
|
||||
$img = '<img src="images/console/signes/digital-clock.png" style="width:200px;height:71px">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/digital-clock.png" style="width:200px;height:91px">';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
|
||||
if($layoutData['clock_animation'] == 'analogic_1'){
|
||||
$img = '<img src="../../images/console/signes/clock.png" style="width:'.$width.'px;height:'. ($width+40).'px;">';
|
||||
}
|
||||
else{
|
||||
|
||||
if($layoutData['time_format'] == 'time'){
|
||||
$img = '<img src="../../images/console/signes/digital-clock.png" style="width:'.$width.'px;height:'. (($width/3.9)+20).'px;">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="../../images/console/signes/digital-clock.png" style="width:'.$width.'px;height:'. (($width/3.9)+40).'px;">';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
if($layoutData['clock_animation'] == 'analogic_1'){
|
||||
$img = '<img src="images/console/signes/clock.png" style="width:'.$width.'px;height:'. ($width+40).'px;">';
|
||||
}
|
||||
else{
|
||||
if($layoutData['time_format'] == 'time'){
|
||||
$img = '<img src="images/console/signes/digital-clock.png" style="width:'.$width.'px;height:'. (($width/3.9)+20).'px;">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/digital-clock.png" style="width:'.$width.'px;height:'. (($width/3.9)+40).'px;">';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
if($layoutData['clock_animation'] == 'analogic_1'){
|
||||
|
||||
if ($width == 0) {
|
||||
if ($layoutData['label_position']=='left') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">' .print_clock_analogic_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
elseif ($layoutData['label_position']=='right') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' . print_clock_analogic_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
else {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';height:'.$himg.'px;">' . print_clock_analogic_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
}
|
||||
else{
|
||||
if ($layoutData['label_position']=='left') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">' . print_clock_analogic_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
elseif ($layoutData['label_position']=='right') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' .print_clock_analogic_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
else {
|
||||
$img ='<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';height:'.$himg.'px;">' . print_clock_analogic_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
elseif($layoutData['clock_animation'] == 'digital_1'){
|
||||
|
||||
if ($width == 0) {
|
||||
if ($layoutData['label_position']=='left') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">' .print_clock_digital_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
elseif ($layoutData['label_position']=='right') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' . print_clock_digital_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
else {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';height:'.$himg.'px;">' . print_clock_digital_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
}
|
||||
else{
|
||||
if ($layoutData['label_position']=='left') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:right;height:'.$himg.'px;">' . print_clock_digital_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
elseif ($layoutData['label_position']=='right') {
|
||||
$img = '<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';float:left;height:'.$himg.'px;">' .print_clock_digital_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
else {
|
||||
$img ='<div id="clock_'.$layoutData['id'].'" style="z-index:'.$show_on_top_index.';height:'.$himg.'px;">' . print_clock_digital_1 ($layoutData['time_format'], $layoutData['timezone'],$layoutData['clock_animation'],$layoutData['width'],$layoutData['height'],$layoutData['id'],$layoutData['fill_color']).'</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
case AUTO_SLA_GRAPH:
|
||||
if ((get_parameter('action') == 'edit') || (get_parameter('operation') == 'edit_visualmap')) {
|
||||
if($width == 0 || $height == 0){
|
||||
|
|
@ -1517,6 +1668,9 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
case ICON:
|
||||
$class .= "icon";
|
||||
break;
|
||||
case CLOCK:
|
||||
$class .= "clock";
|
||||
break;
|
||||
case BOX_ITEM:
|
||||
$class .= "box_item";
|
||||
break;
|
||||
|
|
@ -2027,6 +2181,19 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
|
||||
echo $img;
|
||||
|
||||
if ($layoutData['label_position']=='down') {
|
||||
echo io_safe_output($text);
|
||||
}
|
||||
elseif($layoutData['label_position']=='left' || $layoutData['label_position']=='right') {
|
||||
echo io_safe_output($text);
|
||||
}
|
||||
break;
|
||||
case CLOCK:
|
||||
if ($layoutData['label_position']=='up') {
|
||||
echo io_safe_output($text);
|
||||
}
|
||||
echo $img;
|
||||
|
||||
if ($layoutData['label_position']=='down') {
|
||||
echo io_safe_output($text);
|
||||
}
|
||||
|
|
@ -3736,6 +3903,10 @@ function visual_map_create_internal_name_item($label = null, $type, $image, $age
|
|||
case MODULE_GRAPH:
|
||||
$text = __('Module graph');
|
||||
break;
|
||||
case 'clock':
|
||||
case CLOCK:
|
||||
$text = __('Clock');
|
||||
break;
|
||||
case 'bars_graph':
|
||||
case BARS_GRAPH:
|
||||
$text = __('Bars graph');
|
||||
|
|
@ -3884,6 +4055,9 @@ function visual_map_type_in_js($type) {
|
|||
case ICON:
|
||||
return 'icon';
|
||||
break;
|
||||
case CLOCK:
|
||||
return 'clock';
|
||||
break;
|
||||
case SIMPLE_VALUE_MAX:
|
||||
return 'simple_value';
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
a text to replace '(_VALUE_)' and the value of the module will be printed at the end."), true),
|
||||
'label' => __('Label'),
|
||||
'icon' => __('Icon'),
|
||||
'clock' => __('Clock'),
|
||||
'group_item' => __('Group'),
|
||||
'box_item' => __('Box'),
|
||||
'line_item' => __('Line'));
|
||||
|
|
@ -136,11 +137,11 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
|
||||
|
||||
$form_items['fill_color_row'] = array();
|
||||
$form_items['fill_color_row']['items'] = array('datos', 'box_item');
|
||||
$form_items['fill_color_row']['items'] = array('datos', 'box_item','clock');
|
||||
$form_items['fill_color_row']['html'] =
|
||||
'<td align="left" valign="top" style="">' . __('Fill color') . '</td>' .
|
||||
'<td align="left" style="">' .
|
||||
html_print_input_text_extended ('fill_color', '#ffffff',
|
||||
html_print_input_text_extended ('fill_color', '#000000',
|
||||
'text-fill_color', '', 7, 7, false, '',
|
||||
'class="fill_color"', true) .
|
||||
'</td>';
|
||||
|
|
@ -162,7 +163,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
'datos',
|
||||
'group_item',
|
||||
'auto_sla_graph',
|
||||
'bars_graph');
|
||||
'bars_graph',
|
||||
'clock');
|
||||
$form_items['label_row']['html'] =
|
||||
'<td align="left" valign="top" style="">' . __('Label') . '
|
||||
|
||||
|
|
@ -203,6 +205,45 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
<td align="left">' .
|
||||
html_print_select ($images_list, 'image', '', 'showPreview(this.value);', 'None', 'none', true) .
|
||||
'</td>';
|
||||
|
||||
$form_items['clock_animation_row'] = array();
|
||||
$form_items['clock_animation_row']['items'] = array('clock');
|
||||
$form_items['clock_animation_row']['html'] = '<td align="left"><span>' .
|
||||
__('Clock animation') . '</span></td>
|
||||
<td align="left">'. html_print_select (
|
||||
array ('analogic_1' => __('Simple analogic'),
|
||||
'digital_1' => __('Simple digital')),
|
||||
'clock_animation', '', '', 0, 'analogic_1', true, false, false) . '</td>';
|
||||
|
||||
$form_items['timeformat_row'] = array();
|
||||
$form_items['timeformat_row']['items'] = array('clock');
|
||||
$form_items['timeformat_row']['html'] = '<td align="left"><span>' .
|
||||
__('Time format') . '</span></td>
|
||||
<td align="left">'. html_print_select (
|
||||
array ('time' => __('Only time'),
|
||||
'timedate' => __('Time and date')),
|
||||
'time_format', '', '', 0, 'time', true, false, false) . '</td>';
|
||||
|
||||
$zone_name = array('Africa' => __('Africa'), 'America' => __('America'), 'Antarctica' => __('Antarctica'), 'Arctic' => __('Arctic'), 'Asia' => __('Asia'), 'Atlantic' => __('Atlantic'), 'Australia' => __('Australia'), 'Europe' => __('Europe'), 'Indian' => __('Indian'), 'Pacific' => __('Pacific'), 'UTC' => __('UTC'));
|
||||
$zone_selected = 'Europe';
|
||||
|
||||
$timezones = timezone_identifiers_list();
|
||||
foreach ($timezones as $timezone) {
|
||||
if (strpos($timezone, $zone_selected) !== false) {
|
||||
$timezone_n[$timezone] = $timezone;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$form_items['timezone_row'] = array();
|
||||
$form_items['timezone_row']['items'] = array('clock');
|
||||
$form_items['timezone_row']['html'] = '<td align="left"><span>' .
|
||||
__('Time zone') . '</span></td>
|
||||
<td align="left">'.
|
||||
html_print_select($zone_name, 'zone', $zone_selected, 'show_timezone();', '', '', true).
|
||||
" ". html_print_select($timezone_n, 'timezone','', '', '', '', true).
|
||||
'</td>';
|
||||
|
||||
|
||||
|
||||
$form_items['enable_link_row'] = array();
|
||||
|
|
@ -454,7 +495,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
|
||||
|
||||
$form_items['percentile_bar_row_1'] = array();
|
||||
$form_items['percentile_bar_row_1']['items'] = array('percentile_bar', 'percentile_item', 'datos', 'donut_graph', 'bars_graph');
|
||||
$form_items['percentile_bar_row_1']['items'] = array('percentile_bar', 'percentile_item', 'datos', 'donut_graph', 'bars_graph','clock');
|
||||
$form_items['percentile_bar_row_1']['html'] = '<td align="left">' .
|
||||
__('Width') . '</td>
|
||||
<td align="left">' . html_print_input_text('width_percentile', 0, '', 3, 5, true) . '</td>';
|
||||
|
|
@ -613,7 +654,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items_advance['position_row']['items'] = array('static_graph',
|
||||
'percentile_bar', 'percentile_item', 'module_graph',
|
||||
'simple_value', 'label', 'icon', 'datos', 'box_item',
|
||||
'auto_sla_graph', 'bars_graph');
|
||||
'auto_sla_graph', 'bars_graph','clock');
|
||||
$form_items_advance['position_row']['html'] = '
|
||||
<td align="left">' . __('Position') . '</td>
|
||||
<td align="left">(' . html_print_input_text('left', '0', '', 3, 5, true) .
|
||||
|
|
@ -788,6 +829,25 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
|
||||
|
||||
});
|
||||
|
||||
function show_timezone () {
|
||||
zone = $("#zone").val();
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "ajax.php",
|
||||
data: "page=godmode/setup/setup&select_timezone=1&zone=" + zone,
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
$("#timezone").empty();
|
||||
jQuery.each (data, function (id, value) {
|
||||
timezone = value;
|
||||
var timezone_country = timezone.replace (/^.*\//g, "");
|
||||
$("select[name='timezone']").append($("<option>").val(timezone).html(timezone_country));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
|
@ -810,6 +870,7 @@ function visual_map_editor_print_toolbox() {
|
|||
visual_map_print_button_editor('simple_value', __('Simple Value'), 'left', false, 'binary_min', true);
|
||||
visual_map_print_button_editor('label', __('Label'), 'left', false, 'label_min', true);
|
||||
visual_map_print_button_editor('icon', __('Icon'), 'left', false, 'icon_min', true);
|
||||
visual_map_print_button_editor('clock', __('Clock'), 'left', false, 'clock_min', true);
|
||||
visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
|
||||
visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
|
||||
visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
|
||||
|
|
|
|||
|
|
@ -408,4 +408,252 @@ function d3_donut_graph ($id, $width, $height, $module_data, $resume_color) {
|
|||
return $output;
|
||||
}
|
||||
|
||||
function print_clock_analogic_1 ($time_format, $timezone, $clock_animation,$width,$height,$id_element,$color) {
|
||||
global $config;
|
||||
$output .= "<style type=\"text/css\">
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
svg{
|
||||
stroke: #000;
|
||||
font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;
|
||||
}
|
||||
|
||||
#rim {
|
||||
fill: none;
|
||||
stroke: #999;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.second-hand{
|
||||
stroke-width:3;
|
||||
|
||||
}
|
||||
|
||||
.minute-hand{
|
||||
stroke-width:8;
|
||||
stroke-linecap:round;
|
||||
}
|
||||
|
||||
.hour-hand{
|
||||
stroke-width:12;
|
||||
stroke-linecap:round;
|
||||
}
|
||||
|
||||
.hands-cover{
|
||||
stroke-width:3;
|
||||
fill:#fff;
|
||||
}
|
||||
|
||||
.second-tick{
|
||||
stroke-width:3;
|
||||
fill:#000;
|
||||
}
|
||||
|
||||
.hour-tick{
|
||||
stroke-width:8; //same as the miute hand
|
||||
}
|
||||
|
||||
.second-label{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hour-label{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>";
|
||||
|
||||
$tz = $timezone;
|
||||
$timestamp = time();
|
||||
$dt = new DateTime("now", new DateTimeZone($tz)); //first argument "must" be a string
|
||||
$dt->setTimestamp($timestamp); //adjust the object to correct timestamp
|
||||
|
||||
$dateTimeZoneOption = new DateTimeZone(date_default_timezone_get());
|
||||
$dateTimeZonePandora = new DateTimeZone($timezone);
|
||||
|
||||
$dateTimeOption = new DateTime("now", $dateTimeZoneOption);
|
||||
$dateTimePandora = new DateTime("now", $dateTimeZonePandora);
|
||||
|
||||
$timeOffset = $dateTimeZonePandora->getOffset($dateTimeOption);
|
||||
|
||||
$output .= include_javascript_d3(true);
|
||||
|
||||
if($width == 0){
|
||||
$date_width = 200;
|
||||
}
|
||||
else{
|
||||
$date_width = $width;
|
||||
}
|
||||
|
||||
$output .= '<div style="width:'.$date_width.'px;text-align:center;font-style:italic;font-size:12pt;color:'.$color.'">';
|
||||
|
||||
if($time_format == 'timedate'){
|
||||
$output .= $dt->format('d / m / Y').' - ';
|
||||
|
||||
}
|
||||
|
||||
$output .= $dt->format('a').'</div>';
|
||||
|
||||
|
||||
|
||||
$output .= "<script language=\"javascript\" type=\"text/javascript\">
|
||||
printClockAnalogic1('" . $time_format . "', '" . $timeOffset . "', '" . $clock_animation . "','" . $width . "','" . $height . "','" . $id_element . "','" . $color . "');
|
||||
</script>";
|
||||
|
||||
$timezone_short = explode("/", $timezone);
|
||||
$timezone_short_end = end($timezone_short);
|
||||
|
||||
$output .= '<div style="width:'.$date_width.'px;text-align:center;font-style:italic;font-size:12pt;color:'.$color.'">'.$timezone_short_end.'</div>';
|
||||
|
||||
return $output;
|
||||
|
||||
|
||||
}
|
||||
|
||||
function print_clock_digital_1 ($time_format, $timezone, $clock_animation,$width,$height,$id_element,$color) {
|
||||
global $config;
|
||||
$output .= "<style type=\"text/css\">
|
||||
|
||||
#underlay_".$id_element." path,
|
||||
#underlay circle {
|
||||
fill: none;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
#underlay_".$id_element." .lit {
|
||||
fill: ".$color.";
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
#overlay_".$id_element." path,
|
||||
#overlay_".$id_element." circle {
|
||||
fill: #f6f6f6;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
#overlay_".$id_element." .lit {
|
||||
fill: ".$color.";
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
</style>";
|
||||
|
||||
$output .= include_javascript_d3(true);
|
||||
$tz = $timezone;
|
||||
$timestamp = time();
|
||||
$dt = new DateTime("now", new DateTimeZone($tz)); //first argument "must" be a string
|
||||
$dt->setTimestamp($timestamp); //adjust the object to correct timestamp
|
||||
|
||||
$dateTimeZoneOption = new DateTimeZone(date_default_timezone_get());
|
||||
$dateTimeZonePandora = new DateTimeZone($timezone);
|
||||
|
||||
$dateTimeOption = new DateTime("now", $dateTimeZoneOption);
|
||||
$dateTimePandora = new DateTime("now", $dateTimeZonePandora);
|
||||
|
||||
$timeOffset = $dateTimeZonePandora->getOffset($dateTimeOption);
|
||||
|
||||
$output .= include_javascript_d3(true);
|
||||
|
||||
if($width == 0){
|
||||
$date_width = 200;
|
||||
}
|
||||
else{
|
||||
$date_width = $width;
|
||||
}
|
||||
|
||||
if($time_format == 'timedate'){
|
||||
$output .= '<div style="width:'.$date_width.'px;text-align:center;font-style:italic;font-size:12pt;color:'.$color.'">';
|
||||
$output .= $dt->format('d / m / Y').'</div>';
|
||||
}
|
||||
|
||||
$output .=
|
||||
|
||||
'
|
||||
|
||||
<svg width="'.$date_width.'" height="'.($date_width/3.9).'" viewBox="0 0 375 96">
|
||||
<g transform="translate(17,0)">
|
||||
<g class="digit" transform="skewX(-12)">
|
||||
<path d="M10,8L14,4L42,4L46,8L42,12L14,12L10,8z"/>
|
||||
<path d="M8,10L12,14L12,42L8,46L4,42L4,14L8,10z"/>
|
||||
<path d="M48,10L52,14L52,42L48,46L44,42L44,14L48,10z"/>
|
||||
<path d="M10,48L14,44L42,44L46,48L42,52L14,52L10,48z"/>
|
||||
<path d="M8,50L12,54L12,82L8,86L4,82L4,54L8,50z"/>
|
||||
<path d="M48,50L52,54L52,82L48,86L44,82L44,54L48,50z"/>
|
||||
<path d="M10,88L14,84L42,84L46,88L42,92L14,92L10,88z"/>
|
||||
</g>
|
||||
<g class="digit" transform="skewX(-12)">
|
||||
<path d="M66,8L70,4L98,4L102,8L98,12L70,12L66,8z"/>
|
||||
<path d="M64,10L68,14L68,42L64,46L60,42L60,14L64,10z"/>
|
||||
<path d="M104,10L108,14L108,42L104,46L100,42L100,14L104,10z"/>
|
||||
<path d="M66,48L70,44L98,44L102,48L98,52L70,52L66,48z"/>
|
||||
<path d="M64,50L68,54L68,82L64,86L60,82L60,54L64,50z"/>
|
||||
<path d="M104,50L108,54L108,82L104,86L100,82L100,54L104,50z"/>
|
||||
<path d="M66,88L70,84L98,84L102,88L98,92L70,92L66,88z"/>
|
||||
</g>
|
||||
<g class="separator">
|
||||
<circle r="4" cx="112" cy="28"/>
|
||||
<circle r="4" cx="103.5" cy="68"/>
|
||||
</g>
|
||||
<g class="digit" transform="skewX(-12)">
|
||||
<path d="M134,8L138,4L166,4L170,8L166,12L138,12L134,8z"/>
|
||||
<path d="M132,10L136,14L136,42L132,46L128,42L128,14L132,10z"/>
|
||||
<path d="M172,10L176,14L176,42L172,46L168,42L168,14L172,10z"/>
|
||||
<path d="M134,48L138,44L166,44L170,48L166,52L138,52L134,48z"/>
|
||||
<path d="M132,50L136,54L136,82L132,86L128,82L128,54L132,50z"/>
|
||||
<path d="M172,50L176,54L176,82L172,86L168,82L168,54L172,50z"/>
|
||||
<path d="M134,88L138,84L166,84L170,88L166,92L138,92L134,88z"/>
|
||||
</g>
|
||||
<g class="digit" transform="skewX(-12)">
|
||||
<path d="M190,8L194,4L222,4L226,8L222,12L194,12L190,8z"/>
|
||||
<path d="M188,10L192,14L192,42L188,46L184,42L184,14L188,10z"/>
|
||||
<path d="M228,10L232,14L232,42L228,46L224,42L224,14L228,10z"/>
|
||||
<path d="M190,48L194,44L222,44L226,48L222,52L194,52L190,48z"/>
|
||||
<path d="M188,50L192,54L192,82L188,86L184,82L184,54L188,50z"/>
|
||||
<path d="M228,50L232,54L232,82L228,86L224,82L224,54L228,50z"/>
|
||||
<path d="M190,88L194,84L222,84L226,88L222,92L194,92L190,88z"/>
|
||||
</g>
|
||||
<g class="separator">
|
||||
<circle r="4" cx="236" cy="28"/>
|
||||
<circle r="4" cx="227.5" cy="68"/>
|
||||
</g>
|
||||
<g class="digit" transform="skewX(-12)">
|
||||
<path d="M258,8L262,4L290,4L294,8L290,12L262,12L258,8z"/>
|
||||
<path d="M256,10L260,14L260,42L256,46L252,42L252,14L256,10z"/>
|
||||
<path d="M296,10L300,14L300,42L296,46L292,42L292,14L296,10z"/>
|
||||
<path d="M258,48L262,44L290,44L294,48L290,52L262,52L258,48z"/>
|
||||
<path d="M256,50L260,54L260,82L256,86L252,82L252,54L256,50z"/>
|
||||
<path d="M296,50L300,54L300,82L296,86L292,82L292,54L296,50z"/>
|
||||
<path d="M258,88L262,84L290,84L294,88L290,92L262,92L258,88z"/>
|
||||
</g>
|
||||
<g class="digit" transform="skewX(-12)">
|
||||
<path d="M314,8L318,4L346,4L350,8L346,12L318,12L314,8z"/>
|
||||
<path d="M312,10L316,14L316,42L312,46L308,42L308,14L312,10z"/>
|
||||
<path d="M352,10L356,14L356,42L352,46L348,42L348,14L352,10z"/>
|
||||
<path d="M314,48L318,44L346,44L350,48L346,52L318,52L314,48z"/>
|
||||
<path d="M312,50L316,54L316,82L312,86L308,82L308,54L312,50z"/>
|
||||
<path d="M352,50L356,54L356,82L352,86L348,82L348,54L352,50z"/>
|
||||
<path d="M314,88L318,84L346,84L350,88L346,92L318,92L314,88z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
';
|
||||
|
||||
|
||||
|
||||
$output .= "<script language=\"javascript\" type=\"text/javascript\">
|
||||
printClockDigital1('" . $time_format . "', '" . $timeOffset . "', '" . $clock_animation . "','" . $width . "','" . $height . "','" . $id_element . "','" . $color . "');
|
||||
</script>";
|
||||
|
||||
$timezone_short = explode("/", $timezone);
|
||||
$timezone_short_end = end($timezone_short);
|
||||
|
||||
$output .= '<div style="width:'.$date_width.'px;text-align:center;font-style:italic;font-size:12pt;color:'.$color.'">'.$timezone_short_end.'</div>';
|
||||
|
||||
return $output;
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -2089,4 +2089,254 @@ function print_donut_graph (recipient, width, height, module_data, resume_color)
|
|||
|
||||
slice.exit().remove();
|
||||
}
|
||||
}
|
||||
|
||||
function printClockAnalogic1 (time_format, timezone, clock_animation,width,height,id_element,color) {
|
||||
|
||||
if(width != 0){
|
||||
width = width-20;
|
||||
height = width-20;
|
||||
}
|
||||
|
||||
|
||||
if(width == 0){
|
||||
width = 180;
|
||||
height = 180;
|
||||
}
|
||||
|
||||
var radians = 0.0174532925,
|
||||
clockRadius = width/2,
|
||||
margin = 10,
|
||||
width = (clockRadius+margin)*2,
|
||||
height = (clockRadius+margin)*2,
|
||||
hourHandLength = 2*clockRadius/3,
|
||||
minuteHandLength = clockRadius,
|
||||
secondHandLength = clockRadius-12,
|
||||
secondHandBalance = 30,
|
||||
secondTickStart = clockRadius;
|
||||
secondTickLength = -10,
|
||||
hourTickStart = clockRadius,
|
||||
hourTickLength = -18,
|
||||
secondLabelRadius = clockRadius + 16,
|
||||
secondLabelYOffset = 5,
|
||||
hourLabelRadius = clockRadius - 40,
|
||||
hourLabelYOffset = 7;
|
||||
|
||||
var hourScale = d3.scale.linear()
|
||||
.range([0,330])
|
||||
.domain([0,11]);
|
||||
|
||||
var minuteScale = secondScale = d3.scale.linear()
|
||||
.range([0,354])
|
||||
.domain([0,59]);
|
||||
|
||||
var handData = [
|
||||
{
|
||||
type:'hour',
|
||||
value:0,
|
||||
length:-hourHandLength,
|
||||
scale:hourScale
|
||||
},
|
||||
{
|
||||
type:'minute',
|
||||
value:0,
|
||||
length:-minuteHandLength,
|
||||
scale:minuteScale
|
||||
},
|
||||
{
|
||||
type:'second',
|
||||
value:0,
|
||||
length:-secondHandLength,
|
||||
scale:secondScale,
|
||||
balance:secondHandBalance
|
||||
}
|
||||
];
|
||||
|
||||
function drawClock(){ //create all the clock elements
|
||||
updateData(timezone); //draw them in the correct starting position
|
||||
var svg = d3.select("#clock_"+id_element).append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
var face = svg.append('g')
|
||||
.attr('id','clock-face')
|
||||
.attr('transform','translate(' + (clockRadius + margin) + ',' + (clockRadius + margin) + ')');
|
||||
|
||||
//add marks for seconds
|
||||
face.selectAll('.second-tick')
|
||||
.data(d3.range(0,60)).enter()
|
||||
.append('line')
|
||||
.attr('class', 'second-tick')
|
||||
.attr('x1',0)
|
||||
.attr('x2',0)
|
||||
.attr('y1',secondTickStart)
|
||||
.attr('y2',secondTickStart + secondTickLength)
|
||||
.attr('stroke',color)
|
||||
.attr('transform',function(d){
|
||||
return 'rotate(' + secondScale(d) + ')';
|
||||
});
|
||||
//and labels
|
||||
|
||||
// face.selectAll('.second-label')
|
||||
// .data(d3.range(5,61,5))
|
||||
// .enter()
|
||||
// .append('text')
|
||||
// .attr('class', 'second-label')
|
||||
// .attr('text-anchor','middle')
|
||||
// .attr('x',function(d){
|
||||
// return secondLabelRadius*Math.sin(secondScale(d)*radians);
|
||||
// })
|
||||
// .attr('y',function(d){
|
||||
// return -secondLabelRadius*Math.cos(secondScale(d)*radians) + secondLabelYOffset;
|
||||
// })
|
||||
// .text(function(d){
|
||||
// return d;
|
||||
// });
|
||||
|
||||
//... and hours
|
||||
face.selectAll('.hour-tick')
|
||||
.data(d3.range(0,12)).enter()
|
||||
.append('line')
|
||||
.attr('class', 'hour-tick')
|
||||
.attr('x1',0)
|
||||
.attr('x2',0)
|
||||
.attr('y1',hourTickStart)
|
||||
.attr('y2',hourTickStart + hourTickLength)
|
||||
.attr('stroke',color)
|
||||
.attr('transform',function(d){
|
||||
return 'rotate(' + hourScale(d) + ')';
|
||||
});
|
||||
|
||||
face.selectAll('.hour-label')
|
||||
.data(d3.range(3,13,3))
|
||||
.enter()
|
||||
.append('text')
|
||||
.attr('class', 'hour-label')
|
||||
.attr('text-anchor','middle')
|
||||
.attr('stroke',color)
|
||||
.attr('x',function(d){
|
||||
return hourLabelRadius*Math.sin(hourScale(d)*radians);
|
||||
})
|
||||
.attr('y',function(d){
|
||||
return -hourLabelRadius*Math.cos(hourScale(d)*radians) + hourLabelYOffset;
|
||||
})
|
||||
.text(function(d){
|
||||
return d;
|
||||
});
|
||||
|
||||
|
||||
var hands = face.append('g').attr('id','clock-hands');
|
||||
|
||||
face.append('g').attr('id','face-overlay')
|
||||
.append('circle').attr('class','hands-cover')
|
||||
.attr('stroke',color)
|
||||
.attr('x',0)
|
||||
.attr('y',0)
|
||||
.attr('r',clockRadius/20);
|
||||
|
||||
hands.selectAll('line')
|
||||
.data(handData)
|
||||
.enter()
|
||||
.append('line')
|
||||
.attr('stroke',color)
|
||||
.attr('class', function(d){
|
||||
return d.type + '-hand';
|
||||
})
|
||||
.attr('x1',0)
|
||||
.attr('y1',function(d){
|
||||
return d.balance ? d.balance : 0;
|
||||
})
|
||||
.attr('x2',0)
|
||||
.attr('y2',function(d){
|
||||
return d.length;
|
||||
})
|
||||
.attr('transform',function(d){
|
||||
return 'rotate('+ d.scale(d.value) +')';
|
||||
});
|
||||
}
|
||||
|
||||
function moveHands(){
|
||||
d3.select("#clock_"+id_element+' #clock-hands').selectAll('line')
|
||||
.data(handData)
|
||||
.transition()
|
||||
.attr('transform',function(d){
|
||||
return 'rotate('+ d.scale(d.value) +')';
|
||||
});
|
||||
}
|
||||
|
||||
function updateData(tz){
|
||||
|
||||
var d = new Date();
|
||||
var dt = d.getTime();
|
||||
os = d.getTimezoneOffset();
|
||||
tz = parseInt(tz) + parseInt(os * 60);
|
||||
var t = new Date((dt + (tz * 1000)));
|
||||
|
||||
handData[0].value = (t.getHours() % 12) + t.getMinutes()/60 ;
|
||||
handData[1].value = t.getMinutes();
|
||||
handData[2].value = t.getSeconds();
|
||||
}
|
||||
|
||||
drawClock();
|
||||
|
||||
setInterval(function(){
|
||||
updateData(timezone);
|
||||
moveHands();
|
||||
}, 1000);
|
||||
|
||||
d3.select(self.frameElement).style("height", height + "px");
|
||||
|
||||
$('#clock_'+id_element).css('margin-top','0');
|
||||
|
||||
}
|
||||
|
||||
function printClockDigital1 (time_format, timezone, clock_animation,width,height,id_element,color) {
|
||||
|
||||
var svgUnderlay = d3.select("#clock_"+id_element+" svg"),
|
||||
svgOverlay = d3.select("#clock_"+id_element),
|
||||
svg = d3.selectAll("#clock_"+id_element+" svg");
|
||||
|
||||
svgUnderlay.attr("id", "underlay_"+id_element);
|
||||
svgOverlay.attr("id", "overlay_"+id_element);
|
||||
|
||||
var digit = svg.selectAll(".digit"),
|
||||
separator = svg.selectAll(".separator circle");
|
||||
|
||||
var digitPattern = [
|
||||
[1,0,1,1,0,1,1,1,1,1],
|
||||
[1,0,0,0,1,1,1,0,1,1],
|
||||
[1,1,1,1,1,0,0,1,1,1],
|
||||
[0,0,1,1,1,1,1,0,1,1],
|
||||
[1,0,1,0,0,0,1,0,1,0],
|
||||
[1,1,0,1,1,1,1,1,1,1],
|
||||
[1,0,1,1,0,1,1,0,1,1]
|
||||
];
|
||||
|
||||
(function tick() {
|
||||
|
||||
var tz = timezone;
|
||||
var d = new Date();
|
||||
var dt = d.getTime();
|
||||
os = d.getTimezoneOffset();
|
||||
tz = parseInt(tz) + parseInt(os * 60);
|
||||
var t = new Date((dt + (tz * 1000)));
|
||||
|
||||
var now = new Date,
|
||||
hours = t.getHours(),
|
||||
minutes = t.getMinutes(),
|
||||
seconds = t.getSeconds();
|
||||
|
||||
digit = digit.data([hours / 10 | 0, hours % 10, minutes / 10 | 0, minutes % 10, seconds / 10 | 0, seconds % 10]);
|
||||
digit.select("path:nth-child(1)").classed("lit", function(d) { return digitPattern[0][d]; });
|
||||
digit.select("path:nth-child(2)").classed("lit", function(d) { return digitPattern[1][d]; });
|
||||
digit.select("path:nth-child(3)").classed("lit", function(d) { return digitPattern[2][d]; });
|
||||
digit.select("path:nth-child(4)").classed("lit", function(d) { return digitPattern[3][d]; });
|
||||
digit.select("path:nth-child(5)").classed("lit", function(d) { return digitPattern[4][d]; });
|
||||
digit.select("path:nth-child(6)").classed("lit", function(d) { return digitPattern[5][d]; });
|
||||
digit.select("path:nth-child(7)").classed("lit", function(d) { return digitPattern[6][d]; });
|
||||
separator.classed("lit", seconds & 1);
|
||||
|
||||
setTimeout(tick, 1000 - now % 1000);
|
||||
})();
|
||||
|
||||
}
|
||||
|
|
@ -829,6 +829,12 @@ input.icon_min {
|
|||
input.icon_min[disabled] {
|
||||
background: #fefefe url(../../images/photo.disabled.png) no-repeat center !important;
|
||||
}
|
||||
input.clock_min {
|
||||
background: #fefefe url(../../images/clock-tab.png) no-repeat center !important;
|
||||
}
|
||||
input.clock_min[disabled] {
|
||||
background: #fefefe url(../../images/clock-tab.disabled.png) no-repeat center !important;
|
||||
}
|
||||
input.box_item {
|
||||
background: #fefefe url(../../images/box_item.png) no-repeat center !important;
|
||||
}
|
||||
|
|
@ -4369,6 +4375,8 @@ div#footer_help{
|
|||
.route {
|
||||
fill: none;
|
||||
transition: all 2s ease-in-out;
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
}
|
||||
|
||||
.limit_scroll{
|
||||
|
|
@ -4462,4 +4470,5 @@ form ul.form_flex li ul li{
|
|||
|
||||
.modal_module_list:hover{
|
||||
cursor: pointer;
|
||||
>>>>>>> develop
|
||||
}
|
||||
|
|
@ -241,7 +241,12 @@ $ignored_params['refr'] = '';
|
|||
|
||||
$('.item > div').each( function() {
|
||||
if ($(this).css('float')=='left' || $(this).css('float')=='right') {
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2-15)+'px');
|
||||
if($(this).attr('id').indexOf('clock') || $(this).attr('id').indexOf('overlay')){
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
|
||||
}
|
||||
else{
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2-15)+'px');
|
||||
}
|
||||
$(this).css('margin-left','');
|
||||
}
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -204,19 +204,20 @@ $ignored_params['refr'] = '';
|
|||
|
||||
});
|
||||
|
||||
$('.item > div').each(function(){
|
||||
if($(this).css('float')=='left' || $(this).css('float')=='right'){
|
||||
|
||||
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2-15)+'px');
|
||||
$(this).css('margin-left','');
|
||||
|
||||
$('.item > div').each( function() {
|
||||
if ($(this).css('float')=='left' || $(this).css('float')=='right') {
|
||||
if($(this).attr('id').indexOf('clock') || $(this).attr('id').indexOf('overlay')){
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
|
||||
}
|
||||
else{
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2-15)+'px');
|
||||
}
|
||||
$(this).css('margin-left','');
|
||||
}
|
||||
else{
|
||||
else {
|
||||
$(this).css('margin-left',(parseInt($(this).parent().css('width'))/2-parseInt($(this).css('width'))/2)+'px');
|
||||
$(this).css('margin-top','');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('.item > a > div').each(function(){
|
||||
|
|
|
|||
|
|
@ -312,7 +312,12 @@ $ignored_params['refr'] = '';
|
|||
|
||||
$('.item > div').each( function() {
|
||||
if ($(this).css('float')=='left' || $(this).css('float')=='right') {
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2-15)+'px');
|
||||
if($(this).attr('id').indexOf('clock') || $(this).attr('id').indexOf('overlay')){
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
|
||||
}
|
||||
else{
|
||||
$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2-15)+'px');
|
||||
}
|
||||
$(this).css('margin-left','');
|
||||
}
|
||||
else {
|
||||
|
|
|
|||
Loading…
Reference in New Issue