[Механизм интерфейса] Часы

Добавляем цифровые часы на форму, как бонус рассмотрим вариант и с аналоговыми.

Добрый день, Коллеги!

Задача

Необходимо на терминал вывести в заголовок "цифровые часы".

Проблема

Для реализации использовал реквизит формы «Время» (состав даты – время) и обработчик ожидания, который раз в секунду обновлял время. Программный код ниже.

&НаКлиенте

Процедура ПриОткрытии(Отказ)

Время = ТекущаяДата();

ПодключитьОбработчикОжидания("ОбновитьВремя", 1);

КонецПроцедуры



&НаКлиенте

Процедура ОбновитьВремя()

Время = ТекущаяДата();

КонецПроцедуры

Но так как на терминале используются поля для ввода данных, при попытке что-либо в них написать наблюдалось странное поведение – вводимые данные не сохранялись, и неожиданно обнулялась вводимая информация.

Решение

Причина была в обработчике ожидания. Решением проблемы является использование поля HTML и вывода времени в него. Демонстрация ниже.

Разработка

Алгоритм вывода времени

//infostart.ru/upload/iblock/c60/c60641c5caab5b8a59cccc4433dad40f.jpg Создаем реквизит «ВремяХТМЛ» тип строка (0). Переносим его на форму и настраиваем . Необходимо указать вид, отключить заголовок и цвет рамочки для красоты сделать схожим с цветом формы, а вертикальную полосу прокрутки уберём позже.

Реквизит и элемент формы готовы //infostart.ru/upload/iblock/c60/c60641c5caab5b8a59cccc4433dad40f.jpg . Теперь необходим алгоритм. В интернете не сложно найти готовый javascript, останется только настроить css стили.

Определяем при старте формы вызов функции по формированию времени:

&НаКлиенте

Процедура ПриОткрытии(Отказ)

УстановитьВремяХТМЛ();

КонецПроцедуры

Формируем html-код страницы (уже здесь и пропишем скрытие вертикальной полосы прокрутки):

Код функции "УстановитьВремяХТМЛ"

&НаКлиенте

Процедура УстановитьВремяХТМЛ()

тЦвет  = "0,150,70";

ВремяХТМЛ = "<html>

|<head>

|<style>

|p {

|font-family: Arial;

|font-size: 20pt; /* Размер шрифта в пунктах */

|color: rgb(" + тЦвет + "); /* Цвет шрифта */

|}

|html { overflow:  hidden; } /* Скрываем вертикальную полосу прокрутки*/

|</style>

|<script type=""text/javascript"">

|function startTime()

|{

|var tm=new Date();

|var h=tm.getHours();

|var m=tm.getMinutes();

|var s=tm.getSeconds();

|m=checkTime(m);

|s=checkTime(s);

|document.getElementById('txt').innerHTML=h+"":""+m+"":""+s;

|t=setTimeout('startTime()',500);

|}

|function checkTime(i)

|{

|if (i<10)

|{

|i=""0"" + i;

|}

|return i;

|}

|</script>

|</head>

|<body>

|<p id=""txt""></p>

|</body>

|</html>";

КонецПроцедуры

Цвет часов вынесен отдельно и мы можем привести заголовок к общему стилю.

Немного о цвете…

Вот тут я конечно удивился. У псевдозаголовка установлен цвет из набора стилей (ЦветАкцента), оказывается из данного стиля вытащить палитру не так просто. Была найдена функция «ПолучитьАбсолютныйЦвет». Она оказалось не до конца рабочей. Главная причина она возвращает оттенок схожий, но не тот. К примеру цвет в стиле (0,150,70), цвет возвращаемый функцией (0,128,0). Неприятный момент.

Код функции "ПолучитьАбсолютныйЦвет"

&НаСервере

Функция ПолучитьАбсолютныйЦвет(ИсходныйЦвет) Экспорт



Если ИсходныйЦвет.Вид = ВидЦвета.Абсолютный Тогда

Возврат ИсходныйЦвет;

КонецЕсли;



ТабДок = Новый ТабличныйДокумент;

ТабДок.Область("R1C1").ЦветФона = ИсходныйЦвет;

ВФ = ПолучитьИмяВременногоФайла("mxl");

