Initial Commit

frontend/src/app.rs

@@ -0,0 +1,151 @@
+use crate::page;
+use common::{ClientMessage, ServerMessage};
+use seed::app::orders::OrdersContainer;
+use seed::prelude::*;
+use seed::{log, window};
+use seed_router::Router;
+use std::collections::VecDeque;
+
+pub type AppOrders = OrdersContainer<Msg, Model, Vec<Node<Msg>>>;
+
+/// Delays between successive attempts to reconnect in case the socket breaks. In seconds.
+const TIMEOUT_CONNECT_DELAYS: &[u32] = &[2, 5, 10, 10, 10, 20, 30, 60, 120, 300];
+
+pub struct Model {
+    page: Pages,
+    send_queue: VecDeque<ClientMessage>,
+    socket: WebSocket,
+    ws_url: String,
+    timeout_count: usize,
+}
+
+#[derive(Router)]
+pub enum Pages {
+    #[page("404", NotFound)]
+    NotFound(page::not_found::Model),
+
+    #[page("info", Info)]
+    Info(page::info::Model),
+
+    #[page("lights", Lights)]
+    Lights(page::lights::Model),
+}
+
+#[derive(Debug)]
+pub enum PageMsg {
+    NotFound(page::not_found::Msg),
+    Info(page::info::Msg),
+    Lights(page::lights::Msg),
+}
+
+#[derive(Debug)]
+pub enum Msg {
+    Page(PageMsg),
+
+    SendMessage(ClientMessage),
+    FlushMessageQueue,
+
+    // Global
+    Connect,
+    SocketOpened(),
+    SocketClosed(CloseEvent),
+    SocketError(),
+    SocketMessage(WebSocketMessage),
+}
+
+pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
+    orders.subscribe(Msg::SendMessage);
+
+    let location = window().location();
+    let host = location.host().expect("Failed to get hostname");
+    let ws_protocol = match location.protocol().ok().as_deref() {
+        Some("http:") => "ws",
+        _ => "wss",
+    };
+
+    let ws_url = format!("{ws_protocol}://{host}/api/ws");
+
+    Model {
+        page: Pages::from_url(url, &mut orders.proxy(Msg::Page))
+            .unwrap_or(Pages::NotFound(Default::default())),
+        send_queue: Default::default(),
+        socket: open_socket(&ws_url, orders),
+        ws_url,
+        timeout_count: 0,
+    }
+}
+
+fn open_socket(url: &str, orders: &mut impl Orders<Msg>) -> WebSocket {
+    WebSocket::builder(url, orders)
+        .on_open(Msg::SocketOpened)
+        .on_close(Msg::SocketClosed)
+        .on_error(Msg::SocketError)
+        .on_message(Msg::SocketMessage)
+        .build_and_open()
+        .expect("failed to open websocket")
+}
+
+pub fn update(msg: Msg, model: &mut Model, orders: &mut AppOrders) {
+    #[cfg(debug_assertions)]
+    log!(format!("{msg:?}"));
+
+    match msg {
+        Msg::Page(msg) => model.page.update(msg, &mut orders.proxy(Msg::Page)),
+        Msg::FlushMessageQueue => {
+            while let Some(message) = model.send_queue.pop_front() {
+                let serialized = ron::to_string(&message).unwrap();
+
+                if let Err(e) = model.socket.send_text(serialized) {
+                    model.send_queue.push_front(message);
+                    log!(e);
+                    return;
+                }
+            }
+        }
+        Msg::Connect => {
+            model.socket = open_socket(&model.ws_url, orders);
+        }
+        Msg::SendMessage(message) => {
+            model.send_queue.push_back(message);
+            orders.send_msg(Msg::FlushMessageQueue);
+        }
+        Msg::SocketOpened() => {
+            model.timeout_count = 0;
+            orders.send_msg(Msg::FlushMessageQueue);
+        }
+        Msg::SocketClosed(_event) => {
+            let timeout_sec = TIMEOUT_CONNECT_DELAYS[model.timeout_count];
+            let timeout_ms = timeout_sec * 1000;
+            orders.perform_cmd(cmds::timeout(timeout_ms, || Msg::Connect));
+
+            log!(format!(
+                "Socket closed, trying to reconnect in {timeout_sec} seconds"
+            ));
+
+            model.timeout_count = TIMEOUT_CONNECT_DELAYS.len().min(model.timeout_count + 1);
+        }
+        Msg::SocketError() => {}
+        Msg::SocketMessage(message) => {
+            if let Err(e) = handle_ws_msg(message, orders) {
+                log!(e);
+            }
+        }
+    }
+}
+
+fn handle_ws_msg(message: WebSocketMessage, orders: &mut impl Orders<Msg>) -> anyhow::Result<()> {
+    let message = message.text().map_err(|e| anyhow::format_err!("{e:?}"))?;
+    let message: ServerMessage = ron::from_str(&message)?;
+    orders.notify(message);
+
+    Ok(())
+}
+
+pub fn view(model: &Model) -> Vec<Node<Msg>> {
+    vec![model.page.view().map_msg(Msg::Page)]
+    //match &model.page {
+    //    Pages::NotFound => vec![h1!["Not Found"]],
+    //    Pages::InfoScreen => vec![div![C![C.info_box], raw![&model.info_page]]],
+    //    Pages::Lights(page) => vec![],
+    //}
+}

