0.2.1

Cargo.toml

@@ -1,6 +1,8 @@
 [workspace]
 members = ["backend", "common", "frontend"]
 
+resolver = "2"
+
 [profile.dev]
 # Issue with const-generics
 incremental = false

Dockerfile

@@ -1,7 +1,7 @@
 ##################
 ### BASE STAGE ###
 ##################
-FROM rust:1.62.1 as base
+FROM rust:1.72.1 as base
 
 # Install build dependencies
 RUN cargo install --locked cargo-make trunk strip_cargo_version

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hemma"
-version = "0.1.0"
+version = "0.2.1"
 edition = "2021"
 
 [dependencies]

backend/src/collector/weatherapi.rs

@@ -144,7 +144,7 @@ fn wind_speed_to_beaufort(mps: f64) -> BeaufortScale {
     let index = beaufort_wind_speeds
         .iter()
         .enumerate()
-        .find_map(|(i, range)| range.contains(&mps).then(|| i))
+        .find_map(|(i, range)| range.contains(&mps).then_some(i))
         .unwrap_or(beaufort_wind_speeds.len());
 
     BeaufortScale(index as u8)

backend/src/main.rs

@@ -32,7 +32,7 @@ struct Opt {
     #[clap(short, long)]
     quiet: bool,
 
-    #[clap(long, short, default_value = "127.0.0.0:8000")]
+    #[clap(long, short, default_value = "127.0.0.1:8000")]
     bind: SocketAddr,
 
     #[clap(long, default_value = "./www")]

backend/src/tasks/lights.rs

@@ -1,6 +1,6 @@
 use std::collections::HashMap;
 
-use chrono::{Datelike, Local, NaiveTime, Weekday};
+use chrono::{DateTime, Datelike, Local, NaiveTime, Weekday};
 use common::{ClientMessage, ServerMessage};
 use lighter_lib::{BulbColor, BulbId};
 use lighter_manager::manager::{BulbCommand, BulbManager, BulbSelector};
@@ -40,7 +40,7 @@ pub async fn lights_task(state: &State) {
         .flat_map(|(bulb, schedule)| schedule.iter().map(move |(day, time)| (bulb, day, time)))
         .map(|(bulb, day, time)| {
             let handle = spawn(wake_task(
-                state.client_message.subscribe(),
+                state.client_message.clone(),
                 cmd.clone(),
                 bulb.clone(),
                 *day,
@@ -113,7 +113,7 @@ pub async fn lights_task(state: &State) {
 
                         if let Some(time) = time {
                             let handle = spawn(wake_task(
-                            state.client_message.subscribe(),
+                                state.client_message.clone(),
                                 cmd.clone(),
                                 id.clone(),
                                 day,
@@ -122,10 +122,9 @@ pub async fn lights_task(state: &State) {
 
                             if let Some(old_handle) = wake_tasks.insert((id, day), handle) {
                                 old_handle.abort();
-                        }} else {
-                            if let Some(old_handle) = wake_tasks.remove(&(id, day)) {
-                                old_handle.abort();
                             }
+                        } else if let Some(old_handle) = wake_tasks.remove(&(id, day)) {
+                            old_handle.abort();
                         }
                     }
                     _ => {}
@@ -136,39 +135,23 @@ pub async fn lights_task(state: &State) {
 }
 
 async fn wake_task(
-    mut client_messages: broadcast::Receiver<ClientRequest>,
+    client_messages: broadcast::Sender<ClientRequest>,
     cmd: mpsc::Sender<BulbCommand>,
     id: BulbId,
     day: Weekday,
     time: NaiveTime,
 ) {
-    let now = Local::now();
-    let day_num = day.num_days_from_monday();
-    let now_day = now.weekday();
-    let now_day_num = now_day.num_days_from_monday();
-
-    let mut alarm = now;
-    if day_num >= now_day_num {
-        // next alarm is this week
-        alarm += chrono::Duration::days((day_num - now_day_num).into());
-        alarm = alarm.date().and_time(time).unwrap();
-    } else {
-        // next alarm is next week
-        alarm += chrono::Duration::weeks(1);
-        alarm -= chrono::Duration::days((now_day_num - day_num).into());
-        alarm = alarm.date().and_time(time).unwrap();
-    }
+    let mut alarm = next_alarm(Local::now(), day, time);
 
     loop {
         info!("sleeping until {alarm}");
         sleep((alarm - Local::now()).to_std().unwrap()).await;
-        alarm += chrono::Duration::weeks(1);
 
         // slowly turn up brightness of bulb
         for brightness in (1..=75).map(|i| (i as f32) * 0.01) {
             select! {
                 // abort if the client pokes the bulb
-                _ = wait_for_bulb_command(&id, &mut client_messages) => break,
+                _ = wait_for_bulb_command(&id, client_messages.subscribe()) => break,
                 _ = sleep(Duration::from_secs(12)) => {}
             };
 
@@ -186,13 +169,34 @@ async fn wake_task(
                 return;
             };
         }
+
+        alarm = next_alarm(Local::now(), day, time);
     }
 }
 
+/// Get the next alarm, from a weekday+time schedule.
+fn next_alarm(now: DateTime<Local>, day: Weekday, time: NaiveTime) -> DateTime<Local> {
+    let day_of_alarm = day.num_days_from_monday() as i64;
+    let day_now = now.weekday().num_days_from_monday() as i64;
+
+    let alarm = now + chrono::Duration::days(day_of_alarm - day_now);
+    let mut alarm = alarm
+        .date_naive()
+        .and_time(time)
+        .and_local_timezone(Local)
+        .unwrap();
+
+    if alarm <= now {
+        alarm += chrono::Duration::weeks(1);
+    }
+
+    alarm
+}
+
 /// Wait until we receive a client request that mutates the given bulb
 async fn wait_for_bulb_command(
     bulb_id: &BulbId,
-    client_messages: &mut broadcast::Receiver<ClientRequest>,
+    mut client_messages: broadcast::Receiver<ClientRequest>,
 ) {
     loop {
         match client_messages.recv().await {
@@ -210,3 +214,31 @@ async fn wait_for_bulb_command(
         }
     }
 }
+
+#[cfg(test)]
+mod test {
+    use chrono::{offset::TimeZone, Local, NaiveTime, Weekday};
+
+    use super::next_alarm;
+
+    #[test]
+    fn test_alarm_date() {
+        const FMT: &str = "%Y-%m-%d %H:%M";
+        let now = Local.datetime_from_str("2022-10-18 15:30", FMT).unwrap();
+        let test_values = [
+            (Weekday::Tue, (16, 30), "2022-10-18 16:30"),
+            (Weekday::Tue, (14, 30), "2022-10-25 14:30"),
+            (Weekday::Wed, (15, 30), "2022-10-19 15:30"),
+            (Weekday::Mon, (15, 30), "2022-10-24 15:30"),
+        ];
+
+        for (day, (hour, min), expected) in test_values {
+            let expected = Local.datetime_from_str(expected, FMT).unwrap();
+
+            assert_eq!(
+                next_alarm(now, day, NaiveTime::from_hms(hour, min, 0)),
+                expected
+            );
+        }
+    }
+}

common/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "common"
-version = "0.1.0"
+version = "0.2.1"
 edition = "2021"
 
 [dependencies]

frontend/Cargo.toml

@@ -1,20 +1,17 @@
 [package]
 name = "hemma_web"
-version = "0.1.0"
+version = "0.2.1"
 authors = ["Joakim Hulthe <joakim@hulthe.net"]
 edition = "2021"
 
-[lib]
-crate-type = ["cdylib"]
-
 [dependencies]
-seed = "0.9.1"
-wasm-bindgen = "=0.2.80" # 0.2.81 has a breaking change
-serde = { version = "1", features = ['derive'] }
-serde_json = "1"
-anyhow = "*"
+seed = "0.10.0"
+wasm-bindgen = "=0.2.87" # must match Trunk.toml
+serde = { version = "1.0.0", features = ['derive'] }
 ron = "0.7.1"
 chrono = { version = "0.4.20", features = ["serde"] }
+gloo-net = { version = "0.4.0", default-features = false, features = ["websocket"] }
+gloo-console = "0.3.0"
 
 [dependencies.css_typegen]
 git = "https://github.com/hulthe/css_typegen.git"

frontend/Trunk.toml

@@ -1,12 +1,13 @@
 [serve]
 address = "0.0.0.0"
 
-
+[tools]
+wasm_bindgen = "0.2.87"
 
 [[proxy]]
 # This WebSocket proxy example has a backend and ws field. This example will listen for
 # WebSocket connections at `/api/ws` and proxy them to `ws://localhost:9000/api/ws`.
-backend = "ws://localhost:8000/api/ws"
+backend = "ws://127.0.0.1:8000/api/ws"
 ws = true
 
 #[[proxy]]

frontend/rust-toolchain.toml

@@ -0,0 +1,4 @@
+[toolchain]
+channel = "stable"
+components = ["rust-src", "rustfmt", "rust-src"]
+targets = ["wasm32-unknown-unknown"]

frontend/src/app.rs

@@ -1,10 +1,20 @@
 use crate::page;
 use common::{ClientMessage, ServerMessage};
+use gloo_console::error;
+use gloo_net::websocket;
+use gloo_net::websocket::futures::WebSocket;
 use seed::app::orders::OrdersContainer;
+use seed::futures::channel::mpsc::channel;
+use seed::futures::channel::mpsc::Sender;
+use seed::futures::select_biased;
+use seed::futures::SinkExt;
+use seed::futures::StreamExt;
 use seed::prelude::*;
-use seed::{log, window};
+use seed::window;
+use seed::FutureExt;
 use seed_router::Router;
 use std::collections::VecDeque;
+use std::error::Error;
 
 pub type AppOrders = OrdersContainer<Msg, Model, Vec<Node<Msg>>>;
 
@@ -14,8 +24,16 @@ 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,
+
+    /// Websocket URL
     ws_url: String,
+
+    /// Channel to send websocket messages.
+    socket: Option<Sender<websocket::Message>>,
+
+    /// Handle to the websocket task.
+    socket_task: Option<CmdHandle>,
+
     timeout_count: usize,
 }
 
@@ -47,14 +65,14 @@ pub enum Msg {
 
     // Global
     Connect,
-    SocketOpened(),
-    SocketClosed(CloseEvent),
-    SocketError(),
-    SocketMessage(WebSocketMessage),
+    SocketOpened(Sender<websocket::Message>),
+    SocketClosed,
+    SocketMessage(websocket::Message),
 }
 
 pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> Model {
     orders.subscribe(Msg::SendMessage);
+    orders.send_msg(Msg::Connect);
 
     let location = window().location();
     let host = location.host().expect("Failed to get hostname");
@@ -69,73 +87,109 @@ pub fn init(url: Url, orders: &mut impl Orders<Msg>) -> 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,
+        socket_task: None,
+        socket: None,
         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")
+fn open_socket(url: String, orders: &mut impl Orders<Msg>) -> CmdHandle {
+    let update_fn = orders.msg_sender();
+
+    orders.perform_cmd_with_handle(async move {
+        let mut ws = WebSocket::open(&url).expect("Failed to open websocket");
+        let (tx, mut rx) = channel(128);
+        update_fn(Some(Msg::SocketOpened(tx)));
+
+        loop {
+            select_biased! {
+                message = rx.next().fuse() => {
+                    let Some(message) = message else { return; };
+                    if let Err(e) = ws.send(message).await {
+                        error!(format!("websocket error: {e:?}"));
+                        return;
                     }
-
-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);
+                }
+                message = ws.next().fuse() => match message {
+                    Some(Ok(message)) => update_fn(Some(Msg::SocketMessage(message))),
+                    Some(Err(e)) => {
+                        error!(format!("websocket error: {e:?}"));
+                        update_fn(Some(Msg::SocketClosed));
+                        return;
+                    }
+                    None => {
+                        update_fn(Some(Msg::SocketClosed));
                         return;
                     }
                 }
             }
+        }
+    })
+}
+
+pub fn update(msg: Msg, model: &mut Model, orders: &mut AppOrders) {
+    #[cfg(debug_assertions)]
+    gloo_console::debug!(format!("{msg:?}"));
+
+    match msg {
+        Msg::Page(msg) => model.page.update(msg, &mut orders.proxy(Msg::Page)),
+        Msg::FlushMessageQueue => {
+            if let Some(socket) = model.socket.as_mut() {
+                while let Some(message) = model.send_queue.pop_front() {
+                    let serialized = ron::to_string(&message).expect("failed to serialize ron");
+
+                    let ws_message = websocket::Message::Text(serialized);
+                    if socket.try_send(ws_message).is_err() {
+                        error!("websocket queue full");
+                        model.send_queue.push_front(message);
+                        return;
+                    }
+                }
+            }
+        }
         Msg::Connect => {
-            model.socket = open_socket(&model.ws_url, orders);
+            model.socket_task = Some(open_socket(model.ws_url.clone(), orders));
         }
         Msg::SendMessage(message) => {
             model.send_queue.push_back(message);
             orders.send_msg(Msg::FlushMessageQueue);
         }
-        Msg::SocketOpened() => {
+        Msg::SocketOpened(socket) => {
+            model.socket = Some(socket);
             model.timeout_count = 0;
             orders.send_msg(Msg::FlushMessageQueue);
         }
-        Msg::SocketClosed(_event) => {
+        Msg::SocketClosed => {
+            model.socket_task = None;
+            model.socket = None;
+
             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!(
+            error!(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);
+                error!(format!("{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)?;
+fn handle_ws_msg(
+    message: websocket::Message,
+    orders: &mut impl Orders<Msg>,
+) -> Result<(), Box<dyn Error>> {
+    let websocket::Message::Text(text) = &message else {
+        return Err("Server is sending us raw bytes on the websocket! Argh!".into());
+    };
+    let message: ServerMessage = ron::from_str(text)?;
     orders.notify(message);
 
     Ok(())
@@ -143,9 +197,4 @@ fn handle_ws_msg(message: WebSocketMessage, orders: &mut impl Orders<Msg>) -> an
 
 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

@@ -19,7 +19,7 @@ pub struct ColorPicker {
 #[derive(Default)]
 enum ColorPickerSetting {
     #[default]
-    HSB,
+    Hsb,
     Kelvin,
 }
 
@@ -55,14 +55,14 @@ impl ColorPicker {
                 }
 
                 match self.dragging.take() {
-                    Some(ColorPickerAttr::HueSat) => self.mode = ColorPickerSetting::HSB,
+                    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 => {
+                    ColorPickerSetting::Hsb => {
                         BulbColor::hsb(self.hue, self.saturation, self.brightness)
                     }
                     ColorPickerSetting::Kelvin => {
@@ -130,10 +130,12 @@ impl ColorPicker {
 
         let (r, g, b) = hsb_to_rgb(self.hue, 1.0, 1.0);
         let saturation_gradient = match self.mode {
-            ColorPickerSetting::HSB => {
+            ColorPickerSetting::Hsb => {
                 format!("background: linear-gradient(0deg, #000, rgba({r},{g},{b},1));")
             }
-            ColorPickerSetting::Kelvin => format!("background: linear-gradient(0deg, #000, #fff);"),
+            ColorPickerSetting::Kelvin => {
+                "background: linear-gradient(0deg, #000, #fff);".to_string()
+            }
         };
 
         div![
@@ -186,7 +188,7 @@ impl ColorPicker {
         self.hue = h;
         self.saturation = s;
         self.brightness = b;
-        self.mode = ColorPickerSetting::HSB;
+        self.mode = ColorPickerSetting::Hsb;
     }
 
     pub fn set_kelvin(&mut self, t: f32, b: f32) {

frontend/src/main.rs

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

frontend/src/page/lights.rs

@@ -3,10 +3,10 @@ use crate::css::C;
 use chrono::{NaiveTime, Weekday};
 use common::{BulbGroup, BulbGroupShape, BulbMap, ClientMessage, ServerMessage};
 use lighter_lib::{BulbId, BulbMode};
-use seed::prelude::*;
 use seed::{attrs, button, div, input, C};
+use seed::{prelude::*, IF};
 use seed_router::Page;
-use std::collections::{BTreeMap, HashSet, HashMap};
+use std::collections::{BTreeMap, HashMap, HashSet};
 use std::fmt::Write;
 
 /// /lights page
@@ -23,7 +23,6 @@ pub struct Model {
     groups_interacted: bool,
 
     color_picker: ColorPicker,
-
 }
 
 #[derive(Default, Clone)]
@@ -56,7 +55,11 @@ impl Page for Model {
     fn update(&mut self, msg: Self::Msg, orders: &mut impl Orders<Self::Msg>) {
         match msg {
             Msg::ServerMessage(msg) => match msg {
-                ServerMessage::BulbState { id, mode: new_mode, wake_schedule } => {
+                ServerMessage::BulbState {
+                    id,
+                    mode: new_mode,
+                    wake_schedule,
+                } => {
                     *self.bulb_states.entry(id).or_default() = BulbState {
                         mode: new_mode,
                         wake_schedule,
@@ -109,7 +112,7 @@ impl Page for Model {
             }
             Msg::ColorPicker(msg) => {
                 self.color_picker
-                    .update(msg, &mut orders.proxy(|msg| Msg::ColorPicker(msg)));
+                    .update(msg, &mut orders.proxy(Msg::ColorPicker));
             }
             Msg::SetBulbPower(power) => {
                 self.groups_interacted = true;
@@ -122,7 +125,7 @@ impl Page for Model {
                 });
             }
             Msg::LightTime(time, day) => {
-                if time == "" {
+                if time.is_empty() {
                     self.for_selected_bulbs(|id, _| {
                         let message = ClientMessage::SetBulbWakeTime {
                             id: id.clone(),
@@ -131,8 +134,7 @@ impl Page for Model {
                         };
                         orders.notify(message);
                     });
-                }
-                else if let Ok(time) = NaiveTime::parse_from_str(&time, "%H:%M") {
+                } else if let Ok(time) = NaiveTime::parse_from_str(&time, "%H:%M") {
                     self.for_selected_bulbs(|id, _| {
                         let message = ClientMessage::SetBulbWakeTime {
                             id: id.clone(),
@@ -146,7 +148,6 @@ impl Page for Model {
         }
     }
 
-
     fn view(&self) -> Node<Self::Msg> {
         //let view_bulb = |(id, (mode, color_picker)): (&BulbId, &(BulbMode, ColorPicker))| {
         //    div![
@@ -227,12 +228,13 @@ fn view(&self) -> Node<Self::Msg> {
             .next()
             .and_then(|&index| self.bulb_map.groups.get(index))
             .and_then(|group| group.bulbs.first())
-        .and_then(|id| self.bulb_states.get(id))
-        .cloned() // TODO: remove clone
-        .unwrap_or_default();
+            .and_then(|id| self.bulb_states.get(id));
 
         let calendar_day = |day: Weekday| {
-        let time = selected_bulb.wake_schedule.get(&day).map(|t| t.to_string()).unwrap_or_default();
+            let time = selected_bulb
+                .and_then(|b| b.wake_schedule.get(&day))
+                .map(|t| t.to_string())
+                .unwrap_or_default();
             div![
                 C![C.calendar_day],
                 day.to_string(),
@@ -244,7 +246,6 @@ fn view(&self) -> Node<Self::Msg> {
             ]
         };
 
-
         div![
             C![C.bulb_box],
             div![
@@ -257,16 +258,18 @@ fn view(&self) -> Node<Self::Msg> {
             ],
             div![
                 C![C.bulb_controls],
-            self.color_picker
-                .view()
-                .map_msg(|msg| Msg::ColorPicker(msg)),
+                IF!(selected_bulb.is_none() => C![C.bulb_controls_disable]),
+                self.color_picker.view().map_msg(Msg::ColorPicker),
                 button![
-                if selected_bulb.mode.power {
+                    if selected_bulb.map(|b| b.mode.power).unwrap_or(false) {
                         C![C.bulb_power_button, C.bulb_power_button_on]
                     } else {
                         C![C.bulb_power_button]
                     },
-                ev(Ev::Click, move |_| Msg::SetBulbPower(!selected_bulb.mode.power)),
+                    {
+                        let target_power = selected_bulb.map(|b| !b.mode.power);
+                        ev(Ev::Click, move |_| target_power.map(Msg::SetBulbPower))
+                    },
                     div![attrs! { At::Id => "switch_socket" }],
                     div![attrs! { At::Id => "off_label" }, "Off"],
                     div![attrs! { At::Id => "on_label" }, "On"],

frontend/static/styles/common.scss

@@ -19,6 +19,16 @@ body {
 	font-size: x-large;
 }
 
+/* filthy hacks to make the page stop overflowing on mobile */
+@media (width <= 430px) {
+	body {
+		margin: 0;
+		transform-origin: top left;
+		scale: 0.9;
+	}
+}
+@media (width <= 390px) { body { scale: 0.85; } }
+
 .info_box {
 	margin: auto;
 	max-width: 40em;
@@ -93,7 +103,8 @@ body {
 }
 
 .bulb_box > * {
-	margin: 0.5em;
+	margin-bottom: 1em;
+	margin-right: 1em;
 }
 
 .bulb_controls {
@@ -103,9 +114,47 @@ body {
 	padding-right: 0.5em;
 	background: #56636e;
 	border: solid 0.25em #5b3f63;
-
 }
 
+.bulb_controls_disable {
+	position: relative;
+	overflow: hidden;
+}
+
+.bulb_controls_disable:before {
+	position: absolute;
+	content: '';
+	display: block;
+	background: #000000;
+	opacity: 0.5;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	z-index: 90;
+}
+
+.bulb_controls_disable:after {
+	position: absolute;
+	content: '';
+	background: #56636e;
+	display: block;
+	width: 0;
+    height: 10px;
+	border-radius: 8px;
+	-webkit-transform: rotate(-30deg);
+    transform: rotate(-30deg);
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	z-index: 91;
+    animation: to_full_width .2s ease-out 0s 1 forwards;
+}
+@keyframes to_full_width { to { width: 100%; } }
+
 .bulb_map {
 	background: url(images/blueprint_bg.png);
 	background-size: auto;