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

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 1С:ERP Управление предприятием 2 Платные (руб)

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

2400 руб.

29.06.2020    18516    26    6    

41

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024    14538    mrXoxot    43    

116

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024    6503    smielka    37    

98

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

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

27.12.2023    13986    843    elcoan    47    

115

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

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

2 стартмани

10.04.2023    11496    162    acces969    31    

123

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

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

1 стартмани

05.07.2022    5230    kalyaka    6    

33

Работа с интерфейсом Программист Пользователь Платформа 1С v8.3 8.3.14 Конфигурации 1cv8 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Абонемент ($m)

Ещё с времен платформы 8.3.13 можно изменять цвет стилей интерфейса главного окна. Данное расширение позволит вам выбрать из подготовленных десятка стилей на свой вкус.

1 стартмани

01.07.2022    23730    384    rpgshnik    67    

96
Отзывы
18. qwinter 683 26.08.19 15:27 Сейчас в теме
Опять велосипеды в центре внимания... Ну когда уже 1Сники будут элементарные вещи знать?
Прикрепленные файлы:
abasovit; user1150141; DiselDen; 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; +31 Ответить
Остальные комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. greenLiss 145 26.08.19 13:13 Сейчас в теме
Я наверное глупость скажу, но...

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

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

Алсо, с таймаутами и подписками жабьегоскрипта надо быть поаккуратнее, зачастую они не умирают вместе со смертью пользовательского сеанса и висят на сервере мертвым грузом, постепенно накапливая свое число.
3. greenLiss 145 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 145 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 145 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 145 26.08.19 13:36 Сейчас в теме
(8) Я делал на 1С:Предприятие 8.3 (8.3.15.1489), может позже гляну на 13, даже интересно.
11. greenLiss 145 26.08.19 13:40 Сейчас в теме
(8) Нашел установленную 13 версию, и правда, сбрасывается...
Ну что можно сказать, тут только словами Фирмы 1С, "Попробуйте обновить платформу до актуального релиза" XD
rpgshnik; wowik; A_Max; ixijixi; guzel001; FesenkoA; CyberCerber; RomanCrow13; +8 Ответить
12. rpgshnik 3786 26.08.19 14:49 Сейчас в теме
(8) всё верно, именно на этой платформе и веду разработку
Прикрепленные файлы:
13. rpgshnik 3786 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 193 26.08.19 15:23 Сейчас в теме
(13) Проверил на платформе 8.3.15.1565 - обнуляется в обоих случаях!
rpgshnik; +1 Ответить
10. ltfriend 26.08.19 13:38 Сейчас в теме
Нужно просто вместо реквизита для времени использовать декорацию «Надпись» (что и показано в комментарии выше) и не нужны ни какие html.
14. CSiER 36 26.08.19 15:10 Сейчас в теме
Дело в фокусе - чтобы решить проблему, нужно в обработчик добавить Элементы.Текст1.ВыделенныйТекст = "";
Прикрепленные файлы:
Часы.epf
Lexx100; BigB; +2 Ответить
15. rpgshnik 3786 26.08.19 15:15 Сейчас в теме
(14)
Элементы.Текст1.ВыделенныйТекст = "";

Вариант, для декорации. При использование реквизита для времени, поведение поля ввода остается не менее странным.
Прикрепленные файлы:
ПроверкаОбработчикаИПоляВвода.epf
19. BigB 193 26.08.19 15:28 Сейчас в теме
(15) На платформе 8.3.15.1565 в режиме "Реквизит" вводил последовательно числа 1234567890. В результате получил хрень какую-то 8907564231.
В режиме "Декорация" работает правильно!
17. BigB 193 26.08.19 15:24 Сейчас в теме
(14) На платформе 8.3.15.1565 работает правильно.
20. shard 281 26.08.19 15:35 Сейчас в теме
(14) главное - не выделять текст вручную
18. qwinter 683 26.08.19 15:27 Сейчас в теме
Опять велосипеды в центре внимания... Ну когда уже 1Сники будут элементарные вещи знать?
Прикрепленные файлы:
abasovit; user1150141; DiselDen; 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; +31 Ответить
21. rpgshnik 3786 26.08.19 16:35 Сейчас в теме
(18) век учись, спасибо 👍
22. rpgshnik 3786 27.08.19 04:08 Сейчас в теме
(18) проверил - не работает, текст удаляет при его выделение
25. spacecraft 27.08.19 08:17 Сейчас в теме
(22) все работает правильно. Может не убран код из (15)?
rpgshnik; +1 Ответить
26. rpgshnik 3786 27.08.19 09:30 Сейчас в теме
23. rpgshnik 3786 27.08.19 05:19 Сейчас в теме
(18) комментарий жалко нельзя редактировать :) по этому гифка поведения прилагается отдельно, что ещё можно включить?
Прикрепленные файлы:
olololeg; +1 Ответить
27. Anchoret 65 28.08.19 10:59 Сейчас в теме
(18) Который раз убеждаюсь, что практически на каждый велосипед, можно найти "галку" в свойствах
rpgshnik; +1 Ответить
28. rpgshnik 3786 28.08.19 11:26 Сейчас в теме
(27) ещё немного прокачался в HTML :) и аналоговые часы выводить намного приятнее именно в HTML. Так же всегда думал, что обработчик ожидания это не асинхронный вызов.
24. Неопределено 91 27.08.19 05:58 Сейчас в теме
Практически готовый алгоритм html-страницы можно взять на
А можно взять полностью готовый на чистом 1С в моей публикации.
29. oafan 27 04.09.19 15:00 Сейчас в теме
Некорректно выводит в поле часы. Есть варианты?
Прикрепленные файлы:
31. rpgshnik 3786 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 3786 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 3786 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 279 18.02.20 11:31 Сейчас в теме
Чтобы не извращаться с форматированием минут-секунд в вашем случае достаточно весь JS код заменить на:

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