| 1 | //! Icons and battery rings, drawn as vector paths so they take any theme color and stay sharp at |
| 2 | //! any scale. Icons are designed on a 24 × 24 grid. |
| 3 | |
| 4 | use std::f32::consts::{FRAC_PI_2, TAU}; |
| 5 | |
| 6 | use iced::widget::canvas::{self, Frame, LineCap, LineJoin, Path, Stroke, path::Arc}; |
| 7 | use iced::{Color, Element, Point, Radians, Rectangle, Renderer, Size, Theme, mouse}; |
| 8 | |
| 9 | #[derive(Debug, Clone, Copy, PartialEq, Eq)] |
| 10 | pub enum Icon { |
| 11 | Overview, |
| 12 | Equalizer, |
| 13 | Gestures, |
| 14 | Earbud, |
| 15 | Settings, |
| 16 | NoiseOff, |
| 17 | Anc, |
| 18 | Transparency, |
| 19 | Game, |
| 20 | Spatial, |
| 21 | Bass, |
| 22 | Wind, |
| 23 | Dual, |
| 24 | Chevron, |
| 25 | Bolt, |
| 26 | Check, |
| 27 | Find, |
| 28 | Info, |
| 29 | Chip, |
| 30 | Keys, |
| 31 | } |
| 32 | |
| 33 | /// `icon` at `size` pixels, in `color`. |
| 34 | pub fn icon<'a, Message: 'a>(icon: Icon, size: f32, color: Color) -> Element<'a, Message> { |
| 35 | iced::widget::canvas(Glyph { icon, color }) |
| 36 | .width(size) |
| 37 | .height(size) |
| 38 | .into() |
| 39 | } |
| 40 | |
| 41 | struct Glyph { |
| 42 | icon: Icon, |
| 43 | color: Color, |
| 44 | } |
| 45 | |
| 46 | impl<Message> canvas::Program<Message> for Glyph { |
| 47 | type State = (); |
| 48 | |
| 49 | fn draw( |
| 50 | &self, |
| 51 | _state: &(), |
| 52 | renderer: &Renderer, |
| 53 | _theme: &Theme, |
| 54 | bounds: Rectangle, |
| 55 | _cursor: mouse::Cursor, |
| 56 | ) -> Vec<canvas::Geometry> { |
| 57 | let mut frame = Frame::new(renderer, bounds.size()); |
| 58 | let mut pen = Pen::new(&mut frame, Point::ORIGIN, bounds.width, self.color); |
| 59 | draw_icon(&mut pen, self.icon); |
| 60 | vec![frame.into_geometry()] |
| 61 | } |
| 62 | } |
| 63 | |
| 64 | /// Draws on a 24 × 24 grid placed at `origin`, `size` pixels wide. |
| 65 | struct Pen<'f> { |
| 66 | frame: &'f mut Frame, |
| 67 | origin: Point, |
| 68 | scale: f32, |
| 69 | color: Color, |
| 70 | width: f32, |
| 71 | } |
| 72 | |
| 73 | impl<'f> Pen<'f> { |
| 74 | fn new(frame: &'f mut Frame, origin: Point, size: f32, color: Color) -> Self { |
| 75 | let scale = size / 24.0; |
| 76 | Pen { |
| 77 | frame, |
| 78 | origin, |
| 79 | scale, |
| 80 | color, |
| 81 | width: 1.9 * scale, |
| 82 | } |
| 83 | } |
| 84 | |
| 85 | fn at(&self, x: f32, y: f32) -> Point { |
| 86 | Point::new(self.origin.x + x * self.scale, self.origin.y + y * self.scale) |
| 87 | } |
| 88 | |
| 89 | fn stroke(&mut self, path: &Path) { |
| 90 | let stroke = Stroke::default() |
| 91 | .with_color(self.color) |
| 92 | .with_width(self.width) |
| 93 | .with_line_cap(LineCap::Round) |
| 94 | .with_line_join(LineJoin::Round); |
| 95 | self.frame.stroke(path, stroke); |
| 96 | } |
| 97 | |
| 98 | fn polyline(&mut self, points: &[(f32, f32)], closed: bool) { |
| 99 | let path = Path::new(|b| { |
| 100 | for (n, &(x, y)) in points.iter().enumerate() { |
| 101 | if n == 0 { |
| 102 | b.move_to(self.at(x, y)); |
| 103 | } else { |
| 104 | b.line_to(self.at(x, y)); |
| 105 | } |
| 106 | } |
| 107 | if closed { |
| 108 | b.close(); |
| 109 | } |
| 110 | }); |
| 111 | self.stroke(&path); |
| 112 | } |
| 113 | |
| 114 | fn line(&mut self, from: (f32, f32), to: (f32, f32)) { |
| 115 | self.polyline(&[from, to], false); |
| 116 | } |
| 117 | |
| 118 | fn circle(&mut self, x: f32, y: f32, r: f32) { |
| 119 | let path = Path::circle(self.at(x, y), r * self.scale); |
| 120 | self.stroke(&path); |
| 121 | } |
| 122 | |
| 123 | fn dot(&mut self, x: f32, y: f32, r: f32) { |
| 124 | let path = Path::circle(self.at(x, y), r * self.scale); |
| 125 | self.frame.fill(&path, self.color); |
| 126 | } |
| 127 | |
| 128 | /// Degrees, clockwise from three o'clock. `to` may be below `from` to go the other way. |
| 129 | fn arc(&mut self, x: f32, y: f32, r: f32, from: f32, to: f32) { |
| 130 | let path = Path::new(|b| { |
| 131 | b.arc(Arc { |
| 132 | center: self.at(x, y), |
| 133 | radius: r * self.scale, |
| 134 | start_angle: Radians(from.to_radians()), |
| 135 | end_angle: Radians(to.to_radians()), |
| 136 | }); |
| 137 | }); |
| 138 | self.stroke(&path); |
| 139 | } |
| 140 | |
| 141 | fn rect(&mut self, x: f32, y: f32, w: f32, h: f32, r: f32) { |
| 142 | let path = self.rounded(x, y, w, h, r); |
| 143 | self.stroke(&path); |
| 144 | } |
| 145 | |
| 146 | fn fill_rect(&mut self, x: f32, y: f32, w: f32, h: f32, r: f32) { |
| 147 | let path = self.rounded(x, y, w, h, r); |
| 148 | self.frame.fill(&path, self.color); |
| 149 | } |
| 150 | |
| 151 | fn rounded(&self, x: f32, y: f32, w: f32, h: f32, r: f32) -> Path { |
| 152 | Path::rounded_rectangle( |
| 153 | self.at(x, y), |
| 154 | Size::new(w * self.scale, h * self.scale), |
| 155 | (r * self.scale).into(), |
| 156 | ) |
| 157 | } |
| 158 | } |
| 159 | |
| 160 | fn draw_icon(pen: &mut Pen, icon: Icon) { |
| 161 | match icon { |
| 162 | Icon::Overview => { |
| 163 | for (x, y) in [(3.0, 3.0), (13.5, 3.0), (3.0, 13.5), (13.5, 13.5)] { |
| 164 | pen.rect(x, y, 7.5, 7.5, 2.0); |
| 165 | } |
| 166 | } |
| 167 | Icon::Equalizer => { |
| 168 | for (x, knob) in [(6.0, 14.0), (12.0, 8.0), (18.0, 16.0)] { |
| 169 | pen.line((x, 3.5), (x, 20.5)); |
| 170 | pen.line((x - 2.5, knob), (x + 2.5, knob)); |
| 171 | } |
| 172 | } |
| 173 | Icon::Gestures => { |
| 174 | pen.rect(9.5, 11.0, 5.0, 11.0, 2.5); |
| 175 | pen.arc(12.0, 11.5, 4.0, 200.0, 340.0); |
| 176 | pen.arc(12.0, 11.5, 7.5, 210.0, 330.0); |
| 177 | } |
| 178 | Icon::Earbud => earbud(pen, false, None), |
| 179 | Icon::Settings => { |
| 180 | for (y, knob) in [(6.0, 15.0), (12.0, 8.0), (18.0, 13.0)] { |
| 181 | pen.line((3.5, y), (20.5, y)); |
| 182 | pen.dot(knob, y, 2.6); |
| 183 | } |
| 184 | } |
| 185 | Icon::NoiseOff => { |
| 186 | pen.circle(12.0, 12.0, 8.5); |
| 187 | pen.line((6.0, 6.0), (18.0, 18.0)); |
| 188 | } |
| 189 | Icon::Anc => { |
| 190 | pen.circle(12.0, 12.0, 8.5); |
| 191 | pen.circle(12.0, 12.0, 4.5); |
| 192 | pen.dot(12.0, 12.0, 1.4); |
| 193 | } |
| 194 | Icon::Transparency => { |
| 195 | for n in 0..12u8 { |
| 196 | let angle = f32::from(n) * 30f32.to_radians(); |
| 197 | pen.dot(12.0 + 8.5 * angle.cos(), 12.0 + 8.5 * angle.sin(), 1.15); |
| 198 | } |
| 199 | pen.dot(12.0, 12.0, 2.2); |
| 200 | } |
| 201 | Icon::Game | Icon::Bolt => pen.polyline( |
| 202 | &[ |
| 203 | (13.5, 2.5), |
| 204 | (5.0, 13.5), |
| 205 | (11.5, 13.5), |
| 206 | (10.5, 21.5), |
| 207 | (19.0, 10.5), |
| 208 | (12.5, 10.5), |
| 209 | ], |
| 210 | true, |
| 211 | ), |
| 212 | Icon::Spatial => { |
| 213 | pen.dot(12.0, 12.0, 2.4); |
| 214 | for (r, spread) in [(5.5, 40.0), (9.5, 35.0)] { |
| 215 | pen.arc(12.0, 12.0, r, -spread, spread); |
| 216 | pen.arc(12.0, 12.0, r, 180.0 - spread, 180.0 + spread); |
| 217 | } |
| 218 | } |
| 219 | Icon::Bass => { |
| 220 | pen.polyline( |
| 221 | &[ |
| 222 | (3.5, 9.5), |
| 223 | (7.5, 9.5), |
| 224 | (12.5, 5.0), |
| 225 | (12.5, 19.0), |
| 226 | (7.5, 14.5), |
| 227 | (3.5, 14.5), |
| 228 | ], |
| 229 | true, |
| 230 | ); |
| 231 | pen.arc(13.0, 12.0, 4.0, -50.0, 50.0); |
| 232 | pen.arc(13.0, 12.0, 8.0, -50.0, 50.0); |
| 233 | } |
| 234 | Icon::Wind => { |
| 235 | pen.line((3.0, 8.5), (13.0, 8.5)); |
| 236 | pen.arc(13.0, 6.0, 2.5, 90.0, -180.0); |
| 237 | pen.line((3.0, 12.5), (17.5, 12.5)); |
| 238 | pen.arc(17.5, 15.5, 3.0, -90.0, 180.0); |
| 239 | pen.line((3.0, 16.5), (9.0, 16.5)); |
| 240 | } |
| 241 | Icon::Dual => { |
| 242 | pen.rect(2.5, 5.0, 12.5, 9.0, 1.5); |
| 243 | pen.line((1.5, 17.5), (16.0, 17.5)); |
| 244 | pen.rect(17.5, 8.0, 4.5, 11.0, 1.2); |
| 245 | } |
| 246 | Icon::Chevron => pen.polyline(&[(9.0, 5.5), (15.5, 12.0), (9.0, 18.5)], false), |
| 247 | Icon::Find => { |
| 248 | pen.circle(12.0, 12.0, 6.5); |
| 249 | pen.dot(12.0, 12.0, 2.0); |
| 250 | for (from, to) in [ |
| 251 | ((12.0, 2.0), (12.0, 5.0)), |
| 252 | ((12.0, 19.0), (12.0, 22.0)), |
| 253 | ((2.0, 12.0), (5.0, 12.0)), |
| 254 | ((19.0, 12.0), (22.0, 12.0)), |
| 255 | ] { |
| 256 | pen.line(from, to); |
| 257 | } |
| 258 | } |
| 259 | Icon::Info => { |
| 260 | pen.circle(12.0, 12.0, 9.0); |
| 261 | pen.line((12.0, 11.0), (12.0, 16.5)); |
| 262 | pen.dot(12.0, 7.8, 1.2); |
| 263 | } |
| 264 | Icon::Chip => { |
| 265 | pen.rect(6.5, 6.5, 11.0, 11.0, 2.0); |
| 266 | for at in [9.5, 14.5] { |
| 267 | pen.line((at, 2.5), (at, 6.5)); |
| 268 | pen.line((at, 17.5), (at, 21.5)); |
| 269 | pen.line((2.5, at), (6.5, at)); |
| 270 | pen.line((17.5, at), (21.5, at)); |
| 271 | } |
| 272 | } |
| 273 | Icon::Keys => { |
| 274 | pen.rect(2.5, 6.0, 19.0, 12.0, 2.5); |
| 275 | for x in [6.5, 10.0, 13.5, 17.0] { |
| 276 | pen.dot(x, 10.0, 0.9); |
| 277 | } |
| 278 | pen.line((8.0, 14.0), (16.0, 14.0)); |
| 279 | } |
| 280 | Icon::Check => pen.polyline(&[(4.5, 12.5), (9.5, 17.5), (19.5, 7.0)], false), |
| 281 | } |
| 282 | } |
| 283 | |
| 284 | /// A filled earbud: the head, the ear tip pointing in, and the stem going down. The tip is |
| 285 | /// drawn in `tip`, or in the part's color when there is none. |
| 286 | fn earbud(pen: &mut Pen, mirrored: bool, tip: Option<Color>) { |
| 287 | let x = |x: f32, w: f32| if mirrored { 24.0 - x - w } else { x }; |
| 288 | let color = pen.color; |
| 289 | pen.color = tip.unwrap_or(color); |
| 290 | pen.fill_rect(x(14.5, 6.0), 5.0, 6.0, 7.0, 2.8); |
| 291 | pen.color = color; |
| 292 | pen.dot(x(11.0, 0.0), 8.5, 6.3); |
| 293 | pen.fill_rect(x(6.6, 4.4), 10.0, 4.4, 12.5, 2.2); |
| 294 | } |
| 295 | |
| 296 | /// What a battery ring shows in its middle. |
| 297 | #[derive(Debug, Clone, Copy, PartialEq, Eq)] |
| 298 | pub enum Part { |
| 299 | Left, |
| 300 | Right, |
| 301 | Case, |
| 302 | } |
| 303 | |
| 304 | /// A battery ring: the track, an arc for the charge (none when unknown) and the part in the |
| 305 | /// middle. |
| 306 | pub fn battery_ring<'a, Message: 'a>( |
| 307 | part: Part, |
| 308 | level: Option<u8>, |
| 309 | size: f32, |
| 310 | colors: RingColors, |
| 311 | ) -> Element<'a, Message> { |
| 312 | iced::widget::canvas(Ring { part, level, colors }) |
| 313 | .width(size) |
| 314 | .height(size) |
| 315 | .into() |
| 316 | } |
| 317 | |
| 318 | #[derive(Debug, Clone, Copy)] |
| 319 | pub struct RingColors { |
| 320 | pub track: Color, |
| 321 | pub charge: Color, |
| 322 | pub part: Color, |
| 323 | /// The earbuds' ear tips. |
| 324 | pub tip: Color, |
| 325 | /// Details cut into the case (the lid line, the light). |
| 326 | pub cutout: Color, |
| 327 | } |
| 328 | |
| 329 | struct Ring { |
| 330 | part: Part, |
| 331 | level: Option<u8>, |
| 332 | colors: RingColors, |
| 333 | } |
| 334 | |
| 335 | impl<Message> canvas::Program<Message> for Ring { |
| 336 | type State = (); |
| 337 | |
| 338 | fn draw( |
| 339 | &self, |
| 340 | _state: &(), |
| 341 | renderer: &Renderer, |
| 342 | _theme: &Theme, |
| 343 | bounds: Rectangle, |
| 344 | _cursor: mouse::Cursor, |
| 345 | ) -> Vec<canvas::Geometry> { |
| 346 | let mut frame = Frame::new(renderer, bounds.size()); |
| 347 | let center = frame.center(); |
| 348 | let width = bounds.width * 0.06; |
| 349 | let radius = bounds.width / 2.0 - width / 2.0 - 1.0; |
| 350 | let ring = |color: Color| { |
| 351 | Stroke::default() |
| 352 | .with_color(color) |
| 353 | .with_width(width) |
| 354 | .with_line_cap(LineCap::Round) |
| 355 | }; |
| 356 | frame.stroke(&Path::circle(center, radius), ring(self.colors.track)); |
| 357 | if let Some(level) = self.level.filter(|&level| level > 0) { |
| 358 | let sweep = f32::from(level.min(100)) / 100.0 * TAU; |
| 359 | let arc = Path::new(|b| { |
| 360 | b.arc(Arc { |
| 361 | center, |
| 362 | radius, |
| 363 | start_angle: Radians(-FRAC_PI_2), |
| 364 | end_angle: Radians(-FRAC_PI_2 + sweep), |
| 365 | }); |
| 366 | }); |
| 367 | frame.stroke(&arc, ring(self.colors.charge)); |
| 368 | } |
| 369 | |
| 370 | let art = bounds.width * 0.44; |
| 371 | let origin = Point::new(center.x - art / 2.0, center.y - art / 2.0); |
| 372 | let mut pen = Pen::new(&mut frame, origin, art, self.colors.part); |
| 373 | match self.part { |
| 374 | Part::Left => earbud(&mut pen, false, Some(self.colors.tip)), |
| 375 | Part::Right => earbud(&mut pen, true, Some(self.colors.tip)), |
| 376 | Part::Case => { |
| 377 | pen.fill_rect(2.0, 5.5, 20.0, 13.5, 6.0); |
| 378 | pen.color = self.colors.cutout; |
| 379 | pen.width = 0.9 * pen.scale; |
| 380 | pen.line((2.0, 10.0), (22.0, 10.0)); |
| 381 | pen.dot(12.0, 14.5, 1.0); |
| 382 | } |
| 383 | } |
| 384 | vec![frame.into_geometry()] |
| 385 | } |
| 386 | } |