ТабДок.Записать(ВФ, ТипФайлаТабличногоДокумента.MXL7);

ТабДок.Прочитать(ВФ);



АЦвет = ТабДок.Область("R1C1").ЦветФона;

ТабДок = Неопределено;

УдалитьФайлы(ВФ);



Возврат АЦвет;



КонецФункции

Была найдена вторая функция — «ПолучитьRGBЦвет», у меня она тоже не взлетела, вместо зеленого возвращает голубой. Но в комментарии привлек внимание код, который тоже не заработал. Но интуитивно добавил вторую строчку… и тут просто произошел парадокс. В комментарии отмечено назначение цвета фону, я добавил ещё строчку с "ЦветТекста" и именно тексту цвет установился, убрал строчку с "ЦветФона" и цвет тексту присваивается "Авто". Фича платформы? Код функции ниже (может работать как на сервере, так и на клиенте, установите нужную директиву, в примере &НаКлиенте).

&НаКлиенте
Функция ПолучитьЦвет(ЦветСтиля)
ТекстХТМЛДокумента = "";
ФорматированныйДокумент = Новый ФорматированныйДокумент;
ФорматированныйДокумент.Добавить("ОпределениеЦвета", Тип("ТекстФорматированногоДокумента"));
ФорматированныйДокумент.Элементы[0].Элементы[0].ЦветФона = ЦветСтиля; //Не устанавливается хз почему, но если убрать, то и в ЦветТекста не встанет
ФорматированныйДокумент.Элементы[0].Элементы[0].ЦветТекста = ЦветСтиля; //Устанавливается :)
ФорматированныйДокумент.ПолучитьHTML(ТекстХТМЛДокумента, Новый Структура);
ФорматированныйДокумент.УстановитьHTML(ТекстХТМЛДокумента, Новый Структура);
Возврат ФорматированныйДокумент.Элементы[0].Элементы[0].ЦветТекста;
КонецФункции

Теперь мы можем назначить цвет часам такой же как у псевдозаголовка. Для этого необходимо переписать строчку с назначением переменной "тЦвет" значения.

тЦвет = ПолучитьЦвет(ЦветаСтиля.ЦветАкцента); //Если мы знаем стиль

//ИЛИ

тЦвет = ПолучитьЦвет(Элементы.НадписьЗаголовок.ЦветТекста); //Если мы не знаем стиль :)

//Где элемент "НадписьЗаголовок" - тот самый псевдозаголовок тип элемента "Декорация-Надпись"

В будущем изменение корпоративного стиля отразится и на псевдозаголовке.

Если потребуется обратная функция, возвращаемое значение стиля по RGB-строке:

Код функции "СформироватьСтиль"

&НаСервере

Функция СформироватьСтиль(аЦвет)

аЦвет = СтрЗаменить(аЦвет," ","");

Разделитель1 = Найти(аЦвет, ",");

R = Лев(аЦвет, Разделитель1-1);

GB = Прав(аЦвет, СтрДлина(аЦвет)-Разделитель1);

Разделитель2 = Найти(GB, ",");

G = Лев(GB, Разделитель2-1);

B = Прав(GB, СтрДлина(GB) - Разделитель2);

СтильЦвет = Новый Цвет(R,G,B);

Возврат               СтильЦвет;

КонецФункции

PS:

Так же можно вывести на форму аналоговые часы. Практически готовый алгоритм html-страницы можно взять на сайте https://codepen.io/, демонстрация одного из алгоритмов ниже.

Текст HTML-страницы "Аналоговые часы в 1С"

<html><head>
<style>
body {
background: #282e3a;
color: #f9f9f9;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
}

p { margin: 0; }

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* ---------- GENERAL-CLASSES ---------- */

.container {
height: 228px;
left: 50%;
margin: -124px 0 0 -100px;
position: absolute;
top: 50%;
width: 200px;
}

/* ---------- APP ---------- */

.app {
text-align: center;
}

.app-title {
font-size: 24px;
font-weight: bold;
text-shadow: 0 5px #15181f;
}

.clock {
background: #1a1d24;
border-radius: 35px;
-webkit-box-shadow: 0 8px 0 #15181f;
box-shadow: 0 8px 0 #15181f;
height: 200px;
margin-bottom: 24px;
position: relative;
width: 200px;
}

