3. Using Circuit Builder¶

3.1 Overview¶

The QuICScript Circuit Builder is built using HTML, Javascript, and CSS.

The core files are as follows:

├──index.html
└──assets/
    ├──index-xxxxxxxx.js
    └──index-xxxxxxxx.css

index.html - Point your web server to index.html to serve
- This file maybe edited to change the default circuit layout.
  
  See 3.2 Change Gate Style and Palette for more information.
index-xxxxxxxx.js - Logic for Circuit Builder
index-xxxxxxxx.css - Styling for Circuit Builder

Note

Do not modify the js and css files directly as it may break the application. They are bundled assets through the build process.

xxxxxxxx - Are hashed values of the file, will be different if there’s updates to the file.

3.2 Change Gate Style and Palette¶

3.2.1 Change Gate Style¶

Update in index.html under <style> tag.

<style>
  div.gate {
    /* Change Gate background color here: Default (#f3f4f6) */
    background-color: #98CFEC;
  }
</style>

Note

Any CSS styling works, including removing border border: none;

3.2.2 Change Gate Palette¶

Update in index.html under <script> tag.

<script>
  /** Update Gates present in the palette: Default ["H", "X", "Y", "Z", "C", "N", "P", "T", "I", "s", "U", "d", "m"]  */
  /** Do check the documentation for allowed gates */
  const gates = ["H", "X", "Y", "Z", "C", "P", "T", "I", "s", "U", "m"];
</script>

Note

Check out 2. Using QuICScript for available gates.

3.3 Add New Circuit¶

Description¶

URL Params follows Query String.

Using URL Params allows user to insert default parameters into the system for configurations.

Usage¶

Single Parameter <url>?<param>=<data>

Multiple Parameter (Separated with &) <url>?<param>=<data>&<param>=<data>

Warning

Make sure <param> follow exactly to Available Params. Any invalid param/data will not reflect in the builder.

Parameters¶

quicscript - Quicscript String
qubits - Number of qubits
columns - Number of columns
qibo - Enable/Disable of Qibo Feature
type - Type of output
input - Enable/Disable of Input Feature

Parameters¶
Query string parameter	Type	Description	Constraint	Default	Example
`quicscript`	string	Quicscript String (qubits are calculated)	0 \(<\) qubits \(\leq\) 20	—	Link
`qubits`	integer	Number of qubits	0 \(<\) qubits \(\leq\) 20	`9`	Link
`columns`	integer	Gate depth	—	`20`	Link
`qibo`	boolean	Enable/Disable Qibo Feature	`true` `false`	`false`	Link
`type`	string	Type of output	`decimal` `binary` `invbinary`	`binary`	Link
`input`	boolean	Enable quicscript input	`true` `false`	`true`	Link

Examples use cases¶
quicscript	qubits	columns	Remarks	Example
not-in-use	not-in-use	not-in-use	Default configuration	Link
use	not-in-use	not-in-use	Set Bell State	Link
use	use	use	3-qubit QFT circuit with 6 columns	Link
not-in-use	use	use	Empty 5-qubit circuit with gate depth of 10	Link

Note

In this example we are using https://pqcee.github.io/quicscript-dev-react/ as the base URL, do replace it with where you are hosting the website application

3.4 Embed Circuit Builder in Website¶

Follow these steps:

Basic Embedding

To embed the link https://pqcee.github.io/quicscript-dev-react/ in an HTML file using an iframe:
<iframe src="https://pqcee.github.io/quicscript-dev-react/?qibo=true&input=false"
        title="iFrame example"
        width="50%"
        height="600"
        allow="fullscreen">
</iframe>
Note

This code embeds the page, allows full-screen, enables qibo, disables input field, and adjusts the width and height.*

Adjusting <iframe ...> Parameters:
- Width: The width of the frame in CSS pixels. Default is 300.
- Height: The height of the frame in CSS pixels. Default is 150.
Allow fullscreen:

To enable fullscreen mode for the iframe, add the allow="fullscreen" attribute.
Optional Parameters:

See 3.3 Add New Circuit for more information on the URL parameters you can modify to create custom configurations.