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

&НаКлиенте

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

                тЦвет  = "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);         

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

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

<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>