From a623178cbd88723d30fc50f486562951b13bbc3c Mon Sep 17 00:00:00 2001 From: bazylevnik0 Date: Mon, 10 Apr 2023 16:46:06 +0300 Subject: [PATCH 01/15] add DrawingArea --- src/Library/demos/Drawing Area/main.blp | 31 +++++++++ src/Library/demos/Drawing Area/main.css | 0 src/Library/demos/Drawing Area/main.js | 86 ++++++++++++++++++++++++ src/Library/demos/Drawing Area/main.json | 10 +++ 4 files changed, 127 insertions(+) create mode 100644 src/Library/demos/Drawing Area/main.blp create mode 100644 src/Library/demos/Drawing Area/main.css create mode 100644 src/Library/demos/Drawing Area/main.js create mode 100644 src/Library/demos/Drawing Area/main.json diff --git a/src/Library/demos/Drawing Area/main.blp b/src/Library/demos/Drawing Area/main.blp new file mode 100644 index 000000000..a516b7518 --- /dev/null +++ b/src/Library/demos/Drawing Area/main.blp @@ -0,0 +1,31 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Drawing Area"; + description: _("Connection between control and drawing"); + + Box { + halign: center; + orientation: vertical; + DrawingArea draw { + content-width: 300; + content-height: 300; + } + Scale rotate { + orientation: horizontal; + width-request: 300; + draw-value: true; + adjustment: Gtk.Adjustment { + lower: -25; + upper: 25; + value: 0; + }; + } + } +} + + + + + diff --git a/src/Library/demos/Drawing Area/main.css b/src/Library/demos/Drawing Area/main.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js new file mode 100644 index 000000000..dde4fc07c --- /dev/null +++ b/src/Library/demos/Drawing Area/main.js @@ -0,0 +1,86 @@ +import Cairo from "cairo"; +import Gtk from "gi://Gtk?version=4.0"; +Gtk.init(); + +const drawingArea = workbench.builder.get_object("draw"); +const scaleRotate = workbench.builder.get_object("rotate"); + +let triangle = [3]; +triangle[0] = [2]; +triangle[0][0] = 100; +triangle[0][1] = 100; +triangle[1] = [2]; +triangle[1][0] = 0; +triangle[1][1] = -100; +triangle[2] = [2]; +triangle[2][0] = -100; +triangle[2][1] = 100; +let triangle_original = [3]; +for (let i = 0; i < 3; i++) { + let temp = [2]; + temp[0] = triangle[i][0]; + temp[1] = triangle[i][1]; + triangle_original[i] = temp; +} + +drawingArea.set_draw_func((area, cr, width, height) => { + // Draw triangle in context + cr.moveTo(150 + triangle[0][0], 150 + triangle[0][1]); + cr.lineTo(150 + triangle[1][0], 150 + triangle[1][1]); + cr.lineTo(150 + triangle[2][0], 150 + triangle[2][1]); + cr.lineTo(150 + triangle[0][0], 150 + triangle[0][1]); + + cr.setSourceRGBA(1, 0, 1, 1); + cr.stroke(); + // Freeing the context before returning from the callback + cr.$dispose(); +}); + +scaleRotate.connect("value-changed", () => { + const scale_value = scaleRotate.get_value(); + //Recalculate value of points of triangle + for (let i = 0; i < 3; i++) { + //calculate original angle + let x = triangle_original[i][0]; + let y = triangle_original[i][1]; + let angle = Math.atan(Math.abs(y) / Math.abs(x)); + if (x > 0 && y > 0) { + angle = angle; + } + if (x < 0 && y > 0) { + angle = Math.PI - angle; + } + if (x < 0 && y < 0) { + angle = Math.PI + angle; + } + if (x > 0 && y < 0) { + angle = Math.PI * 2 - angle; + } + if (x === 0) { + if (y > 0) { + angle = angle; + } + if (y < 0) { + angle = -1 * angle; + } + } + if (y === 0) { + if (x > 0) { + angle = angle; + } + if (x < 0) { + angle = M_PI; + } + } + //add to original angle scale_value + angle += (scale_value * Math.PI) / 180; + //set new value to triangle + let radius = Math.sqrt(x * x + y * y); + + triangle[i][0] = radius * Math.cos(angle); + triangle[i][1] = radius * Math.sin(angle); + } + //Redraw drawingArea + drawingArea.queue_draw(); +}); + diff --git a/src/Library/demos/Drawing Area/main.json b/src/Library/demos/Drawing Area/main.json new file mode 100644 index 000000000..59e926eb2 --- /dev/null +++ b/src/Library/demos/Drawing Area/main.json @@ -0,0 +1,10 @@ +{ + "name": "Drawing Area", + "category": "user_interface", + "description": "Connection between control and drawing.", + "panels": [ + "ui", + "preview" + ], + "autorun": true +} From fece1a45d207770fc823908f3ad9334e103264a6 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:17:00 +0300 Subject: [PATCH 02/15] Update src/Library/demos/Drawing Area/main.blp Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.blp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.blp b/src/Library/demos/Drawing Area/main.blp index a516b7518..3d944881c 100644 --- a/src/Library/demos/Drawing Area/main.blp +++ b/src/Library/demos/Drawing Area/main.blp @@ -3,7 +3,7 @@ using Adw 1; Adw.StatusPage { title: "Drawing Area"; - description: _("Connection between control and drawing"); + description: _("Programmatically draw onto a surface."); Box { halign: center; From 2d81db8472fdd24a8f7b960f1a355b2951a03a56 Mon Sep 17 00:00:00 2001 From: bazylevnik0 Date: Mon, 5 Jun 2023 14:27:13 +0300 Subject: [PATCH 03/15] changed description in json --- src/Library/demos/Drawing Area/main.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.json b/src/Library/demos/Drawing Area/main.json index 59e926eb2..cf4a759dd 100644 --- a/src/Library/demos/Drawing Area/main.json +++ b/src/Library/demos/Drawing Area/main.json @@ -1,7 +1,7 @@ { "name": "Drawing Area", "category": "user_interface", - "description": "Connection between control and drawing.", + "description": "Programmatically draw onto a surface.", "panels": [ "ui", "preview" From 70fc811423fb6dd4064da95cd80a7f93780f7f48 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:29:32 +0300 Subject: [PATCH 04/15] Update src/Library/demos/Drawing Area/main.blp Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.blp | 27 ++++++++++++++----------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/Library/demos/Drawing Area/main.blp b/src/Library/demos/Drawing Area/main.blp index 3d944881c..64283c50c 100644 --- a/src/Library/demos/Drawing Area/main.blp +++ b/src/Library/demos/Drawing Area/main.blp @@ -8,20 +8,22 @@ Adw.StatusPage { Box { halign: center; orientation: vertical; - DrawingArea draw { + + DrawingArea drawing_area { content-width: 300; content-height: 300; - } - Scale rotate { - orientation: horizontal; - width-request: 300; - draw-value: true; - adjustment: Gtk.Adjustment { - lower: -25; - upper: 25; - value: 0; - }; - } + } + + Scale scale { + orientation: horizontal; + width-request: 300; + draw-value: true; + adjustment: Gtk.Adjustment { + lower: -25; + upper: 25; + value: 0; + }; + } } } @@ -29,3 +31,4 @@ Adw.StatusPage { + From 110d91dccca50477f9fe8fcc2b744cafba42be84 Mon Sep 17 00:00:00 2001 From: bazylevnik0 Date: Mon, 5 Jun 2023 14:43:35 +0300 Subject: [PATCH 05/15] fixed format blp,js: names --- src/Library/demos/Drawing Area/main.blp | 6 ------ src/Library/demos/Drawing Area/main.js | 14 +++++++------- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/src/Library/demos/Drawing Area/main.blp b/src/Library/demos/Drawing Area/main.blp index 64283c50c..7919aacaf 100644 --- a/src/Library/demos/Drawing Area/main.blp +++ b/src/Library/demos/Drawing Area/main.blp @@ -26,9 +26,3 @@ Adw.StatusPage { } } } - - - - - - diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index dde4fc07c..2b7b84a0c 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -2,19 +2,19 @@ import Cairo from "cairo"; import Gtk from "gi://Gtk?version=4.0"; Gtk.init(); -const drawingArea = workbench.builder.get_object("draw"); -const scaleRotate = workbench.builder.get_object("rotate"); +const drawingArea = workbench.builder.get_object("drawing_area"); +const scaleRotate = workbench.builder.get_object("scale"); -let triangle = [3]; -triangle[0] = [2]; +let triangle = [3]; +triangle[0] = [2]; triangle[0][0] = 100; triangle[0][1] = 100; -triangle[1] = [2]; +triangle[1] = [2]; triangle[1][0] = 0; triangle[1][1] = -100; -triangle[2] = [2]; +triangle[2] = [2]; triangle[2][0] = -100; -triangle[2][1] = 100; +triangle[2][1] = 100; let triangle_original = [3]; for (let i = 0; i < 3; i++) { let temp = [2]; From 001d646fd118726c08f52e618532a81f98ad6c3c Mon Sep 17 00:00:00 2001 From: bazylevnik0 Date: Mon, 5 Jun 2023 14:50:25 +0300 Subject: [PATCH 06/15] js fixed .getValue --- src/Library/demos/Drawing Area/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index 2b7b84a0c..7f1f3e4ff 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -37,7 +37,6 @@ drawingArea.set_draw_func((area, cr, width, height) => { }); scaleRotate.connect("value-changed", () => { - const scale_value = scaleRotate.get_value(); //Recalculate value of points of triangle for (let i = 0; i < 3; i++) { //calculate original angle @@ -73,7 +72,7 @@ scaleRotate.connect("value-changed", () => { } } //add to original angle scale_value - angle += (scale_value * Math.PI) / 180; + angle += (scaleRotate.get_value() * Math.PI) / 180; //set new value to triangle let radius = Math.sqrt(x * x + y * y); From a5b3b1463d0c6d2d3ea8dc0e9054a8f13c915649 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:51:07 +0300 Subject: [PATCH 07/15] Update src/Library/demos/Drawing Area/main.js Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index 7f1f3e4ff..743c4cbf0 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -37,7 +37,7 @@ drawingArea.set_draw_func((area, cr, width, height) => { }); scaleRotate.connect("value-changed", () => { - //Recalculate value of points of triangle + // Recalculate value of points of triangle for (let i = 0; i < 3; i++) { //calculate original angle let x = triangle_original[i][0]; From d0277f3e979f441260d2e2324ffebc45736cec70 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:53:20 +0300 Subject: [PATCH 08/15] Update src/Library/demos/Drawing Area/main.js Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index 743c4cbf0..d6a184bcc 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -73,7 +73,7 @@ scaleRotate.connect("value-changed", () => { } //add to original angle scale_value angle += (scaleRotate.get_value() * Math.PI) / 180; - //set new value to triangle + // Set new value to triangle let radius = Math.sqrt(x * x + y * y); triangle[i][0] = radius * Math.cos(angle); From ed8ffea1127d00e28bf0d7ca3a293e18dee9c1d2 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:53:32 +0300 Subject: [PATCH 09/15] Update src/Library/demos/Drawing Area/main.js Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index d6a184bcc..9b0e89129 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -79,7 +79,7 @@ scaleRotate.connect("value-changed", () => { triangle[i][0] = radius * Math.cos(angle); triangle[i][1] = radius * Math.sin(angle); } - //Redraw drawingArea + // Redraw drawing_area drawingArea.queue_draw(); }); From c03cc7f39e34928f31f25e36ba05ece21b432397 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:53:52 +0300 Subject: [PATCH 10/15] Update src/Library/demos/Drawing Area/main.js Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index 9b0e89129..f55bb62d6 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -39,7 +39,7 @@ drawingArea.set_draw_func((area, cr, width, height) => { scaleRotate.connect("value-changed", () => { // Recalculate value of points of triangle for (let i = 0; i < 3; i++) { - //calculate original angle + // Calculate original angle let x = triangle_original[i][0]; let y = triangle_original[i][1]; let angle = Math.atan(Math.abs(y) / Math.abs(x)); From b872ec3026d107f109bbd6417deaa1b32788ff00 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:54:05 +0300 Subject: [PATCH 11/15] Update src/Library/demos/Drawing Area/main.js Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index f55bb62d6..187d9cc96 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -71,7 +71,7 @@ scaleRotate.connect("value-changed", () => { angle = M_PI; } } - //add to original angle scale_value + // Add to original angle scale value angle += (scaleRotate.get_value() * Math.PI) / 180; // Set new value to triangle let radius = Math.sqrt(x * x + y * y); From a70e4a75ac393b4e9d7763a8f199ff03e28a0dcf Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:58:34 +0300 Subject: [PATCH 12/15] Update src/Library/demos/Drawing Area/main.json Co-authored-by: Sonny Piers --- src/Library/demos/Drawing Area/main.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.json b/src/Library/demos/Drawing Area/main.json index cf4a759dd..fda5be0e1 100644 --- a/src/Library/demos/Drawing Area/main.json +++ b/src/Library/demos/Drawing Area/main.json @@ -4,7 +4,7 @@ "description": "Programmatically draw onto a surface.", "panels": [ "ui", - "preview" + "code" ], "autorun": true } From e5a6f438b0c41a2f417cfea4d44ceb4e64d7c9c3 Mon Sep 17 00:00:00 2001 From: bazylevnik0 Date: Mon, 5 Jun 2023 14:52:04 +0300 Subject: [PATCH 13/15] js fixed .getValue --- src/Library/demos/Drawing Area/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index 187d9cc96..35fdea13a 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -82,4 +82,3 @@ scaleRotate.connect("value-changed", () => { // Redraw drawing_area drawingArea.queue_draw(); }); - From 1a5aa087526ff0a32a88b2e4ca7da522a0bd7295 Mon Sep 17 00:00:00 2001 From: bazylevnik0 Date: Mon, 5 Jun 2023 15:04:31 +0300 Subject: [PATCH 14/15] css deleted --- src/Library/demos/Drawing Area/main.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/Library/demos/Drawing Area/main.css diff --git a/src/Library/demos/Drawing Area/main.css b/src/Library/demos/Drawing Area/main.css deleted file mode 100644 index e69de29bb..000000000 From caa1c4891f10c80630f2d7322a551b7929f58632 Mon Sep 17 00:00:00 2001 From: bazylevnik0 Date: Mon, 5 Jun 2023 15:19:12 +0300 Subject: [PATCH 15/15] add links for related tutorials/docs --- src/Library/demos/Drawing Area/main.blp | 1 + src/Library/demos/Drawing Area/main.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/Library/demos/Drawing Area/main.blp b/src/Library/demos/Drawing Area/main.blp index 7919aacaf..4d6fb361a 100644 --- a/src/Library/demos/Drawing Area/main.blp +++ b/src/Library/demos/Drawing Area/main.blp @@ -26,3 +26,4 @@ Adw.StatusPage { } } } +//https://docs.gtk.org/gtk4/class.DrawingArea.html diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index 35fdea13a..ecbf1ece4 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -82,3 +82,4 @@ scaleRotate.connect("value-changed", () => { // Redraw drawing_area drawingArea.queue_draw(); }); +//https://www.cairographics.org/tutorial/