Кастомизация приложения Project my Screen для Windows Phone 8.1

Я считаю, что Project my Screen — это действительно новая возможность для Windows Phone 8.1. Эта функция включает возможность отображения на вторичном экране с помощью беспроводного соединения Miracast (только на новых телефонах, так как это требует нового оборудования) или проводного соединения USB. Это очень удобно для презентаций и демонстраций. Она также работает и в обратном направлении: можно удалённо управлять телефоном с его вторичной проекции с помощью мыши или сенсорного экрана! Также здорово то, что она имеет поддержку отображения точек касания, так что ваша аудитория может реально увидеть где вы касаетесь на экране устройства. Просто великолепно!
Если вы это ещё не сделали, я рекомендую вам попробовать эту функцию самостоятельно. Cliff Simpkins из Microsoft сделал большой обзор (см. мой перевод) в своём блоге о том как начать работать с этой функцией.
Для того, чтобы использовать Project my Screen на своём компьютере, вы должны загрузить и установить официальное приложение Project my Screen. По умолчанию приложение имеет довольно скучный внешний вид отображаемого Windows Phone, как в эмуляторе из Windows Phone SDK. К счастью, Microsoft включила возможность настраивать внешний вид приложения, так что оно может удовлетворить собственные потребности. Вот короткое видео, которое показывает небольшие изменения, которые я сделал для приложения:

Как вы можете видеть, я воспользовался отдельным фоновым изображение с логотипом Cortana. Также внешний вид проецируемого телефона соответствует моему реальному телефону (желтый Nokia Lumia 920). Позвольте мне рассказать вам, как это сделать:
Если заглянуть внутрь папки установки приложения ProjectMyScreen, котора по умолчанию находится в C:Program Files (x86)ProjectMyScreenApp, вы заметите, что в ней есть файл с именем config.xml. Это файл конфигураций в формате XML, которые могут быть использованы для изменения внешнего вида приложения. Для его использования необходимо явно запустить приложение с файлом конфигурации, переданного в качестве параметра. Дальше всё немного сложнее: в своем исходном состоянии файл конфигурации не работает. Это относится к изображениям, которые не существуют в папке установки (они существуют, но встроены в качестве ресурсов внутри исполняемого приложения). Так что вы должны изменить config.xml (или создать свой собственный файл на его основе), чтобы заставить его работать.
Итак, как это сконфигурировать? К счастью, сам файл config.xml содержит инструкции о том, как его использовать. Базовая структура файла выглядит следующим образом:

<?xmlversion="1.0"encoding="utf-8"?>

<Config>
  <PhoneConfigurations>

    <PhoneConfiguration>

      <Background />

      <PhoneImage />

      <VideoOutput />

      <!-- <TouchDots /> -->

    </PhoneConfiguration>

    <PhoneConfiguration>
    .
    .
    .
    </PhoneConfiguration>

  </PhoneConfigurations>
</Config>

Поставляемый файл config.xml содержит элементы PhoneConfiguration для пяти различных разрешений: WXGA (768 × 1280), HD1080 (1080 × 1920), HD720 (720 × 1280), WVGA (480 × 800) и FWVGA (480 × 854 с новыми программными кнопками на экране). Я полагаю, можно будет добавить дополнительные разрешения, если соответствующие устройства будут выпущены, но в настоящее время это невозможно проверить. Приложение запустится с конфигурацией по умолчанию (которую можно задать, см. ниже). При подключении фактического устройства и разрешении транслировать экран, приложение переключится в конфигурацию, которая соответствует разрешению подключенного устройства.
Каждый элемент PhoneConfiguration имеет три атрибута. Значения resolutionX и resolutionY используются для указания разрешения, которому принадлежит конфигурация. Атрибут default используется для указания, будет ли эта конфигурация использоваться по умолчанию, если устройство не подключено.

<PhoneConfiguration
    resolutionX="768"
    resolutionY="1280"
    default="true">

В каждом разделе phoneConfiguration мы можем сконфигурировать три настройки: фоновое изображение, изображение внешнего вида телефона, размер и местоположение проекции. На самом деле, есть и четвертый элемент, touchDots, он присутствует в файле, но я не смог заставить его работать. Я подозреваю, что он должен быть использованы для настройки внешнего вида точек, которые появляются, когда вы касаетесь экрана устройства, но оказалось, не реагирует на изменения, которые я применил к нему.
Давайте поговорим подробнее о каждом элементе:
Элемент Background контролирует фон приложения. Весь фон приложения будет заполнен указанным цветом. Кроме того, поверх можно поместить изображение, которое будет масштабировано по размеру. Заметим, что использование фонового изображения не является обязательным. Если вы хотите использовать только сплошной цвет фона, вам все равно придется добавить атрибут imageRelPath, но просто задать ему пустое значение(«»).

<Background color="0x00000000" imageRelPath="Cortana.png" />

