add more inner variable, replace the snapshot

Author: Arcelyth

layouts/60_2.tvkl

@@ -0,0 +1,43 @@
+#border_color = @($40, $48, $60)       
+#highlight    = @($0, $220, $255)      
+#fps_color    = @($120, $200, $255)
+
+#fn_border    = @($90, $90, $120)      
+#fn_highlight = @($180, $0, $255)
+
+#esc_color    = @($180, $90, $255)     
+#enter_color  = @($255, $170, $80)     
+#space_color  = @($120, $180, $255)    
+
+#esc_len = $6
+#mod_len = $7
+#space_len = $21
+
+:| Esc   [#esc_len,,#esc_color] 
+  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 
+  | '-' | '=' 
+  | Back [$9,,#fn_border] |-
+
+:| Tab   [$8,,#fn_border] 
+  | Q | W | E | R | T | Y | U | I | O | P 
+  | '[' | ']' 
+  | '\' [$7,,#fn_border] |-
+
+:| Caps  [$10,,#fn_border] 
+  | A | S | D | F | G | H | J | K | L 
+  | ';' | "'" 
+  | Enter [$10,,#enter_color] |-
+
+:| LShift [$12,,#fn_border] 
+  | Z | X | C | V | B | N | M 
+  | ',' | '.' | '/' 
+  | RShift [$13,,#fn_border] |-
+
+:| LCtrl [#mod_len,,#fn_border] 
+  | Win  [$5,,#fn_border] 
+  | LAlt [#mod_len,,#fn_border] 
+  | Space [#space_len,,#space_color] 
+  | RAlt [#mod_len,,#fn_border] 
+  | Win  [$5,,#fn_border] 
+  | App  [$6,,#fn_border] 
+  | RCtrl [#mod_len,,#fn_border] |-

layouts/60_blue.tvkl

@@ -139,6 +139,7 @@ impl Parser {
     }
 
     fn parse_attr(&mut self, attr: &mut Attr, env: &Env) -> Result<(), ParserError> {
+        // [width, height, border_color, highlight]
         self.consume(TokenType::LBracket)?; // [
 
         let mut pos = 0;

snapshot.png

@@ -17,6 +17,7 @@ pub fn render_ui(
 
     // Resolve Global Defaults from Env
     let default_border_color = Color::Rgb(176, 176, 176);
+    let default_fps_color = Color::Yellow;
     let global_border_color = match env.get("border_color") {
         Some(Value::RGB(r, g, b)) => Color::Rgb(*r, *g, *b),
         _ => default_border_color,
@@ -28,12 +29,23 @@ pub fn render_ui(
         _ => default_highlight,
     };
 
+    let outer_border_color = match env.get("outer_border_color") {
+        Some(Value::RGB(r, g, b)) => Color::Rgb(*r, *g, *b),
+        _ => global_border_color,
+    };
+
+    let fps_color= match env.get("fps_color") {
+        Some(Value::RGB(r, g, b)) => Color::Rgb(*r, *g, *b),
+        _ => default_fps_color,
+    };
+
+
     // Render Outer Container
     let outer_block = Block::default()
         .borders(Borders::ALL)
         .title(" Terminal Virtual Keyboard ")
         .border_type(BorderType::Thick)
-        .border_style(Style::default().fg(global_border_color));
+        .border_style(Style::default().fg(outer_border_color));
 
     let inner_area = outer_block.inner(area);
     f.render_widget(outer_block, area);
@@ -50,7 +62,7 @@ pub fn render_ui(
             .alignment(Alignment::Right)
             .style(
                 Style::default()
-                    .fg(Color::Yellow)
+                    .fg(fps_color)
                     .add_modifier(Modifier::BOLD),
             ),
         chunks[0],