Skip to content

Web Guide IV : Interaction

Jump to bottom
Dani John edited this page Jul 5, 2024 · 96 revisions

Contents

Mouse & Keyboard

By default only mouse input is enabled for wallpaper, keyboard can be enabled by:

Lively settings -> Wallpaper ->Interaction -> Wallpaper Input -> Keyboard

Note

Application wallpapers can create their input hooks, so disabling input does not guarantee input to be disabled for them.

Lively Properties

Recommended and persistent way to interact with webpage wallpapers is via LivelyProperty API.

Why use lively properties?

  • Saves values on disk, next time you open the wallpaper this settings will be restored.
  • Supports multiple displays, each display will have its own properties & will be restored accordingly.
  • Has Restore Default option which resets all user modified values to default value the wallpaper came with.
  • Its super easy to setup and most of the work is done for you already.
  • Works across different wallpaper layouts - span, duplicate and perscreen with each layout having its own property file.
  • Can be paired with other Lively features like commandline control.
  • Officially supported and updated through Lively.

To set it up:

  1. Create LivelyProperties.json text file in wallpaper location, lively will generate menu's based on this file.
  2. In the webpage write livelyPropertyListener(name, val) event function, this will be called everytime user interacts with the menu.
  3. Once wallpaper is launched right-click it in gallery and select Customise

Example:

 {
  "property1Class": {
    "max": 100,
    "min": 0,
    "text": "Property 1",
    "type": "slider",
    "help": "This is a tooltip",
    "value": 43 
  },
  "color1Class": {
    "text": "Color 1",
    "type": "color",
    "value": "#C0C0C0"
  }
}

LivelyProperties.json file in wallpaper root directory.

function livelyPropertyListener(name, val)
{
    // or switch-case...
    if(name =="property1Class")
    {
      console.log(val); //43
    }
    else if(name =="color1Class")
    {
      console.log(val); //#C0C0C0
    }
}

Javascript function, lively property change event.

You can check out the Raindrop project for a complete example.

Note:

  • The class names should start with lowercase letter.
  • Lively will make a copy of the LivelyProperties.json file and make modification to the copy only, so inorder to update the copy with the source folder file click on Restore Default.
  • livelyPropertyListener is called once when page is loaded to initialize webpage based on the value field in LivelyProperties.json
  • This is a one way communication, as the user interacts with gui the value field in json is updated; restoring the settings next time wallpaper is launched.
  • All the fields are required, follow the syntax provided below.

Controls

Slider

slider

Returns: Integer.

 {
  "rainIntensity": {
    "max": 100,
    "min": 0,
    "step": 0.01,
    "text": "Intensity",
    "type": "slider",
    "help": "Control the intensity of Rain",
    "value": 43
  }
}

Textbox

textbox

Returns: String.

Event is called each time a key is pressed.

{
 "apiKey": {
   "text" : "Enter API Key",
   "type" : "textbox",
   "value" : "Text here"
  }
}

Dropdown

dropdown

Returns: item array index, starting from 0

{
  "imgSelect": {
    "type": "dropdown",
    "value": 1,
    "text": "Image",
    "items": [
      "City",
      "Mountain",
      "Forest",
      "Leaves"
    ]
  }
}

Folder Dropdown

folder-dropdown

Scans the given folder & populate the dropdown list automatically; has an optional FileDialog for adding more files.

Returns: Relative file location if file exists, null otherwise.

{
"imgSelect": {
    "type": "folderDropdown",
    "value": "forest.jpg",
    "text": "Image",
    "filter": "*.jpg|*.png",
    "folder": "textures"
  }

Note:

  • Only works for directory within parent html file, inner directories are ignored.

Button

button

Returns: value String.

{
"btnOK" : {
 "text" : "Click the OK button",
 "type" : "button",
 "value" : "OK"
 }
}

Color Picker

color-picker

Returns: hex color string in format #RRGGBB

 {
  "overlayColor": {
    "text": "Overlay Color",
    "type": "color",
    "value": "#C0C0C0"
  }
}

Checkbox

checkbox

Returns: true or false.

{
  "postProcessingChk": {
    "type": "checkbox",
    "value": true,
    "text": "Post Processing"
  }
}

Label

label

Returns: value String.

{
 "label1": {
  "type": "label",
  "value": "This is a title"
  }
}

Video Player

Default Lively Properties is used if user defined one is not present in the wallpaper media folder.

{
  "saturation": {
    "max": 100,
    "min": -100,
    "tick": 200,
    "text": "Saturation",
    "type": "slider",
    "value": 0
  },
   "hue": {
    "max": 100,
    "min": -100,
    "tick": 200,
    "text": "Hue",
    "type": "slider",
    "value": 0
  },
  "brightness": {
    "max": 100,
    "min": -100,
    "tick": 200,
    "text": "Brightness",
    "type": "slider",
    "value": 0
  },
   "contrast": {
    "max": 100,
    "min": -100,
    "tick": 200,
    "text": "Contrast",
    "type": "slider",
    "value": 0
  },
  "gamma": {
    "max": 100,
    "min": -100,
    "tick": 200,
    "text": "Gamma",
    "type": "slider",
    "value": 0
  },
   "speed": {
    "max": 5,
    "min": 0.25,
    "tick": 10,
    "step": 0.01,
    "text": "Speed",
    "type": "slider",
    "value": 1
  },
  "scaler": {
    "type": "scalerDropdown",
    "value": 3,
    "text": "Choose a Fit",
    "help": "Wallpaper scaling algorithm",
    "items": [
      "None",
      "Fill",
      "Uniform",
      "Uniform Fill"
    ]
  },
   "mute": {
    "type": "checkbox",
    "value": false,
    "text": "Mute"
  }
}

JSON Schema

JSON Schema for Lively Properties can be found here and Schema Store

Overview

Clone this wiki locally