Как вывести html-сраницу с динамическими данными?

Question

[Станислав Шендаков]

Добрый день. Собираю "Умный дом". Два водосчетчика с импульсным выходом подключены к плате ESP8266. Плата считает импульсы и выдает считанные данные по WiFi. Эта вся кухня работает, вопрос по визуализации. Подскажите как, или поделитесь пожалуйста ссылкой, как мне эти цифры вывести в нужном месте. Сейчас картинка выглядит вот так:

Т.е. выводится картинка в виде обычного , а span-ы с цифрами, имея position : absolute; подогнаны по месту. Разумеется, при изменении масштаба, span-ы улетают. Просьба подсказать, как лучше всего реализовать, чтобы при изменении масштаба, цифры оставались в нужных местах, ибо подобных "приборок" будет еще несколько. Можно, наверное, с помощью Javascript пересчитывать все координаты, но вдруг есть более "красивые" способы. Спасибо.

Comments

[Вадим]

Да на самом деле всё просто.
Делаете блок (div) в который помещаете спан,
задаёте ему определённые размеры, и css класс
задаёте блоку по классу фон,
ну а там уже как вашей душе угодно позиционируете внутри этого блока свой спан. (отступами\с помощью флексов\хоть абсолютом, тогда position:relative для блока. Главное что всё это должно быть относительно родительского блока)
Профит.

[Станислав Шендаков]

Спасибо, попробую. Масштаб для фоновой картинки можно задать? Или размер исходного изображения нужно подгонять? У меня с CSS как-то не складывается. :-)

[Вадим]

Станислав Шендаков, По умолчанию фон займёт доступное пространство с сохранением соотношения сторон.
Но размеры фона можно регулировать с помощью соответствующего свойства background-size.
Погуглите варианты применения. Там есть разные сопосбы. Пиксели, проценты, ключевые слова и тд.
А лучше сразу про семейство свойств background

[Станислав Шендаков]

Спасибо, поизучаю.

[Вадим]

Станислав Шендаков, А ещё если пишите комментарий, не нажав кнопочку "Ответить", то тот, кому Вы его пишите - не получает уведомления об этом. Но это так, оффтоп :-)

[Ankhena]

Вадим,

По умолчанию фон займёт доступное пространство с сохранением соотношения сторон

Нет.
По умолчанию фон размножится на всё свободное пространство.
За это отвечает свойство background-repeat.

Станислав Шендаков

Масштаб для фоновой картинки можно задать? Или размер исходного изображения нужно подгонять?

Можно.
Но чем чётче картинка соответствует по размеру и пропорциям месту в котором отображается, тем качественнее будет результат.
Конечно, если блок с фоновой картинкой меняет свои размеры при изменении размера окна, то где-то придется жертвовать или размером картинки или качеством.

В зависимости от того, что должно происходить при адаптиве, можно обойтись одним блоком (например, div) или двумя (div и span или div и p).
Если и другие варианты, но так проще всего.

[Вадим]

Ankhena, Да, согласен, не совсем точно выразился. Но одно другому не мешает. Картинка размножится только если будет меньше размеров блока.

[Станислав Шендаков]

Спасибо. Использование SVG, или иной интерактивной Javascript-графики, может иметь преимущество? Вектор, он и есть вектор.

Answer 1

[Николай Миронов]

Добрый день. Чтобы верстка не ехала при масштабировании -- замените все размеры: ширину, высоту, отступы на % или vw (единицы vieport width). Получите резиновую верстку. Вариант не идеальный, но вполне рабочий.

Для удобства пересчета в проценты можно использовать Фотошоп:
• Создайте документ, соответствующий вашему разрешению и скомпонуйте объекты
• Включите линейки (ctrl + R)
• Переключите единицы измерения на Проценты (для этого кликнете по линейке правой кнопкой мышки)
• Включите панель Info, чтобы видеть актуальные размеры

Answer 2

[Lord_Dantes]

Можно было бы картинку переделать в SVG формат, и число подогнать под размер картинки. Далее уже вместо числа вставлять ответ.

Или картинку обернуть в жесткий блок с max-width; max-height максимальной ширины и высоты картинки, а числа загнать абсолютом. Таким образом при любом ресайзе картинка останется на месте и не будет "ехать".

Comments

[Станислав Шендаков]

Спасибо. Именно к этому решению я и склоняюсь.