I am generating QR code using google chart api, How can I insert image inside Image.
What I get QR code as for now,
enter image description here
What I want QR code,
enter image description here
can someone help for me to solve this problem.
Warning: This API is deprecated. Please use the actively maintained Google Charts API instead. See our deprecation policy for details
You pass your QR payload to the API endpoint and get an image in return:
https://quickchart.io/qr?text=Hello world
or
Another alternative is Image-Charts
(highly reliable, deployed in data-centers around the world, sub-second response time)
https://documentation.image-charts.com/qr-codes/
Unfortunately, with my understanding, Chart API doesn't have such a function.
But you can use Image-Overlay by using CSS.
Like this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.qrcode
{
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.shell
{
position: absolute;
top: 80px;
left: 80px;
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div style="position: relative; left: 0; top: 0;">
<img class="qrcode" src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world&choe=UTF-8" alt="QR code" />
<img class="shell" src="YOUR IMAGE'S URL" />
</div>
</body>
</html>
You can see my sample page here.
Though, note that Chart's QRcode API has already been deprecated.
Related
How can I do that? I found this and this, saying that raw HTML should be supported. However, I tried this, which does not work:
.. raw:: html
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
<iframe src="https://www.youtube.com/embed/zIFMyBkYwqg" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
This is a related question for readme markdown (md) files. For markdown, raw HTML or video support seems not supported, so they embed just an image with a link to the video. If a video is not possible, then I would like to do the same, but also then, the question is how.
Here is in reStructuredText the code for embedding an image with a link to the YouTube video.
.. image:: https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/maxresdefault.jpg
:alt: IMAGE ALT TEXT HERE
:target: https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE
I'm developing a web application using websocket by taking reference from https://code.kx.com/v2/wp/websockets/.
The application resides at path:
Directory structure:
/Users/repos/chatu/
-->html
--> main.html
--> main.js
-->q
--> main.q
q)\pwd
"/Users/repos/chatu" //- and main.html(index) is at path /Users/repos/chatu/html/main.html
When the pwd is "/Users/repos/chatu" then the webpage is opening properly on browser using url - http://localhost:5001/main.html
But when the pwd is changed to any other directory such as
q)\pwd
"/Users/repos"
Then hitting same url as above throws below error :
html/main.html: not found
What I can understand from the error is that web server is expecting the html/main.html at the current working directory and it is not able to find that.
How/Where can I set absolute path for index.html that from any current working directory the web browser can find the main.html page?(Cannot find/understand any answer which solves same problem).
Code snippet -
main.js
function connect(){
if ("WebSocket" in window) {
ws = new WebSocket("ws://localhost:5001/");
output.value="connecting...";
/* ws.onopen=function(e){output.innerHTML="connected"}; */
ws.onclose=function(e){output.innerHTML="disconnected"};
ws.onerror=function(e){output.value=e.data};
/*
when a message is received,
prepend the message to the display area
along with the input command
*/
} else alert("WebSockets not supported on your browser.");
}
main.html
<!doctype html>
<html>
<head>
<title>Chatu</title>
<style>
/* define some CSS styling on page elements */
div#wrap{
width:100%;
overflow:auto;
}
textarea#txtInput {width: 97.5%; height: 60px; float:left; padding: 10px; margin-top: 10px;}
div#txtOutput{
width: 97.5%; height: 300px; font-family: "Courier New"; padding: 10px;
border: 1px solid gray; margin-top: 2px; overflow:auto;
}
</style>
</head>
<body>
<div id="wrap">
<fieldset id='heads' style="border:1; border-radius:10px">
<legend align="center" style="color:blue">Chatu</legend>
<div id="txtOutput"></div>
<textarea id="txtInput" autofocus></textarea>
</fieldset>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
main.q
.z.ws:{neg[.z.w].j.j #[.da.mf;x;{`$ "'",x}];};
I believe the way you can set an absolute path for index html as you have described in your kdb web application is assigning this path using .h.HOME.
The variable .h.HOME is a string which contains the location of the webserver root.
If you would like a more detailed explanation on .h.HOME refer to https://code.kx.com/v2/ref/doth/#hhome-webserver-root
.h.HOME is the variable you are interested in
https://code.kx.com/v2/ref/doth/#hhome-webserver-root
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
Has anybody used XTK with GWT? No matter what I do I get this error "Uncaught Error: Could not find the given container or it has an undefined size."
I have defined the container element in the base html (below), which is accesible via other means (DOM, JQuery, GWT-JSNI), but not by XTK library.
My GWT-JSNI method and container HTML are as following.
Any help or pointers to debug further?
/* GWT JSNI method */
public native void initializeWebgl() /*-{
alert('r ' + $doc.getElementById('r')); // works
var r = new $wnd.X.renderer('r'); // fails ??????? why?
alert("r is" + r);
r.init(); }*-/
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
1) This error was observed in some cases. The check which lets the renderer initialization fail is deprecated and already removed on the 'refactoring' branch. So, soon, this should work out of the box.
2) For now, the simplest workaround is to set the renderer to a fixed height (for testing):
<div id="r" style="background-color: #000000; width: 100%; height: 300px;"></div>
3) It is possible to use CSS to define a min-height on the renderer if the parent element has height 100%. Here information: http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html
On the GWT developer site there is an example showing a panel that is in the middle of a page. Is this possible to have a fixed with panel in the middle of a page using the GWT layoutpanels?
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels
There's a good old CSS trick for centering fixed-size, absolute boxes, using automatic CSS layouting (no JavaScript required):
First center the top left corner of the box by using top: 50%; left: 50%;
Of course, the box will be too far to the bottom/right now.
Then subtract half of the box's height/width by using margins. (It's fixed-size, so you can calculate "half of the height/width" with pen and paper :-)
Example:
<!doctype html>
<html>
<head>
<style type="text/css">
.box {
position: absolute;
background-color: red;
height: 300px; width: 400px; /* Using "px" here, but you */
/* can also use "em" etc. */
top: 50%; left: 50%;
margin-top: -150px; margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Apply this style to your LayoutPanel - I don't have a full code example for that, but I think it should be possible.
You can achieve the effect with simple css. For example:
<html><head>
<style>
.outer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: blue;
}
.inner {
position: absolute;
top: 25%;
right: 25%;
bottom: 25%;
left: 25%;
background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>
Once the basic effect is created in plain CSS using absolutely-positioned objects, you can recreate it with the LayoutPanels, since they're essentially a CSS constraint system.
I don't think you can make a fixed-width layer center itself automatically in a LayoutPanel. However, you can insert the layer into the DOM to get its size, and then calculate the proper offsets yourself. You can see how Google does this (not in a LayoutPanel) in the code for DialogBox.center();