Используя элемент PhoneImage вы можете контролировать внешний вид телефона на экране (скин). Атрибут imageRelPath указывает путь к используемому изображению. Для моего демо-видео я использовал одно из официальных пресс-изображений Nokia Lumia 920, которые я скачал из Nokia media library. Я обрезал изображение так, чтобы не было никакой границы, и сохранил его как PNG. Вам нужно указать путь к изображению относительно исполняемого файла ProjectMyScreenApp. Самый простой способ сделать это, добавив свой ​​файл изображения в папку установки приложения, так что вам нужно только указать имя файла без какой-либо дополнительной информации о пути к нему.
lumia920-2[1]
Атрибут scaleFactor определяет масштабный коэффициент изображения телефона в виде доли от ширины фонового изображение или высоты, в зависимости от того, чем оно более ограничено. Если фоновое изображение не было указано, вместо этого будут использоваться размеры окна приложения. Я использовал значение 0,9, так что телефон выглядит хорошо и крупно, но не занимает пространство полностью от края до края.
Используя значения centerOffsetX и centerOffsetY можно расположить  изображение телефона относительно фонового изображения. Я использовал это, чтобы разместить изображение моего телефона в правой части экрана, чтобы не скрывать логотип Cortana на моём фоновом изображении. Интересно, что если вы не зададите фоновое изображение, эти значения игнорируются, и телефон всегда отображается в центре окна приложения.
Для устройств, которые имеют физические кнопки, можно настроить расположение кнопок Назад, Windows и Поиск. Для каждой кнопки вы должны задать координаты своей ограничительной рамки. Таким образом, приложение может определить, какую кнопку нажать, когда вы нажимаете на картинке внешнего вида с помощью мыши/сенсорного экрана. Атрибуты BackButton, windowsButton и searchButton  принимают значения, состоящие из четырех чисел, представляющих левое, верхнее, правое и нижнее координаты аппаратных кнопок Назад, Windows и Поиск.
Вот мой законченный раздел phoneImage:

<PhoneImage
    imageRelPath="Lumia920-2.png"
    scaleFactor="0.9"
    centerOffsetX="350"
    centerOffsetY="0"
    backButton="128,2357,400,2600"
    windowsButton="610,2357,900,2600"
    searchButton="1160,2357,1370,2600"
          />

Затем мы должны указать местоположение видеовывода с помощью элемента videoOutput. Используя topLeftOffsetX и topLeftOffsetY указываем левую верхнюю координату видеоизображения. К сожалению, вы не можете указать ширину окна видео. Вместо этого вы должны сделать некоторые математические расчёты и вычислить значение соотношения, которое определяется как «ширина видеовывода как доли от ширины изображения телефона». Так что мы должны определить ширину (в пикселях) отображения видеовывода телефона, как должно выглядеть на изображении телефона (т.е. ограничительной рамки, где вы хотите, чтобы проекция появилась) и разделить на общую ширину изображения телефона. Для изображения моей Lumia, придём к следующей формуле: 1273/1535 = 0,8293159609120521.
Вот:

<VideoOutput
     weight="0.8293159609120521"
     topLeftOffsetX="125"
     topLeftOffsetY="233"
          />

Таким образом, полный раздел phoneConfiguration для внешнего вида моей Lumia 920 выглядит следующим образом:
г

<PhoneConfiguration
    resolutionX="768"
    resolutionY="1280"
    default="true">

  <Background color="0x00000000" imageRelPath="Cortana.png" />

  <PhoneImage
      imageRelPath="Lumia920-2.png"
      scaleFactor="0.9"
      centerOffsetX="350"
      centerOffsetY="0"
      backButton="128,2357,400,2600"
      windowsButton="610,2357,900,2600"
      searchButton="1160,2357,1370,2600"
        />

  <VideoOutput
      weight="0.8293159609120521"
      topLeftOffsetX="125"
      topLeftOffsetY="233"
        />

</PhoneConfiguration>

Теперь запустите ProjectMyScreenApp с помощью файла config.xml в качестве входного параметра. Один из способов сделать это, запустив его из окна командной строки вот так:

C:Program Files (x86)ProjectMyScreenApp>ProjectMyScreenApp.exe Config.xml

Вы также можете
создать ярлык с указанием параметра. Приложение ProjectMyScreenApp должно запуститься в полноэкранном режиме. Вы можете нажать клавишу [ESC] для переключения в оконный режим.
projectmyscreenlumia[1]
Вы можете скачать мой образец файлов для Lumia 920  здесь. Просто распакуйте файлы в папку установки ProjectMyPhoneApp (подумайте о сохранении резервной копии оригинального файла config.xml, на всякий случай). В качестве бонуса я извлек изображения телефона по умолчанию, которые содержатся в исполняемом файле ProjectMyPhoneApp и добавил их тоже.
Обратите внимание, что при подключении устройства, которое имеет другое разрешение, чем моя Lumia 920, вы не получите эффект от того, что я описал выше. ProjectMyScreenApp будет использовать одну из других конфигураций телефона, которые я не изменял.
Может быть, когда-нибудь кто-то создаст хороший инструмент, который поможет создавать файлы config.xml и/или файлы изображений, как Geert vd Cruijsen, который в прошлом сделал переключатель внешнего вида эмулятора Windows Phone 7.
В любом случае получайте удовольствие!

Перевод статьи: «Customizing the Windows Phone 8.1 ‘Project my Screen’ app»
Автор: Leon Zandman
Перевёл: С. Урусов

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *