Add rectangle & circle

letssteam · Jun 21, 2024 · 60b1e7f · 60b1e7f
1 parent 4da37ee
commit 60b1e7f
Show file tree

Hide file tree

Showing 3 changed files with 233 additions and 50 deletions.
diff --git a/steami-screen/index.html b/steami-screen/index.html
@@ -11,19 +11,17 @@
             <div id="command_frame">
                 <table id="main_text_table">
                     <tr>
-                        <th>Text</th>
-                        <th>Pos. X</th>
-                        <th>Pos. Y</th>
+                        <th>Type</th>
+                        <th>Inputs</th>
                         <th>Del.</th>
                     </tr>
-                    <tr id="text_line_2">
-                        <td><input class="text" type="text" placeholder="Text to display" onkeyup="draw()" onchange="draw()" value="Hello World !"></td>
-                        <td><input class="pos_x" type="number" title="X position" value="31" min="0" max="128" step="1" size="3" onkeyup="draw()" onchange="draw()"></td>
-                        <td><input class="pos_y" type="number" title="Y position" value="59" min="0" max="128" step="1" size="3" onkeyup="draw()" onchange="draw()"></td>
-                        <td><button title="Delete line" onclick="remove_line('text_line_2')">❌</button></td>
-                    </tr>
                 </table>
-                <button onclick="add_text_line()">Add line</button>
+                <div id="toolbox">
+                    <div class="toolbox_title">Toolbox</div>
+                    <button onclick="add_text_line()">Text</button>
+                    <button onclick="add_rect_line()">Rectangle</button>
+                    <button onclick="add_circle_line()">Circle</button>
+                </div>
             </div>
             <div id="canvas_frame">
                 <button onclick="draw()" title="Refresh canvas"></button>
@@ -32,6 +30,15 @@
             </div>
         </div>
         <script>
+            add_text_line();
+
+            let demo = document.getElementById("text_line_2");
+            demo.getElementsByClassName("text")[0].value = "Hello World !";
+            demo.getElementsByClassName("pos_x")[0].value = 31;
+            demo.getElementsByClassName("pos_y")[0].value = 59;
+
+            add_circle_line();
+
             draw();
 
             addEventListener("resize", (event) => {draw();});

diff --git a/steami-screen/script.js b/steami-screen/script.js
@@ -4,26 +4,7 @@ const DIA_SCREEN = 128;
 const SCREEN_PADDING = 2;
 const SCREEN_SIZE = DIA_SCREEN + SCREEN_PADDING * 2;
 const AXIS_RESOLUTION = 1000;
-
-function add_text_line(){
-    let table = document.getElementById(TEXT_TABLE_ID);
-    let id = "text_line_" + table.childNodes.length;
-    let tr = document.createElement("tr");
-
-    tr.id = id;
-    tr.insertCell().innerHTML = '<input class="text" type="text" placeholder="Text to display" onkeyup="draw()" onchange="draw()" value=""/>';
-    tr.insertCell().innerHTML = '<input class="pos_x" type="number" title="X position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" />';
-    tr.insertCell().innerHTML = '<input class="pos_y" type="number" title="Y position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" />';
-    tr.insertCell().innerHTML = `<button title="Delete line" onclick="remove_line('${id}')">❌</button>`;
-
-    table.append(tr);
-}
-
-function remove_line(id){
-    let tr = document.getElementById(id);
-    tr.remove();
-    draw();
-}
+const DEG_TO_RAD = Math.PI / 180.0;
 
 function draw(){
     let canvas = document.getElementById(CANVAS_ID);
@@ -40,28 +21,102 @@ function draw(){
     let tr_entries = document.getElementById(TEXT_TABLE_ID).getElementsByTagName("tr");
 
     for( let i = 1; i < tr_entries.length; ++i ){
-        let text_input = tr_entries[i].getElementsByClassName("text")[0] || null;
-        let x_input = tr_entries[i].getElementsByClassName("pos_x")[0] || null;
-        let y_input = tr_entries[i].getElementsByClassName("pos_y")[0] || null;
-
-        if( text_input == null || x_input == null || y_input == null ){
-            console.warn(`Skip the line ${i}. Unable to find an input`)
-            console.warn(text_input, x_input, y_input);
-            continue;
+        let tr_entry = tr_entries[i];
+
+        if( tr_entry.id.startsWith("text") ){
+            process_text_line(tr_entry, ctx);
+        }
+        else if( tr_entry.id.startsWith("rect") ){
+            process_rect_line(tr_entry, ctx);
+        }
+        else if( tr_entry.id.startsWith("circle") ){
+            process_circle_line(tr_entry, ctx);
+        }
+        else{
+            console.error(`Unknonw entry #${i}...`)
         }
+    }
+}
 
-        let text = text_input.value || null;
-        let x_pos = x_input.valueAsNumber;
-        let y_pos = y_input.valueAsNumber;
+function process_text_line(tr_entry, ctx){
 
-        if( text == null || isNaN(x_pos) || isNaN(y_pos) ){
-            console.warn(`Skip the line ${i}. Unable to find a value`)
-            console.warn(text, x_pos, y_pos);
-            continue;
-        }
+    let text_input = tr_entry.getElementsByClassName("text")[0] || null;
+    let x_input = tr_entry.getElementsByClassName("pos_x")[0] || null;
+    let y_input = tr_entry.getElementsByClassName("pos_y")[0] || null;
+
+    if( text_input == null || x_input == null || y_input == null ){
+        console.warn(`Skip the text line. Unable to find an input`)
+        console.warn(text_input, x_input, y_input);
+        return;
+    }
 
-        draw_string(ctx, x_pos, y_pos, text);
+    let text = text_input.value || null;
+    let x_pos = x_input.valueAsNumber;
+    let y_pos = y_input.valueAsNumber;
+
+    if( text == null || isNaN(x_pos) || isNaN(y_pos) ){
+        console.warn(`Skip the text line. Unable to find a value`)
+        console.warn(text, x_pos, y_pos);
+        return;
+    }
+
+    draw_string(ctx, x_pos, y_pos, text);
+}
+
+function process_rect_line(tr_entry, ctx){
+
+    let is_fill_input = tr_entry.getElementsByClassName("is_fill")[0] || null;
+    let x1_input = tr_entry.getElementsByClassName("x1")[0] || null;
+    let y1_input = tr_entry.getElementsByClassName("y1")[0] || null;
+    let x2_input = tr_entry.getElementsByClassName("x2")[0] || null;
+    let y2_input = tr_entry.getElementsByClassName("y2")[0] || null;
+
+    if( is_fill_input == null || x1_input == null || y1_input == null || x2_input == null || y2_input == null ){
+        console.warn(`Skip the rectangle line. Unable to find an input`)
+        console.warn(is_fill_input, x1_input, y1_input, x2_input, y2_input);
+        return;
     }
+
+    let is_fill = is_fill_input.checked;
+    let x1 = x1_input.valueAsNumber;
+    let y1 = y1_input.valueAsNumber;
+    let x2 = x2_input.valueAsNumber;
+    let y2 = y2_input.valueAsNumber;
+
+    if( is_fill == undefined || isNaN(x1) || isNaN(y1) || isNaN(x2) || isNaN(y2) ){
+        console.warn(`Skip the rectangle line. Unable to find a value`)
+        console.warn(is_fill, x1, y1, x2, y2);
+        return;
+    }
+
+    draw_rect(ctx, x1, y1, x2, y2, is_fill);
+}
+
+function process_circle_line(tr_entry, ctx){
+
+    let is_fill_input = tr_entry.getElementsByClassName("is_fill")[0] || null;
+    let x_input = tr_entry.getElementsByClassName("pos_x")[0] || null;
+    let y_input = tr_entry.getElementsByClassName("pos_y")[0] || null;
+    let radius_input = tr_entry.getElementsByClassName("radius")[0] || null;
+
+    if( is_fill_input == null || x_input == null || y_input == null || radius_input == null ){
+        console.warn(`Skip the rectangle line. Unable to find an input`)
+        console.warn(is_fill_input, x_input, y_input, radius_input);
+        return;
+    }
+
+    let is_fill = is_fill_input.checked;
+    let x = x_input.valueAsNumber;
+    let y = y_input.valueAsNumber;
+    let radius = radius_input.valueAsNumber;
+
+    if( is_fill == undefined || isNaN(x) || isNaN(y) || isNaN(radius) ){
+        console.warn(`Skip the rectangle line. Unable to find a value`)
+        console.warn(is_fill, x, y, radius);
+        return;
+    }
+
+    draw_circle(ctx, x, y, radius, is_fill);
 }
 
 function adjust_canvas(canvas, ctx){
@@ -98,6 +153,7 @@ function clear_canvas(canvas, ctx){
 function draw_pixel(ctx, x, y){
     ctx.beginPath();
     ctx.fillStyle = "#FFFFFF";
+    ctx.strokeStyle = "#FFFFFF";
     ctx.rect(x, y, 1, 1)
     ctx.fill();
 }
@@ -124,4 +180,94 @@ function draw_string(ctx, x, y, str){
     for( let i = 0; i < str.length; ++i ){
         draw_char(ctx, x + (i*6), y, str[i]);
     }
+}
+
+function draw_rect(ctx, x1, y1, x2, y2, is_fill){
+    ctx.beginPath();
+
+    ctx.rect(x1, y1, x2 - x1, 1);
+    ctx.rect(x2 - 1, y1, 1, y2 - y1);
+    ctx.rect(x1, y2, x2 - x1, 1);
+    ctx.rect(x1, y1, 1, y2 - y1);
+
+
+    if(is_fill){
+        ctx.rect(x1, y1, x2 - x1, y2 - y1);
+    }
+
+    ctx.fillStyle = "#FFFFFF";
+    ctx.strokeStyle = "#FFFFFF";
+    ctx.fill(); 
+}
+
+function draw_circle(ctx, x, y, radius, is_fill){
+    ctx.beginPath();
+
+
+    for(let theta = 0; theta < 360; theta += 1){
+        draw_pixel(ctx, Math.trunc(x + Math.cos(theta * DEG_TO_RAD) * radius), Math.trunc(y + Math.sin(theta * DEG_TO_RAD) * radius));
+    }
+
+    if(is_fill){
+        ctx.arc(x, y, radius, 0, 360);
+    }
+
+    ctx.fillStyle = "#FFFFFF";
+    ctx.strokeStyle = "#FFFFFF";
+    ctx.fill(); 
+}
+
+function remove_line(id){
+    let tr = document.getElementById(id);
+    tr.remove();
+    draw();
+}
+
+function add_text_line(){
+    let table = document.getElementById(TEXT_TABLE_ID);
+    let id = "text_line_" + table.childNodes.length;
+    let tr = document.createElement("tr");
+
+    tr.id = id;
+    tr.insertCell().innerHTML = 'Text'
+    tr.insertCell().innerHTML = '<div class="input_field"><div>Text: </div><div><input class="text" type="text" placeholder="Text to display" onkeyup="draw()" onchange="draw()" value=""/></div></div>' +
+                                '<div class="input_field"><div>Pos. X: </div><div><input class="pos_x" type="number" title="X position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>' +
+                                '<div class="input_field"><div>Pos. Y: </div><div><input class="pos_y" type="number" title="Y position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>';
+    tr.insertCell().innerHTML = `<button title="Delete line" onclick="remove_line('${id}')">❌</button>`;
+
+    table.append(tr);
+}
+
+function add_rect_line(){
+    let table = document.getElementById(TEXT_TABLE_ID);
+    let id = "rect_line_" + table.childNodes.length;
+    let tr = document.createElement("tr");
+
+    tr.id = id;
+    tr.insertCell().innerHTML = 'Rectangle'
+    tr.insertCell().innerHTML = '<div class="input_field"><div>Is filled: </div><div class="no_grow"><input class="is_fill" type="checkbox" onchange="draw()" checked=""/></div></div>' +
+                                '<div class="input_field"><div>X1: </div><div><input class="x1" type="number" title="X1 position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>' +
+                                '<div class="input_field"><div>Y1: </div><div><input class="y1" type="number" title="Y1 position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>'+
+                                '<div class="input_field"><div>X2: </div><div><input class="x2" type="number" title="X2 position" value="0" min=0 max=500 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>'+
+                                '<div class="input_field"><div>Y2: </div><div><input class="y2" type="number" title="Y2 position" value="0" min=0 max=500 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>';
+    tr.insertCell().innerHTML = `<button title="Delete line" onclick="remove_line('${id}')">❌</button>`;
+
+    table.append(tr);
+}
+
+
+function add_circle_line(){
+    let table = document.getElementById(TEXT_TABLE_ID);
+    let id = "circle_line_" + table.childNodes.length;
+    let tr = document.createElement("tr");
+
+    tr.id = id;
+    tr.insertCell().innerHTML = 'Circle'
+    tr.insertCell().innerHTML = '<div class="input_field"><div>Is filled: </div><div class="no_grow"><input class="is_fill" type="checkbox" onchange="draw()" checked=""/></div></div>' +
+                                '<div class="input_field"><div>Pos X: </div><div><input class="pos_x" type="number" title="X position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>' +
+                                '<div class="input_field"><div>Pos Y: </div><div><input class="pos_y" type="number" title="Y position" value="0" min=0 max=128 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>'+
+                                '<div class="input_field"><div>Radius: </div><div><input class="radius" type="number" title="Circle radius" value="0" min=0 max=500 step=1 size=3 onkeyup="draw()" onchange="draw()" /></div></div>';
+    tr.insertCell().innerHTML = `<button title="Delete line" onclick="remove_line('${id}')">❌</button>`;
+
+    table.append(tr);
 }
diff --git a/steami-screen/style.css b/steami-screen/style.css
@@ -2,14 +2,18 @@ body{
     padding: 4px;
 }
 
+.no_grow {
+    flex-grow: 0 !important;
+}
+
 #main_frame{
     display: flex;
     /* background-color: DodgerBlue; */
     height: 100%;
 }
 
 #command_frame{
-    flex: 30%;
+    flex: 40%;
     /* background-color: green; */
     padding: 4px;
     border-right: 1px solid lightgray;
@@ -40,7 +44,7 @@ body{
 
 #canvas_frame{
     position: relative;
-    flex: 70%;
+    flex: 60%;
     padding: 4px;
 }
 
@@ -63,4 +67,30 @@ body{
     background-image: url("refresh.png");
     background-repeat: no-repeat;
     background-size: contain;
-}
+}
+
+#toolbox {
+    position: absolute;
+    border: 1px solid black;
+    border-radius: 5px;
+    padding: 8px;
+    padding-top: 10px;
+    margin-top: 16px;
+}
+
+#toolbox .toolbox_title {
+    position: absolute;
+    top: calc(1em / -2 - 2px);
+    left: 10px;
+    background-color: #FFFFFF;
+}
+
+.input_field {
+    display: flex;
+}
+
+.input_field div:last-child{
+    flex: 1;
+    flex-grow: 1;
+    margin-left: 4px;
+}