frontend/src/components/color_picker.rs

@@ -0,0 +1,225 @@
+use crate::css::C;
+use lighter_lib::BulbColor;
+use seed::prelude::*;
+use seed::{attrs, div, C};
+use std::f32::consts::PI;
+use web_sys::MouseEvent;
+
+#[derive(Default)]
+pub struct ColorPicker {
+    hue: f32,
+    saturation: f32,
+    brightness: f32,
+    temperature: f32,
+
+    mode: ColorPickerSetting,
+    dragging: Option<ColorPickerAttr>,
+}
+
+#[derive(Default)]
+enum ColorPickerSetting {
+    #[default]
+    HSB,
+    Kelvin,
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum ColorPickerAttr {
+    HueSat,
+    Brightness,
+    Temperature,
+}
+
+#[derive(Debug)]
+pub enum ColorPickerMsg {
+    MouseDown(ColorPickerAttr, MouseEvent),
+    MouseMove(ColorPickerAttr, MouseEvent),
+    MouseUp(Option<ColorPickerAttr>, MouseEvent),
+
+    SetColor(BulbColor),
+}
+
+impl ColorPicker {
+    pub fn update(&mut self, msg: ColorPickerMsg, orders: &mut impl Orders<ColorPickerMsg>) {
+        match msg {
+            ColorPickerMsg::MouseDown(target, event) => {
+                self.dragging = Some(target);
+                self.handle_mouse_event(target, event);
+            }
+            ColorPickerMsg::MouseMove(target, event) => {
+                self.handle_mouse_event(target, event);
+            }
+            ColorPickerMsg::MouseUp(target, event) => {
+                if let Some(target) = target {
+                    self.handle_mouse_event(target, event);
+                }
+
+                match self.dragging.take() {
+                    Some(ColorPickerAttr::HueSat) => self.mode = ColorPickerSetting::HSB,
+                    Some(ColorPickerAttr::Brightness) => {}
+                    Some(ColorPickerAttr::Temperature) => self.mode = ColorPickerSetting::Kelvin,
+                    None => return,
+                }
+
+                let color = match self.mode {
+                    ColorPickerSetting::HSB => {
+                        BulbColor::hsb(self.hue, self.saturation, self.brightness)
+                    }
+                    ColorPickerSetting::Kelvin => {
+                        BulbColor::kelvin(self.temperature, self.brightness)
+                    }
+                };
+
+                orders.send_msg(ColorPickerMsg::SetColor(color));
+            }
+            ColorPickerMsg::SetColor { .. } => {}
+        }
+    }
+
+    fn handle_mouse_event(&mut self, target: ColorPickerAttr, event: MouseEvent) {
+        if Some(target) != self.dragging {
+            return;
+        }
+
+        let handle_bar = || {
+            let y = event.offset_y() as f32;
+            let height = 200.0;
+            1.0 - (y / height).clamp(0.0, 1.0)
+        };
+
+        match target {
+            ColorPickerAttr::HueSat => {
+                let (x, y) = (event.offset_x() as f32, event.offset_y() as f32);
+                let radius = 100.0;
+
+                let x = x - radius;
+                let y = y - radius;
+
+                let angle = (x.atan2(y) + PI) / (2.0 * PI);
+                self.hue = 1.0 - angle;
+                self.saturation = ((x.powi(2) + y.powi(2)).sqrt() / radius).clamp(0.0, 1.0);
+            }
+            ColorPickerAttr::Brightness => self.brightness = handle_bar(),
+            ColorPickerAttr::Temperature => self.temperature = handle_bar(),
+        }
+    }
+
+    pub fn view(&self) -> Node<ColorPickerMsg> {
+        use ColorPickerAttr::{Brightness, HueSat, Temperature};
+        use ColorPickerMsg::{MouseDown, MouseMove, MouseUp};
+
+        let (hs_x, hs_y) = {
+            let radius = 100.0;
+            let angle = -self.hue * PI * 2.0;
+            let x = -self.saturation * radius * angle.sin();
+            let y = -self.saturation * radius * angle.cos();
+            (x + radius - 5.0, y + radius - 5.0)
+        };
+
+        let br_y = {
+            let height = 200.0;
+            let marker_height = 10.0;
+            (1.0 - self.brightness) * height - marker_height / 2.0
+        };
+
+        let temp_y = {
+            let height = 200.0;
+            let marker_height = 10.0;
+            (1.0 - self.temperature) * height - marker_height / 2.0
+        };
+
+        let (r, g, b) = hsb_to_rgb(self.hue, 1.0, 1.0);
+        let saturation_gradient = match self.mode {
+            ColorPickerSetting::HSB => {
+                format!("background: linear-gradient(0deg, #000, rgba({r},{g},{b},1));")
+            }
+            ColorPickerSetting::Kelvin => format!("background: linear-gradient(0deg, #000, #fff);"),
+        };
+
+        div![
+            C![C.color_picker],
+            mouse_ev(Ev::MouseUp, |ev| MouseUp(None, ev)),
+            div![
+                C![C.color_wheel],
+                div![
+                    C![C.color_wheel_marker],
+                    attrs! {
+                        At::Style => format!("margin-left: {hs_x}px; margin-top: {hs_y}px;"),
+                    },
+                ],
+                mouse_ev(Ev::MouseDown, |ev| MouseDown(HueSat, ev)),
+                mouse_ev(Ev::MouseMove, |ev| MouseMove(HueSat, ev)),
+                mouse_ev(Ev::MouseUp, |ev| MouseUp(Some(HueSat), ev)),
+                //mouse_ev(Ev::MouseLeave, |ev| MouseUp(HueSat, ev)),
+            ],
+            div![
+                C![C.brightness_bar],
+                attrs! { At::Style => saturation_gradient },
+                div![
+                    C![C.color_bar_marker],
+                    attrs! {
+                        At::Style => format!("margin-top: {br_y}px;"),
+                    },
+                ],
+                mouse_ev(Ev::MouseDown, |ev| MouseDown(Brightness, ev)),
+                mouse_ev(Ev::MouseMove, |ev| MouseMove(Brightness, ev)),
+                mouse_ev(Ev::MouseUp, |ev| MouseUp(Some(Brightness), ev)),
+                //mouse_ev(Ev::MouseLeave, |ev| MouseUp(Brightness, ev)),
+            ],
+            div![
+                C![C.temperature_bar],
+                div![
+                    C![C.color_bar_marker],
+                    attrs! {
+                        At::Style => format!("margin-top: {temp_y}px;"),
+                    },
+                ],
+                mouse_ev(Ev::MouseDown, |ev| MouseDown(Temperature, ev)),
+                mouse_ev(Ev::MouseMove, |ev| MouseMove(Temperature, ev)),
+                mouse_ev(Ev::MouseUp, |ev| MouseUp(Some(Temperature), ev)),
+                //mouse_ev(Ev::MouseLeave, |ev| MouseUp(Temperature, ev)),
+            ],
+        ]
+    }
+
+    pub fn set_hsb(&mut self, h: f32, s: f32, b: f32) {
+        self.hue = h;
+        self.saturation = s;
+        self.brightness = b;
+        self.mode = ColorPickerSetting::HSB;
+    }
+
+    pub fn set_kelvin(&mut self, t: f32, b: f32) {
+        self.temperature = t;
+        self.brightness = b;
+        self.mode = ColorPickerSetting::Kelvin;
+    }
+
+    pub fn set_color(&mut self, color: BulbColor) {
+        match color {
+            BulbColor::HSB { h, s, b } => self.set_hsb(h, s, b),
+            BulbColor::Kelvin { t, b } => self.set_kelvin(t, b),
+        }
+    }
+}
+
+fn hsb_to_rgb(h: f32, s: f32, b: f32) -> (u8, u8, u8) {
+    let h = 360.0 * h.clamp(0.0, 1.0);
+
+    let c = b * s; // chroma
+
+    let x = c * (1. - ((h / 60.) % 2. - 1.).abs());
+    let m = b - c;
+    let m = |v| ((v + m) * 255.0) as u8;
+
+    let (r, g, b) = match h {
+        _ if h < 60. => (c, x, 0.0),
+        _ if h < 120.0 => (x, c, 0.0),
+        _ if h < 180.0 => (0.0, c, x),
+        _ if h < 240.0 => (0.0, x, c),
+        _ if h < 300.0 => (x, 0.0, c),
+        _ => (c, 0.0, x),
+    };
+
+    (m(r), m(g), m(b))
+}

frontend/src/components/mod.rs

@@ -0,0 +1 @@
+pub mod color_picker;

frontend/src/css.rs

@@ -0,0 +1,7 @@
+use css_typegen::css_typegen;
+
+// NOTE: Remember to edit index.html when adding new css-files!
+
+// Generate rust types for css-classes.
+// Used for autocompletion and extra compile-time checks.
+css_typegen!("frontend/static/styles");

frontend/src/lib.rs

@@ -0,0 +1,12 @@
+mod app;
+mod components;
+mod css;
+mod page;
+
+use seed::prelude::wasm_bindgen;
+use seed::App;
+
+#[wasm_bindgen(start)]
+pub fn start() {
+    App::start("app", app::init, app::update, app::view);
+}

frontend/src/page/info.rs

@@ -0,0 +1,39 @@
+use common::ServerMessage;
+use seed::prelude::*;
+use seed::{div, raw};
+use seed_router::Page;
+
+#[derive(Default)]
+pub struct Model {
+    content: String,
+}
+
+#[derive(Debug)]
+pub enum Msg {
+    ServerMessage(ServerMessage),
+}
+
+impl Page for Model {
+    type Msg = Msg;
+
+    fn new(orders: &mut impl Orders<Self::Msg>) -> Self {
+        orders.subscribe(Msg::ServerMessage);
+
+        Model {
+            content: r#"<div class="penguin"></div>"#.into(),
+        }
+    }
+
+    fn update(&mut self, msg: Self::Msg, _orders: &mut impl Orders<Self::Msg>) {
+        match msg {
+            Msg::ServerMessage(ServerMessage::InfoPage { html }) => {
+                self.content = html;
+            }
+            Msg::ServerMessage(_) => {}
+        }
+    }
+
+    fn view(&self) -> Node<Self::Msg> {
+        div![raw![&self.content]]
+    }
+}

frontend/src/page/lights.rs

@@ -0,0 +1,240 @@
+use crate::components::color_picker::{ColorPicker, ColorPickerMsg};
+use crate::css::C;
+use common::{BulbGroup, BulbGroupShape, BulbMap, ClientMessage, ServerMessage};
+use lighter_lib::{BulbId, BulbMode};
+use seed::prelude::*;
+use seed::{attrs, button, div, C};
+use seed_router::Page;
+use std::collections::{BTreeMap, HashSet};
+use std::fmt::Write;
+
+/// /lights page
+#[derive(Default)]
+pub struct Model {
+    bulb_states: BTreeMap<BulbId, BulbMode>,
+
+    bulb_map: BulbMap,
+
+    /// The currently selected bulb map groups
+    selected_groups: HashSet<usize>,
+
+    /// Whether the currently selected map groups have been interacted with
+    groups_interacted: bool,
+
+    color_picker: ColorPicker,
+}
+
+#[derive(Debug)]
+pub enum Msg {
+    ServerMessage(ServerMessage),
+
+    SelectGroup(usize),
+    DeselectGroups,
+    ColorPicker(ColorPickerMsg),
+    SetBulbPower(bool),
+}
+
+impl Page for Model {
+    type Msg = Msg;
+
+    fn new(orders: &mut impl Orders<Self::Msg>) -> Self {
+        orders.subscribe(Msg::ServerMessage);
+        orders.notify(ClientMessage::GetBulbs);
+
+        Model::default()
+    }
+
+    fn update(&mut self, msg: Self::Msg, orders: &mut impl Orders<Self::Msg>) {
+        match msg {
+            Msg::ServerMessage(msg) => match msg {
+                ServerMessage::BulbMode { id, mode: new_mode } => {
+                    *self.bulb_states.entry(id).or_default() = new_mode
+                    //color_picker.set_color(mode.color);
+                }
+                ServerMessage::BulbMap(bulb_map) => {
+                    self.bulb_map = bulb_map;
+                    self.selected_groups.clear();
+                }
+                _ => {}
+            },
+            Msg::DeselectGroups => {
+                self.selected_groups.clear();
+            }
+            Msg::SelectGroup(index) => {
+                if self.groups_interacted {
+                    self.groups_interacted = false;
+                    // If this group is the only selected group, don't clear it
+                    if self.selected_groups.len() != 1 || !self.selected_groups.contains(&index) {
+                        self.selected_groups.clear();
+                    }
+                }
+
+                if !self.selected_groups.insert(index) {
+                    self.selected_groups.remove(&index);
+                } else {
+                    let bulb = self
+                        .bulb_map
+                        .groups
+                        .get(index)
+                        .and_then(|group| group.bulbs.first())
+                        .and_then(|id| self.bulb_states.get(id));
+
+                    if let Some(bulb) = bulb {
+                        self.color_picker.set_color(bulb.color);
+                    }
+                }
+            }
+            Msg::ColorPicker(ColorPickerMsg::SetColor(color)) => {
+                self.groups_interacted = true;
+                self.for_selected_bulbs(|id, _| {
+                    let message = ClientMessage::SetBulbColor {
+                        id: id.clone(),
+                        color,
+                    };
+                    orders.notify(message);
+                });
+            }
+            Msg::ColorPicker(msg) => {
+                self.color_picker
+                    .update(msg, &mut orders.proxy(|msg| Msg::ColorPicker(msg)));
+            }
+            Msg::SetBulbPower(power) => {
+                self.groups_interacted = true;
+                self.for_selected_bulbs(|id, _| {
+                    let message = ClientMessage::SetBulbPower {
+                        id: id.clone(),
+                        power,
+                    };
+                    orders.notify(message);
+                });
+            }
+        }
+    }
+
+    fn view(&self) -> Node<Self::Msg> {
+        //let view_bulb = |(id, (mode, color_picker)): (&BulbId, &(BulbMode, ColorPicker))| {
+        //    div![
+        //        C![C.bulb_box],
+        //        h1![id],
+        //        div![
+        //            C![C.bulb_controls],
+        //            {
+        //                let id = id.clone();
+        //                color_picker.view().map_msg(|msg| Msg::ColorPicker(id, msg))
+        //            },
+        //            button![
+        //                if mode.power {
+        //                    C![C.bulb_power_button, C.bulb_power_button_on]
+        //                } else {
+        //                    C![C.bulb_power_button]
+        //                },
+        //                {
+        //                    let id = id.clone();
+        //                    let power = !mode.power;
+        //                    ev(Ev::Click, move |_| Msg::SetBulbPower(id, power))
+        //                },
+        //            ],
+        //        ],
+        //    ]
+        //};
+
+        let bulb_map_width = self
+            .bulb_map
+            .groups
+            .iter()
+            .map(|group| group.x + group.shape.width())
+            .max()
+            .unwrap_or(0);
+
+        let bulb_map_height = self
+            .bulb_map
+            .groups
+            .iter()
+            .map(|group| group.y + group.shape.height())
+            .max()
+            .unwrap_or(0);
+
+        let view_bulb_group = |(i, group): (usize, &BulbGroup)| {
+            let (w, h) = (group.shape.width(), group.shape.height());
+            let mut style = String::new();
+            write!(
+                &mut style,
+                "margin-left: {}rem; margin-top: {}rem; width: {}rem; height: {}rem;",
+                group.x, group.y, w, h
+            )
+            .ok();
+
+            if let BulbGroupShape::Circle { r } = group.shape {
+                write!(&mut style, " border-radius: {r}rem;").ok();
+            }
+
+            div![
+                &group.name[..1],
+                if self.selected_groups.contains(&i) {
+                    C![C.bulb_group, C.bulb_group_selected]
+                } else {
+                    C![C.bulb_group]
+                },
+                attrs! {
+                    At::Style => style,
+                },
+                ev(Ev::Click, move |event| {
+                    event.stop_propagation();
+                    Msg::SelectGroup(i)
+                }),
+            ]
+        };
+
+        let (_color, power) = self
+            .selected_groups
+            .iter()
+            .next()
+            .and_then(|&index| self.bulb_map.groups.get(index))
+            .and_then(|group| group.bulbs.first())
+            .and_then(|id| self.bulb_states.get(id))
+            .map(|bulb| (bulb.color, bulb.power))
+            .unwrap_or_default();
+
+        div![
+            C![C.bulb_box],
+            div![
+                C![C.bulb_map],
+                attrs! {
+                    At::Style => format!("width: {}rem; height: {}rem;", bulb_map_width, bulb_map_height),
+                },
+                ev(Ev::Click, |_| Msg::DeselectGroups),
+                self.bulb_map.groups.iter().enumerate().map(view_bulb_group),
+            ],
+            div![
+                C![C.bulb_controls],
+                self.color_picker
+                    .view()
+                    .map_msg(|msg| Msg::ColorPicker(msg)),
+                button![
+                    if power {
+                        C![C.bulb_power_button, C.bulb_power_button_on]
+                    } else {
+                        C![C.bulb_power_button]
+                    },
+                    ev(Ev::Click, move |_| Msg::SetBulbPower(!power)),
+                    div![attrs! { At::Id => "switch_socket" }],
+                    div![attrs! { At::Id => "off_label" }, "Off"],
+                    div![attrs! { At::Id => "on_label" }, "On"],
+                    div![attrs! { At::Id => "lever_stem" }],
+                    div![attrs! { At::Id => "lever_face" }],
+                ],
+            ],
+        ]
+    }
+}
+
+impl Model {
+    fn for_selected_bulbs(&self, mut f: impl FnMut(&BulbId, &BulbMode)) {
+        self.selected_groups
+            .iter()
+            .filter_map(|&index| self.bulb_map.groups.get(index))
+            .flat_map(|group| group.bulbs.iter())
+            .filter_map(|id| self.bulb_states.get(id).map(|bulb| (id, bulb)))
+            .for_each(|(id, bulb)| f(id, bulb));
+    }
+}

frontend/src/page/mod.rs

@@ -0,0 +1,3 @@
+pub mod info;
+pub mod lights;
+pub mod not_found;

frontend/src/page/not_found.rs

@@ -0,0 +1,25 @@
+use seed::h1;
+use seed::prelude::*;
+use seed_router::Page;
+
+#[derive(Default)]
+pub struct Model;
+
+#[derive(Debug)]
+pub enum Msg {}
+
+impl Page for Model {
+    type Msg = Msg;
+
+    fn new(_orders: &mut impl Orders<Self::Msg>) -> Self {
+        Model
+    }
+
+    fn update(&mut self, msg: Self::Msg, _orders: &mut impl Orders<Self::Msg>) {
+        match msg {}
+    }
+
+    fn view(&self) -> Node<Self::Msg> {
+        h1!["404: Not found"]
+    }
+}