Integrating Custom User Interfaces

within Allegro System Capture

Copyright Statement

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Cadence and the Cadence logo are
registered trademarks of Cadence Design Systems, Inc. All others are the property of their respective
holders.

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 2
 Allegro System Capture AppNote- Custom GUIs

Contents
Introduction .................................................................................................................. 4
Tcl APIs ....................................................................................................................... 4
Displaying a web page within a workspace tab ........................................................ 4
Displaying a web page within a dialog ..................................................................... 4
Displaying a web page within a dialog with a close handler ..................................... 5
Setting the visibility of a dialog ................................................................................. 6
Displaying a web page within a docked panel .......................................................... 6
Displaying a web page within a docked panel with a close handler ......................... 7
Setting the tcl procedure on dialog/docked panel close ........................................... 8
The Hybrid App ............................................................................................................ 9
Creating the HTML Page ......................................................................................... 9
Calling Tcl Procedures from JavaScript ................................................................. 13
Tcl Script for Initializing the HTML Page ................................................................ 13
Tcl Driver Script...................................................................................................... 16
Drawing a Pie Chart with JavaScript ...................................................................... 18
Output .................................................................................................................... 20

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 3
 Allegro System Capture AppNote- Custom GUIs

Introduction
Allegro System Capture provides a framework for developing custom user interfaces
with HTML5 and JavaScript.

Tcl APIs
You can display hybrid content within docked panels, dialogs and workspace tabs in
Allegro System Capture using the sdaUI Tcl package.
This section shows sample Tcl APIs that display hybrid content within an Allegro
System Capture session, consistent with its theme.

Displaying a web page within a workspace tab

Command
sdaUI::openURLTab <title> <url> <id> <name>

Parameters
Name Description Data Type Optional Default
Value
title Title of the tab String No None
url URL of the content to host String (URL style) No None
id Unique identifier for the tab String No None
name Name of the hybrid component. This String No None
name can be used for looking up the
component handle using
cps::findComponentByName

Example
sdaUI::openURLTab CADENCE www.cadence.com id_testtab01 testtab01

Displaying a web page within a dialog

Command
sdaUI::openURLDialog <title> <url> <name> ?icon? ?position? ?size? ?isModal? ?isResizable?

Parameters
Name Description Data Type Optional Default
Value
title Title of the tab String No None
url URL of the content to host String (URL style) No None
name Name of the hybrid component. This String No None
name can be used for looking up the
component handle using
cps::findComponentByName

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 4
 Allegro System Capture AppNote- Custom GUIs

icon Path to the dialog icon String Yes {}

position Position of the web-view within the Tcl list of points Yes {0 0}
dialog. This is reserved for future
use
size Size of the dialog in width and height Tcl list of two Yes {800 800}
integers {width height}
isModal Modality of the dialog. A 1 would Boolean (1/0) Yes 1
indicate a modal dialog
isResizable Resizability of the dialog Boolean (1/0) Yes 0

Example
sdaUI::openURLDialog CADENCE www.cadence.com testtab02 {} {0 0} {1000 400} 1 1

Displaying a web page within a dialog with a close handler

Command
sdaUI::openURLDialogWithCloseHandler <title> <url> <name> <close_handler> ?icon? ?position?
?size? ?isModal? ?isResizable?

Parameters
Name Description Data Type Optional Default
Value
title Title of the tab String No None
url URL of the content to host String (URL style) No None
name Name of the hybrid component. Use this String No None
name to look up the component handle
using cps::findComponentByName.
close_handler Name of Tcl procedure to receive a String No None
callback whenever a dialog is closed by
user or visibility of dialog changes to
hidden. Syntax of close handler should
be
proc onCloseDialog {handle} {
}

icon Path to the dialog icon String Yes {}

position Position of the web-view within the Tcl list of points Yes {0 0}
dialog. This is reserved for future use
size Size of the dialog in width and height Tcl list of two Yes {800 800}
integers {width
height}
isModal Modality of the dialog. A value of 1 Boolean (1/0) Yes 1
indicates a modal dialog
isResizable Resizability of the dialog Boolean (1/0) Yes 0