.clock-inner {
background: #f9f9f9;
border-radius: 50%;
height: 160px;
left: 50%;
margin: -80px 0 0 -80px;
position: absolute;
top: 50%;
width: 160px;
}

.clock-center,
#clock-seconds,
#clock-minutes,
#clock-hours {
left: 50%;
position: absolute;
top: 50%;
}

.clock-center {
background: #1a1d24;
border-radius: 50%;
height: 12px;
margin: -6px 0 0 -6px;
width: 12px;
z-index: 4;
}

#clock-seconds {
background: #c40206;
border-radius: 2px;
height: 60px;
margin: -60px 0 0 -1px;
-webkit-transform-origin: 1px 60px;
-moz-transform-origin: 1px 60px;
-ms-transform-origin: 1px 60px;
-o-transform-origin: 1px 60px;
transform-origin: 1px 60px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 2px;
z-index: 3;
}

#clock-minutes {
background: #aaa;
border-radius: 4px;
height: 50px;
margin: -50px 0 0 -2px;
-webkit-transform-origin: 2px 50px;
-moz-transform-origin: 2px 50px;
-ms-transform-origin: 2px 50px;
-o-transform-origin: 2px 50px;
transform-origin: 2px 50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 4px;
z-index: 2;
}

#clock-hours {
background: #1a1d24;
border-radius: 4px;
height: 40px;
margin: -40px 0 0 -2px;
-webkit-transform-origin: 2px 40px;
-moz-transform-origin: 2px 40px;
-ms-transform-origin: 2px 40px;
-o-transform-origin: 2px 40px;
transform-origin: 2px 40px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
width: 4px;
z-index: 1;
}

.clock-numbers {
color: #888;
display: block;
font-size: 16px;
font-weight: bold;
height: 120px;
margin: -60px 0 0 -60px;
left: 50%;
position: absolute;
top: 50%;
width: 120px;
}

.clock-numbers li {
height: 20px;
line-height: 20px;
margin: -10px;
position: absolute;
text-align: center;
width: 20px;
}

.clock-numbers li:nth-child(1) {
left: 50%;
top: 0;
}

.clock-numbers li:nth-child(2) {
right: 0;
top: 50%;
}

.clock-numbers li:nth-child(3) {
bottom: 0;
left: 50%;
}

.clock-numbers li:nth-child(4) {
left: 0;
top: 50%;
}
</style>
<script>
function startTime()
{

var clockSeconds = document.getElementById("clock-seconds"),
clockMinutes = document.getElementById("clock-minutes"),
clockHours = document.getElementById("clock-hours");

function getTime() {

var date = new Date(),
seconds = date.getSeconds(),
minutes = date.getMinutes(),
hours = date.getHours(),

degSeconds = seconds * 360 / 60,
degMinutes = (minutes + seconds / 60) * 360 / 60,
degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
}

setInterval(getTime, 1000);
getTime();

}
</script>
<title></title>
<meta charset="UTF-8">
<title>Clock App Icon</title>

<link rel="stylesheet" href="/redirect.php?url=aHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3M/ZmFtaWx5PURyb2lkK1NhbnM6NDAwLDcwMA==">

</head>
<body

<div class="container">

<div class="app">

<div class="clock">

<div class="clock-inner">

<div class="clock-center"></div>
<div id="clock-seconds"></div>
<div id="clock-minutes"></div>
<div id="clock-hours"></div>

<ul class="clock-numbers">

<li>12</li>
<li>3</li>
<li>6</li>
<li>9</li>

</ul>

</div> <!-- end clock-inner -->

</div> <!-- end clock -->

<p class="app-title">Аналоговые часы в 1С</p>

</div> <!-- end app -->

</div> <!-- end container -->

</body>
</html>

Всем удачного кодинга!

31 Comments

greenLiss 26.08.2019 at 13:13

Я наверное глупость скажу, но…

&НаКлиенте
Процедура ПриОткрытии(Отказ)
ПодключитьОбработчикОжидания(«УстановитьВремя»,1);
КонецПроцедуры

