-
Notifications
You must be signed in to change notification settings - Fork 81
/
02_8_Images.fsx
130 lines (101 loc) · 3.25 KB
/
02_8_Images.fsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
(**
---
title: Images
category: Simple Charts
categoryindex: 3
index: 9
---
*)
(*** hide ***)
(*** condition: prepare ***)
#r "nuget: Newtonsoft.JSON, 12.0.3"
#r "nuget: DynamicObj"
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
(*** condition: ipynb ***)
#if IPYNB
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
#endif // IPYNB
(**
# Images
[](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
[]({{root}}{{fsdocs-source-basename}}.fsx) 
[]({{root}}{{fsdocs-source-basename}}.ipynb)
*Summary:* This example shows how to create image charts in F#.
There are multiple ways of generating image charts:
- From 3 Dimensional color collections, where the inner arrays contain 3 (color dimensions without alpha channel) or 4 (color dimensions and alpha channel) values. The color model can be set separately as shown below.
- From a 2 dimensional collection Plotly.NETs `ARGB` type that represents rgba values
- From a base64 encoded image data source
## Creating Image charts from raw color arrays
*)
// 3d collection containing color values
open Plotly.NET
let colors = [
[[0 ;0 ;255]; [255;255;0 ]; [0 ;0 ;255]]
[[255;0 ;0 ]; [255;0 ;255]; [255;0 ;255]]
[[0 ;255;0 ]; [0 ;255;255]; [255;0 ;0 ]]
]
let imageRaw =
Chart.Image(Z=colors)
|> Chart.withTitle "Image chart from raw color component arrays"
(*** condition: ipynb ***)
#if IPYNB
imageRaw
#endif // IPYNB
(***hide***)
imageRaw |> GenericChart.toChartHTML
(***include-it-raw***)
(**
To change the color model to HSL for example, add the `ColorModel` argument:
*)
let imageRawHSL =
Chart.Image(Z=colors, ColorModel=StyleParam.ColorModel.HSL)
|> Chart.withTitle "HSL color model"
(*** condition: ipynb ***)
#if IPYNB
imageRawHSL
#endif // IPYNB
(***hide***)
imageRawHSL |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Creating Image charts from ARGB arrays
Note that this way of creating image charts uses the RGBA color model.
*)
let argbs = [
[ColorKeyword.AliceBlue ; ColorKeyword.CornSilk ; ColorKeyword.LavenderBlush ] |> List.map ARGB.fromKeyword
[ColorKeyword.DarkGray ; ColorKeyword.Snow ; ColorKeyword.MidnightBlue ] |> List.map ARGB.fromKeyword
[ColorKeyword.LightSteelBlue; ColorKeyword.DarkKhaki; ColorKeyword.LightAkyBlue ] |> List.map ARGB.fromKeyword
]
let imageARGB =
Chart.Image(argbs)
|> Chart.withTitle "ARGB image chart"
(*** condition: ipynb ***)
#if IPYNB
imageARGB
#endif // IPYNB
(***hide***)
imageARGB |> GenericChart.toChartHTML
(***include-it-raw***)
(**
## Creating Image charts from base64 encoded images
*)
open System
open System.IO
let imageSource = $@"{__SOURCE_DIRECTORY__}/img/logo.png"
let base64String =
imageSource
|> File.ReadAllBytes
|> System.Convert.ToBase64String
let logoImage =
Chart.Image(
Source=($"data:image/jpg;base64,{base64String}")
)
|> Chart.withTitle "This is Plotly.NET:"
(*** condition: ipynb ***)
#if IPYNB
logoImage
#endif // IPYNB
(***hide***)
logoImage |> GenericChart.toChartHTML
(***include-it-raw***)