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

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 Платные (руб)

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

2400 руб.

29.06.2020    14859    18    4    

25

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

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

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

6000 руб.

18.01.2022    7716    1    2    

6

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

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

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

6000 руб.

16.01.2015    59985    40    57    

77

Редактор граф

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

Внешний отчет, формирует графы на основе таблицы значений, используя рисунки табличного документа. Есть возможность добавления, редактирования объектов графа и выгрузки результата в таблицу значений.

1500 руб.

06.10.2020    8785    6    7    

8

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

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

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

2 стартмани

10.04.2023    7450    142    acces969    31    

107

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

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

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

1 стартмани

05.07.2022    2134    kalyaka    2    

19

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

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

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

3600 руб.

29.04.2022    10560    1    5    

9

Программный интерфейс для доработки форм

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

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021    7826    AtamanovYS    19    

130
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. greenLiss 142 26.08.19 13:13 Сейчас в теме
Я наверное глупость скажу, но...

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

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

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

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

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