&НаКлиенте
Процедура УстановитьВремя()
ЭтаФорма.Заголовок = «Заголовок «+Строка(Формат(ТекущаяДата(),»ДЛФ=T»)); //Заголовок формы
Элементы.Часы.Заголовок = «Заголовок «+Строка(Формат(ТекущаяДата(),»ДЛФ=T»)); //Декорация-надпись
КонецПроцедуры

Показать

Reply ↓

🅵🅾️🆇 26.08.2019 at 13:16

(1) Сам собрался написать про обработчик ожидания)

Алсо, с таймаутами и подписками жабьегоскрипта надо быть поаккуратнее, зачастую они не умирают вместе со смертью пользовательского сеанса и висят на сервере мертвым грузом, постепенно накапливая свое число.

Reply ↓
greenLiss 26.08.2019 at 13:19

(2) ну там вроде проблема была, что при срабатывании обработчика ожидания введенный текст сбрасывался… Но если изменять не реквизит формы, а элемент формы или заголовок, то всё норм.

Reply ↓
Tria 26.08.2019 at 13:21

(1) Вообще-то в начале статьи автор как раз и описал решение с обработчиком ожидания и проблемы такого решения.

Reply ↓
greenLiss 26.08.2019 at 13:22

(4) Так в том-то и проблема, что нет проблемы…

Reply ↓
spacecraft 26.08.2019 at 13:27

(1) И? Как я понял статью, там упор делался решение проблемы: сброс вводимого текста в поле ввода при подключаемом обработчике ожидания.

Ваш код так же сбрасывает вводимый текст при установке «времени». Форма обновляется и вводимый текст сбрасывается.

Reply ↓
greenLiss 26.08.2019 at 13:31

(6) Я проверил, не сбрасывается, обработка прикреплена к первому комментарию, можете скачать и тоже проверить.

Reply ↓
spacecraft 26.08.2019 at 13:32

(7) так я ее и проверил. Сбрасывается. 1С:Предприятие 8.3 (8.3.13.1690)

Reply ↓
greenLiss 26.08.2019 at 13:36

(8) Я делал на 1С:Предприятие 8.3 (8.3.15.1489), может позже гляну на 13, даже интересно.

Reply ↓
greenLiss 26.08.2019 at 13:40

(8) Нашел установленную 13 версию, и правда, сбрасывается…

Ну что можно сказать, тут только словами Фирмы 1С, «Попробуйте обновить платформу до актуального релиза» XD

Reply ↓
rpgshnik 26.08.2019 at 14:49

(8) всё верно, именно на этой платформе и веду разработку

Reply ↓
rpgshnik 26.08.2019 at 15:06

В публикации демонстрируется функционал цифровых часов на платформе 8.3.13.1690. Функционал аналоговых на платформе 8.3.15.1534 (причина новый движок для HTML).

Проверил вариант комментария (1), на нескольких боевых платформах и тестовой (15-й). Поведение странное. Назовём мой первоначальный вариант — «Реквизит», а предложенный «Декорация».

Результат:

8.3.13.1690

Реквизит — Обнуляет поле ввода

Декорация — Обнуляет поле ввода

8.3.14.1694

Реквизит — Обнуляет поле ввода

Декорация — Обнуляет поле ввода

8.3.15.1534

Реквизит — Обнуляет поле ввода

Декорация — Работает

Забавно, ну ок. Пока нет боевой платформы 8.3.15.

Файл обработки прилагаю

Reply ↓
CSiER 26.08.2019 at 15:10

Дело в фокусе — чтобы решить проблему, нужно в обработчик добавить Элементы.Текст1.ВыделенныйТекст = «»;

Reply ↓
rpgshnik 26.08.2019 at 15:15

(14)

Элементы.Текст1.ВыделенныйТекст = «»;

Вариант, для декорации. При использование реквизита для времени, поведение поля ввода остается не менее странным.

Reply ↓
BigB 26.08.2019 at 15:23

(13) Проверил на платформе 8.3.15.1565 — обнуляется в обоих случаях!

Reply ↓
BigB 26.08.2019 at 15:24

(14) На платформе 8.3.15.1565 работает правильно.

Reply ↓
BigB 26.08.2019 at 15:28

