Created Automagic flow HTML viewer

General discussions about Automagic and automation in general

Moderator: Martin

Post Reply
User avatar
Pendrokar
Posts: 26
Joined: 31 Dec 2013 10:22
Location: Riga, Latvia

Created Automagic flow HTML viewer

Post by Pendrokar » 19 Apr 2016 12:45

Hi,

I've created an HTML page with which to view Automagic flows in a web browser using exported flows.

Set up a demonstration page on Dropbox:
h̶t̶t̶p̶s̶:̶/̶/̶d̶l̶.̶d̶r̶o̶p̶b̶o̶x̶u̶s̶e̶r̶c̶o̶n̶t̶e̶n̶t̶.̶c̶o̶m̶/̶s̶/̶0̶9̶6̶t̶n̶o̶8̶c̶n̶w̶8̶p̶9̶w̶f̶/̶i̶n̶d̶e̶x̶.̶h̶t̶m̶l̶ (Dropbox no longer hosts static websites)
[edit] Fixed links within page

Source code:
https://github.com/Pendrokar/AutomagicFlowWebViewer

Took a day, but I did this for the project that aims to make sharing of flows more userfriendly:
https://github.com/Pendrokar/AutomagicCommunityFlows

I know, maybe Martin is way too of a technical person to realize how this is a problem and would even spread the popularity of the app.
Attachments
flow_html.png
As seen in a Chrome browser on Windows.
flow_html.png (41.31 KiB) Viewed 20467 times
Last edited by Pendrokar on 10 Oct 2017 14:10, edited 2 times in total.

User avatar
Martin
Posts: 4468
Joined: 09 Nov 2012 14:23

Re: Created Automagic flow HTML viewer

Post by Martin » 20 Apr 2016 19:19

Hi,

Very nice! Does it allow to pass the URL of a flow file (e.g. a link in the flow sharing area forum) and directly get the svg in return so it could be used to embed the svg or a link to the page containing the svg from the forum?

Regards,
Martin

User avatar
Pendrokar
Posts: 26
Joined: 31 Dec 2013 10:22
Location: Riga, Latvia

Re: Created Automagic flow HTML viewer

Post by Pendrokar » 20 Apr 2016 23:30

Huh, never thought of that.

The end result is indeed a SVG file, HTML page just gives viewing capabilities. I guess I could make it headless(Node.js). But then we'd need a server that handles it. The thing is, you, as part of Automagic developers, can't do that. Because then the third party license is violated. So it has to be someone on the outside, as all this is supposed to be a community driven flow sharing project.

First I do have to make it so that it can handle a URL to a flow file through a GET(URL) parameter. Once again we run into a server problem. Currently I have set it on Dropbox, which while allows external URLs, they have to be on the HTTPS protocol. If you try to visit the site with HTTP, then it redirects you to HTTPS. Vice versa here on automagic4android, where Dropbox still counts a flow file with HTTPS as being HTTP, so denies them.

Good that I got you interested.

User avatar
Pendrokar
Posts: 26
Joined: 31 Dec 2013 10:22
Location: Riga, Latvia

Re: Created Automagic flow HTML viewer

Post by Pendrokar » 21 Apr 2016 02:36

A server for all this is still something to figure out.

Temporarily we can look how it goes on my only website. Here I simply echo the contents of a flow with file_get_contents PHP function to a JavaScript variable. Your use of "</script>" within flow XMLs caused a slight delay.
http://magia-game.com/public_files/flow ... dc136fa0de
Flow source - http://automagic4android.com/forum/view ... 804#p14336
Note - Tell me if any of you encounter a browser which incorrectly reads the url, which has another url within it.

Already with tiny modification(svg declaration and grid background), the resulting render is a viewable SVG file:
http://magia-game.com/public_files/flow ... ghtSOS.svg
Image (Can't make it large, Martin must have disallowed resizing)
Still have to figure out why text doesn't show up. Its there but the possible too many generated sub-elements seem to make it invisible.
Last edited by Pendrokar on 18 May 2016 20:39, edited 1 time in total.

User avatar
Martin
Posts: 4468
Joined: 09 Nov 2012 14:23

Re: Created Automagic flow HTML viewer

Post by Martin » 22 Apr 2016 08:18

The url parameter needs to be encoded to make sure that it works in all browsers. Something like this should work:
http://magia-game.com/public_files/flow ... dc136fa0de

If you are interested, I could generate such a link whenever a flow is shared in the forum which would make it easier to preview the flow for users before downloading and it would also direct traffic to your page.

Regards,
Martin

User avatar
Pendrokar
Posts: 26
Joined: 31 Dec 2013 10:22
Location: Riga, Latvia

Re: Created Automagic flow HTML viewer

Post by Pendrokar » 25 Apr 2016 13:04

Ok, now both types of parameters are accepted, although of course having the link encoded with php urlencode or javascripts encodeURI is the preferred way.

mxGraph is not being as cooperative in Node.js though, after finding out how to specify that it should generate SVG, it crashes. Probably doesn't like the emulated DOM.
Last edited by Pendrokar on 18 May 2016 20:45, edited 1 time in total.

User avatar
Pendrokar
Posts: 26
Joined: 31 Dec 2013 10:22
Location: Riga, Latvia

Re: Created Automagic flow HTML viewer

Post by Pendrokar » 07 May 2016 19:00

Took a while for me to realize what are these "github.io" websites which I sometimes run into are. Just found out that might be one of the best options for a open source HTML website like this one. Uploaded as a new organization called AutomagicCommunity(if there are any programmers here on this forum, you are welcome to join):

http://automagiccommunity.github.io/flo ... ghtSOS.xml

It will only be able to view flows that have enabled access to "http://automagiccommunity.github.io" domain. Martin, if you are using Apache for this current site, what you need to do is create/modify .htaccess file beside the flow.php and have the following there:

Code: Select all

<IfModule mod_headers.c>
	Header set Access-Control-Allow-Origin "http://automagiccommunity.github.io"
</IfModule>
Then flows from this site can also be viewed. Hell, you could even add an HTML iframe element when someone uploads a flow from the App.

By the way. What got you interested in SVG format for this? Was only that it would then be seen as an image? Problem is then it wouldn't be interactive.

Post Reply