Aug
25
2 days ago

Wednesday CODE: transitions joy

Welcome to our first Wednesday CODE section, though it is thursday. Check our Intro post to know more about it.

For me, doing this examples will be just a lot of fun, so it is simply a pleasure to be sharing my knowledge with everyone.

Without further ado, out first installment is about CSS transitions. Our example will be the following.

In web-terms, we usually call those big headers as Hero (or sometimes Jumbotron). In our example, when you move your mouse hover it, it animates the background and the image displaying.

Test it with this link:

Drag-me to OmniFiddler


Is Sciter, for creating such animations, which are pretty simple for instance, you can make them just using CSS, no scripting required.

In our example, the two animations are defined this way:

section:hover
{
	background-position: -15px;
	background-color: #5ec8f7;
	transition:
		background-position(quart-out, 0.5s, quart-in)
		background-color(quad-out, 0.3s, quad-in, 0.5s);
}
section:hover img
{
	foreground-position: 0 0;
	transition: foreground(quart-out, 0.5s, quart-in);
}

Essentially we are defining two transitions for when the user hovers the containing <section> that wraps our Hero area which embodies the following HTML:

<section>
	Welcome to Wednesday CODE! <img src="http://misoftware.rs/Content/img/logo_mi.png" />
</section>

In order to declare these animations, you must understand the CSS syntax behind it. And actually, it's simply all about the transition CSS propery.

But where can I look for the docs describing the transition syntax? It is hidden in the SDK, at \doc\content\css\css-transition-sciter.htm. It states about the transition property:

"The transition attribute accepts single value or list of values - functions describing animated transformation of CSS attributes between initial state and the state described by  the rule where the transition is defined."

So, given this declaration:

div:hover
{
    width: 200px;
    height: 200px;
    transition: width(linear,400ms)
                height(linear,400ms);
}

We are essentially saying that when we :hover the <div>, it will gain a new width and height value, however, these changes in the element layout must be animated.

Note that the properties that you want to animate (in this case width and height) must be animatable. That is, like in standard browser, some properties are animatable, others are not.

Animatable properties can change gradually from one value to another, normally these are all properties where the values is a size, number, percentage or color. Unfornutelly I couldn't find a list of supported animatable properties, so you must normmally Test/Run to see if it does animates.

So, our element will animate its width and height when it gains the :hover state. But not only that. It will also animate when it looses the :hover state. That is, a transition: declaration by default sets the animation to play when element start matching or stop matching the CSS selector where the transition: is declared. You can however specify if you want to play the animation in just one of the directions.

Then, we have the transition, which says how our property animates in two aspects:

  • transition easing function
  • duration of the transition

The duration is how long it takes to play the in or out transition. The transition easing function is a math function saying how to ease the transition, you can understand it by looking at \samples\animations-transitions-css\easing-functions.htm in SDK. There you will get all available easing functions:

linear, quad-in, quad-out, quad-in-out, cubic-in, cubic-out, cubic-in-out, quart-in, quart-out, quart-in-out, quint-in, quint-out, quint-in-out, sine-in, sine-out, sine-in-out, expo-in, expo-out, expo-in-out, circ-in, circ-out, circ-in-out, elastic-in, elastic-out, elastic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out

Transitions are a powerfull concept, and I tried here to make a brief technical introduction of the syntax, and also pointed where you can look for more info. Yet, there are many more details to explore about transitions, but which are irrelevant for you to Get Started. That is, you are now able to add animations to Sciter pages!

Aug
17
10 days ago

Wednesday CODE: introduction

Wednesday CODE will be a biweekly showcase of any Sciter HTML sample I end building up! It is not weekly because so I don't commit too much, but it might appear in a weekly basis, hopefully.

All HTML samples will be hosted at GitHub here: https://github.com/MISoftware/WednesdayCODE

It will be room for Sciter insights and technical explanations. I will probably add comments support to the site for you to easily make enquiries.


How to quickly view the HTML samples? Using OmniFiddler. You must have a desktop application to view Sciter HTML pages.

  • download it and extract somewhere
  • run it, of course
  • then simply drag-n-drop any 'omnifiddler://' URL inside it to view the interactive Sciter page

For example, URL of samples will look like this:

Drag-me to OmniFiddler

This way you can easily identify them and can simply drag it to inside OmniFiddler.