(15) На платформе 8.3.15.1565 в режиме «Реквизит» вводил последовательно числа 1234567890. В результате получил хрень какую-то 8907564231.

В режиме «Декорация» работает правильно!

Reply ↓
shard 26.08.2019 at 15:35

(14) главное — не выделять текст вручную

Reply ↓
rpgshnik 26.08.2019 at 16:35

(18) век учись, спасибо 👍

Reply ↓
rpgshnik 27.08.2019 at 04:08

(18) проверил — не работает, текст удаляет при его выделение

Reply ↓
rpgshnik 27.08.2019 at 05:19

(18) комментарий жалко нельзя редактировать 🙂 по этому гифка поведения прилагается отдельно, что ещё можно включить?

Reply ↓
spacecraft 27.08.2019 at 08:17

(22) все работает правильно. Может не убран код из (15)?

Reply ↓
rpgshnik 27.08.2019 at 09:30

(25) Точно 🙂 запутался

Reply ↓
Anchoret 28.08.2019 at 10:59

(18) Который раз убеждаюсь, что практически на каждый велосипед, можно найти «галку» в свойствах

Reply ↓
rpgshnik 28.08.2019 at 11:26

(27) ещё немного прокачался в HTML 🙂 и аналоговые часы выводить намного приятнее именно в HTML. Так же всегда думал, что обработчик ожидания это не асинхронный вызов.

Reply ↓
oafan 04.09.2019 at 15:00

Некорректно выводит в поле часы. Есть варианты?

Reply ↓
oafan 04.09.2019 at 15:17

Почему -то данный код не заработал для цифровых часов использовал

<html>

<script type=»text/javascript»>

setInterval(function () {

date = new Date(),

h = date.getHours(),

m = date.getMinutes(),

s = date.getSeconds(),

h = (h < 10) ? ‘0’ + h : h,

m = (m < 10) ? ‘0’ + m : m,

s = (s < 10) ? ‘0’ + s : s,

document.getElementById(‘time’).innerHTML = h + ‘:’ + m + ‘:’ + s;

}, 1000);

</script>

<span id=»time»>00:00:00</span>

</span>

Reply ↓
rpgshnik 05.09.2019 at 05:57

(29) можно высоту увеличить поля на форме… я думаю, что тут нужно с css стилями поиграть, но сам не силён, как под самый «потолок» вывести время.

Reply ↓

rpgshnik 05.09.2019 at 06:15

(30) что-то я намудрил… позже гляну код в конфиге где это применяю… Пока можете вот это использовать:

&НаКлиенте
Процедура УстановитьВремяХТМЛ()
ВремяХТМЛ = «<ht ml>
|<head>
|<st yle>
|p {
|font-family: Arial;
|font-size: 20pt; /* Размер шрифта в пунктах */
|color: #009646; /* Цвет шрифта */
|}
|html { overflow:  hidden; } /* Скрываем вертикальную полосу прокрутки*/
|</style>
|<sc ript type=»»text/javascript»»>
|function startTime()
|{
|var tm=new Date();
|var h=tm.getHours();
|var m=tm.getMinutes();
|var s=tm.getSeconds();
|m=checkTime(m);
|s=checkTime(s);
|document.getElementById(‘txt’).innerHTML=h+»»:»»+m+»»:»»+s;
|t=setTimeout(‘startTime()’,500);
|}
|function checkTime(i)
|{
|if (i<10)
|{
|i=»»0″» + i;
|}
|return i;
|}
|</sc ript>
|</head>
|<body on load=»»startTime()»»>
|<p id=»»txt»»></p>
|</body>
|</html>»;
КонецПроцедуры

Показать

Ещё возможно что код как-то криво копирует и транслируется… заметил что местами появляются пробелы, возьмите код из обработки ниже

Reply ↓

rpgshnik 05.09.2019 at 06:18

(30) так же если интересно обработка с кодом аналоговых часов

Reply ↓
SlavaKron 20.10.2019 at 09:32

(33)

:nth-child

Вот это не взлетит на платформах 1С до 8.3.14, если на компьютере IE8 или ниже. http://htmlbook.ru/css/nth-child

Reply ↓

[Механизм интерфейса] Часы

Алгоритм вывода времени

Related Posts

31 Comments

Leave a Comment Отменить ответ