I am trying to figure out what the best approach to store images and texts position in the database or XML file (simple and easy to maintain as possible)?
For example, in the canvas user can choose a image file and the position on the canvas.
If I use XML file there will be some defined tags name, something like this:
<template name="Template Name">
<canvas background="background.jpg">
<ratings>
<area x="710" y="150" width="430" height="500" margin="20" image="panel.png" >
<columns>1</columns>
<rows>8</rows>
</area>
<text font="ScoutCond Bold" size="22" case="upper" style="bold" color="#777777" />
</ratings>
</canvas>
</template>
<area> represents the location and size of the area where ratings are displayed.
<columns> and should be easy to understand!
Related
So I was wondering how I save an image file, but when I tried to save the image, only the original file was saved and not the rendered image size.
<!--just a sample codes-->
<center>
<image src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/800px-Python-logo-notext.svg.png" width="657" height=auto></image>
</center>
It downloaded as an 800x800 size. Any solutions? Thanks.
This should work by removing the back </image> tag. Can you try first and see if its working?
<image src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/800px-Python-logo-notext.svg.png" width="200" height="200">
I have a document (shown below), created with pdftohtml (linux package/command). It has enough information to render a page. For example, see the page's height & width attributes. Also some textboxes with coordinates. I am thinking how should I approach the task of rendering it back to a readable, pdf-like view. Appreciate any pointer.
<page number="112" position="absolute" top="0" left="0" height="992" width="756">
<text top="78" left="108" width="540" height="21" font="22">This configures networking routes such that you have unique IP addresses assigned</text>
<text top="98" left="108" width="118" height="21" font="22">to every service of </text>
<text top="101" left="226" width="135" height="15" font="25">type: LoadBalancer</text>
<text top="98" left="360" width="4" height="21" font="22">.</text>
<text top="132" left="108" width="127" height="28" font="33"><b>Configuring DNS</b></text>
</page>
The whole point is it should be a HTML view.
So for example I print this Page to a PDF (Top) and run the pdftohtml command I get the output (Middle) with lower browser HTML view.
Now I can print to PDF again, However there are penalties for round tripping PDF some links will work but not other links (like that package one), or some other objects NOTE the line starting "Also" may need co-ordinate re-adjustments. Most easily after correction you could use a single command line to Chrome/Edge --headless "Print-to-PDF in place of my manual reprint.
i am very hopefull that i got answer from this developer around the world
There is a video player plugin for Krpano.
Add this to your tour.xml file.
As 3d distorted hotspot:
<hotspot name="video"
url.flash="videoplayer.swf"
url.html5="videoplayer.js"
videourl="video.m4v|video.webm"
posterurl="videoposter.jpg"
ath="0.0" atv="0.0"
distorted="true"
scale="1.0"
rx="0.0"
ry="0.0"
rz="0.0"
pausedonstart="false"
loop="false"
volume="1.0"
directionalsound="true"
range="90.0"
rangefalloff="1.0"
outofrangevolume="0.0"
onvideoready=""
onvideoplay=""
onvideopaused=""
onvideocomplete=""
onerror=""
/>
As a flat layer element on the screen:
<layer name="video"
url.flash="videoplayer.swf"
url.html5="videoplayer.js"
videourl="video.m4v|video.webm"
posterurl="videoposter.jpg"
align="center" x="0" y="0"
pausedonstart="false"
loop="false"
volume="1.0"
onvideoready=""
onvideoplay=""
onvideopaused=""
onvideocomplete=""
onerror=""
/>
Please see here in the Krpano documentation for more information on how to control this plugin.
I want to embed a group from an SVG file, that can be identified with an id. My naive approaches were:
1. embed
<embed src="cards/svg-cards.svg#joker_red"
id="embsvg"
width="300" height="220" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"
viewBox="0 0 100 100"
/>
2. image
<image id="i" x="10" y="20" width="80" height="80"
xlink:href="cards/svg-cards.svg#joker_red" />
3. object
<object data="cards/svg-cards.svg#red_joker"></object>
and I tried some more silly variants including the USE element and javascript.
The svg document was taken from here: Sourceforge
I found it out myself.
The important piece was, to give all visible elements a class attribute, say class="card" and specify 'svg .card { display: none }' as a style. That will make everything disappear. Then only the item that is selected via # behind the svg file name is actually displayed.
It doesn't really matter if the part to be displayed is a group or svg element.
Robert's posted code did it this way, but it was not obvious to me how important the class was.
I'm using object to embed some SVGs that I would like to href to other pages.
First option is to change the xml inside
See Inkscape FAQ-s 1.8.1
http://wiki.inkscape.org/wiki/index.php/Frequently_asked_questions
But I want to use javascript to dynamically change the url if they have js enabled. AND i want to reuse the same SVG doc anyway but with different links. So I need another option.
Second option, wrap the embedded object in a 'a href' tag, but that doesn't seem to work, it makes the div part that ISN'T covered by SVG a clickable link but not the svg.
{Further complicated because inside the object I have a .png (made clickable by using usemap) which if the browser falls back to I get TWO clickable areas. The PNG and DIV remainder....}
Third Option, a USEMAP for the svg itself! No that doesn't seem to work either.
Are there any other options? Javascript answers welcome, for reference purposes, but ideally not.
EDIT to add HTML code
<object class="svg" type="image/svg+xml" data="svgimage.svg" >
<img src="pngbackupforIEpre9androidpre3.png" type="image/png" usemap="#mapping"/>
</object>
</a>
<map name="mapping">
<area shape="rect" coords="0,0,100,100" href="svgfreezone.php" />
</map>
EDIT to add SVG XML code
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 617.875 320.75" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(-66.78125,-339.125)">
<rect style="stroke:#000000;stroke-miterlimit:4;stroke-dasharray:none;stroke-width:3.5999999;fill:#ff0000;" height="317" width="614" y="341" x="68.6"/>
</g>
</svg>
Notes; The svg has been vacumed def'd, saved as plain and then optimised using "Simplify colours Y, Style to xml N, Group Collapsing Y, Enable ID stripping Y, Embed rasters N, Keep editor data N, Enable viewboxing Y, Strip xml prolog N, Set precision 3, Indent None."
Well, I see two options:
First option: (This will be only good if this is a web app; if its a "regular" website this may not be suitable for you)
Use a regular href in the SVG, which links to an anchor. That is - a #something url. Just a hash.
Now use a "special" hash which you can recognize, and then hook to the window's "hashchange" event, and see if the hash == '#my_special_hash' - then redirect to wherever you like.
Second option:
Put a placeholder href in the SVG, and read the SVG content with JavaScript.
Then replace the href with the url you really want, and inject it to the page.
Most browsers support SVG as a source image, and as an object.
You can see how the Raphael library builds SVG if you need actual code. Note that it uses VML for fallback because of lack of support in some old browsers.
Good luck! :-)
Set the background-image css property on the anchor to the svg image and it will be clickable.
I used one in this page.
#infoButton {
display: block;
float: left;
background-image: url('info.svg');
background-repeat: no-repeat;
width: 70px;
height: 70px;
}
Be sure to always put display: block; when using SVG some browsers don't support SVG properly.