Related
Here is the SVG - What I'm trying to do is to put this svg during load time in VueJs.But the issue is that it runs only for the first try, any help is appreciated. I previously thought that I can may be reload the specific component every time but that also doesn't seem to work.
<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g>
<g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
<rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
</g>
<path d="M300,240L510,240" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M540,320L720,320" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M360,380L560,380" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M300,500L600,500" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M405,600L580,600" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M500,700L700,700" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M600,200L700,200" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M300,800L500,800" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M400,900L700,900" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
</g>
<g transform="matrix(1,0,0,1,900,-5.68434e-14)">
<g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
<rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
</g>
<path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="1.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="1.5s" dur="1s" fill="freeze" />
</path>
<path d="M540,320L720,320" style="fill:none;stroke:rgb(206,59,59);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="0s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="0s" dur="1s" fill="freeze" />
</path>
<path d="M360,380L560,380" style="fill:none;stroke:rgb(0,255,95);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="2.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="2.5s" dur="1s" fill="freeze" />
</path>
<path d="M300,500L600,500" style="fill:none;stroke:rgb(255,183,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="2s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="2s" dur="1s" fill="freeze" />
</path>
<path d="M405,600L580,600" style="fill:none;stroke:rgb(189,255,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="4s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="4s" dur="1s" fill="freeze" />
</path>
<path d="M500,700L700,700" style="fill:none;stroke:rgb(255,6,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="3.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="3.5s" dur="1s" fill="freeze" />
</path>
<path d="M600,200L700,200" style="fill:none;stroke:rgb(47,0,255);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="0.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
</path>
<path d="M300,800L500,800" style="fill:none;stroke:rgb(0,205,255);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="4.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="4.5s" dur="1s" fill="freeze" />
</path>
<path d="M400,900L700,900" style="fill:none;stroke:rgb(161,133,77);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="5.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="5.5s" dur="1s" fill="freeze" />
</path>
</g>
<g transform="matrix(0.5,0,0,1,95,0)">
<path d="M250,67.5C250,63.361 243.279,60 235,60L205,60C196.721,60 190,63.361 190,67.5L190,1042.5C190,1046.64 196.721,1050 205,1050L235,1050C243.279,1050 250,1046.64 250,1042.5L250,67.5Z" style="fill:rgb(79,227,43);stroke:black;stroke-width:1.26px;" />
<animateMotion path="M0,0L600,0L0,0" begin="0s" dur="5s" repeatCount="indefinite" />
</g>
<g transform="matrix(1,0,0,1,0,-60)">
<path d="M820,613.75L820,596.25L1055,596.25L1055,580L1080,605L1055,630L1055,613.75L820,613.75Z" style="fill:rgb(64,67,211);stroke:rgb(30,82,211);stroke-width:1px;" />
</g>
</svg>
Here is how to solve this problem:
In order to have the animation running continuously rather than only once, set the following inside animateMotion:
repeatCount="indefinite"
You want the animation to go forth and back:
At t0 (animation cycle start), the element should be at the initial position
At mid-time of the animation, the element should be at the final position
At t1 (animation cycle end), the element should be back to the initial position.
This can be controlled with keyPoints and keyTimes.
Again inside animateMotion, the following corresponds to the animation cycle as described above.
keyPoints="0;1;0" keyTimes="0;.5;1"
The snippet below shows the solution in action in one of the animated rectangles from the sample code shared in the question.
Please note that the animation durations must be doubled in order to keep the same movement speed as in the question, since now the movement length is twice larger (forth and back) instead of one way).
Read also: this answer.
<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,900,-5.68434e-14)">
<path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="0.5s" dur="2s" fill="freeze" keyPoints="0;1;0" keyTimes="0;.5;1" repeatCount="indefinite"/>
<animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
</path>
</g>
</svg>
I have this XML where i want to change the value of 97 in the node 'txtqtyremaining' into a new value. How should i do that?
I don't know how to select to correct node and how to change that value.`
<genxml>
<files />
<hidden />
<textbox>
<txtproductref>SKU</txtproductref>
</textbox>
<dropdownlist />
<checkboxlist />
<radiobuttonlist />
<models>
<genxml>
<files />
<textbox>
<availabledate datatype="date" />
<txtbarcode>BAR1234</txtbarcode>
<txtqtyremaining datatype="double">97</txtqtyremaining>
</textbox>
SET #XML.modify('replace value of (/genxml/models/genxml/textbox/txtqtyremaining[1]/text())[1] with "999.99"')
Select #XML
Or you can use a simple Replace()
Set #XML = Replace(cast(#XML as varchar(max)),'>97</txtqtyremaining>','>999.999</txtqtyremaining>')
Select #XML
Both would Return
<genxml>
<files />
<hidden />
<textbox>
<txtproductref>SKU</txtproductref>
</textbox>
<dropdownlist />
<checkboxlist />
<radiobuttonlist />
<models>
<genxml>
<files />
<textbox>
<availabledate datatype="date" />
<txtbarcode>BAR1234</txtbarcode>
<txtqtyremaining datatype="double">999.999</txtqtyremaining>
</textbox>
</genxml>
</models>
</genxml>
I am working on a website where you create svg artwork, which means you can dynamically add elements, scale, color and move them around.
Thing is, when you starting putting shadows on them, everything will start to slow down. For a live demo of this, this is the website I am working on.
I made a codepen which shows exactly the problem, try scrolling down the window in this codepen.
body {
margin: 0;
}
<!-- this SVG is created using the free tool over at www.material101.com -->
<svg height="1080" width="1920">
<defs>
<filter filterUnits="userSpaceOnUse" id="shadow-1">
<feFlood flood-opacity="0.12" flood-color="rgb(0,0,0)" result="flood" id="feFlood4286" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4288" />
<feGaussianBlur in="composite" stdDeviation="1.5" result="blur" id="feGaussianBlur4290" />
<feOffset dx="0" dy="1" result="offset" id="feOffset4292" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4294" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4332" />
<feFlood id="feFlood4334" flood-opacity="0.24" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4336" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4338" in="composite" stdDeviation="1" result="blur" />
<feOffset id="feOffset4340" dx="0" dy="1" result="offset" />
<feComposite id="feComposite4342" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-2">
<feFlood flood-opacity="0.16" flood-color="rgb(0,0,0)" result="flood" id="feFlood4348" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4350" />
<feGaussianBlur in="composite" stdDeviation="3" result="blur" id="feGaussianBlur4352" />
<feOffset dx="0" dy="3" result="offset" id="feOffset4354" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4356" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4358" />
<feFlood id="feFlood4360" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4362" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4364" in="composite" stdDeviation="3" result="blur" />
<feOffset id="feOffset4366" dx="0" dy="3" result="offset" />
<feComposite id="feComposite4368" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-3">
<feFlood flood-opacity="0.19" flood-color="rgb(0,0,0)" result="flood" id="feFlood4377" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4379" />
<feGaussianBlur in="composite" stdDeviation="10" result="blur" id="feGaussianBlur4381" />
<feOffset dx="0" dy="10" result="offset" id="feOffset4383" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4385" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4387" />
<feFlood id="feFlood4389" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4391" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4393" in="composite" stdDeviation="3" result="blur" />
<feOffset id="feOffset4395" dx="0" dy="6" result="offset" />
<feComposite id="feComposite4397" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-4">
<feFlood flood-opacity="0.25" flood-color="rgb(0,0,0)" result="flood" id="feFlood4421" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4423" />
<feGaussianBlur in="composite" stdDeviation="14" result="blur" id="feGaussianBlur4425" />
<feOffset dx="0" dy="14" result="offset" id="feOffset4427" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4429" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4431" />
<feFlood id="feFlood4433" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4435" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4437" in="composite" stdDeviation="5" result="blur" />
<feOffset id="feOffset4439" dx="0" dy="10" result="offset" />
<feComposite id="feComposite4441" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-5">
<feFlood flood-opacity="0.3" flood-color="rgb(0,0,0)" result="flood" id="feFlood4451" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4453" />
<feGaussianBlur in="composite" stdDeviation="19" result="blur" id="feGaussianBlur4455" />
<feOffset dx="0" dy="19" result="offset" id="feOffset4457" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4459" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4461" />
<feFlood id="feFlood4463" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4465" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4467" in="composite" stdDeviation="6" result="blur" />
<feOffset id="feOffset4469" dx="0" dy="15" result="offset" />
<feComposite id="feComposite4471" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#e57373" />
<rect x="0" y="0" width="200" height="200" fill="#c62828" transform="matrix(9,0,0,8,-675,-436)" filter="url('#shadow-3')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(0,0,5.0354,4.8626,-172.7689,-111.1304)" filter="url('#shadow-5')" style="cursor: pointer;" />
<rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.309,-0.9511,0.9511,-0.309,892.796,543.0074)" style="cursor: pointer;" />
<rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.0698,-1.9988,1.9988,-0.0698,307.1017,1179.8581)" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(7.1281,-3.6319,1.816,3.564,519.7993,260.3949)" filter="url('#shadow-4')" style="cursor: pointer;" />
<polygon points="0,0,50,100,100,0" fill="#e53935" x="0" y="0" transform="matrix(1.8794,-0.684,3.0782,8.4572,26.1217,-24.6597)" filter="url('#shadow-5')" style="cursor: pointer;" />
<polygon points="0,0,50,100,100,0" fill="#b71c1c" x="0" y="0" transform="matrix(6.6574,-2.1631,0.618,1.9021,-27.7715,158.0503)" style="cursor: pointer;" filter="url('#shadow-2')" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(0,0,8.9658,0.7844,103.7124,131.7799)" filter="url('#shadow-1')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(-2.8191,1.0261,-1.7101,-4.6985,369.4589,394.6201)" filter="url('#shadow-4')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(1.8264,-0.1598,0.1648,1.8842,381.5187,128.4891)" filter="url('#shadow-3')" style="cursor: pointer;" />
</svg>
Now, I tried seeing what the problem is, but my knowledge is limited. I am sure it is the shadows that are causing this, because it only freezes when shadows are present.
It is also important to know that I let the user choose from 5 different shadows, based on google material, and the higher the level of shadow, the more it freezes. I am also using Snap SVG, but I don't think this has anything to do with it.
Any ideas are greatly appreciated guys.
First problem:
You are specifying that filterUnits=userSpaceOnUse, but then you're not specifying the dimensions that the filter should use. This results in undefined behavior. On Chrome, it seems as if it's setting the filter region as the entire viewBox for every filter - which is resulting in crazy slow performance. Remove the filterUnits declaration and set your filter region to x/y=-50% and height/width ="200%" and you'll get much better performance. i.e.
<filter id="shadow-n" x="-50%" y="-50%" width="200%" height="200%">
With this, you're still a bit slow, but at least you can scroll the page!
Second problem:
You're doing a lot of compositing and blur operations and compositing is slow (at least in Chrome - they're pretty fast in Edge). Instead of doing multiple separate blurs and compositing them, you should be doing a single blur and then shaping the opacity with a feComponentTransfer/feFuncA. You can get a sense for how to do this from a filter generator I built for dropshadows which you can see here:
http://codepen.io/mullany/pen/sJopz
Adjust the spread and size slider and see how the generated code changes.
All that said, complicated SVG Filters can be slow, period. My hope has been that the Chrome team GPU-accelerates them, but unfortunately, they seem to only be paying attention to accelerating things that are used by CSS filter effects.
I have an SQL statement that uses a few tables built via another set of statements which in turn are each built by more sets of statements etc. to about 8 degrees fanning out to about 25 tables (it gets wider in the 4th degree but that level eventually starts pointing back down to the same few common sources).
I'm working on making a dot file for Graphviz that shows each statement's selected columns, and from which table each comes from. As there's case statements and functions involved, sometimes that's multiple sources per column. Once that goes a few levels it's not only a tad messy, but also hard to read or write correctly.
I've been trying to find if there's a tool that analyzes an SQL select statement and (instead of making an execution plan graph) graphs which ins go to which outs. Preferably the tool would be able to combine this with multiple layers of statements.
Does anyone know of a tool like this?
You see, searching Google for "graph an sql statement" and the like just winds up with lots of results on how to make either charts and graphs with the data from an SQL query, or something specific to graph databases. Neither are here nor there, and changing "graph" to "visualizing" hasn't helped either.
E.G.
SELECT CASE WHEN A.info IS NULL THEN 'Jam'
WHEN B.inform LIKE 'N/A%' THEN 'Butter'
WHEN A.info > 4 THEN 'Apricot'
ELSE 'Organic'
END AS information,
-- More of the same
FROM 2_KU_4_SKU AS A
LEFT JOIN
SKU_HOWS_ROC AS B
ON A.fskuid = B.idfsk;
INSERT INTO 2_KU_4_SKU
-- More case statements and other stuff but lets just say
sku_id AS fskuid,
short_sku_desc AS info
FROM BASIC_SKU_TABLE_NOT_A_VIEW_TEDS_VERSION_LATEST_Q108;
INSERT INTO SKU_HOWS_ROC
-- You guessed it
sku_id AS idfsk, -- Because words
sku_blurb AS inform
FROM BASIC_SKU_TABLE_STILL_NOT_A_VIEW_BILLS_EXCELLENT_VERSION;
Might hopefully lead a tool to draw up something like:
By basically parsing the above SQL and (one option) generating a DOT file for Graphviz like so:
Digraph G {
fontname = "sans-serif";
node [fontname="sans-serif",shape="record"];
subgraph cluster0 {
label="SELECT";
information;
}
subgraph cluster1 {
label="SKU_HOWS_ROC";
a_idfsk [label="idfsk"];
a_info [label="info"];
}
a_info -> information;
subgraph cluster2 {
label="2_KU_4_SKU";
b_fskuid [label="fskuid"];
b_inform [label="inform"];
}
b_inform -> information;
b_fskuid -> a_idfsk -> b_fskuid;
subgraph cluster3 {
label="BASIC_SKU_TABLE_NOT_A_VIEW_TEDS_VERSION_LATEST_Q108";
c_sku_id [label="sku_id"];
c_short_sku_desc [label="short_sku_desc"];
}
c_short_sku_desc -> a_info;
c_sku_id -> a_idfsk;
subgraph cluster4 {
label="BASIC_SKU_TABLE_STILL_NOT_A_VIEW_BILLS_EXCELLENT_VERSION";
d_sku_id [label="sku_id"];
d_sku_blurb [label="sku_blurb"];
}
d_sku_id -> b_fskuid;
d_sku_blurb -> b_inform;
}
It would be even better if it could use fancy record type node labels to draw the tables a bit.
And, as Graphviz can generate SVG, but StackOverflow can't seem to embed it in any way that I can see, run this SVG snippet to see what it looks like (If imgur embedded above isn't working).
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.39.20160727.0821 (20160727.0821)
-->
<!-- Title: G Pages: 1 -->
<svg viewBox="0.00 0.00 988.00 265.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 261)">
<title>G</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-261 984,-261 984,4 -4,4" />
<g id="clust2" class="cluster">
<title>cluster1</title>
<polygon fill="none" stroke="black" points="329,-91 329,-166 471,-166 471,-91 329,-91" />
<text text-anchor="middle" x="400" y="-150.8" font-family="sans-serif" font-size="14.00">SKU_HOWS_ROC</text>
</g>
<g id="clust1" class="cluster">
<title>cluster0</title>
<polygon fill="none" stroke="black" points="388,-8 388,-83 490,-83 490,-8 388,-8" />
<text text-anchor="middle" x="439" y="-67.8" font-family="sans-serif" font-size="14.00">SELECT</text>
</g>
<g id="clust3" class="cluster">
<title>cluster2</title>
<polygon fill="none" stroke="black" points="485,-91 485,-166 627,-166 627,-91 485,-91" />
<text text-anchor="middle" x="556" y="-150.8" font-family="sans-serif" font-size="14.00">2_KU_4_SKU</text>
</g>
<g id="clust5" class="cluster">
<title>cluster4</title>
<polygon fill="none" stroke="black" points="477,-174 477,-249 972,-249 972,-174 477,-174" />
<text text-anchor="middle" x="724.5" y="-233.8" font-family="sans-serif" font-size="14.00">BASIC_SKU_TABLE_STILL_NOT_A_VIEW_BILLS_EXCELLENT_VERSION</text>
</g>
<g id="clust4" class="cluster">
<title>cluster3</title>
<polygon fill="none" stroke="black" points="8,-174 8,-249 469,-249 469,-174 8,-174" />
<text text-anchor="middle" x="238.5" y="-233.8" font-family="sans-serif" font-size="14.00">BASIC_SKU_TABLE_NOT_A_VIEW_TEDS_VERSION_LATEST_Q108</text>
</g>
<!-- information -->
<g id="node1" class="node">
<title>information</title>
<polygon fill="none" stroke="black" points="396.373,-16.5 396.373,-52.5 481.627,-52.5 481.627,-16.5 396.373,-16.5" />
<text text-anchor="middle" x="439" y="-30.3" font-family="sans-serif" font-size="14.00">information</text>
</g>
<!-- a_idfsk -->
<g id="node2" class="node">
<title>a_idfsk</title>
<polygon fill="none" stroke="black" points="409,-99.5 409,-135.5 463,-135.5 463,-99.5 409,-99.5" />
<text text-anchor="middle" x="435.893" y="-113.3" font-family="sans-serif" font-size="14.00">idfsk</text>
</g>
<!-- b_fskuid -->
<g id="node4" class="node">
<title>b_fskuid</title>
<polygon fill="none" stroke="black" points="565,-99.5 565,-135.5 619,-135.5 619,-99.5 565,-99.5" />
<text text-anchor="middle" x="591.786" y="-113.3" font-family="sans-serif" font-size="14.00">fskuid</text>
</g>
<!-- a_idfsk->b_fskuid -->
<g id="edge4" class="edge">
<title>a_idfsk->b_fskuid</title>
<path fill="none" stroke="black" d="M446.616,-135.503C455.979,-149.063 471.07,-165.983 490,-170 504.373,-173.05 544.531,-175.185 556,-166 563.413,-160.064 570.086,-152.258 575.615,-144.648" />
<polygon fill="black" stroke="black" points="578.818,-146.164 581.557,-135.929 573.033,-142.222 578.818,-146.164" />
</g>
<!-- a_info -->
<g id="node3" class="node">
<title>a_info</title>
<polygon fill="none" stroke="black" points="337,-99.5 337,-135.5 391,-135.5 391,-99.5 337,-99.5" />
<text text-anchor="middle" x="363.786" y="-113.3" font-family="sans-serif" font-size="14.00">info</text>
</g>
<!-- a_info->information -->
<g id="edge1" class="edge">
<title>a_info->information</title>
<path fill="none" stroke="black" d="M380.274,-99.4902C390.62,-88.0401 404.181,-73.0328 415.665,-60.3245" />
<polygon fill="black" stroke="black" points="418.391,-62.5274 422.499,-52.7612 413.198,-57.8343 418.391,-62.5274" />
</g>
<!-- b_fskuid->a_idfsk -->
<g id="edge3" class="edge">
<title>b_fskuid->a_idfsk</title>
<path fill="none" stroke="black" d="M581.557,-135.929C575.195,-145.863 566.313,-157.741 556,-166 544.531,-175.185 504.373,-173.05 490,-170 474.767,-166.767 462.021,-155.18 452.744,-143.712" />
<polygon fill="black" stroke="black" points="455.403,-141.423 446.616,-135.503 449.793,-145.61 455.403,-141.423" />
</g>
<!-- b_inform -->
<g id="node5" class="node">
<title>b_inform</title>
<polygon fill="none" stroke="black" points="492.552,-99.5 492.552,-135.5 547.448,-135.5 547.448,-99.5 492.552,-99.5" />
<text text-anchor="middle" x="520" y="-113.3" font-family="sans-serif" font-size="14.00">inform</text>
</g>
<!-- b_inform->information -->
<g id="edge2" class="edge">
<title>b_inform->information</title>
<path fill="none" stroke="black" d="M502.424,-99.4902C491.145,-87.9321 476.328,-72.7493 463.852,-59.9655" />
<polygon fill="black" stroke="black" points="466.31,-57.4735 456.821,-52.7612 461.301,-62.3626 466.31,-57.4735" />
</g>
<!-- c_sku_id -->
<g id="node6" class="node">
<title>c_sku_id</title>
<polygon fill="none" stroke="black" points="404.766,-182.5 404.766,-218.5 461.234,-218.5 461.234,-182.5 404.766,-182.5" />
<text text-anchor="middle" x="433" y="-196.3" font-family="sans-serif" font-size="14.00">sku_id</text>
</g>
<!-- c_sku_id->a_idfsk -->
<g id="edge6" class="edge">
<title>c_sku_id->a_idfsk</title>
<path fill="none" stroke="black" d="M433.651,-182.49C434.037,-171.796 434.536,-157.999 434.975,-145.871" />
<polygon fill="black" stroke="black" points="438.476,-145.881 435.34,-135.761 431.481,-145.628 438.476,-145.881" />
</g>
<!-- c_short_sku_desc -->
<g id="node7" class="node">
<title>c_short_sku_desc</title>
<polygon fill="none" stroke="black" points="272.973,-182.5 272.973,-218.5 387.027,-218.5 387.027,-182.5 272.973,-182.5" />
<text text-anchor="middle" x="330" y="-196.3" font-family="sans-serif" font-size="14.00">short_sku_desc</text>
</g>
<!-- c_short_sku_desc->a_info -->
<g id="edge5" class="edge">
<title>c_short_sku_desc->a_info</title>
<path fill="none" stroke="black" d="M337.377,-182.49C341.847,-171.58 347.639,-157.441 352.679,-145.138" />
<polygon fill="black" stroke="black" points="355.968,-146.342 356.519,-135.761 349.49,-143.688 355.968,-146.342" />
</g>
<!-- d_sku_id -->
<g id="node8" class="node">
<title>d_sku_id</title>
<polygon fill="none" stroke="black" points="579.766,-182.5 579.766,-218.5 636.234,-218.5 636.234,-182.5 579.766,-182.5" />
<text text-anchor="middle" x="608" y="-196.3" font-family="sans-serif" font-size="14.00">sku_id</text>
</g>
<!-- d_sku_id->b_fskuid -->
<g id="edge7" class="edge">
<title>d_sku_id->b_fskuid</title>
<path fill="none" stroke="black" d="M604.528,-182.49C602.467,-171.796 599.807,-157.999 597.469,-145.871" />
<polygon fill="black" stroke="black" points="600.85,-144.918 595.52,-135.761 593.976,-146.243 600.85,-144.918" />
</g>
<!-- d_sku_blurb -->
<g id="node9" class="node">
<title>d_sku_blurb</title>
<polygon fill="none" stroke="black" points="484.648,-182.5 484.648,-218.5 561.352,-218.5 561.352,-182.5 484.648,-182.5" />
<text text-anchor="middle" x="523" y="-196.3" font-family="sans-serif" font-size="14.00">sku_blurb</text>
</g>
<!-- d_sku_blurb->b_inform -->
<g id="edge8" class="edge">
<title>d_sku_blurb->b_inform</title>
<path fill="none" stroke="black" d="M522.349,-182.49C521.963,-171.796 521.464,-157.999 521.025,-145.871" />
<polygon fill="black" stroke="black" points="524.519,-145.628 520.66,-135.761 517.524,-145.881 524.519,-145.628" />
</g>
</g>
</svg>
You may be able to use the Visual Explain functionality found in MySQL Workbench. I haven't personally used it but it looks like it may provide better insight than the standard EXPLAIN command. Take a look at this link, and good luck!
https://dev.mysql.com/doc/workbench/en/wb-tutorial-visual-explain-dbt3.html
I've been following the "Build your second iOS app" tutorial step for step and I have run into this error after the tutorial promised that all the errors would go away, but the error didn't show up until after the other errors were all corrected and I tried to compile it.
The error:
The document "MainStoryboard_iPhone.storyboard" could not be opened. Failed to unarchive element named "UITableViewController".
Here is a link to the tutorial.
Here is my storyboard in XML format
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="1.1" toolsVersion="2182" systemVersion="11D50" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" initialViewController="3">
<dependencies>
<deployment defaultVersion="1296" identifier="iOS"/>
<development defaultVersion="4200" identifier="xcode"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="1179"/>
</dependencies>
<scenes>
<!--Navigation Controller-->
<scene sceneID="11">
<objects>
<placeholder placeholderIdentifier="IBFirstResponder" id="10" sceneMemberID="firstResponder"/>
<navigationController id="3" sceneMemberID="viewController">
<navigationBar key="navigationBar" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" id="4">
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<connections>
<segue destination="12" kind="relationship" relationship="rootViewController" id="19"/>
</connections>
</navigationController>
</objects>
<point key="canvasLocation" x="-1" y="64"/>
</scene>
<!--Hello World Master View Controller - Master-->
<scene sceneID="18">
<objects>
<placeholder placeholderIdentifier="IBFirstResponder" id="17" sceneMemberID="firstResponder"/>
<tableViewController storyboardIdentifier="" title="Master" id="12" customClass="HelloWorldMasterViewController" sceneMemberID="viewController">
<tableView key="view" opaque="NO" clipsSubviews="YES" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" rowHeight="44" sectionHeaderHeight="22" sectionFooterHeight="22" id="13">
<rect key="frame" x="0.0" y="64" width="320" height="416"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<prototypes>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" accessoryType="disclosureIndicator" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" reuseIdentifier="BirdSightingCell" textLabel="phq-AM-6qj" detailTextLabel="d2j-B0-0IP" style="IBUITableViewCellStyleSubtitle" id="lJ0-d7-vTF">
<rect key="frame" x="0.0" y="22" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="300" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="left" text="Bird Sightings" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="phq-AM-6qj">
<rect key="frame" x="10" y="2" width="123" height="22"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="18"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</label>
<label opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="left" text="Subtitle" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="d2j-B0-0IP">
<rect key="frame" x="10" y="24" width="47" height="18"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" red="0.50196078431372548" green="0.50196078431372548" blue="0.50196078431372548" alpha="1" colorSpace="calibratedRGB"/>
<color key="highlightedColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<connections>
<segue destination="21" kind="push" identifier="ShowSightingDetails" id="w1o-hR-DXB"/>
</connections>
</tableViewCell>
</prototypes>
<sections/>
<connections>
<outlet property="dataSource" destination="12" id="16"/>
<outlet property="delegate" destination="12" id="15"/>
</connections>
</tableView>
<navigationItem key="navigationItem" title="Bird Sightings" id="36"/>
</tableViewController>
</objects>
<point key="canvasLocation" x="459" y="64"/>
</scene>
<!--Hello World Detail View Controller - Detail-->
<scene sceneID="24">
<objects>
<placeholder placeholderIdentifier="IBFirstResponder" id="23" sceneMemberID="firstResponder"/>
<viewController storyboardIdentifier="" title="Detail" id="21" customClass="HelloWorldDetailViewController" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="22">
<rect key="frame" x="0.0" y="64" width="320" height="416"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="plain" rowHeight="44" sectionHeaderHeight="22" sectionFooterHeight="22" id="bJd-7W-8nV">
<rect key="frame" x="0.0" y="0.0" width="320" height="445"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<sections>
<tableViewSection headerTitle="" id="Ihs-Gj-deH">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" id="6ax-NG-pEn">
<rect key="frame" x="0.0" y="0.0" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Bird Name:" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="eba-dh-Ofl">
<rect key="frame" x="20" y="11" width="125" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="PBz-NZ-g9m">
<rect key="frame" x="153" y="11" width="147" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
</tableViewCell>
</cells>
</tableViewSection>
<tableViewSection headerTitle="" id="YGG-h0-ybX">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" id="oYs-Dm-zlN">
<rect key="frame" x="0.0" y="44" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Location:" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="mbD-Wl-CEY">
<rect key="frame" x="20" y="11" width="125" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="A69-jC-WXb">
<rect key="frame" x="153" y="11" width="147" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
</tableViewCell>
</cells>
</tableViewSection>
<tableViewSection headerTitle="" id="zi6-o7-XN3">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" id="gsv-CZ-0go">
<rect key="frame" x="0.0" y="88" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Date:" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="K2s-9i-tfj">
<rect key="frame" x="20" y="11" width="125" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="PTf-Ge-Hjf">
<rect key="frame" x="153" y="11" width="147" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
</tableViewCell>
</cells>
</tableViewSection>
</sections>
</tableView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
</view>
<navigationItem key="navigationItem" title="Sightings" id="26"/>
<connections>
<outlet property="lblBirdName" destination="PBz-NZ-g9m" id="KgV-rg-2MY"/>
<outlet property="lblDate" destination="PTf-Ge-Hjf" id="Scy-nS-Sot"/>
<outlet property="lblLocation" destination="A69-jC-WXb" id="hwm-Zv-8QE"/>
</connections>
</viewController>
</objects>
<point key="canvasLocation" x="902" y="64"/>
</scene>
</scenes>
<classes>
<class className="HelloWorldDetailViewController" superclassName="UITableViewController">
<source key="sourceIdentifier" type="project" relativePath="./Classes/HelloWorldDetailViewController.h"/>
<relationships>
<relationship kind="outlet" name="lblBirdName" candidateClass="UILabel"/>
<relationship kind="outlet" name="lblDate" candidateClass="UILabel"/>
<relationship kind="outlet" name="lblLocation" candidateClass="UILabel"/>
</relationships>
</class>
<class className="HelloWorldMasterViewController" superclassName="UITableViewController">
<source key="sourceIdentifier" type="project" relativePath="./Classes/HelloWorldMasterViewController.h"/>
</class>
</classes>
<simulatedMetricsContainer key="defaultSimulatedMetrics">
<simulatedStatusBarMetrics key="statusBar"/>
<simulatedOrientationMetrics key="orientation"/>
<simulatedScreenMetrics key="destination"/>
</simulatedMetricsContainer>
</document>
I am completely new to objective c and Xcode so I'm not sure what I'm doing wrong or even really where to begin with an error like that. If anyone knows how to fix this error, or a better (online) resource for learning both objective c and iOS development at the same time, I would really appreciate either one.
Here is my project if anyone wants to take a look at it for me.
I was able to find out what I did wrong on the tutorial. Rather than drag the TableViewController and delete the DetailViewController I dragged a table onto the controller on top of the detail view. I'm not sure how I missed that, I must have been really tired yesterday.
Also, anyone who is stuck on the apple iPhone development tutorial, I highly recommend the "Stanford iPhone development" series on iTunes. I'm going through it right now and it is amazing. It explains things that the apple tutorial never did (like when to use strong vs weak in properties, atomic vs nonatomic also in properties). I know I'm starting to understand objective c because I actually know what to google when I get stuck.