Форум

Paguo-86PK · #11 (**permalink**) 26.10.2018, 14:08

Сообщение от Malleys

Так вы все размеры вручную подбирали? Но почему так, ведь HTML-элементы зависят друг от друга, почему бы их не использовать? Вот я попробовал, за 35 минут получилось сделать, я не сидел и не подбирал все позиции подряд, оно само расставилось по местам, только вон те кнопки пошире которые, только их пришлось вручную подогнать, это наверное проще, чем у вас, или я не так понял?

Дa, у Вас проще и красивее…
Но с другой стороны, всё-таки, более стилизовано и лэптопно…

У меня первый вариант был тоже элементами HTML.
И тоже настройкой стилей я добился сходства с оригиналом…
Но потом понял, что экспортировать такую клавиатуру не так просто…
Пришлось заняться именно прорисовкой в Canvas, так как там можно генерировать эскиз любого формата.

Вот здесь я выбирал подходящее (максимально близкое к мо� �й рабочей клавиатуре) изображение…
Среди подходящих, клавиша «Enter» либо как «Shift» плоская, либо узкая внизу. Тогда как я предпочитаю классический вид в форме буквы «J». А таких клавиатур представлено меньше…

Для чего мне это надо.
Существует немало различных раскладок. Например, Дворак или Colemak. Но у всех имеется нечто общее: Клавиши целиком меняют свои позиции, но символика самих клавиш не меняется…
Хотя, существует и Дворак для программистов, где одной только перестановкой целых клавиш не обошлись… И это было стимулом попытаться самостоятельно поработать над этой задачей…

Как-то меня спросили, почему в Русской раскладке знак «?» находится на одной клавише с цифрой «7», что мнемонически удобно, так как «7» и «?» графически очень похожи. А вот в Латинской раскладке знак вопроса убегает к Шифту…
Многие люди об этом молчат, хотя искренне не понимают, почему так. А экскурс их в историю ASCII и пишущих машинок утомляет, так как это было давно, стандарты были сырыми и брались чуть ли ни с потолка! А первые модели клавиатур были вообще как пианино…

Вот и появилась у меня идея попробовать сделать две раскладки (Латинскую и Русскую) более унифицированными в плане именно значков, не трогая при этом алфавитно-цифровой ряд.

В черновике у меня получилось следующее:
Цифра «2» и знак «%» отдалённо напоминают друг друга больше, чем «2» и «@»;
Цифра «5» и знак «$» больше похожи друг на друга, чем «4» и «$» или «5» и «%»;
Цифра «8» и знак «&» практически неразличимы;
Цифры «6» и «9» противопоставляются также, как и скобки «(» и «)»;
Цифра «0» и знак «@» больше похожи друг на друга и располагаются над латинской буквой «O» и т.д…

Тем самым, и в Латинской, и в Русской раскладках получаются более стабильная ассоциативная символика и в обоих раскладках общее число прыгающих символов уменьшается с 11 до 8…

А клавиша со знаками «\» и «|» давно напрягает, так как пути к DOS-директориям набираются гораздо реже, чем логические «||» в IF-условиях…
Ведь сейчас другое время и анахронизм с пережитком стандартов прошлого уже создаёт некий маленький, но дискомфорт…

P.S.: С другой стороны, для ручной HTML-вёрстки символы «<» и «>» стоит спустить с верхнего регистра в нижний…
А это - ещё одна адаптированная раскладка…

Malleys · #12 (**permalink**) 26.10.2018, 19:38

Существует три способа экспортирования HTML элемента в картинку.

1. В консоли браузера Google Chrome выберите во вкладке «Elements» необходимый элемент html, а затем вызовите командную палитру (Ctrl+Shift+P) и введите там «capture node screenshot», чтобы сохранить элемент как картинку. Самый точный снимок элемента.

2. Запустите окно печати (Ctrl+P) и в качестве назначения выберите «Сохранить как PDF». В пораметрах поставте галочку напротив «Фон». Менее точно (на Windows эмодзи не цветные).

3. Можно использовать скрипт — https://html2canvas.hertzen.com/

Пример html2canvas:

