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

31.08.20

Разработка - Работа с интерфейсом

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

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

 

Задача

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

 

Проблема

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

&НаКлиенте

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

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

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

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



&НаКлиенте

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

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

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

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

 

Решение

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

 

Разработка

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

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

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

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

&НаКлиенте

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

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

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

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

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

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

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

 

PS:

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

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

 

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

//+++ Обновление публикации от 31.08.2020 г.

//     Посмотрите новую статью "Динамическое формирование интерфейса"

//--- Обновление публикации от 31.08.2020 г.

часы аналоговые цифровые время абсолютный цвет цвета ui ux дизайн

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61698    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54314    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16623    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10563    745    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023    9484    150    acces969    31    

115

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3577    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12010    1    5    

10
Отзывы
18. qwinter 671 26.08.19 15:27 Сейчас в теме
Опять велосипеды в центре внимания... Ну когда уже 1Сники будут элементарные вещи знать?
Прикрепленные файлы:
abror2524; orientir1C; SerEvg; JohnConnor; Aquashop; Yashazz; maksa2005; Zircool; PLAstic; Kaval88; rpgshnik; teploukhov; WellMaster; triviumfan; A_Max; philya; Anchoret; manlak; suepifanov; fancy; kuzyara; gzharkoj; SlavaKron; CyberCerber; greenLiss; CSiER; shard; BigB; +28 Ответить
Остальные комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. greenLiss 144 26.08.19 13:13 Сейчас в теме
Я наверное глупость скажу, но...

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

&НаКлиенте
Процедура УстановитьВремя()  
	ЭтаФорма.Заголовок = "Заголовок "+Строка(Формат(ТекущаяДата(),"ДЛФ=T")); //Заголовок формы
	Элементы.Часы.Заголовок = "Заголовок "+Строка(Формат(ТекущаяДата(),"ДЛФ=T")); //Декорация-надпись
КонецПроцедуры
Показать
Прикрепленные файлы:
Часы.epf
Yakud3a; maksa2005; DrAku1a; v3n7; IcyRider; FesenkoA; skv_79; 🅵🅾️🆇; +8 3 Ответить
2. 🅵🅾️🆇 522 26.08.19 13:16 Сейчас в теме
(1) Сам собрался написать про обработчик ожидания)

Алсо, с таймаутами и подписками жабьегоскрипта надо быть поаккуратнее, зачастую они не умирают вместе со смертью пользовательского сеанса и висят на сервере мертвым грузом, постепенно накапливая свое число.
3. greenLiss 144 26.08.19 13:19 Сейчас в теме
(2) ну там вроде проблема была, что при срабатывании обработчика ожидания введенный текст сбрасывался... Но если изменять не реквизит формы, а элемент формы или заголовок, то всё норм.
IcyRider; WellMaster; BigB; +3 Ответить
4. Tria 14 26.08.19 13:21 Сейчас в теме
(1) Вообще-то в начале статьи автор как раз и описал решение с обработчиком ожидания и проблемы такого решения.
wowik; WellMaster; CyberCerber; rpgshnik; +4 Ответить
5. greenLiss 144 26.08.19 13:22 Сейчас в теме
(4) Так в том-то и проблема, что нет проблемы...
maksa2005; Jimbo; Arxxximed; IcyRider; Akavi; +5 1 Ответить
6. spacecraft 26.08.19 13:27 Сейчас в теме
(1) И? Как я понял статью, там упор делался решение проблемы: сброс вводимого текста в поле ввода при подключаемом обработчике ожидания.
Ваш код так же сбрасывает вводимый текст при установке "времени". Форма обновляется и вводимый текст сбрасывается.
CyberCerber; rpgshnik; +2 Ответить
7. greenLiss 144 26.08.19 13:31 Сейчас в теме
(6) Я проверил, не сбрасывается, обработка прикреплена к первому комментарию, можете скачать и тоже проверить.
8. spacecraft 26.08.19 13:32 Сейчас в теме
(7) так я ее и проверил. Сбрасывается. 1С:Предприятие 8.3 (8.3.13.1690)
philya; CyberCerber; rpgshnik; +3 Ответить
9. greenLiss 144 26.08.19 13:36 Сейчас в теме
(8) Я делал на 1С:Предприятие 8.3 (8.3.15.1489), может позже гляну на 13, даже интересно.
11. greenLiss 144 26.08.19 13:40 Сейчас в теме
(8) Нашел установленную 13 версию, и правда, сбрасывается...
Ну что можно сказать, тут только словами Фирмы 1С, "Попробуйте обновить платформу до актуального релиза" XD
wowik; A_Max; ixijixi; guzel001; FesenkoA; CyberCerber; RomanCrow13; +7 Ответить
12. rpgshnik 3625 26.08.19 14:49 Сейчас в теме
(8) всё верно, именно на этой платформе и веду разработку
Прикрепленные файлы:
13. rpgshnik 3625 26.08.19 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.