Example
proc onCloseDialog { handle} {
# whenever the dialog is closed by user this proc will be called.
}
TCL> sdaUI::openURLDialogWithCloseHandler CADENCE www.cadence.com testtab02 onCloseDock

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 5
 Allegro System Capture AppNote- Custom GUIs

Setting the visibility of a dialog

To control the visibility of a dialog hosting web content, use the Tcl API sdaUI::
openURLDialog. This procedure returns a list of handles for finer control over the
behavior the dialog and its content. The first element is the handle to the dialog and the
second element is the handle to the WebKit component hosting the HTML page.

Command
sdaUI::hybridDialog <title> <url> <name> ?icon? ?position? ?size? ?isModal? ?isResizable?

Parameters
Name Description Data Type Optional Default
Value
title Title of the tab String No None
url URL of the content to host String (URL style) No None
name Name of the hybrid component. Use this String No None
name to look up the component handle
using cps::findComponentByName.
icon Path to the dialog icon String Yes {}
position Position of the web-view within the Tcl list of points Yes {0 0}
dialog. This is reserved for future
use
size Size of the dialog in width and height Tcl list of two Yes {800 800}
integers {width height}
isModal Modality of the dialog. A 1 would Boolean (1/0) Yes 1
indicate a modal dialog
isResizable Resizability of the dialog Boolean (1/0) Yes 0

Example
Tcl> set ret [sdaUI::hybridDialog TESTDATA www.cadence.com testcadence]
Tcl> puts $ret
dialogHandle 42 hybridHandle 39
Tcl> # query the visible property of the web widget
Tcl> # getProperty takes value of hybridHandle as its first argument, which is at position 3 rd
shown above
Tcl> cps::getProperty [lindex $ret 3] visible
False
Tcl> #setVisibility takes value of dialogHandle as its first argument, which is at position 1 st
Tcl> sdaUI::setVisibility [lindex $ret 1] 1
Tcl> cps::getProperty [lindex $ret 3] visible
true

Displaying a web page within a docked panel

Command
sdaUI::openHybridDock <title> <url> <dockName> ?isFloating? ?pos? ?size? ?dockArea?

Parameters
Name Description Data type Optional Default Value
title Title of the docked panel. String No None
url URL of the content to host String (url No None
style)

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 6
 Allegro System Capture AppNote- Custom GUIs

dockName Name of the docked panel String No None

isFloating Docked panel is floating or not Boolean Yes False
Pos Position of the docked panel. This parameter is Tcl list of Yes {0 0}
applicable only when docked is in floating points
state.
size Size of the docked panel, width and height. Tcl list of Yes {800 800}
This parameter is applicable only when docked two integers
panel is in floating state. {width
height}
dockArea Area of docked panel, valid values are String Yes ::cps::DA_LEFT
::cps::DA_LEFT,::cps::DA_RIGHT,::cps::DA_BOTTOM

Examples
sdaUI::openHybridDock CADENCE www.cadence.com testtab02

sdaUI::openHybridDock CADENCE www.cadence.com testtab02 true {100 100} {400 400}

Displaying a web page within a docked panel with a close handler

Command
sdaUI::openHybridDockWithCloseHandler <title> <url> <dockName> <close_handler> ?isFloating?
?pos? ?size? ?dockArea?

Parameter
Name Description Data Optional Default value
type
title Title of the docked panel String No None
url Url of the content to host String No None
(url
style)
dockname Name of the docked panel String No None
close_handler Name of tcl procedure to receive a callback String No None
whenever a docked panel is closed by user or
visibility of docked panel changes to hidden.
Syntax of close handler should be
Proc onclosedock {handle} {
}

isfloating Docked panel is floating or not. Boolean Yes False

pos Position of the docked panel. Note: position is Tcl list Yes {0 0}
only applicable when docked panel is in floating of
state. points
size Size of the docked panel in width and height. Tcl list Yes {800 800}
Note: position is only applicable when docked of two
panel is in floating state. integers
{width
height}
dockarea Area of docked panel, valid values are String Yes ::cps::DA_LEFT
::cps::DA_LEFT,::cps::DA_RIGHT,::cps::DA_BOTTOM

Example
proc onCloseDock { handle} {
# whenever the docked panel is closed by user this proc will be called.
}
TCL> sdaUI::openHybridDockWithCloseHandler CADENCE www.cadence.com testtab02 onCloseDock

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 7
 Allegro System Capture AppNote- Custom GUIs

