NetLogo code and running models inside Wordpress

[Luis R. Izquierdo]

Dear netlogo-devel Community,

We are 3 researchers who are thinking of writing an open e-book using the wordpress-based platform Pressbooks (https://wordpress.org/plugins/pressbooks/).

We would like to include NetLogo code and actual NetLogo running models within the e-book. For that, ideally we would want two pieces of software:

1. One that would take NetLogo code as text and would format it exactly as it looks in NetLogo, including colours (like in the "NetLogo Code" tab of NetLogoWeb)

2. Another one that allows running NetLogo models within Wordpress. (Presumably this could be done with an iframe, but we're looking for something more efficient and better integrated within wordpress).

We have only basic knowledge of HTML, CSS and Javascript, so at this stage our main question is:

Is writing two wordpress plugins the best approach to achieve what we need?, or can you think of a better way of doing these two tasks?

There may be quick and dirty ways of achieving our goals for the book (and we would love to hear about them!) but, looking ahead, we are also interested in knowing the proper way of doing this NetLogo-Wordpress integration (especially because we may be able to engage some of our students to write this type of software, which we believe could benefit other people too).

Any thoughts would be most appreciated,

Thanks a lot,

Luis, Segis and Bill 

[Jason Bertsche]

Hello,

Thanks for your interest in a NetLogo Web-powered e-book.  I think that sounds awesome!

(Also, sorry for my delay in responding.)

Is writing two wordpress plugins the best approach to achieve what we need?, or can you think of a better way of doing these two tasks?

Well, the syntax highlighter is something that I'm not sure could even reasonably be done without us supplying that for you.  However, I'm supportive of seeing these things implemented, so I'm fine with helping out with that.

1. One that would take NetLogo code as text and would format it exactly as it looks in NetLogo, including colours (like in the "NetLogo Code" tab of NetLogoWeb)

How do you want this to work, though?  Do you want to hit a URL on our site in order to make the highlighting happen, or do you want a JavaScript library that you can drop into your page?  Do you want a string of raw HTML back that you drop into your page?  Do you just want to query our server for a syntax-highlighted page that you embed through an `iframe`?  Something else?

Honestly, the `iframe` option is what is seeming the most feasible to me at the moment.  I feel like I could put that together pretty quickly, but let me know if that doesn't meet your needs.

2. Another one that allows running NetLogo models within Wordpress. (Presumably this could be done with an iframe, but we're looking for something more efficient and better integrated within wordpress).

I can look into this option with you all, but I'm not sure what you mean by more "efficient" here, or in what way it needs to be better integrated into Wordpress.  It would help me to know what problems you're trying to solve by favoring Wordpress integration over embedding the NLW page through an `iframe`.

--
You received this message because you are subscribed to the Google Groups "netlogo-devel" group.
To unsubscribe from this group and stop receiving emails from it, send an email to netlogo-deve...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Luis R. Izquierdo]

Dear Jason,

Thank you so much for your extremely helpful reply. The main issue is that -ideally- we would like the e-book to be as self-contained as possible, i.e. we would like the models in the book (and the colouring of the code) to work even if future versions of Netlogo make changes that imply the old code would not work (e.g. the use of + to concatenate strings before NetLogo 4.0).

Because of that, our preference would be:

1. Regarding the colouring of code: The javascript library, or to have a method that, in the end, produces "a string of raw HTML" (potentially with a CSS, if that is easier for you), so the colouring of code does not depend on external websites.

2. Regarding running NetLogo models: To have a NetLogo engine inside the book, so everything works even if NetLogo changes too much for our code. (And potentially be able to change the css of NetLogoWeb slightly, to make running models fit better with the rest of the e-book, e.g. fig.1 at http://ccl.northwestern.edu/2016/WeintropEtAlConstructionism2016-1.pdf) 

Another option would be to have iframes for everything, making sure that the links work as expected. This approach is great for webpages, but maybe not so great for an ebook, which at the end of the day is a book, and should have a stable, permanent edition at some point. 

To be honest, we can see pros and cons in both approaches (especially regarding running models), so we would love to hear your comments (and most likely to adopt your advice). 

Thank you so much for your help,

Luis

[Jason Bertsche]

The main issue is that -ideally- we would like the e-book to be as self-contained as possible

Ah.  That point about self-containment hadn't occurred to me for some reason, but that makes a lot of sense.

1. Regarding the colouring of code: The javascript library, or to have a method that, in the end, produces "a string of raw HTML" (potentially with a CSS, if that is easier for you), so the colouring of code does not depend on external websites.

Okay, I've now made such a thing.  You can download it here, and you can find its nature and usage explained here.  Essentially, include the CSS file and the JS file on your page, and then, from JavaScript, just call the function returned by `require('highlight-nl')` to convert your string of NetLogo code into a string of syntax-highlighted HTML.

That said, I just made this thing and haven't given it a huge amount of love yet.  It did fine with a basic test, but you'll be the first (and maybe only) person using it, so it's possible that there might be bugs with it.  If you run into any problems with it, feel free to let me know here or on the issue tracker attached to the GitHub repository linked above.

2. Regarding running NetLogo models: To have a NetLogo engine inside the book, so everything works even if NetLogo changes too much for our code. (And potentially be able to change the css of NetLogoWeb slightly, to make running models fit better with the rest of the e-book, e.g. fig.1 at http://ccl.northwestern.edu/2016/WeintropEtAlConstructionism2016-1.pdf)

Okay, got it.  Do you already know all of the models you want to use?  I primarily ask because I want to know if NetLogo Web can already do everything you want to be able to do in your book, or if it makes sense to hold off on this plugin until some feature or another is implemented.

[Luis R. Izquierdo]

:o

Well... I simply have no words. That is amazing!!! Thank you so much, Jason!!

I'll try the JS library out as soon as I can and let you know how it goes. It certainly couldn't look more professional!

As for the second issue, we have a few models, but not all of them. I'll try the ones we have so far and let you know whether they work in NetLogoWeb. 

Thank you so much, we really appreciate it!! 

All the very best!

Luis

[Luis R. Izquierdo]

Dear Jason,

This reply is about your wonderful library highlight-nl.js.

Your library works like a charm, thank you so much. There are some minor issues which, if solved, would put the icing on the cake. I report them here (and in Github too, since I guess that is better practice), just in case you want to give your kid that extra amount of love, as you say :D.

To see these minor issues you can just open the attached file issues.html. I include here the output:

(Thank you so much!!)

ISSUE: patterns of the kind *keyword are unduly (partially) colored
EXAMPLES:
let mate 
let colored
let myword
let my-neighbors
to update-color

ISSUE: "Less than" (<) is converted into &lt; (and everything after ; is colored like a comment)
EXAMPLE:
if (random-float 1 &lt; prob-revision) [update-strategy]

ISSUE: Same as above, but with "More than, >" (&gt;), "More than or equal to, >=" (&gt;=), and "Less than or equal to, <=" (&lt;=)
EXAMPLE:
if ([payoff] of target) &gt; payoff [

ISSUE: ifelse-value not colored properly

ISSUE: patch-set not colored properly

ISSUE: turtle-set not colored properly

[Luis R. Izquierdo]

Dear Jason,

This post is about running the models inside wordpress,

2. Regarding running NetLogo models: To have a NetLogo engine inside the book, so everything works even if NetLogo changes too much for our code. (And potentially be able to change the css of NetLogoWeb slightly, to make running models fit better with the rest of the e-book, e.g. fig.1 at http://ccl.northwestern.edu/2016/WeintropEtAlConstructionism2016-1.pdf)

Okay, got it.  Do you already know all of the models you want to use?  I primarily ask because I want to know if NetLogo Web can already do everything you want to be able to do in your book, or if it makes sense to hold off on this plugin until some feature or another is implemented.

We have tried to run all the models we have implemented so far, and these are the issues we have encountered so far:

1. read-from-string is not supported in NetLogo Web so far. 

We need a way to allow the user to input lists (or, more generally, a list of lists). Currently we do this with an input box and “read-from-string”, but this reporter is not implemented in NetLogo Web yet.

2. no-display is not supported in NetLogo Web so far. (not big deal)

3. The display of (temporary) pens in bar mode which overlap each other is not dealt adequately in NetLogo Web yet (see pictures 1-*.png attached).

4. The appearance of input boxes is not dealt adequately in NetLogo Web yet (see "payoffs" input box in pictures 2-*.png attached).

5. We have one particular model (attached) which runs fine in Netlogo Desktop, but throws the following error in NetLogo web:

"A type error has occurred in the simulation engine. More information about these sorts of errors can be found here.
Advanced users might find the generated error helpful, which is as follows:
ref is undefined"

Given this, I guess the best way to proceed is:

1. To post these issues in https://github.com/NetLogo/Galapagos/issues 

2. To wait a little bit for these to be solved.

Is that what we should do?

Thank you so much for all your help!

[Jason Bertsche]

Given this, I guess the best way to proceed is:
1. To post these issues in https://github.com/NetLogo/Galapagos/issues
2. To wait a little bit for these to be solved.

Is that what we should do?

No need to worry about opening the tickets yourself.  I can handle that.  As for waiting, yes, I think a little bit of that is in order.  Let's go through the items you listed.

With #1 (`read-from-string` support), it's not hugely far off from being implemented, but it's also not hugely close.  It's definitely something that's on my radar and that I have made a lot of progress on, but I would guess that it's at least one month away, probably a bit more than that.

An alternative—not a good one, but an alternative, nonetheless—would be to forego using Input widgets and `read-from-string`, and instead just have a global variable that users set through the Command Center.  The only advantage that I can think of that that solution is that it's one that actually works right now in NLW, despite the fact that is offers a clearly inferior user experience.

Regarding #2 (`no-display`), yeah, that one's a long ways off.  `display` and its ilk are a huge pain to implement correctly in the browser.  We want to implement them, but it's going to be a bit.  With primitives like `display`, I find that the they can usually be worked around with the stuff in NLW that currently functions, but I'd need to see the model in order to say for sure, one way or another.

With #3 (the stacked bar charts), I don't plan to make your current code for that compatible with the plotting functionality in NetLogo Web.  While having stacked bar charts is an undeniably useful thing, your version of them in NetLogo is achieved by doing some very non-standard stuff in desktop NetLogo, which the plotting library we're using in NLW doesn't understand.  However, that library does know how to handle proper stacked bar charts, so we could talk at some point about how we modify your web-based models to tap into the proper functionality instead.

Regarding the bug reported in #5, that was because `extract-rgb`, `extract-hsb`, `scale-color`, and `shade-of?` weren't wrapping their color arguments to keep them within [0, 140), so it broke when it got color number that was `145`.  That and #4 (the silly-looking Inputs) are both now fixed on netlogoweb.org .  Thank you for bringing both of those issues to my attention.

[Luis R. Izquierdo]

Dear Jason,

Thank you so much for your answers and work. We really appreciate it. I comment on each of your points below:

With #1 (`read-from-string` support), it's not hugely far off from being implemented, but it's also not hugely close.  It's definitely something that's on my radar and that I have made a lot of progress on, but I would guess that it's at least one month away, probably a bit more than that.

That's great, we can certainly wait.

 

Regarding #2 (`no-display`), yeah, that one's a long ways off.  `display` and its ilk are a huge pain to implement correctly in the browser.  We want to implement them, but it's going to be a bit.  With primitives like `display`, I find that the they can usually be worked around with the stuff in NLW that currently functions, but I'd need to see the model in order to say for sure, one way or another.

We actually use no-display only to make the model run faster without having to tell the user to turn off the switch in view control (we don't use the view at all in many of our models). It's not big deal, but if there's a simple way to switch off the view in NLW from the code, we'd love to know. 

With #3 (the stacked bar charts), I don't plan to make your current code for that compatible with the plotting functionality in NetLogo Web.  While having stacked bar charts is an undeniably useful thing, your version of them in NetLogo is achieved by doing some very non-standard stuff in desktop NetLogo, which the plotting library we're using in NLW doesn't understand.  However, that library does know how to handle proper stacked bar charts, so we could talk at some point about how we modify your web-based models to tap into the proper functionality instead.

That would be awesome (or if you want to point us to an example -so we don't waste your time-, that's also perfect). Also, if you can think of a more standard way of doing stacked bar charts in NetLogo Desktop (ideally compatible with NLW), we'd love to hear about it. I cannot think of a simpler way to implement them.

 

Regarding the bug reported in #5, that was because `extract-rgb`, `extract-hsb`, `scale-color`, and `shade-of?` weren't wrapping their color arguments to keep them within [0, 140), so it broke when it got color number that was `145`. 

Thank you so much!!

 

That and #4 (the silly-looking Inputs) are both now fixed on netlogoweb.org . 

We keep on seeing silly-looking inputs in the current netlogoweb.org, though (for instance, in the same model that was causing the issues with the wrapping color arguments).

 

Thank you for bringing both of those issues to my attention.

Thank YOU for your awesome work and the great help!

Luis

[Jason Bertsche]

if there's a simple way to switch off the view in NLW from the code, we'd love to know.

Unfortunately, no, there's no simple way to do that in NLW yet.

Also, if you can think of a more standard way of doing stacked bar charts in NetLogo Desktop (ideally compatible with NLW), we'd love to hear about it. I cannot think of a simpler way to implement them.

Ah, maybe I should have been clearer.  I didn't mean to suggest that you had implemented the "stacked columns" thing incorrectly.  To my knowledge, your implementation is the best that can be done in desktop NetLogo.  Rather, the idea was that desktop NetLogo makes you jump through hoops in order to accomplish some things when plotting, and I've chosen a plotting solution for NetLogo Web that should eventually allow us to easily provide a more diverse range of plots, with far less hoop-jumping, but at the cost of not reproducing all of NetLogo's hoop-jumping abilities.

We keep on seeing silly-looking inputs in the current netlogoweb.org, though (for instance, in the same model that was causing the issues with the wrapping color arguments).

Thanks for bringing this to my attention.  The display problem was properly fixed, but there was an issue where not everyone was receiving the latest version of the page.  That latter issue has now been resolved, and you should no longer see tall Input widgets looking ridiculous.

[Andrew Hedman]

Hello Luis and Jason! 

I came across this conversation while searching for resources on using Netlogo in wordpress, because I'm also trying to create a resource. Luis- did your project pan out? I would love to look over it t see what you did, and I'm running into similar issues as you did here. 

Any help you can offer would be VERY appreciated! 

Thanks!

Andy

[Luis R. Izquierdo]

Hi Andy,

Our book is in progress, and some chapters are already available at:

https://wisc.pb.unizin.org/agent-based-evolutionary-game-dynamics/ 

The production of HTML code that looks exactly as in NetLogo (colorwise) was brilliantly solved by Jason. This is implemented in the latest versions of NetLogo: you can "File -> Export -> Export code" and it produces HTML code which you can copy and paste in any website.

You can see examples at e.g.

https://wisc.pb.unizin.org/agent-based-evolutionary-game-dynamics/chapter/0-4-the-fundamentals-of-netlogo/ 

or

https://wisc.pb.unizin.org/agent-based-evolutionary-game-dynamics/chapter/2-3/

As for running NetLogo programs inside Wordpress (i.e. inside our book), we decided to abandon that approach, because it is not a priority for our book (i.e. for our intended readers) and it seems to me that this will likely create all sorts of compatibility issues in the future.

Feel free to ask me any specific questions you like. I'll be happy to help in any way I can,

Cheers,

Luis