You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Colors plugin is intended primarily for storing colors so that you can easily access them anywhere in your project, without the need to remember the actual color code or ARGB code. The plugin calculates the desired color and returns it in ARGB format.
4
+
5
+
The plugin comes with 8 standard colors: white, black, red, green, blue, yellow, cyan and magenta.
6
+
7
+
## Usage
8
+
9
+
If you want to use the Colors plugin, import it from the Lightning SDK:
10
+
11
+
```js
12
+
import { Colors } from'@lightningjs/sdk'
13
+
```
14
+
15
+
### Loading on Boot
16
+
17
+
You can automatically load and initialize the Colors plugin when your App boots, by specifying the `static` method `colors()` on the App class in the file **src/App.js**.
18
+
19
+
With the `colors` method, you can return a boolean *true*, an object or a string:
20
+
21
+
```js
22
+
exportdefaultclassAppextendsLightning.Component {
23
+
staticcolors() {
24
+
//default
25
+
returntrue
26
+
//object
27
+
return {
28
+
background:'#c9deff',
29
+
focus:'#276ee5'
30
+
}
31
+
//string
32
+
return'my/custom/colors-file.json'
33
+
}
34
+
}
35
+
```
36
+
37
+
### Defining the Colors File
38
+
39
+
With the default and *string* option during boot, the Colors plugin expects a JSON file, named **colors.json**. (Or another JSON file at a custom location defined with the string option.) This JSON file should look like the following:
40
+
41
+
```json
42
+
{
43
+
"background": "#c9deff",
44
+
"focus": "#276EE5"
45
+
}
46
+
```
47
+
48
+
### Retrieving Colors
49
+
50
+
To retrieve a color from the Colors plugin, you simply have to import `Colors` into your source file and use the following function to get the color. For example:
51
+
52
+
```js
53
+
Colors('white').get()
54
+
```
55
+
56
+
### Adjusting Color Values
57
+
58
+
The Colors plugin also enables you to adjust the values of a specific color before retrieving it.
59
+
60
+
#### Alpha
61
+
If you want your color to have some opacity / alpha, you can use the following code:
62
+
63
+
```js
64
+
Colors('red').alpha(0.4).get()
65
+
```
66
+
67
+
The parameter of the `alpha` function expects a value with between 0 and 1.
68
+
69
+
#### Hue Value
70
+
You can adjust the Hue value of your color using the following code:
71
+
72
+
```js
73
+
Colors('red').hue(120).get()
74
+
```
75
+
76
+
The parameter of the `hue` function expects a value between 0 and 360.
77
+
78
+
#### Lightness
79
+
You can adjust the lightness of your color using the following code:
80
+
81
+
```js
82
+
Colors('green').lightness(0.3).get()
83
+
```
84
+
85
+
The parameter of the `lightness` function expects a value between 0 and 1.
86
+
87
+
#### Saturation
88
+
You can adjust the saturation of your color using the following code:
89
+
90
+
```js
91
+
Colors('blue').saturation(0.3).get()
92
+
```
93
+
94
+
The parameter of the `saturation` function expects a value between 0 and 1.
95
+
96
+
#### Lighter
97
+
You can also make your color lighter using the following code:
98
+
99
+
```js
100
+
Colors('red').lighter(0.3).get()
101
+
```
102
+
103
+
The `lighter` function takes the current `Lightness` value and changes this value based on the parameter used.
104
+
105
+
The parameter of the `lighter` function expects a value between 0 and 1.
106
+
107
+
#### Darker
108
+
Similarly, you can make your color darker using the following code:
109
+
110
+
```js
111
+
Colors('red').darker(0.3).get()
112
+
```
113
+
114
+
The `darker` function takes the current `Brightness` value and changes this value based on the parameter.
115
+
116
+
The parameter of the `lighter` function expects a value between 0 and 1.
117
+
118
+
#### Mixing
119
+
If you want to mix two different colors, you can use the `mix` function.
Copy file name to clipboardExpand all lines: docs/plugins/fpscounter.md
+10-11Lines changed: 10 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,18 @@
1
-
# FPS counter
1
+
# FPS Counter
2
2
3
-
Frames per second (FPS) is an important measure for the performance of your App. A higher FPS indicates a smoother experience.
4
-
When validating an App on a certain platform it's useful to get an indication of the FPS score.
3
+
The number of *Frames per second (FPS)* is an important measure for the performance of your App. The higher the FPS, the smoother the experience. When you are validating your App on a certain platform, it is useful to get an indication of the *FPS score*.
5
4
6
-
The SDK contains a built-in **FPS counter** that can be turned on or off via the [Platform Setting](/plugins/settings?id=platform)`showFps` in `settings.json`.
5
+
The SDK contains a built-in *FPS counter* that can be enabled or disabled via the [Platform Setting](settings.md#platform-settings)`showFps` in `settings.json`. When it is enabled, a *real-time* counter with the current FPS will be displayed as an overlay in the top left corner of your App.
7
6
8
-
When enabled a _real-time_ counter with the current FPS will be displayed as an overlay in the top left corner of the App.
7
+
## Advanced Configuration
9
8
10
-
## Advanced configuration
9
+
If you need more control over the behavior of the FPS counter, you can pass an *object* that contains one or more of the following configuration options (instead of passing only a `boolean`):
11
10
12
-
If you need more control over the behaviour of the FPS counter, you can pass an `object` with more configuration instead of a `boolean`.
13
-
14
-
-**interval** - specifies the refresh rate in miliseconds (defaults to `500`)
15
-
-**log** - whether to _also_ log the calculated FPS value to the console (defaults to `false`)
16
-
-**threshold** - minimal difference between FPS values to display / log (defaults to `1`)
11
+
| Name | Default | Description |
12
+
|---|---|---|
13
+
|`interval`| 500 | Refresh rate in milliseconds |
14
+
|`log`| false | Indicates whether or not to *also* log the calculated FPS value to the console |
15
+
|`threshold`| 1 | Minimum difference between FPS values to display / log |
The standard way of displaying images in Lightning is to just specify the `src`. This is the prefered way for your App's local assets (such as background, splash screen, logo and icons).
3
+
The standard way of displaying images in Lightning is to just specify the `src`. This is the preferred way for local assets (such as background, splash screen, logo and icons) of Lightning Apps.
4
4
5
-
It's adviced that you optimize an App's local assets, by resizing them to the exact size and quality you will be using them. This will be beneficial for the memory usage of your App.
5
+
It is recommended that you *optimize* the local assets of your App by resizing them to the *exact* size and quality in which you will use them. This positively affects the memory usage of your App.
6
6
7
-
However when you don't have control over the images you're displaying in your App (because they come from a remote API for example), you can use the Image plugin to resize and crop images.
7
+
However, if you don't have control over the images to be displayed in your App (for example, because they originate from a remote API), you can use the *Image* plugin to resize and crop them.
8
8
9
9
## Usage
10
10
11
-
Whenever you need to resize image, import the Image plugin from the Lightning SDK
11
+
Import the Image plugin from the Lightning SDK in components where you want to resize an image.
12
12
13
13
```js
14
14
import { Img } from'@lightningjs/sdk'
15
15
```
16
16
17
-
## Available methods
17
+
## Available Methods
18
18
19
-
### Exact
19
+
### exact
20
20
21
-
Resizes the image to the exact dimensions, ignorning the ratio.
21
+
Resizes the image to the exact dimensions, ignoring the ratio.
22
22
23
23
```js
24
24
Img(url).exact(width, height)
25
25
```
26
26
27
-
### Landscape
27
+
### landscape
28
28
29
29
Resizes the image by width, maintaining the ratio.
30
30
31
31
```js
32
32
Img(url).landscape(width)
33
33
```
34
34
35
-
### Portrait
35
+
### portrait
36
36
37
-
Resizes the image by height, maintaining the ratio
37
+
Resizes the image by height, maintaining the ratio.
38
38
39
39
```js
40
40
Img(url).portrait(height)
41
41
```
42
42
43
-
### Cover
43
+
### cover
44
44
45
-
Resizes the image in such a way that it covers the entire area. Depending on the orientation (portrait or landscape) of the image it will resize the image by width or by height.
45
+
Resizes the image in such a way that it covers the entire area. Depending on the orientation (portrait or landscape) of the source image and that of the desired output, it resizes the image by width or by height.
46
46
47
47
```js
48
48
Img(url).cover(width, height)
49
49
```
50
50
51
-
### Contain
51
+
### contain
52
52
53
-
Resizes the image in such a way that it is contained within the available area. Depending on the orientation (portrait or landscape) of the image it will resize the image by width or by height.
53
+
Resizes the image in such a way that it is contained within the available area. Depending on the orientation (portrait or landscape) of the source image and that of the desired output, it resizes the image by width or by height.
54
54
55
55
```js
56
56
Img(url).contain(width, height)
57
57
```
58
58
59
-
### Original
59
+
### original
60
60
61
-
Generate an image without resizing it (i.e. use the original dimensions), while still passing it through the proxy (and taking advantage of caching).
61
+
Generates the image without resizing it (that is, it uses the original dimensions), while still passing it through the proxy (and taking advantage of caching).
62
62
63
63
```js
64
64
Img(url).original()
65
65
```
66
66
67
-
## Image quality
67
+
## Image Quality
68
68
69
-
To increase performance on lower end boxes, especially those with limited GPU memory, there exists a `platform` setting to control the _image quality_.
70
-
Depending on this setting the images returned by the image server will be _smaller_ than actually displayed on the screen.
71
-
Lightning will then _stretch_ the images to fit the desired dimensions. This will save on used GPU memory, but off course impacts the visual quality of the images.
69
+
To increase the performance on lower-end boxes –especially those with limited GPU memory– there is a [platform setting](settings.md)`image.quality` in **settings.json** which enables you to control the *image quality*.
72
70
73
-
Please note that within the context of the Metrological AppStore this setting is defined as a platform setting _outside_ of the control of the App.
74
-
You can however experiment with this during local development via `settings.json`:
71
+
Depending on this setting, the images that are returned by the image server will be *smaller* than actually displayed on the screen.
72
+
Lightning *stretches* the images to fit them within the desired dimensions.
73
+
74
+
> Although this setting saves on used GPU memory, it also impacts the visual quality of the images.
75
+
76
+
Within the context of the Metrological Application Platform, this setting is defined as a platform setting *outside* an App developer's control.
77
+
However, you can experiment with this setting during local development via **settings.json** (located in the root of your project):
75
78
76
79
```json
77
80
{
@@ -85,5 +88,6 @@ You can however experiment with this during local development via `settings.json
85
88
}
86
89
```
87
90
88
-
The platform setting `image.quality` can be a value between `1` and `100`, where 1 means low quality and 100 equals original image quality.
89
-
If preferred this value can also be defined as a string with a percentage-sign appended (i.e. `"75%"`).
91
+
The Platform Setting `image.quality` is a value between `1` and `100`, where 1 means low quality and 100 is the original image quality.
92
+
93
+
If preferred, it can also be defined as a *string* with a percentage sign appended (for example, `"75%"`).
0 commit comments