Setting the tcl procedure on dialog/docked panel close

User can set a tcl procedure to receive a callback whenever a dialog/docked panel is
closed by user or visibility of dialog/docked panel changes to hidden.

Command
sdaUI::setCloseTCLHandler <handle> <Tcl_procedure>

Syntax of a tcl procedure should be:

proc tcl_procedure {handle} {
# whenever the dialog/docked panel is closed by user this proc will be called.
}

Parameters
Name Description Data type Optional Default
value
handle Handle of dialog/docked panel String No None
tcl_procedure Name of tcl procedure String (Name of tcl No None
procedure)

Examples
Tcl> set ret [sdaUI::hybridDialog TESTDATA www.cadence.com testcadence]
Tcl> puts $ret
dialogHandle 42 hybridHandle 39
Tcl> set dlgHandle [dict get $ret dialogHandle]
# set the Tcl procedure to receive a callback
Tcl> sdaUI::setCloseTCLHandler $dlgHandle “Tcl_procedure”

Tcl> set dockHandle [sdaUI::openHybridDock TESTDATA www.cadence.com testcadence]

Tcl> puts $dockHandle
42
# set the Tcl procedure to receive a callback
Tcl> sdaUI::setCloseTCLHandler $dockHandle “Tcl_procedure”

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 8
 Allegro System Capture AppNote- Custom GUIs

The Hybrid App

This example demonstrates how to create an HTML5 user interface and exchange data
with
Allegro System Capture. A pie chart showing the relative distribution of the count of
objects on the active schematic page is displayed in a docking pane in Allegro System
Capture. The sample is available at the following location:
<CADENCE SPB INSTALL>/share/cdssetup/canvas/samples/customGUI
The driver script is customGUILoader.Tcl.
Creating the HTML Page
The HTML page (customGUI/customGUI.html) hosts an HTML5 canvas element for
drawing the pie chart, a button to call a Tcl function which fetches the page summary
and displays the information in the pie chart. The pie drawing chart routines are
available in the customGUI/pieDraw.js JavaScript file. The logging utility functions are
available in the customGUI/customLogger.js file.
<!DOCTYPE html>
<!--
Filename: customGUI.html
This file should be placed at one of the following locations:
1. For site-wide availability place it at -
$CDS_SITE/cdssetup/canvas/resources/syscap/customGUI/
2. For user-only availability place it at -
$HOME/cdssetup/canvas/resources/syscap/customGUI/
Description: HTML Page for Custom UI
-->
<html>
<style>
body {
font-family: "Arial", Arial, sans-serif;
}

#container {
margin: 0 auto;
padding: 5px;
text-align: center;
width: 250px;
}

.debug {
font-family: "Consolas", Consolas, monospace;
font-size: 0.7em
}
</style>

<!-- Logging functions for debugging, emulated browser JavaScript console -->
<script type="text/javascript" charset="utf-8" src="customLogger.js"></script>

<!-- Pie Chart drawing functions -->

<script type="text/javascript" charset="utf-8" src="pieDraw.js"></script>

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 9
 Allegro System Capture AppNote- Custom GUIs

<script>
// colors for the pie sweeps
var colors = [ "#FFDAB9", "#E6E6FA", "#E0FFFF", "#DAFDDA" ];

// variable to check whether HTML UI is initialized

var initialized = false;
var loadCount = 0;

// Generic mechanism to call Tcl procedure from JavaScript

// params: procName - name of the Tcl procedure to call
// args - arguments to the Tcl procedure
function callTcl(procName, args, f) {
if (isHosted()) {
if (f != null || f != undefined) {
window.cdsCPHBridge.orPrmConnector("executeTclNoDisplay", procName
+ " " + args, f);
}
else {
window.cdsCPHBridge.orPrmConnector("executeTclNoDisplay", procName
+ " " + args, f);
}
}
return null;
}

// function to check whether the HTML UI is hosted

// within Allegro SDA
function isHosted() {
return window.hasOwnProperty("cdsCPHBridge");
}

// calls the Tcl procedure getCurrentPageData

