There is something compelling in the integration of mermaid syntax in markdown text, since it is quite "markdownish". I got the idea that I would like to type my own mermaid diagram in a rocket.chat window and see it interpreted on the fly.
I have already had the opportunity to work on mermaid integrations, and I hope this one should not be too difficult.
mermaid is basically a javascript library that works on HTML snippets like:
<div class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
</div>
So it basically requires only to generate that piece of code + include the mermaid javascript library in the pane being visualized, to get a properly displayed diagram, which would look like:
The question I am asking here, is where one could start from, to configure a rocket.chat instance (and/or exploit its API) so that one could convince it to interpret a user-type sequence in a message e.g. :
```mermaid
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```
as a proper diagram?
There isn’t any way to do this well, as rocket.chat is not customizable (at least as far as I can tell, I don’t use it). However, I think that if you injected external js code (along with mermaid-js) into rocket.chat, you could make rocket.chat send the graph as an image. Of course, if you do not want to paste the script in the console every time you need it, you would need to use something like Tampermonkey or a chrome extension.
That being said, you would also need to dynamically add mermaid as a script, so something like:
var url = ‘https://unpkg.com/browse/mermaid#8.8.0/‘;
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
Would suffice. Then, you would need to add a click event to the “send” button and read the value of the message bar. Use a bit of logic to determine whether the bar contains a ``` (and maybe add that you need to put mermaid after it like ```mermaid). If the chat bar contains mermaid code, then add a hidden mermaid graph and wrap the graph in a tag, then trigger an event (like a button click) that downloads the graph. I am not sure that you know any Node.JS, but if you wanted to have the image automatically send, you could make a POST request containing the image to a Node.js server that you host locally (or by Heroku). The server would process that image and in turn, return the url at which it is hosted. Then, you would use the URL you got and replace the value of the message bar with a markdown that displays the image. I would recommend making a second button appear over the first chat button, and if you want to send a mermaid graph, you can click that button.
In conclusion, what you are seeking to do is quite do-able, but it will take time (and a lot of patience). I would recommend researching Rocket.Chat and practice injecting scripts that automatically send messages and things like that. Since I am on my iPad (my computer’s screen is broken) I cannot give you code examples, but I hope you can make do with what I wrote.
Related
I am working on automating a process within my business, part of which is sending an email through SalesForce. We don't have access to the SF API and the email has to be sent through salesforce in order to keep the communication searchable for the coworkers.
I need to use a template which can be selected in SalesForce, however this function does not work in IE (which our RPA solution uses) so I need to build this email from scratch.
I see two options for this:
Use the HTML to recreate the format with the right variables. This entails inserting/injecting/manipulating HTML.
Copy the format into memory/the clipboard, edit it programatically and paste it into the SF interface
This question will be about option 1. I will post an additional question with regards to the second option separately and edit this question to include that link. EDIT: Here is the link to the other question!
Now on to the question:
We use the Blue Prism RPA software suite. It has a possibility to insert javascript fragments into a website and subsequently invoke them. I was hoping that I could create a javascript fragment that recreates the template, insert it and then invoke it. I have been working on this for the past week and have hardly gotten any further.
I now am able to add basic text into the required field, but have found that to be able to use the template structure I need to use a different, HTML based, field. This field I find lives inside an iframe.
I have had zero experience with javascript prior to this week (luckily it seems similar to c# in which I do have experience) and now this iframe has me stumped. Apparently when you use Selenium or similar you can switch the driver to the new iframe but I don't have that option, it needs to be done through surface automation. Within javascript as well as the console I can not get it to target the separate document within the iframe. Apparently the iframe contents are not incorporated in that way in the bigger webpage.
So my question is this: How can I "switch focus" to the iframe using javascript? How can I then edit the iframe contents through javascript? Any help, tips etc. would be highly appreciated!
If you go to developer tools in the browser (F12 or right-click inspect) you can use the inpsect tool to get the path you are looking for. an iframe is just another window inside the window and once you have the 'base path' you can then extend further into the window from the iframe base path.
You can access frames one of two ways I know of;
document.getElementById('the frame you are looking for goes here').contentWindow.targetFunction();
and/or
window.frames[0].otherfunctions
where 0 is the Nth order of frame on the window in case there are others.
once you find that path you can interact with sub-elements on that iframe by getting the path to it from within the iframe.
some things to watch out for. frames not loading yet so make sure the frame you want is loaded and no other frame is moving it around the screen at run time. Also make sure the child frame is in the same domain, I think calling javascript has issues when going cross-domain i.e. it doesn't work (stand to be corrected there though maybe it depends on group settings)
Supply some code or the layout of the page and could give you a code example but top of my head the format will look like this
var doc = window.frames[0]
var thing = getElementById(doc.getElementByPath('maybePath')
'perform some set operations like set innerhtml to thing you desire
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Context:
Basically I'm attaching a little HTML help doc to go with my program (not meant to be on a server, viewed locally). HTML just because I'm most comfortable in making docs in it but I also want it to have some interactivity/dynamic content which I can't do in a PDF or whatever.
I'm dynamically replacing the content when you click on a link instead of making every page need it's own HTML page, which is just something I'm used to doing so I can change the menu and banner and whatever else on a single 'main' html file without having to adjust every single other html file for one tiny change in the shared stuff.
Current Method:
Right now it's all done through javascript and jQuery. When a user clicks a link, I use jQuery's load() function to load the appropriate content (an html file) and replace the content div with what's in the loaded html file. Currently just using relative links. E.g. the core function is something like below:
$("#ContentBox").load("content/faq.html");
This actually worked a few weeks ago when I first wrote it. It's not like I built the whole thing and didn't test its core concept until just now. But now it seems all the browsers are blocking it. Chrome says:
XMLHttpRequest cannot load file:///C:/[....]/content/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. `
Question:
So I understand why it's happening as it's a potential security risk to allow that, I just want to figure a good way around it that still does what I want (if it's possible). I mean I could just preload all the content as huge string variables in the javascript file or as hidden divs that get turned on and off, but I was hoping for something a little more elegant.
And I can't expect all users of my program to setup a local web server just to view to help doc.
I've considered the File and FileReader classes but they require a user input for a lot of functions. There's also iFrames but that introduces all sorts of weirdness that needs to be accounted for and I hate iFrames.
If this is all local content then you should not be loading it via ajax. One option you have at your disposal is to set up your help files as local Javascript templates. You can then refer to them using a template library like mustache or underscore and link to them in your application like so:
<script type="text/template" src="local/helpfile.js" />
If you don't want to use a templating library then you can set up helpfile.js as JSON data, but you'll need to escape quote characters first.
If your help docs are to be viewed on a Windows machine only, you should look into using HTML Applications to get rid of the cross-origin issues. Or you can work around it by combining all of the source code files in hidden textareas. I've done it lol
To anyone still interested this is the solution I settled on as of now. At the end of the body are all the divs with the different page content styled like so:
<div id='PageName' class='content-div'>
<!-- content goes here -->
</div>
<div id='AnotherPage' class='content-div'>
<!-- content goes here -->
</div>
The id is important as that becomes the name of the page and the class type, which you can name whatever, I used to hide them with visibility:hidden; as well as gave it absolute positioning at 0,0 - just in case - so that they don't interact with other elements and screw up the layout.
On the page loading, along with a bunch of other functions, I store the elements into a javascript associative object by page name.
var content = {};
function onLoadThisGetsCalledSomewhere() {
// loop through all of those divs
$(".div-content").each(
function() {
// using $(this) to grab the div in the scope of the function here
var element = $(this).element;
var name = $(this).attr('id');
// remove it from the html (now it exists only in the content object)
element.detach();
// remove that style class that makes it invisible
element.removeClass('content-div');
// put it into memory
content[name] = element;
}
);
}
So when a link to another page is clicked, the onclick does something like switchPage(pageName) let's say.
function switchPage(requestedPage) :
// somewhat simplified, real version has case and null checks that take you to 404 page
var contentElement = content[requestedPage];
// replace content in some container div where you want content to go
$("#TheContentContainer").empty().append( contentElement );
// have to adjust size (width possibly too but I had a fixed width)
$("#TheContentContainer").height( contentElement.height() );
}
I'm not at the same computer so I'm writing all this up anew, not copy/pasting so there may be some bugs/typos (Caveat emptor - I'll fix it tomorrow). The version I used is somewhat more complicated as well since I have subpages as well as dynamically handled menu bar changes. Also features so that you can open the "links" correctly in new windows/tabs if such an action is made. But that's not important here now.
It's not too different I suppose with hidden divs (the benefit here is the detach() function to remove it from the html) or just storing long strings of html code in java vars (much more readable than that though), but I think it's advantage is is much cleaner (IMHO) and so far I like it. The one downside is with lots of pages you get one huge HTML doc that can be a pain to go through to edit one specific page but any decent editor should have a bookmark feature to make it a little easier to get to the line you're looking for. Also cause of that a bad idea if not local, but then again if it's online just use the jQuery load() function.
What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution
Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.
I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.
You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.
load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});
My webapp uses both Rails and JS and I would like users to be able to embed the images they upload to any blog/site.
What do I need to know, from a development point-of-view to allow me to create the functionality that generates an 'embed' link. It can be either a link like YouTube does, or a JS snippet or anything.
Just want to get a high-level overview of what I need to be able to do and how to proceed.
Thanks.
I would try using iframe. I created a widget which used javascript and I put it all into a single html file hosted on my website. Then I gave away an iframe snippet like this for example...
<iframe src="http://mywesbite.com/myWidget.html"></iframe>
The user can simply place the iframe snippet into their website and that's it!
I'm a little bit late to the party here, but I just wanted to add to Jacob's answer.
You can easily allow the user to customize the embedded content (perhaps choose light on dark vs. dark on light text to more closely match the page's environment/design) by using query params within the iframe src:
<iframe src="http://___.com/widget?theme=light&size=large"></iframe>
of course you'd probably want to build a UI to allow the user to make these distinct changes... you can't expect average user's to do that by hand:)
Vimeo's UI for customizing embedded videos is pretty nice if you want a best case scenario.
I`m a JavaScript/programming newbie trying to figure out the new bookmarklet that's been released to help overcome the new NY Times paywall, available at this blog http://euri.ca/2011/03/21/get-around-new-york-times-20-article-limit/
It`s only the following 3 lines of JavaScript....
//Prototype is already installed on NYTimes pages, so I'll use that:
$('overlay').hide();
$('gatewayCreative').hide();
$(document.body).setStyle( { overflow:'scroll' } );
so I thought it would be a not overly complex way to learn about practical uses of JavaScript
When I click on the source code for the actual bookmarklet, it revealed this
NYTClean
The three lines of JavaScript above are located at 'http://toys.euri.ca/nyt.js'
My questions are
a) when he says that Prototype is already installed on NYTimes page, is he referring to the Prototype library, so his code is just altering what they did with the library?
b) in the source code for the bookmarklet, where he does document.getElementsByTagName('head')[0].appendChild(s);})();" does the document refer to the NY Times page that the reader will be on? and 'head' refer to an Element in the NYTimes home page, to which he is appending the child s?
c) is the source code for the bookmarklet wrapped in the link so that appendChild(s) only happens when you click on the link/bookmarklet. Is a bookmark essentially a link which runs code?
d) do you know of a resource that explains how to make the actual bookmarklet which can be dragged from a webpage to the bookmark bar? That drag-to-the-bookmark bar feature is obviously separate from the code it contains, so do you know where I can learn it if I wanted to make my own bookmark to experiment with JavaScript.
a) Yes, he's referring to the Prototype javascript library.
b&c) The way bookmarklets work is by running javascript in the context of a given website by using the "javascript:" protocol. You can run anything you want this way (try typing "javascript:alert('the title is: ' + document.title);" in your address bar and hitting enter. You should get an alert showing you the title of the page you're on. You might consider reading up a bit on how they work on wikipedia.
d) The drag-bookmarklet-to-bar functionality that bookmarklets depend on is actually built in to your web browser. To make an installable bookmarklet that will work on any modern browser, all you have to do is have:
Drag to bookmark bar to install!