Also, in OmniFiddler, you can easily make changes to the HTML code and immediatly see the output.


So stay tuned and subscribe to this site RSS feed. See you next Wednesday.

Jul
19
a month ago

Vivus.tis

vivus.tis brings SVG animations to Sciter!

It allows you to animate SVG elements, giving them the appearence of being drawn. The implementation essentially uses stroke-dasharray + stroke-dashoffset to animate the path's stroke.

This is actually a port of vivus.js library to TIScript. In fact it is 100% API compatible, so you can grab any sample for vivus.js and get it working in Sciter.

Source and more instructions available at GitHub.

Jun
30
a month ago

Plenty of updates

OmniCode v1.8Download, Changelog

This is a major update for OmniCode with maaany improvements, and is already tested for VS 2015 Update 3. Among the new features, here are the highlights:

  • TIScript auto-completion now lists all available HTML elements IDs for self# statements:

  • Highlighting for strings that span multiple lines:

  • Added CTRL + E + G shortcut to, VS it opens your browser and searches any selected text in Google / GitHub, pretty handy


OmniViewmore info, source-code

I've made many improvements to this tool. One major one is that it nows recreates the child Sciter window whenever you edit your HTML (while same TIScript VM is preserved); previously, it was always the same HWND, so when you reloaded the page, event-handlers and popups could be kept 'alive'.

OmniFiddlermore info

  • Updated with fixes
  • Added a proper app icon:
  • Added a Recent File List to open recent shared Fiddles, so it allows you to edit then after closing the app:
Jun
2
2 months ago

OmniFiddler MVP

OmniFiddler is a .NET desktop app for easily editing and sharing Sciter content, that is, HTML/CSS/TIScript pages, inspired in the eponymous JSFiddle.



Download

Nowadays we are all Livin' On The Edge with CI build systems. So you can always grab the lastest bleeding edge version of this app:

Download

Hands on

  • Download/extract/run the app
  • At upper right, click the Cog button, then click Register omnifiddler:// protocol - this now allows you to open omnifiddler:// URLs
  • Get started by opening our surprise fiddle: omnifiddler://code/NtyZ7 (drag'n'drop it inside OmniFiddler)
  • Finally, click the Run button to view the result

MVP

The goal for this first version was to get the necessary for a MVP where you can upload a 'Fiddle' and get a omnifiddler://ABC link. A URL which you can share and others can use to visualize your page using this same program.

To have this Minimum Viable Product up and running, I started with a Bootstrap template, and it took me some hours over 5 days to join every piece of code necessary to have everything I'll describe bellow.

Well, to achieve a reasonable coding speed, requires having a set of tools and a productive loop where you sit, write code, and get the job done, without those obstacles that take days to solve. That may take a bit longer to learn, but it is all about a skill that you learn once, all about knowing the essentials of C#, Sciter HTML/CSS/TIScript, and how to extract the most with the right tools: Visual Studio, Omni, OmniCode, OmniView, ..

Anyway, it's a proof of, not only how Sciter is a good technology for making desktop applications in .NET and Web-based technology, but mainly that you can do it in a very productive manner.

Features

  • Panels/editors to write HTML/CSS/TIScript and Unittest/TIScript code
  • Console + REPL prompt area (same as in OmniView) (press F3 to focus prompt)
  • 'Run' button merges all the code, builds a Sciter page, and shows the output in the 'Result' pane
  • 'Send and get URL' button to send this content to the cloud and get a omnifiddler://ABC link
  • After you got the URL, the Send button becomes 'Update/resend' so you can update your work and keep the same URL
  • You can register the 'omnifiddler://' protocol, so your standard browser knows that such URLs can be open with OmniFiddler
  • Security: as you are loading unknown code from others in you own machine, you really want some degree of protection from malicious code; so by default Sandboxing is enable which disables the System class and block access to file:// URLs; note that in the app, no remote code is executed until you press the 'Run' button (so you can inspect what you are about to execute); note that surely it is not a perfect sandboxing

Datasheet

  • Written in C# for .NET 4.6.1
  • For now it runs on Windows only, but its fully portable to Linux and OSX, just needs the effort to do so
  • Very assynchronous, so I am relying on the new built-in promise() support of TIScript
  • Icon font from Fontello
  • It is free and I will open-source it sooner or later