Adding Mermaid support in dart - javascript

So I have been trying to integrate the Mermaid API into flutter using this library Dart JS interop for Mermaid but failed miserably . Iam not experienced in web development so bear with me :)
I just wanted to preview Mermaid code as a graph in flutter.
I don't understand how the library should be used , the documentation isn't so clear and both examples lead to either to no results or a page like this one :-
I think maybe I added the JS calling Mermaid and the html key in the wrong file, I added them here :-
This is what I had followed and understood from the ambiguous documentation : -
// adding this field is to somehow secure the nodes from bad content before rendering them
final nullSanitizer_SVGCantBeInsertedWithoutIt = NullTreeSanitizer();
/// out of the SVG file.
class NullTreeSanitizer implements NodeTreeSanitizer {
#override
void sanitizeTree(Node node) {}
}
// the Mermaid code
const testMarkdownWithMermaid = """
[Sequence Diagram](http://mermaid-js.github.io/mermaid/#/./sequenceDiagram)
------------------
```mermaid
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
""";
```
// initializing the Api's configuration
MermaidApi.initialize(Config(
securityLevel: SecurityLevel.Strict,
logLevel: LogLevel.Error,
startOnLoad: false,
arrowMarkerAbsolute: true,
flowchart: FlowChartConfig(htmlLabels: true),
sequence: SequenceDiagramConfig(),
gnatt: GnattConfig(),
));
// getting the "html" key
final htmlDiv = querySelector('#html') as DivElement;
// converting the Mermaid code to HTML and utilizing those Sanitizers
htmlDiv.setInnerHtml(
md.markdownToHtml(testMarkdownWithMermaid,
extensionSet: md.ExtensionSet.gitHubWeb),
treeSanitizer: nullSanitizer_SVGCantBeInsertedWithoutIt,
);
// finally rendering the graph
mermaidRender(htmlDiv.querySelectorAll('code.language-mermaid'));
I don't know even why it just covered the webpage or how I got those results (https://i.stack.imgur.com/qLBaD.png[tag:result])] .
I tried adding the html of the htmlDiv in an HtmlWidget as well as the Mermaid code directly as the author of the library stated that the rendering can work with an html element that has the code . I also tried adding a WebView Scaffold with the HTML script , also that failed .
I am totally frustrated that even chatgpt couldn't help , a funny tragedy :(:) .

The reason was that the library used an older link for the Mermaid API , I instead using this link instead . I also Used the flutter svg library for viewing the Mermaid graph using SVG.string(mermaidcode)

Related

D3 library in R?

I am working with the "r2d3" library in R (https://www.rstudio.com/blog/r2d3-r-interface-to-d3-visualizations/) - as I understand, this library is intended to perform javascript based data visualizations in R.
I would like to try and run the following visualization in R : https://rstudio.github.io/r2d3/articles/gallery/bubbles/
I loaded the data into R:
library(r2d3)
library(ggraph)
data(flare)
Then, I copied the entire "bubbles.js" script into a new R Markdown editor and clicked "knit to html". Then, I got the following output:
Clearly, I am doing something wrong.
Can someone please show me how to fix this?
Thanks!
Note: I tried running the following code in R Console:
r2d3(data = flare, d3_version = 4, script = "bubbles.js")
And this is the error I got:
/../as I understand, this library is intended to perform javascript
based data visualizations in R /../
It's more of an interface for existing D3 visualizations.
https://rstudio.github.io/r2d3/index.html provides fairly good overview of the process, you should go through that first.
To get that gallery sample working, you first prepare a working directory where you have:
flare.csv
bubbles.js
Once you have made sure your working dir is the same where those files are (getwed() / setwd()), running
library(r2d3)
r2d3(data = read.csv("flare.csv"), d3_version = 4, script = "bubbles.js")
in console / script / rmd should render those bubbles.
Or you could just clone the repo and have all sample files including Rmd-s - https://github.com/rstudio/r2d3/tree/main/vignettes/gallery/bubbles
RStudio provides some support for D3 scripts, so you can also go through File > New File > D3 Script and paste the bubbles.js content there or open existing bubbles.js file. Assuming you have flare.csv file in working directory, you can click on a Preview to have it rendered in Viewer pane. That's what the
// !preview r2d3 data = read.csv("flare.csv"), d3_version = 4
line in js script header is there for.

Reference error: "Workbook" is not defined

I wanna use the next java script code:
function dumpVal(file) {
if (file !=null) {
var wb = new Workbook.create(file);
var sheet = wb.getSheet("Tabelle1");
for (myrow = 1; !isCellEmpty(sheet, myrow, 0); myrow++) {
dataset.setColumnValue("A",getNumericValue(sheet,myrow,0));
dataset.storeResultRow();
}
}
return;
}
but when I am compiling it I receive the next error message: ReferenceError: "Workbook" is not defined.
Can someone to tell me what am I doing wrong?
You recieve the error with the followig line of code:
var wb = new Workbook;
At the point where you create the workbook (new Workbook) you refer to a class called "Workbook". At this point your script dont have a class called Workbook it.
Solution:
You should check your scripts if the class is included and its naming.
Maybe the class is initialized later!
For debug purposes you can try to create the class a line before:
class Workbook{ }
If you recieve an error now because Workbook needs a method called "create", you know that the class is just missing.
I assume that you want to parse excel file from your web application, the library that you are using is for developing add-ins for excel not web application :
Excel JavaScript API programming overview
This article describes how to use the Excel JavaScript API to build add-ins for Excel 2016. It introduces key concepts that are fundamental to using the APIs, such as RequestContext, JavaScript proxy objects, sync(), Excel.run(), and load(). The code examples at the end of the article show you how to apply the concepts.
source :
https://dev.office.com/docs/add-ins/excel/excel-add-ins-javascript-programming-overview
If you want to parse Excel in your web application I suggest to use this library :
https://github.com/SheetJS/js-xlsx
I did not use it so I cant garanty it, but you can look for similar librarys.

Is there a way to AutoFormat (Javascript) code in TestComplete?

So similar to ALt-Shift-F in Netbeans, is there a to do this right in the ide in TestComplete? Not sure if this is possible or if anyone can think of a workaround to autoFormat without leaving the TestComplete window.
I'm trying to get the below solution to work with http://jsbeautifier.org/ for javascript / Jscript code in TestComplete.
Thanks
Great question!
There is no built-in function for that. So, we should not expect any solution to be 100% convenient - it is just not a simple task to modify the current script editor contents (if at all possible). So, whatever you do, it will still be some kind of compromise.
In general, the task is three-fold:
Get the current unit code.
Format the code.
Put the code back to the unit.
According to my understanding, items 1 and 3 can be accomplished only by creating a TestComplete plug-in - accessing editors for project nodes is not an easy thing.
UPDATE: silly me! There is a way to access the script editor code - I've updated the below part.
What will help us avoid switching to a different app, are the Script Extensions:
We create a custom Checkpoint in the form of a Script Extension, and install it to TestComplete. As a result, we get a button on the toolbar that we can click to invoke our code.
In the design time action, we call some code that reads the editor contents, then uses external code formatting functionality, and replaces the editor contents with the formatted code.
It would extremely interesting to see the implementations other TestComplete users can suggest! As a start, I am posting a solution that includes using an external web site to format VBScript code (http://www.vbindent.com/). I know that the starter of the post is probably using JScript, but I have not found a JScript formatter yet.
My solution is a simple Script Extension. I can't post a file here, so I will post the code of the two Script Extension files:
Description file:
<!-- Description.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<ScriptExtensionGroup>
<Category Name="Checkpoints">
<ScriptExtension Name="VBScript Code Indent" Author="SmartBear Software" Version="0.1" HomePage="smartbear.com">
<Script Name="VBIndent.js">
<DesignTimeAction Name="Indent Current VBScript Unit" Routine="DesignTimeExecute"/>
</Script>
<Description>
Indents VBScript code in the currently active unit.
</Description>
</ScriptExtension>
</Category>
</ScriptExtensionGroup>
Code file:
// VBIndent.js
function DesignTimeExecute()
{
if (CodeEditor.IsEditorActive)
{
var newCode = IndentVBSCode_Through_VBIndent(CodeEditor.Text);
if (null == newCode)
return;
CodeEditor.Text = newCode;
}
}
function IndentVBSCode_Through_VBIndent(codeToIndent)
{
var URL_VBIndent = "http://www.vbindent.com/?indent";
var httpObj = Sys.OleObject("MSXML2.XMLHTTP");
httpObj.open("POST", URL_VBIndent, false);
httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpObj.send("thecode=" + escape(codeToIndent));
var responseText = httpObj.responseText;
// Extract the indented code from the response
var rx = /<textarea name=\"thecode\".*?>((.*\n)*?)<\/textarea>/;
matches = rx.exec(responseText);
if (null == matches)
{
return null;
}
codeIndented = matches[1];
return codeIndented;
}
After you create these files, and put them to something like "\Bin\Extensions\ScriptExtensions\VBIndent", and click "File | Install Script Extensions | Reload", you will see a new "Indent Current VBScript Unit" item in the custom checkpoints drop-down button on the Tools toolbar. Clicking the element will format the VBScript code in the currently active editor.
So, this is to give a clear idea of what a solution can look like. Better suggestions are welcome! Share your thoughts!
FYI
I've done. Based on your posts.
JSFormat.tcx
https://drive.google.com/uc?export=download&id=0B1x_73bHRc2Jcm8wbTJ2dUpZQTQ
To install the extension copy attached file JSFormat.tcx to C:\Program Files (x86)\SmartBear\TestComplete 10\Bin\Extensions\ScriptExtensions
To use view next image:
https://drive.google.com/uc?export=download&id=0B1x_73bHRc2Jc3RuLXFpTnlCSnc
Regards

Can Indy run Javascript?

There is a software product called AnyChart which is great for embedding Flashed based charts in web pages. AnyCharts can also export to PNG file format. Here is an example:
<script type="text/javascript" language="javascript">
//<![CDATA[
var chart = new AnyChart('http://www.mysite.com/swf/AnyChart.swf');
chart.width = 600;
chart.height = 300;
chart.setXMLFile('http://www.mysite.com/anychart.xml');
chart.addEventListener("draw", function() { saveChartAsImage(chart); });
chart.write("content-box");
//]]>
</script>
My ultimate goal is to make a automated service to export the AnyChart charts to PNG format. So I made a service with Indy which calls pages containing the AnyChart javascript. But the problem seems to be that Indy cannot execute the javascript.
Is there a way to enable Indy to execute javascript?
No, Indy does not execute Javascript. You may have also noticed that it doesn't parse or display HTML, and it doesn't run Flash, either. Indy does network protocols.
You could import the Microsoft Script Control ActiveX object and have that run your Javascript. If you need details on that, post a new question.
You don't have to use Indy for this. If you want you can use TWebBrowser.
IHTMLWindow2 interface has execScript function. So may be you can :
var
Doc : IHTMLDocument2;
Win : IHTMLWindow2;
aBrowser : TWebBrowser;
//...
begin
//...
Doc := aBrowser.Document as IHTMLDocument2;
Win := Doc.parentWindow;
Win.execScript('alert(SomeMessage);', 'JavaScript');
end;
Did you try vcl FOR THE web (aka Intraweb atozed) ?
There is a teechart version wich is quite useful, you can also execute "external" javascript code within any of the TiwForms of your web app (the exact same code you are using now).
Post a new question if you need to and I'll be glad to help.

Tag images in the image itself? HOW-TO

How to tag images in the image itself in a web page?
I know Taggify, but... is there other options?
Orkut also does it to tag people faces... How is it done?
Anyone knows any public framework that is able to do it?
See a sample bellow from Taggify:
I know this isn't javascript but C# 3.0 has an API for doing this. The System.Windows.Media.Imaging namespace has a class called BitmapMetadata which can be used to read and write image metadata (which is stored in the image itself). Here is a method for retrieving the metadata for an image given a file path:
public static BitmapMetadata GetMetaData(string path)
{
using (Stream s = new System.IO.FileStream(path, FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite))
{
var decoder = BitmapDecoder.Create(s, BitmapCreateOptions.None, BitmapCacheOption.OnDemand);
var frame = decoder.Frames.FirstOrDefault();
if (frame != null)
{
return frame.Metadata as BitmapMetadata;
}
return null;
}
}
The BitmapMetadata class has a property for tags as well as other common image metadata. To save metadata back to the image, you can use the InPlaceBitmapMetadataWriter Class.
There's a map tag in HTML that could be used in conjunction with Javascript to 'tag' different parts of an image.
You can see the details here.
I will re-activate this question and help a bit. Currently the only thing i have found about is http://www.sanisoft.com/downloads/imgnotes-0.2/example.html . A jQuery tagging implementation. If anyone knows about another way please tell us.
;)
You can check out Image.InfoCards (IIC) at http://www.imageinfocards.com . With the IIC meta-data utilities you can add meta-data in very user-friendly groups called "cards".
The supplied utilities (including a Java applet) allow you to tag GIF's, JPEG's and PNG's without changing them visually.
IIC is presently proprietary but there are plans to make it an open protocol in Q1 2009.
The difference between IIC and others like IPTC/DIG35/DublinCore/etc is that it is much more consumer-centric and doesn't require a CS degree to understand and use it...

Categories

Resources