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