I am creating a program calculating flow in piping systems. In the user interface, the program contains a graphical drawing diagram, a ribbon on top of the screen containing functions helping the user drawing, and possibly a side ribbon with additional functions.
Here i've included a picture explaining my intentions:
As of now, my approach to achieve the division of screen, is to have nested elements in a tree structure, where the main branches are the divisions of the screen (the functional areas and the graphical drawing area). In the graphical area, the objects drawn in this area are positioned using absolute coordinates w.r.t. the drawing area element, and are also nested inside this element. As of now, this is the progress that has been made (grey area is the graphical drawing area, the red area is going to contain functions):
To obtain this current division of screen, the general html code looks like this, and the general css code uses mainly certain flex-settings.
App.svelte:
<main class="h-screen w-screen">
<section class="screen">
<!-- Creates a main bar. Will contain several functions and options. -->
<Bar/>
<!-- Creates the drawing board. -->
<DrawBoard/>
</section>
</main>
DrawBoard.svelte:
<section class='board' on:mouseup|self={$selected != null ? createObject : null}>
<!-- Displays all objects contained in the MainDataStructure. -->
{#each $editor.objects as object}
<ObjectOnBoard bind:object={object}/>
{/each}
<ObjectSelection/>
</section>
Using this method leads to several problems. As can be seen in the current progress, one object is moved to the edge of the screen, but instead of going out of the screen, it appears above the functional area. I would want to elements inside elements (the object inside the graphical area) disappear if they went out of the element, as if the graphical area was a screen of its own just like the whole tab. This leads me to my question:
Is this the right approach to achieve the user interface with area divisions i want? It seems so easy to not include a certain combination of setting in css, and then the different sections of the screen will intersect each other. I want to imagine that one solution would be to create one html body for each area, so that elements of each area would never intersect each other (i know that a document only has one body). Is there a totally different approach than the one shown, or do i have to find just the right (imo. kludgy) css settings, so that i make the visuals work as intented? And if this is the right approach, what kind of css-settings and other settings should i look into?
Look into CSS grid for the main layout. (Though this can be done with two flex layouts as well.) You can, for example, use grid-template-areas to set up named areas and then position element in them.
Elements intersecting other areas is just an issue of overflow. Either let the individual sections overflow with scroll (auto/scroll) or cut off their contents (hidden).
Related
Anchor boxes are important to YoloV3, especially when running on the custom dataset.
I knew that anchor boxes are calculated with bboxes height and width, through kmeans.
After I got the anchor boxes, they are supposed to be distributed into 3 scales. By default, the 3 scales are 1313, 2626, 52*52.
So, the question is how to decide which anchor belongs to which scale?
Currently, I'm sorting those anchors based on their summary, since the 13*13 scale should have a larger anchor.
Am I right here?
Following is an example:
Then, I sort them:
.
In the second image, the first 3 anchor boxes belongs to 13*13 scale.
I read lots of blogs and codes, but seems no one have explained that clearly, may because of it's too simple for them.
This seems dissimilar to the accordion functionality provided by bootstrap.
To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:
and then, once expanded,
I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?
Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.
We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.
Documentation and examples for jQuery .height().
A combination of height and overflow in combination with the toggling of a class should work here.
http://jsfiddle.net/fm56je84/1/
The click of the arrow is bound to the following function:
function expandCollapse() {
$("#container").toggleClass("expanded");
$(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}
I have to implement this grid of divs. It won't change often, but it may at some point (meaning a box may be removed, and another resized). Each black box will eventually contain an image or a word, but that's not important.
How do I pull this off? Is there a more elegant way than by absolutely positioning every single box and manually entering every X/Y/width/height?
A grid based approach would be my recommendation.
Something like: http://960.gs/
EDIT (some more options)
http://developer.yahoo.com/yui/grids/
http://cssgrid.net/
I'm currently developing out a blog page with a 3 X 3 grid layout for content to fall into the different boxes (see attached example).
http://imageshack.us/photo/my-images/337/cssex.jpg/
The content blocks in the lighter gray are meant to be stationary, so any updated, recently added, etc. content will not affect these boxes, only the black ones. I'm trying to figure out the best approach with keeping the gray boxes stationary, but allowing the black boxes to be populated dynamically (WordPress blog entries) and floating naturally through the layout.
As of now, I'm thinking that each individual black box will query the recent post that aligns to it. So, the first black box would query the most recent post, the second black box would query the second recent post and so on.
A big order!
Here is the general idea to help get you going:
You need to make those blocks a <div> or <section> with an ID tag like this:
<section id=brief1>
(BTW, you can also use a "table" & merge cells to get that layout, just ensure you use an ID)
Then you need find a script to update the innerHTML using straight JavaScript, or a JS library like jQuery, MooTools, etc. This will allow you to inject text &/or an image inside those boxes. Example search: http://duckduckgo.com/?q=javascript+update+innerHTML+div
Once you have 1 spot updated with text, it is time to edit that script. Make an array of our ID tags, then loop though all of them to insert new content one at a time.
Good luck! If I see something pre-rolled on my travels, I'll update this thread.
I'm trying to create a gray "frame" (see pic below) around a google map, to try to convey the concept of an area of focus, as oppose to a point (which is usually represented with a marker). Note that this is not an overlay, that is, the gray "frame" should not move when you drag the map.
Edited: image link added
It appears that only option is to "subclass" GControl to create a custom control. I have 3 questions
1) First of all, is GControl subclassing the best course of action?
2) In my example, the canvas (div) where map renders can change its size (i.e is not fixed width). Do I have to delete and add custom control when canvas changes size? See docs http://code.google.com/apis/maps/documentation/controls.html#Custom_Controls on how to create a custom map control.
3) Now, how to do it. Naively, I thought I could create a table with 3 columns and 3 rows, and set display: none for the cell in the middle. But that doesn't work. I've also experimented with clipping, that didn't work either. My css skills are quite lacking, so there must be way to do this more elegantly than adding four rectangular gray divs. If I wanted to add an inner border, with divs, I would need to paint 8 then. In a nutshell, what's the best way to create a "hollow" rectangle?
Thanks
P.S. This is my first entry to StackOverflow. Just discovered it. It's impressive how well SO is put together.