Skip to content

MarshallOfSound/electron-windows-secondary-tiles

 
 

Repository files navigation

electron-windows-secondary-tiles

Pin secondary tiles on Windows 10 from Electron Apps

npm install --save electron-windows-secondary-tiles

Pinning a Secondary Tile

Pinning tiles is only availble in the context of UWP Apps and therefor your Electron must be packaged via the Desktop Bridge. A easy way to create a UWP package for an Electron App is via electron-windows-store. There are 2 methods available to pin a secondary tile.

First, the most simple variation:

RequestCreate(hWnd, tileId, displayName, args, squareLogo150x150Uri, showNameOnSquare150x150Logo, roamingEnabled);
  • Object hWnd - The native handle to the Apps Window. Use: mainWindow.getNativeWindowHandle();
  • string tileId - Id of the tile
  • string displayName - Display name shown on the Tile
  • string args - Arguments forwarded to the App when Tile is clicked
  • string squareLogo150x150Uri - A path to the 150x150 icon
  • boolean showNameOnSquare150x150Logo - Indicates whether the dispaly name is shown on the Tile
  • boolean roamingEnabled - Indicates whether the Tile should be roamed across devices

Example 1:

const {SecondaryTiles} = require('electron-windows-secondary-tiles')

let hwnd = mainWindow.getNativeWindowHandle();
SecondaryTiles.RequestCreate(hwnd, 'tile1', 'Hello Tile 1`, 'myargs', 'ms-appx:///assets/SampleAppx.150x150.png', true, false);

The second variation lets you set all possible parameter of a tile via an options object.

RequestCreateWithOptions (hWnd, tileId, displayName, args, tileSize, tileOptions)
  • Object hWnd - The native handle to the Apps Window. Use: mainWindow.getNativeWindowHandle();
  • string tileId - Id of the tile
  • string displayName - Display name shown on the Tile
  • string args - Arguments forwarded to the App when Tile is clicked
  • number tileSize - Desired tile size. 0 - Default, 1 - Square150x150, 2 - Wide310x150
  • Object tileOptions - An object carrying all possible option for Live Tiles

The option parameter can carry the following parameters:

  • string Square70x70Logo - The path to icon shown on the small Tile.
  • string Square150x150Logo - The path to icon shown on the medium Tile.
  • string Wide310x150Logo - The path to icon shown on the wide Tile.
  • string Square310x310Logo - The path to icon shown on the large Tile.
  • string BackgroundColor - The color of Tile. Leave empty to use systems accent color.
  • string ForegroundText - Indicates whther to use dark or light forground color. 0 - Dark , 1 - Light
  • string ShowNameOnSquare150x150Logo - Indicates whether the dispaly name is shown on the medium Tile
  • string ShowNameOnWide310x150Logo - Indicates whether the dispaly name is shown on the wide Tile
  • string ShowNameOnSquare310x310Logo - Indicates whether the dispaly name is shown on the large Tile
  • string RoamingEnabled - Indicates whether the Tile should be roamed across devices

Example 2:

const {SecondaryTiles} = require('electron-windows-secondary-tiles')

var options = {
    Square70x70Logo: "ms-appx:///assets/SampleAppx.70x70.png",
    Square150x150Logo: "ms-appx:///assets/SampleAppx.150x150.png",
    Wide310x150Logo: "ms-appx:///assets/SampleAppx.310x150.png",
    Square310x310Logo: "ms-appx:///assets/SampleAppx.310x310.png",
    BackgroundColor: "#0026FF",
    ForegroundText: 1,
    ShowNameOnSquare150x150Logo: true,
    ShowNameOnWide310x150Logo: true,
    ShowNameOnSquare310x310Logo: true,
    RoamingEnabled: true
    }

let hwnd = mainWindow.getNativeWindowHandle();
SecondaryTiles.RequestCreateWithOptions(hwnd, 'tile2', 'Hello Tile 2', 'myargs', 0, options);

Updating a Secondary Tile

Updating tiles uses the exact same parameters as creating tiles minus the window handle. Just use the counter part methods RequestUpdate and RequestUpdateWithOptions;

Example 3:

const {SecondaryTiles} = require('electron-windows-secondary-tiles')

var options = {
    Square70x70Logo: "ms-appx:///assets/SampleAppx.70x70.png",
    Square150x150Logo: "ms-appx:///assets/SampleAppx.150x150.png",
    Wide310x150Logo: "ms-appx:///assets/SampleAppx.310x150.png",
    Square310x310Logo: "ms-appx:///assets/SampleAppx.310x310.png",
    BackgroundColor: "#0026FF",
    ForegroundText: 0,
    ShowNameOnSquare150x150Logo: false,
    ShowNameOnWide310x150Logo: false,
    ShowNameOnSquare310x310Logo: false,
    RoamingEnabled: true
    }

SecondaryTiles.RequestUpdateWithOptions('tile2', 'Hello Tile 2 updated', 'myargs', 0, options);

Deleting Secondary Tile

In order to delete a Tile its Id needs to be known.

Example 4:

const {SecondaryTiles} = require('electron-windows-secondary-tiles')

SecondaryTiles.RequestDelete(`tile1`);

Checking a Secondary Tile

With a given Id the existence of an Tile can be checked.

Example 5:

const {SecondaryTiles} = require('electron-windows-secondary-tiles')

SecondaryTiles.Exists(`tile1`);

Sending notifications to a Secondary tiles

Each Tile can be a receiver of notifications. The notifications can be differently formatted. The content and layout is defined via XML snippets. See the documentation here.

⚠️ BEWARE: Secondary Tile notifications were broken in the Fall Creators Update. Microsoft shipped a fix for RS4. The notification method check for a min version of 10.0.17134.81. On any OS version below that, Notifications will be ignored.

Example 6:

const {SecondaryTiles} = require('electron-windows-secondary-tiles')

SecondaryTiles.Notify(`tile1`, `<tile><visual>
    <binding template = "TileSmall">
        <text hint-style = "caption">Jennifer Parker</text>
    </binding>
    <binding template = "TileMedium">
        <text hint-style = "caption">Jennifer Parker</text>
    </binding>
    <binding template = "TileWide">
        <text hint-style = "caption">Jennifer Parker</text>
    </binding>
    <binding template = "TileLarge">
        <text hint-style = "caption">Jennifer Parker</text>
    </binding></visual></tile>`);

License

MIT. Please see LICENSE for details.

About

Pin secondary tiles on Windows 10 from Electron Apps

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C++ 61.2%
  • JavaScript 28.0%
  • Python 4.9%
  • HTML 3.3%
  • C 2.4%
  • CSS 0.2%