Файл обработки прилагаю
Прикрепленные файлы:
ПроверкаОбработчикаИПоляВвода.epf
wowik; triviumfan; FesenkoA; CyberCerber; +4 Ответить
16. BigB 191 26.08.19 15:23 Сейчас в теме
(13) Проверил на платформе 8.3.15.1565 - обнуляется в обоих случаях!
rpgshnik; +1 Ответить
10. ltfriend 951 26.08.19 13:38 Сейчас в теме
Нужно просто вместо реквизита для времени использовать декорацию «Надпись» (что и показано в комментарии выше) и не нужны ни какие html.
14. CSiER 35 26.08.19 15:10 Сейчас в теме
Дело в фокусе - чтобы решить проблему, нужно в обработчик добавить Элементы.Текст1.ВыделенныйТекст = "";
Прикрепленные файлы:
Часы.epf
Lexx100; BigB; +2 Ответить
15. rpgshnik 3625 26.08.19 15:15 Сейчас в теме
(14)
Элементы.Текст1.ВыделенныйТекст = "";

Вариант, для декорации. При использование реквизита для времени, поведение поля ввода остается не менее странным.
Прикрепленные файлы:
ПроверкаОбработчикаИПоляВвода.epf
19. BigB 191 26.08.19 15:28 Сейчас в теме
(15) На платформе 8.3.15.1565 в режиме "Реквизит" вводил последовательно числа 1234567890. В результате получил хрень какую-то 8907564231.
В режиме "Декорация" работает правильно!
17. BigB 191 26.08.19 15:24 Сейчас в теме
(14) На платформе 8.3.15.1565 работает правильно.
20. shard 279 26.08.19 15:35 Сейчас в теме
(14) главное - не выделять текст вручную
18. qwinter 671 26.08.19 15:27 Сейчас в теме
Опять велосипеды в центре внимания... Ну когда уже 1Сники будут элементарные вещи знать?
Прикрепленные файлы:
abror2524; orientir1C; SerEvg; JohnConnor; Aquashop; Yashazz; maksa2005; Zircool; PLAstic; Kaval88; rpgshnik; teploukhov; WellMaster; triviumfan; A_Max; philya; Anchoret; manlak; suepifanov; fancy; kuzyara; gzharkoj; SlavaKron; CyberCerber; greenLiss; CSiER; shard; BigB; +28 Ответить
21. rpgshnik 3625 26.08.19 16:35 Сейчас в теме
(18) век учись, спасибо 👍
22. rpgshnik 3625 27.08.19 04:08 Сейчас в теме
(18) проверил - не работает, текст удаляет при его выделение
25. spacecraft 27.08.19 08:17 Сейчас в теме
(22) все работает правильно. Может не убран код из (15)?
rpgshnik; +1 Ответить
26. rpgshnik 3625 27.08.19 09:30 Сейчас в теме
23. rpgshnik 3625 27.08.19 05:19 Сейчас в теме
(18) комментарий жалко нельзя редактировать :) по этому гифка поведения прилагается отдельно, что ещё можно включить?
Прикрепленные файлы:
olololeg; +1 Ответить
27. Anchoret 60 28.08.19 10:59 Сейчас в теме
(18) Который раз убеждаюсь, что практически на каждый велосипед, можно найти "галку" в свойствах
28. rpgshnik 3625 28.08.19 11:26 Сейчас в теме
(27) ещё немного прокачался в HTML :) и аналоговые часы выводить намного приятнее именно в HTML. Так же всегда думал, что обработчик ожидания это не асинхронный вызов.
24. Неопределено 90 27.08.19 05:58 Сейчас в теме
Практически готовый алгоритм html-страницы можно взять на
А можно взять полностью готовый на чистом 1С в моей публикации.
29. oafan 27 04.09.19 15:00 Сейчас в теме
Некорректно выводит в поле часы. Есть варианты?
Прикрепленные файлы:
31. rpgshnik 3625 05.09.19 05:57 Сейчас в теме
(29) можно высоту увеличить поля на форме... я думаю, что тут нужно с css стилями поиграть, но сам не силён, как под самый "потолок" вывести время.
30. oafan 27 04.09.19 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>
32. rpgshnik 3625 05.09.19 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>";
КонецПроцедуры
Показать


Ещё возможно что код как-то криво копирует и транслируется... заметил что местами появляются пробелы, возьмите код из обработки ниже
Прикрепленные файлы:
ПроверкаВремениХТМЛ.epf
33. rpgshnik 3625 05.09.19 06:18 Сейчас в теме
(30) так же если интересно обработка с кодом аналоговых часов
Прикрепленные файлы:
АналоговыеЧасы.epf
SlavaKron; +1 Ответить
34. SlavaKron 20.10.19 09:32 Сейчас в теме
(33)
:nth-child
Вот это не взлетит на платформах 1С до 8.3.14, если на компьютере IE8 или ниже. http://htmlbook.ru/css/nth-child
35. Oleg_nsk 277 18.02.20 11:31 Сейчас в теме
Чтобы не извращаться с форматированием минут-секунд в вашем случае достаточно весь JS код заменить на:

function startTime()
{
document.getElementById('txt').innerHTML=new Date().toLocaleTimeString();
setTimeout('startTime()',500);
}
rpgshnik; +1 Ответить
36. Fragster 1137 18.02.20 13:53 Сейчас в теме
У элементов надо свойство "обновление текста редактирования" поменять с "авто" на "Обновлять при изменении значения". Почему Авто так не работает - не знаю, вопросы к разработчикам платформы. Все дело в неявном серверном вызове.
Оставьте свое сообщение