It's occurred to me Editorial would be a great platform for generating HTML5
Has anyone tried this? And were they able to do anything useful with the generated picture, such as saving it to the camera roll?
I have downloaded some code that used HTML5 canvas tag to draw something, and there are function in the API for handling photos.
There are a few photo handling workflows also:
Thanks. So you think HTML5 Canvas should work reasonably well?
Well, I am sorta interested myself. So, I googled for some samples and found this collection of examples.
I used GithubGet script in Pythonista to download the files. I wish there was this same utility for Editorial, to download files in editorial.
I am close to a solution myself. Also, I think I can adapt a few of my recent workflows to handle multiple scripts for the web, like CSS, HTML, and Javascript files, in a workflow.
I will start experimenting myself.
These are my late workflows:
Editorial Workflow — Modular Python
Editorial Workflow — Execute Python Expression
Editorial Workflow — Multi Python
I just need to integrate html and javascript.
Here is a test workflow from one of the examples. Looks promising already.
The best way to download the examples from that GitHub page is to use the "Documents by Readdle" app's built in browser to copy the link of the zip file, and download it. Documents allows you to view and use the html examples.
Here is a Canvas workflow with animation.
Found more code to draw with canvas. I put it inside of a custom UI action:
Never used canvas before, but this opens up lots of possibilities.
I wanted a faster way to draw, and figured I could use Tumult Hype on the Mac. And yup!
Here is a full-fledged illustrator workflow from the examples on that site!
Wow! That's rather dense javascript. :-) I actually bought Hype but never used it. I think I can now find a use case.
So thanks again.
I don't see a way of posting a new thread, so I will reply to this very general subject title.
I would like to know how to enhance this code so that I can drag the rectangles that are in the canvas. Please notice that the background picture is a staff of lines and that the javascript in written within the html /html tags to make make the canvas get drawn on top of the background picture.
<!DOCTYPE html>
<html>
<head>
<title>rectangles on staff</title>
<meta name="description" content="Mathematics From The Beginning" />
<meta name="keywords" content="Formal definitions, undefined terms, sets, ordered sets" />
<meta name="author" content="James Adrian">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
a.link_style0:link {color: #000000; text-decoration: none;}
a.link_style0:visited {color: #000000; text-decoration: none;}
a.link_style0:hover {color: #00AA00; text-decoration: none;}
a.link_style0:active {color: #000000; text-decoration: none;}
a.link_style1:link {color: #000000;}
a.link_style1:visited {color: #000000;}
a.link_style1:hover {color: #00AA00;}
a.link_style1:active {color: #000000;}
</style>
<body style="background-image: url(https://www.futurebeacon.com/00Music/cstaffx.png);">
<div style="position: absolute; top: 0px; left: 0px;">
<canvas id="myCanvas" width="2300" height="1500" style="border:1px solid #d3d3d3;">
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "#FF0000";
// ( left, top, width, hight)
ctx.rect(300, 120, 220, 20);
ctx.stroke();
// The above rectangle is located at 300px
// from the left edge of the canvas and 120px
// from the top of the canvas.
// The above rectangle is 220px wide
// and 20px high
// Red rectangle
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "#008888";
ctx.rect(560, 250, 17, 17);
ctx.stroke();
// The above rectangle is 530px by 50px
// and is located at 220px from the top of the canvas
// and 14px to the right within the canvas
// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "#00FF00";
ctx.rect(300, 300, 50, 50);
ctx.stroke();
// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "#0000FF";
ctx.rect(500, 500, 150, 80);
ctx.stroke();
</script>
</div>
</body>
</html>
Thank you for your help.
Jim Adrian
jim@futurebeacon.com