<html>
<head>
	<style>
		body {
			background: linear-gradient(135deg, rgba(226,226,226,1), rgba(219,219,219,1) 26%, rgba(203, 204, 207, 1) 64%);
			text-align: center;
			font-size: 1.25vw;
		}
		
		kbd {
			background:
				radial-gradient(farthest-side at 50% -100%, rgba(0, 0, 0, 0.6), transparent),
				radial-gradient(farthest-side at 50% 200%, rgba(255, 255, 255, 0.1), transparent)
				#080808;
			box-sizing: border-box;
			border-radius: 0.25em;
			border: 0.05em rgba(255, 255, 255, 0.4) solid;
			border-right-color: rgba(255, 255, 255, 0.2);
			border-bottom-color: rgba(255, 255, 255, 0.2);
			box-shadow: 0 0 0.05em .125em black;
			cursor: pointer;
			height: 4em;
			margin: 0 0.75em 0.75em 0;
			position: relative;
			overflow: visible;
			text-align: center;
			transition: all ease-in-out 200ms;
			vertical-align: middle;
			width: 4em;
			color: white;
			color: rgba(206, 241, 248, 0.7);
			display: inline-grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			font: 1em / 1em Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
		}
		
		kbd:active {
			border: 0.05em rgba(255, 255, 255, 0.2) solid;
			box-shadow: 0 0 0.05em .125em rgba(0, 0, 0, 0.8);
		}
		
		kbd:not([data-half]) + kbd[data-half] {
			height: 1.9em;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			position: absolute;
			z-index: 1;
			border-bottom-width: .15em;
		}
		
		kbd[data-half] + kbd[data-half] {
			height: 1.9em;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			margin-top: 2em;
			border-top-width: .15em;
		}
		
		kbd span:only-child {
			grid-area: 2 / 1 / 3 / span 3;
		}
		
		kbd.m span:only-child {
			grid-area: 3 / 1 / 4 / span 3;
			padding: .25em;
		}
		
		kbd span:first-child:nth-last-child(2),
		kbd span:first-child:nth-last-child(3)
		{
			grid-area: 1 / 2;
			transform: translateY(50%);
		}
		
		kbd span:nth-child(2):last-child,
		kbd span:nth-child(2):nth-last-child(2) {
			grid-area: 2 / 2;
			transform: translateY(50%);
		}
		
		kbd span:nth-child(3):last-child {
			grid-area: 1 / 3;
		}
		
		kbd.m:nth-child(-n + 6) {
			text-align: left;
		}
		
		kbd.m:nth-last-child(-n + 6) {
			text-align: right;
		}

		kbd.x2 { width: 6em;}
		kbd.x3 { width: 7.5em; }
		kbd.x4 { width: 10em; }
		kbd.x5 { width: 5em; }
		kbd.x6 { width: 24em; }
		
		.touch-bar {
			border-radius: 0.25em;
			background-color: #000;
			padding: .5em;
			margin: auto;
			margin: 0 0.75em 0.75em 0;
			display: inline-block;
			box-sizing: border-box;
			width: 71em;
		}
		
		.touch-bar kbd {
			margin: 0;
			padding: 0em .5em;
			background: #333;
			border: 0;
			height: 2em;
			color: white;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
		
		.touch-bar kbd span {
			transform: scale(1.25) !important;
		}
		
		.touch-bar[data-list="1"] kbd span:not(:first-child),
		.touch-bar[data-list="2"] kbd span:not(:last-child)
		{
			display: none;
		}
	</style>
</head>

<body>
	<section class="touch-bar" data-list="1" onclick="this.dataset.list = (+this.dataset.list) % 2 + 1">
		<kbd>[&#x1f600;][esc]</kbd>
		<kbd>[&#x1f601;][F1]</kbd>
		<kbd>[&#x1f602;][F2]</kbd>
		<kbd>[&#x1f431;][F3]</kbd>
		<kbd>[&#x1f639;][F4]</kbd>
		<kbd>[&#x1f60e;][F5]</kbd>
		<kbd>[&#x2764;&#xfe0f;][F6]</kbd>
		<kbd>[&#x1f4a9;][F7]</kbd>
		<kbd>[&#x1f937;][F8]</kbd>
		<kbd>[&#x1f525;][F9]</kbd>
		<kbd>[&#x1f914;][F10]</kbd>
		<kbd>[&#x231b;&#xfe0f;][F11]</kbd>
		<kbd>[&#x1f64c;][F12]</kbd>
	</section>
	<section>
		<kbd>~`</kbd>
		<kbd>!1</kbd>
		<kbd>@2"</kbd>
		<kbd>#3№</kbd>
		<kbd>$4%</kbd>
		<kbd>%5:</kbd>
		<kbd>^6,</kbd>
		<kbd>&amp;7.</kbd>
		<kbd>*8;</kbd>
		<kbd>(9</kbd>
		<kbd>)0</kbd>
		<kbd>_-</kbd>
		<kbd>+=</kbd>
		<kbd class="m x2">[delete]</kbd>
	</section>
	<section>
		<kbd class="m x2">[tab]</kbd>
		<kbd>QЙ</kbd>
		<kbd>WЦ</kbd>
		<kbd>EУ</kbd>
		<kbd>RК</kbd>
		<kbd>TЕ</kbd>
		<kbd>YН</kbd>
		<kbd>UГ</kbd>
		<kbd>IШ</kbd>
		<kbd>OЩ</kbd>
		<kbd>PЗ</kbd>
		<kbd>{Х[</kbd>
		<kbd>}Ъ]</kbd>
		<kbd>|Ё\</kbd>
	</section>
	<section>
		<kbd class="m x3">[caps lock]</kbd>
		<kbd>AФ</kbd>
		<kbd>SЫ</kbd>
		<kbd>DВ</kbd>
		<kbd>FА</kbd>
		<kbd>GП</kbd>
		<kbd>HР</kbd>
		<kbd>JО</kbd>
		<kbd>KЛ</kbd>
		<kbd>LД</kbd>
		<kbd>:Ж;</kbd>
		<kbd>"Э'</kbd>
		<kbd class="m x3">[return]</kbd>
	</section>
	<section>
		<kbd class="m x4">[shift]</kbd>
		<kbd>ZЯ</kbd>
		<kbd>XЧ</kbd>
		<kbd>CС</kbd>
		<kbd>VМ</kbd>
		<kbd>BИ</kbd>
		<kbd>NТ</kbd>
		<kbd>MЬ</kbd>
		<kbd>&lt;Б,</kbd>
		<kbd>&gt;Ю.</kbd>
		<kbd>?/</kbd>
		<kbd class="m x4">[shift]</kbd>
	</section>
	<section>
		<kbd class="m">[fn]</kbd>
		<kbd class="m">[control]</kbd>
		<kbd class="m">[option]</kbd>
		<kbd class="m x5">[command]</kbd>
		<kbd class="m x6"></kbd>
		<kbd class="m x5">[command]</kbd>
		<kbd class="m">[option]</kbd>
		<kbd>[◀&#xfe0e;]</kbd>
		<kbd data-half>[▲&#xfe0e;]</kbd>
		<kbd data-half>[▼&#xfe0e;]</kbd>
		<kbd>[▶&#xfe0e;]</kbd>
	</section>
	<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
	<script>
	
		for(const kbd of document.querySelectorAll("kbd")) {
			kbd
				.textContent
				.split(/\[([^\]]*)\]|/)
				.filter(v => !!v)
				.reduce((_, v) => {
					const span = document.createElement("span");
					span.textContent = v;
					kbd.appendChild(span);
				}, kbd.textContent = "")
		}

		html2canvas(document.querySelector("html")).then(canvas => {
			document.body.appendChild(canvas);
		});
		
	</script>
</body>

Paguo-86PK · #13 (**permalink**) 27.10.2018, 13:13

Сообщение от Malleys

1. В консоли браузера Google Chrome выберите во вкладке «Elements» необходимый элемент html, а затем вызовите командную палитру (Ctrl+Shift+P) и введите там «capture node screenshot», чтобы сохранить элемент как картинку. Самый точный снимок элемента.

Работаeт, но через чур сложно, если кому-то потребуется самостоятельно это сделать…
(Почему в группе «Mobile»?)

Сообщение от Malleys

2. Запустите окно печати (Ctrl+P) и в качестве назначения выберите «Сохранить как PDF». В пораметрах поставте галочку напротив «Фон». Менее точно (на Windows эмодзи не цветные).

И не все отображаются вообще…

Сообщение от Malleys

3. Можно использовать скрипт…

По его размеру могу предположить, что это - целый HTML-CSS-парсер-движок…
(Страшно представить, что в будущем браузеру достаточно будет уметь исполнять JavaScript и отображать Canvas, а остальная HTML будет отрисовываться скриптом…)

P.S.: В общем, со своим движком, так сказать, разобрался: Загогулистую «Enter» отрисовал таки, добавив координату точки изгиба - так просто…
Исходный фон-рисунок клавиатуры будто как попало делали - очень много визуальных ошибок…
Чем мне не понравился свой CSS-вариант: «Enter» непонятно, как отобразить…
И много td-ячеек нужно генерировать внутри каждой кнопки.
Ваш вариант немного проще и без ячеек таблиц в клавишах. Спасибо!

Но стиль с плоской «Enter» ломает мне задуманное…

Форум

Справочник

Discord чат

Курсы javascript