I am currently doing a research work which involves the development of a web-based simulator for Automata.
I came across Cytoscape JS as a primary component in building our proposed simulator. I would like to ask if there some way that we can customize the appearance of the nodes in Cytoscape?
In our Automata simulator that we are working on, we intend to use the standard symbols (see image) and place a string value inside the node.
Standard State Symbols in Automata
I was wondering of what would be the proper implementation of the the node and in what way can we change (customize) the appearance of the nodes?
I hope somebody knowledgeable in Cytoscape js can advise.
Use the stylesheet : http://js.cytoscape.org/#style
Use the background properties to alter the background of the node. For example, you can use a custom SVG image.
It's up to you how you do it. There are many properties you can configure, or you could go full custom and just use your own SVG images in place of the built-in shapes and styles.
Related
I am currently using Stencil to create a library of web-components. Since it is standard nowadays to support a dark theme I want my web-components to have this build in.
After doing some research I found that :host-context would be a great way to make all components change theme by simply adding a class to the body, but it looks like this feature will never be fully supported.
All of the other ways I found to achieve this, using features such as ::part(), require a significant amount of work from the library's user which I want to avoid.
If anyone has an idea of how to achieve simple theme toggling for web-components please let me know!
I have been building small "proof of principle" programs to learn about GTK3, and now that GTK4 has limited availability, I have been attempting to learn about this version as well. In attempting to migrate to GTK4, I took a program I wrote for GTK3 that displays two progress bars with different attributes using CSS providers and rebuilt it under GTK4. When I ran the GTK4 version of the program, the CSS overrides in the program are ignored unless I introduce the CSS provider context to the display level for one of the progress bars. But that then results in having both progress bars exhibiting the same behavior instead of having unique behavior for each progress bar. Just as a further test, I added CSS providers and context for a label widget and that override worked. So some CSS overrides in GTK4 work as before, but some do not. It is as though some CSS provider overrides are ignored at the display level. Reviewing documentation about priorities (e.g. GTK_STYLE_PROVIDER_PRIORITY_APPLICATION) and testing out various priority constants did not make a difference.
Displaying the content of the code would be too long in this narrative, so I have uploaded the GTK3 and GTK4 versions of the code to my Github repositories along with a "pdf" file visually illustrating the different behavior between GTK3 and GTK4. If you want to review and test out the code yourself, the link is:
https://github.com/cschuls/GTK4_Mystery
I would suppose that widget-specific CSS customization could be added at the display level with an "id#" attribute, but that seems like that would just be adding unnecessary complexity when this practice works fine with GTK3. Thanks in advance for any answers and suggestions.
Additional comment.
Experimenting with various scenarios, I came up with a work-around that provides the desired result of having distinct style properties applied to each progress bar widget. For those widgets, I added their respective CSS provider data to the display style context instead of attempting to add the CSS provider to each widget's context. If you wish to view this work-around, I added a "work-around" folder with the source code to my Github repository.
This provides a decent solution to this problem, but it does not answer my underlying question as to why the CSS provider information for each progress bar widget is not enacted upon during the application's execution; whereas, CSS provider information associated with widgets such as labels and buttons do behave as they did with GTK3. If anyone can answer my core question, I would be very happy.
Regards,
Craig
I was wondering if you can give me any pointers on how to write a firefox plugin/add-on, that would change the layout of the page one is on, based on a pre- written CSS file.
It's meant as a prototype and what I want to be able to do initially is to make my browser automatically change the background color of certain div's, when I navigate to the chosen page. I'm only trying to make it work for a couple of sites.
I speak python, javascript/jquery, css, html ..
You may be able to accomplish your goal using the Stylish addon without writing your own. This basically allow you to attach custom CSS overrides based on a URL pattern.
If you want to do this and write your own extension, you could use the addon-sdk and make use of page-mod. Here is a tutorial that will help you with running the script only on the URL's you specify. As of FireFox 34 you should be able to attach actual CSS files instead of having to rely on JavaScript. Learning the addon-sdk it a lot less intimidating than making an old style / low-level extension and should be sufficient for your needs.
There are a few different ways to accomplish similar things, so you will need to experiment based on your needs.
I imagine changing the styling is a common requirement. Say a user wishes to change the background colour and the font style. I'm looking for a component fit into any flex application and edit the style sheets.
I know I can build one from scratch using the (get/set)Style methods and using the StyleManager class, however I didn't want to "reinvent the wheel." I assume there is a component that someone has already written - google hasn't thrown up a suitable candidate.
There's no such base component. Setting styles is very personal, so there's no common solution.
BTW, look up here
I wanted to consult with the sages here regarding Qt and skinning, get your opinion and chart a path for my development. My requirements are as follows:
My Qt/C++ application (cross platform with Mac, Windows and Linux versions) needs to have modular skins.
A skin is defined as a set of one or more elements: - Window background texture - Look/feel of UI controls such as edit boxes, drop down, radio buttons, buttons etc. - Look/feel of window "caption", resize grips etc.
Skins will be installed with the application installer, allowing the user to choose which one he/she wants to use. Users should be able to change skins on the fly.
Can I go the QML route? should this be custom and based on simple resources which are built into the application? Any design advice will be appreciated.
Thanks.
If I understood you correctly then stylesheet is the best way forward. You can create stylesheets similar to CSS and then pass them as command line option to your application or load on invocation to style your application at runtime. That way you can create multiple stylesheets each having a different look and feel and allow user to load them at will. Since its CSS it doesn't need any new learning and you can keep all your styling outside your source code.
Here are a list of resources that can get you up and running quickly:
http://blog.qt.io/blog/2007/11/27/theming-qt-for-fun-and-profit/
http://doc.qt.io/qt-5/stylesheet.html
I haven't played with QML yet, but you could also create a custom QStyle implementation that supports your resource format. Note that you'd lose style sheet support if you went this route.
Changing window captions is a little trickier if you want portability.
QML, if I understand correctly, doesn't really skin the widgets, it mainly deals with GUI layout etc etc.
QStyle is used to change the looks. It is a bit low-level though, and requires programming, so if you want to load different user-created skins (from an XML or so) it might be tricky to support extensive skinning. Chaining colors and a few items are easy enough though. (There might be someone else who've done something you could re-use.. not sure.)
For modifying widgets, use QStyle::polish(). You could use that to change the background picture (if it's a top-level window, or of a certain class). There are numerous repaint method to change almost every part of every widget.
Store/load the style using QSettings, by reading and setting the desired Style just after QApplication but before your main window is constructed.