minizinc-embedded
v3.0.2
Published
Embedded MiniZinc ================= [![License: MIT][mit-image]][mit-url] [![NPM version][npm-image]][npm-url]
Downloads
36
Readme
Embedded MiniZinc
This is a utility project to create simple embedded MiniZinc snippets that can be solved.
Basic Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/minizinc-embedded/build/minizinc.css">
<script src="https://unpkg.com/minizinc-embedded/build/minizinc.js" data-init></script>
</head>
<body>
<pre class="minizinc-embedding">
int: n = 4; % The number of queens.
array [1..n] of var 1..n: q;
include "alldifferent.mzn";
constraint alldifferent(q);
constraint alldifferent(i in 1..n)(q[i] + i);
constraint alldifferent(i in 1..n)(q[i] - i);
solve satisfy;
</pre>
</body>
</html>
will wrap the given embedding and add a Solve
button to the top right.
Usage
Include in your website:
<link rel="stylesheet" href="https://unpkg.com/minizinc-embedded/build/minizinc.css">
<script src="https://unpkg.com/minizinc-embedded/build/minizinc.js"></script>
To initialize the embedding one can run the following JavaScript or add some data-
attributes or CSS classes to the script tag.
MiniZincEmbedded.init({
//root options go here
});
has the same effect as:
<script src="https://unpkg.com/minizinc-embedded/build/minizinc.js" data-init></script>
Options
The script tag as well as each individual embedding provide a range of customization options. See ./src/options.ts for a whole list of options. Most options can be defined using a CSS class or a data-
attribute. For example:
<div class="minizinc-embedded-option-no-stats" data-no-stats></div>
are aquivalent. Moreover, all options on an embedding element supersedes the script tag options.
An important root options (only available in the script tag or during .init({...})
) is selector
. This option specifies the CSS selector to use for determing the set of embeddings. By default it is set to .minizinc-embedding
matching all elements having the .minizinc-embedding
class.
Model and Data Definition
In order to determine which part of the snippet is the model and which is the data file the following strategy is used: any element within the embedding matching the CSS selector [data-type=mzn], [type="text/x-minizinc"], .minizinc-embedded-model
is considered the element containg the model. The model itself is retrieved using the .textContent
property.
The data file is similarly determined based on the CSS selector [data-type=dzn], [type="text/x-dzn"], .minizinc-embedded-data
. As an alternative one can specify the global selector as part of the data
option. In addition, the special data-data="next"
syntax is supported.
In case no model element can be found the embedding root element itself is used as input.
Example
<div class="minizinc-embedding">
<pre data-type="mzn">
int: n; % The number of queens.
array [1..n] of var 1..n: q;
include "alldifferent.mzn";
constraint alldifferent(q);
constraint alldifferent(i in 1..n)(q[i] + i);
constraint alldifferent(i in 1..n)(q[i] - i);
solve satisfy;
</pre>
<pre data-type="dzn">
n = 4;
</pre>
</div>
Advanced Usage
The globally exported MiniZincEmbedded
object has the same interface as any other IMiniZinc
object, thus allowing to solve simple models directly.
MiniZincEmbedded.solve(`int i = 4;`).then((result) => {
console.log(result);
});
MiniZincEmbedded.solveRaw(`int i = 4;`).then((output) => {
console.log(output);
});
Development Environment
Installation
git clone https://gitlab.com/minizinc/minizinc-webide.git
cd minizinc
npm install
Build distribution packages
npm run dist