SKUI — A GUI Framework for SketchUp
-
Another question.
Do you recommend to leave the "core.css" file unaltered, and only add additional styling using themes?
I first completely uprooted core.css for my plugin in a way that all objects were relatively positioned and the fieldset would be automatically re-sized based on it's contents(normal html behavior).
But later-on I thought that doing all positioning from ruby/SKUI would better fit SKUI's design, even though it would take some more scripting to make everything line-up and re-size dynamically.
This would probably also prevent different behavior between browsers.Is this assumption correct?
-
Let me just step back a little (Sorry, I'm trying to catch up after coming home from the US).
The intent with the background image, is that to create a graphical button, or an icon glypth to go along with the button text? -
Traveling up and down to Boulder?
@thomthom said:
The intent with the background image, is that to create a graphical button, or an icon glypth to go along with the button text?
What I want to do is create graphical buttons, but an icon(like emoticons) in the text would be another option.
I also managed to set the background with javascript, works fine, but I think image buttons are so common that a built in option could be useful. -
Have you had a look at icomoon ?
Makes it easy updating sets which can be a pain if using png-sprites for ex.
( You can create your own sets in Illustrator. )Could be a viable solution.
-
Right - I was thinking in the lines of inline glyph. Sorry not not quite following what you where aiming for. I was mostly checking in from my mobile and I can quickly scanning the posts.
I see the use for both here.
What I'm thinking is that for the glyph, the existing Button can be extended. For the graphical button, I'm wondering if perhaps a new class makes sense... ?
Or maybe not.... (thinking out loud here...)Maybe Button.glyph=
and Button.image_normal=, Button.image_hover=, Button.image_disabled=, Button.image_focused= ? -
@jolran said:
Have you had a look at icomoon ?
Never heard of icomoon before, but it does sound very interesting!
Do you know if exporting a project also includes your own uploades SVG icons? -
@thomthom said:
What I'm thinking is that for the glyph, the existing Button can be extended. For the graphical button, I'm wondering if perhaps a new class makes sense... ?
Or maybe not.... (thinking out loud here...)A new (sub)class, or maybe set a "type" for the button?
@thomthom said:
Maybe Button.glyph=
and Button.image_normal=, Button.image_hover=, Button.image_disabled=, Button.image_focused= ?this would work nicely for "use-case 2", but not for "use-case 1". And I can't think of a way to position it halfway a line of text...
Difficult to find a universal solution...
What I'm trying to do is only(at the moment) use-case 3 and 4. -
@unknownuser said:
And I can't think of a way to position it halfway a line of text...
OK, now I'm getting uncertain if icomoon is a valid alternative for you...
(From gathering your Picture. And how far you have come already in your setups )With Icomoon (or any font-Icon setup ) you could however include Icons anywhere in text, using it as a font.
By the looks of it you want an inline button, though. And that would require nested elements I presume(?) So universal solution might be tricky for that..
Here's an example of Icons in text(in a text-area), if it is of any help.
You just build a string and include the unicode value ( \ue606 for ex ) where you want that Icon. It's quite easy. But I feel now it's not as powerful as you wished for..
Styling is also very limited this way...
-
@unknownuser said:
Do you know if exporting a project also includes your own uploades SVG icons?
( btw don't know if it's off topic since the discussion is regarding glyphs
)Yes that's the whole reason I use it. In spite of the pros and cons of Icon-fonts I found this to be best solution for me since having many Icons that need to be updated irregulary.
Updating PNG-sprites is a pain in the a$ in the longrun..Project is contained in a JSON file that you upload that will contain Icon-information with current unicodes and woff's, oet's etc. Then from there you save a new file.
These files have to be reloaded in your Project after an update off course.I can't remember if there where any updates that had to be made in the CSS afterwards. Not many anyway..
It's been a while since I delt with this, but I can give you an idea of the workflow, if you want to try it out. And in that case can find further information at the Icomoon site.
Anyway here goes:
Well first off you have to create the art in Illustrator (or incscape whatever)
And save as SVG.I further compress the SVG with:
https://github.com/svg/svgo-gui
Gives reductions between 20-60 %
Then upload the Icon to the Project and make adjustements in the Icomoon ap. (move, scale)
It takes some experimentation because Icons can get blurry if borders fall in an inbetween pixel value.
So in Illustrator i set up a grid with the actual target destination size (for ex 24px) and try to keep artwork snapped to those pixels, even if we are dealing with vector-art!When Everything is setup. I can use the Icon as classes or as a inline data-Icon.
The data-Icon setup is not te be found on the Icomonsite if I remember correctly.
But if youre interested in it you can PM me.
The fontstyle can also be used inside textareas with normal text and icons.
The backside of this of course is that the icons are unicolored. There are some tricks to use multicolored font Icons, but I wouldent use them, because the contain to much information and can get blurry when resized because they use a hatching trick..
If you are just going to use a few Icons, then it hard to beat plain png-sprites and classes.
-
Where does this stand at this point in time? I am doing a major project for the local neurology lab disguised as a Sketchup plugin. That way it will be easy to run on Windows and Mac and the project needs a 3D presentation. The University is all Mac but I have been a Windows guy since and before it was invented. I am at the point where the toolbar I created is just not good enough and need something better. I have done plenty of JS and related but if I can keep it all in Ruby I will be a lot happier.
This looks like just what I need. Anything I should watch out for to make it Mac compatible? In particular what will happen with Safari? Any clue?
BTW, TT, you have been a lot of help for me in the past. I have been using Sketchup since it was invented. It is by far my favorite CAD program and your plugins are excellent.
-
@unknownuser said:
(https://github.com/thomthom/SKUI/blob/master/README.md)":2v9dncx5]This project is at it's early stages. Many changes will happen. Please do not make use of it as of yet. It's available here in order to be able to discuss the project.
I would think this may need some tweaking to work with the new
UI::HtmlDialogclass.I see Jan Brewer opened an issue on this line:
https://github.com/thomthom/SKUI/issues/105 -
@evan said:
This looks like just what I need. Anything I should watch out for to make it Mac compatible? In particular what will happen with Safari? Any clue?
It should already be cross-compatible.
Not sure what scale of a UI you are looking for. SKUI have a set of common controls. but if you need special ones you'd have to construct your own. Got any mocks of what you are looking to create?
-
@dan rathbun said:
I would think this may need some tweaking to work with the new
UI::HtmlDialogclass.Yea, part of SKUI is the general control wrappers. Another part is the JS<=>Bridge - that's where HtmlDialog have new features that would require different handling.
I had been thinking of a general WebDialog/HtmlDialog wrapper that could interact with both underlying classes.
For SKUI I don't see any obvious benefit of HtmlDialog at the moment. Big part of SKUI was taking care of cross platform issues, which is already handled.
-
The UI doesn't need to be fancy but I need some decent colour controls using sliders or similar. What I am doing has nothing to do with being an actual CAD plugin but Sketchup is perfect for what I need in many ways, especially the compatibility issues. Since I am an engineer I am already very familiar with Sketchup and that cuts off a lot of time in making what the lab needs. Pretty much everything else in the controls can be nicely handled with a toolbar but not the colour controls. I already have the color system able to switch 20 colors (materials) at over 12,000 times per second so that part is good. I have been playing with computers for just over half a century. Ruby is very interesting, nothing like assembler which is what I am used to. If you can think of a way to make a nice slider control without an HTML interface that would be appreciated.
This reminds me, there is something haywire with version 2017. The code I am using to switch materials runs about 10 time slower in 2017 and there doesn't seem to be any way to speed it up compared to Make 2015. There is another issue too. Getting rather off topic but on Win 10 on my MSI gamer laptop ruby refuses to do more than 16 color changes in the same method. That is with everything else exactly the same, same version of Make 2015 and identical code but when I try to change more than 16 materials in a row Ruby crashes.
I should also mention that at this point in time I am not free to show what I am working on. There are confidentiality issues having to do with medical investigations. Some of it I can describe but I will need to speak with the professor about how far I may go.
-
SKUI doesn't have sliders or color related controls at the moment. I'm thinking that you might find it easier to find a HTML/CSS/JS UI framework and build on that. For instance you can try to start with Bootstrap and add bootstrap addons. Thought that require more HTML/CSS familiarity.
As for the SU2017 difference you observer, can you start a thread on that topic? Ideally with some snippet to reproduce.
-
@thomthom said:
@dan rathbun said:
I would think this may need some tweaking to work with the new
UI::HtmlDialogclass.For SKUI I don't see any obvious benefit of HtmlDialog at the moment. Big part of SKUI was taking care of cross platform issues, which is already handled.
Cross platform issues may not be a motivator, sure, but some people do not know CSS, JS nor HTML well, and may have only just learned Ruby, so it would nice for them to specify their controls in Ruby-like objects and let the framework build the actual HtmlDialog.
-
Thanks for the info TT. I will start a thread on the 2017 problem. I think it is related to how the various windows are now constructed, especially the materials window. I have a feeling it isn't being really closed when it is hidden. It very much slows down anything to do with materials when it is open. I will bring it up later but right now I am super busy and have an appointment with the professor on Friday so I have work to do before then. I will have a look at SKUI now and see if I can make it do what I need. If necessary I will add whatever code I need in JS or just write my own. I was just looking to save some time.
Now I need to figure out what the heck is going on with Win 10. I may just be forced to downgrade to Win 7 for now since it works just fine. I need something I can take to meetings to show what is happening in this project. Eventually I need to handle 64 colours for 64 channel EEG.
-
Dan, right on the money. I have been programming for 53 years but I am new to Ruby. I have done JS/CSS work but not a lot. Assembler is my game and that is where I am very comfortable.
Advertisement