// and returns the result to its caller
function getPageData() {
var tclFunction = "getCurrentPageData";
var tclParams = "";
return callTcl(tclFunction, tclParams);
}

// draws a Pie Chart

// params: id - div id
// dataSet - data set
// colors - pie sweep colors
function loadPie(id, dataSet, colors) {
canvas = document.getElementById(id);
var context = canvas.getContext("2d");

if (!initialized) {
context.translate(0.5, 0.5);
initialized = true;
}

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 10
 Allegro System Capture AppNote- Custom GUIs

var sum = dataSet.counts.reduce(function(acc, val) {

return acc + val;
}, 0);

for (var i = 0; i < dataSet.labels.length; i++) {

drawSweep(canvas, context, i, colors, dataSet.labels,
dataSet.counts, sum);
}
}

// clears a Pie Chart

// params: id - div id
function clearPie(id) {
canvas = document.getElementById(id);
if (canvas != null)
{
var context = canvas.getContext("2d");
if (context != null)
{
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
}

// dumps a string
function debugStr(str) {
console.log(str);
}

// checks if a JavaScript object is empty

function isEmpty(obj) {
return (Object.keys(obj).length === 0 && obj.constructor === Object);
}

// draws a pie chart based on the active page

// summary
function showPageSummary() {
var pageDataStr = null;
clearPie(‘pieChart’);

if (isHosted()) {
getPageData(function (pageDataStr){
if (pageDataStr != null) {
var pageData = JSON.parse(pageDataStr);
if (!isEmpty(pageData)) {
loadPie('pieChart', pageData, colors);
}
}
if (!isHosted()) {
debugStr(++loadCount);
}
});
} else {
pageDataStr = '{ "labels": \

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 11
 Allegro System Capture AppNote- Custom GUIs

[ "Components" , "Nets" , "Wires/Buses" ] , \

"counts": [ 354 , 306 , 305 ] }';
}
}

</script>
<body onload="showPageSummary();">
<div id="container">
<canvas id="pieChart" width="200" height="200"></canvas>
<button id="summary" type="button" onclick='showPageSummary()'>Refresh</button>
<div id="debugArea" class="debug"></div>
</div>
</body>
</html>

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 12
 Allegro System Capture AppNote- Custom GUIs

Calling Tcl Procedures from JavaScript

Allegro System Capture supports calling Tcl procedures from JavaScript functions. In
the following code snippet, the callTcl JavaScript function checks whether the HTML
page is loaded within the Allegro System Capture application and calls the Tcl
procedure with the arguments passed to it. In the example illustrated here, the Tcl
procedure getCurrentPageData is called from JavaScript.
// Generic mechanism to call Tcl procedure from JavaScript
// params: procName - name of the Tcl procedure to call
// args - arguments to the Tcl procedure
function callTcl(procName, args, f) {
if (isHosted()) {
if (f != null || f != undefined) {
window.cdsCPHBridge.orPrmConnector("executeTclNoDisplay", procName
+ " " + args, f);
}
else {
window.cdsCPHBridge.orPrmConnector("executeTclNoDisplay", procName
+ " " + args, f);
}
}
return null;
}

...
...
// calls the Tcl procedure getCurrentPageData
// and returns the result to its caller
function getPageData() {
var tclFunction = "getCurrentPageData";
var tclParams = "";
return callTcl(tclFunction, tclParams);
}

Tcl Script for Initializing the HTML Page

The following code initializes the HTML page:
# ----------------------------------------------------------------------------
# Filename: customGUI.Tcl
# This file should be placed at one of the following locations:
# 1. For site-wide availability place it at -
# $CDS_SITE/cdssetup/canvas/resources/syscap/customGUI/
# 2. For user-only availability place it at -
# $HOME/cdssetup/canvas/resources/syscap/customGUI/
# ----------------------------------------------------------------------------
# Description: Custom GUI Tcl Script
# ----------------------------------------------------------------------------
namespace eval customGUI {
set nDirPath [file normalize [file dirname [info script]]]
set nHybridName PAGE_SUMMARY_GUI
set nHTMLFile customGUI.html

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 13
 Allegro System Capture AppNote- Custom GUIs

set nGUITitle "PAGE SUMMARY"

array set nLabelMap {

num_insts "Components"
num_routes "Wires/Buses"
num_nets "Nets"
num_shapes "Shapes"
}

set nGUILoaded {}
set nHandle {}
}

# Converts internal count data to

# human-readable label strings
proc getLabel {name} {
set ret {}
set pair [array get ::customGUI::nLabelMap $name]
if { $pair != {} } {
set ret [lindex $pair 1]
}
return $ret
}

# Converts a Tcl list to a

# JSON string representing a
# JavaScript array
proc list2JSONArrayString {lst {type {}}} {
set ret {[}
if { $lst != {} } {

set listLen [llength $lst]

set i 1
foreach item $lst {
if { $type == "str" } {
set ret [concat $ret \"$item\"]
} else {
set ret [concat $ret $item]
}
if { $i < $listLen } {
set ret [concat $ret ","]
}
incr i
}
}
set ret [concat $ret {]}]
return $ret
}

# Fetches active page content information and

# formats it as a JSON string
proc getCurrentPageData {} {
set data [sch::dbGetPageSummary [sch::dbGetActivePage]]

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 14
 Allegro System Capture AppNote- Custom GUIs

set labels {[}

set counts {[}

set labelsLst {}
set countsLst {}
foreach item $data {
set name [lindex $item 0]
set count [lindex $item 1]
set label [getLabel $name]

if {$name == "num_nets" && $count > 0} {

set count [expr $count - 1]
}

if { $count > 0 } {
if { $label != {} } {
lappend labelsLst $label
lappend countsLst $count
}
}
}

set ret "{"

set ret [concat $ret "\"labels\": "]
set ret [concat $ret [list2JSONArrayString $labelsLst str]]
set ret [concat $ret ","]
set ret [concat $ret "\"counts\": "]
set ret [concat $ret [list2JSONArrayString $countsLst]]
set ret [concat $ret "}"]

return $ret
}

# Calls a JavaScript function

# with arguments passed
proc customGUIExecuteJS {functionName {params {}} } {
set strCall {}
if { $params == {} } {
set strCall [concat $functionName {()}]
} else {
set arguments "("
set i 1
set paramLen [llength $params]
foreach param $params {
set arguments [concat $arguments $param]
if { $i < $paramLen } {
set arguments [concat $arguments ","]
}
}
set arguments [concat $arguments ")"]
set strCall [concat $function $arguments]
}
cps::execute [cps::findComponentByName $::customGUI::nHybridName] "$strCall"
}

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 15
 Allegro System Capture AppNote- Custom GUIs

# creates a left docking widget with an HTML container and

# loads the URI into it
proc customGUILoad {} {
if { $::customGUI::nGUILoaded == {} } {
set protoPart "file:///"
set filePart [file join $::customGUI::nDirPath $::customGUI::nHTMLFile]
set uri $protoPart$filePart

puts "Loading $uri"

set hybridHandle [sdaUI::openHybridDock $::customGUI::nGUITitle \

$uri \
$::customGUI::nHybridName]

set ::customGUI::nGUILoaded 1
set ::customGUI::nHandle $hybridHandle
}
cps::setDockedWidgetVisibility $::customGUI::nHybridName
}
#end of file

Tcl Driver Script

A Tcl driver script adds the custom GUI functionality to the menu. The following
example demonstrates the ability to call a JavaScript function from a Tcl script.
# ----------------------------------------------------------------------------
# Filename: customGUILoader.Tcl
# This file should be placed at one of the following locations:
# 1. For site-wide availability place it at -
# $CDS_SITE/cdssetup/canvas/resources/syscap/
# 2. For user-only availability place it at -
# $HOME/cdssetup/canvas/resources/syscap/
# ----------------------------------------------------------------------------
# Description: Custom GUI Tcl Driver
# ----------------------------------------------------------------------------
package require cpsystem
namespace eval customGUILoader {
set nDirName customGUI
set nThisDir [file dirname [info script]]
set nScriptFile customGUI.Tcl
set nJavaScriptRefreshFunction "showPageSummary"
}

proc sdaCustomGUIOnPageChange {args} {

customGUIExecuteJS $::customGUILoader::nJavaScriptRefreshFunction
}

#############################################################################
# Procedure Name : sdaCustomGUIEntry #
# Description : Creates menus for the Loading Custom GUIs #

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 16
 Allegro System Capture AppNote- Custom GUIs

#############################################################################
proc sdaCustomGUIEntry {} {
set menuName "Custom Utils"
set context "sch"
addMenuToMenuBar $menuName {} 1 Help $context
addActionToMenu $menuName \
"Page Summary" {customGUILoad} {} "Display page summary" 0 “sch”

uplevel 1 {
source [file join $::customGUILoader::nThisDir \
$::customGUILoader::nDirName \
$::customGUILoader::nScriptFile]
}
# register callbacks to automatically refresh the content
# of the custom GUI when user opens a page or switches to a page
cps::registerCommand cps::openItem {} sdaCustomGUIOnPageChange
cps::registerCommand cps::selectItem {} sdaCustomGUIOnPageChange
}
# Call loader function on script load
sdaCustomGUIEntry

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 17
 Allegro System Capture AppNote- Custom GUIs

Drawing a Pie Chart with JavaScript

The following example illustrates how to draw a pie chart using JavaScript functions:
// --------------------------------------------------------------
// Filename: pieDraw.js
// This file should be placed at one of the following locations:
// 1. For site-wide availability place it at -
// $CDS_SITE/cdssetup/canvas/resources/syscap/customGUI/
// 2. For user-only availability place it at -
// $HOME/cdssetup/canvas/resources/syscap/customGUI/
// --------------------------------------------------------------
// Description: Pie chart drawing functions on HTML5 Canvas
// --------------------------------------------------------------

// Helper function to sum up the values in an array (a)

// till a given index (i)
function addTill(a, i) {
var sum = 0;
for (var j = 0; j < i; j++) {
sum += a[j];
}
return sum;
}

// Helper function to convert

// degrees to radians
function deg2Rads(degrees) {
return (degrees * Math.PI) / 180;
}

// Draws the arc sweep

function drawSweep(canvas, context, i, colors, labels, data, totalValue) {
context.save();
var centerX = Math.floor(canvas.width / 2);
var centerY = Math.floor(canvas.height / 2);
radius = Math.floor(canvas.width / 2);

var cumulativeValue = addTill(data, i);

var startAngleDegrees = cumulativeValue / totalValue * 360;
var arcAngleDegres = data[i] / totalValue * 360;
var startingAngle = deg2Rads(startAngleDegrees);
var arcSize = deg2Rads(arcAngleDegres);
var endingAngle = startingAngle + arcSize;

context.beginPath();
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
context.closePath();

context.fillStyle = colors[i % colors.length];

context.fill();

context.restore();

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 18
 Allegro System Capture AppNote- Custom GUIs

labelSweep(canvas, context, i, labels, data, cumulativeValue, totalValue);

}

// Labels the arc sweep

function labelSweep(canvas, context, i, labels, data, cumulativeValue,
totalValue) {
context.save();
var x = Math.floor(canvas.width / 2);
var y = Math.floor(canvas.height / 2);

var startAngleDegrees = cumulativeValue / totalValue * 360;

if (!isHosted) {
console.log("Angle for " + labels[i] + " is: " + startAngleDegrees);
}

var angle = deg2Rads(startAngleDegrees);

context.translate(x + 0.5, y + 0.5);

context.rotate(angle);
var dx = Math.floor(canvas.width * 0.5) - 10;
var dy = Math.floor(canvas.height * 0.05);

context.textAlign = "right";
var fontSize = Math.floor(canvas.height / 25);
context.font = fontSize + "pt";
var text = labels[i] + "(" + data[i] + ")";

if (startAngleDegrees > 90 && startAngleDegrees < 270) {

// context.textAlign = "right";
var width = context.measureText(text).width;
context.translate(dx, dy);
context.rotate(Math.PI);
}

context.fillText(text, dx, dy);

context.restore();
}
// end of file

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 19
 Allegro System Capture AppNote- Custom GUIs

Output
When this functionality is integrated with Allegro System Capture, you can click the
Custom Util -> Page Summary menu to view the widget displayed on the docking pane
on the left.

Learn more at Cadence Learning and Support Portal - https://support.cadence.com

© 2022 Cadence Design Systems, Inc. All rights reserved worldwide. Page 20